Sprint 1: Auth, metro map canvas, services, and retro UI

Authentication:
- Laravel Fortify + Sanctum with Inertia views
- RBAC middleware (admin, project_owner, team_member, viewer)
- Retro terminal-styled login/register/forgot-password pages

Metro Map (core UI):
- D3.js zoomable SVG canvas with metro line rendering
- Station nodes with glow-on-hover, status coloring, tooltips
- Breadcrumb navigation for multi-level drill-down
- Node preview panel with zoom-in action
- C64-style CLI bar with blinking cursor at bottom

Backend services:
- ProjectService (CRUD, phase transitions, park/stop, audit logging)
- ThemaService (CRUD with audit)
- MapDataService (strategy map L1, project map L2)
- Thin controllers: MapController, ProjectController, ThemaController
- 32 routes total (auth + app + API)

Style foundation:
- Retro-futurism theme: VT323, Press Start 2P, IBM Plex Mono fonts
- Dark palette with cyan/orange/green/purple neon accents
- Comprehensive seed data (4 themes, 12 projects, commitments, deps)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
znetsixe
2026-04-01 13:52:35 +02:00
parent 7d14ca7b3b
commit d03fe15542
40 changed files with 5368 additions and 21 deletions

View File

@@ -0,0 +1,156 @@
<script setup>
import { ref, nextTick } from 'vue'
const emit = defineEmits(['command'])
const input = ref('')
const inputRef = ref(null)
const history = ref([])
const showHistory = ref(false)
const handleSubmit = () => {
if (!input.value.trim()) return
const command = input.value.trim()
history.value.push({ type: 'input', text: command })
history.value.push({ type: 'response', text: 'Processing...' })
showHistory.value = true
emit('command', command)
input.value = ''
}
const focusInput = () => {
inputRef.value?.focus()
}
</script>
<template>
<div class="cli-container" @click="focusInput">
<!-- History panel -->
<Transition name="slide-up">
<div v-if="showHistory && history.length > 0" class="cli-history">
<div
v-for="(entry, i) in history"
:key="i"
class="history-entry"
:class="entry.type"
>
<span v-if="entry.type === 'input'" class="prompt-char">&gt; </span>
<span v-if="entry.type === 'response'" class="ai-label">[AI] </span>
{{ entry.text }}
</div>
</div>
</Transition>
<!-- Input bar -->
<div class="cli-bar">
<span class="prompt">&gt;</span>
<input
ref="inputRef"
v-model="input"
class="cli-input"
placeholder="ask me anything..."
spellcheck="false"
autocomplete="off"
@keydown.enter="handleSubmit"
/>
<span class="cursor-blink"></span>
</div>
</div>
</template>
<style scoped>
.cli-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.cli-history {
background: rgba(22, 33, 62, 0.95);
border-top: 1px solid rgba(0, 210, 255, 0.2);
max-height: 200px;
overflow-y: auto;
padding: 12px 20px;
backdrop-filter: blur(10px);
}
.history-entry {
font-family: 'VT323', monospace;
font-size: 16px;
line-height: 1.6;
color: #8892b0;
}
.history-entry.input {
color: #e8e8e8;
}
.history-entry.response {
color: #00ff88;
}
.prompt-char {
color: #00d2ff;
}
.ai-label {
color: #7b68ee;
}
.cli-bar {
display: flex;
align-items: center;
background: #0a0a1a;
border-top: 2px solid #00d2ff;
padding: 12px 20px;
box-shadow: 0 -4px 30px rgba(0, 210, 255, 0.15);
}
.prompt {
font-family: 'Press Start 2P', monospace;
font-size: 12px;
color: #00d2ff;
margin-right: 12px;
text-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}
.cli-input {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: 'VT323', monospace;
font-size: 18px;
color: #e8e8e8;
caret-color: transparent;
}
.cli-input::placeholder {
color: #8892b0;
opacity: 0.5;
}
.cursor-blink {
font-family: 'VT323', monospace;
font-size: 18px;
color: #00d2ff;
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.slide-up-enter-active, .slide-up-leave-active {
transition: all 0.25s ease;
}
.slide-up-enter-from, .slide-up-leave-to {
opacity: 0;
transform: translateY(10px);
}
</style>