sillyspec 3.7.8 → 3.7.10

package/packages/dashboard/src/components/DetailPanel.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    :class="['flex flex-col transition-all duration-300', isOpen ? 'w-[340px]' : 'w-0 opacity-0 overflow-hidden']"
+    style="background: #111113;"
+  >
+    <!-- Header -->
+    <div class="px-4 py-3 flex items-center justify-between flex-shrink-0" style="border-bottom: 1px solid #1F1F22;">
+      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #525252;">Detail</h2>
+      <button
+        @click="$emit('close')"
+        class="p-1 rounded-sm transition-colors duration-100 hover:bg-white/5"
+        style="color: #525252;"
+      >
+        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto">
+      <!-- Empty state -->
+      <div v-if="!activeStep" class="flex items-center justify-center h-full">
+        <div class="text-center">
+          <div class="w-10 h-10 mx-auto mb-3 rounded-md flex items-center justify-center" style="border: 1px dashed #2A2A2D; transform: rotate(45deg);">
+            <svg class="w-4 h-4" style="color: #3A3A3D; transform: rotate(-45deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+            </svg>
+          </div>
+          <p class="text-[11px] font-[JetBrains_Mono,monospace]" style="color: #3A3A3D;">Select a step</p>
+        </div>
+      </div>
+
+      <!-- Step detail -->
+      <div v-else>
+        <!-- Title -->
+        <div class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h3 class="text-[13px] font-semibold font-[JetBrains_Mono,monospace]" style="color: #FBBF24;">
+            {{ activeStep.title || activeStep.name }}
+          </h3>
+          <div v-if="activeStep.status" class="mt-2">
+            <StageBadge :status="activeStep.status" />
+          </div>
+        </div>
+
+        <!-- Description -->
+        <div v-if="activeStep.description || activeStep.summary" class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #525252;">Description</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #8B8B8E;">{{ activeStep.description || activeStep.summary }}</p>
+        </div>
+
+        <!-- Conclusion -->
+        <div v-if="activeStep.conclusion" class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #525252;">Conclusion</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #E4E4E7;">{{ activeStep.conclusion }}</p>
+        </div>
+
+        <!-- Decision -->
+        <div v-if="activeStep.decision" class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #525252;">Decision</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #E4E4E7;">{{ activeStep.decision }}</p>
+        </div>
+
+        <!-- User Query -->
+        <div v-if="activeStep.userQuery" class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #525252;">User Query</h4>
+          <div class="px-3 py-2 rounded-md" style="background: #0E0E10; border: 1px solid #1F1F22;">
+            <p class="text-[11px] italic" style="color: #8B8B8E;">"{{ activeStep.userQuery }}"</p>
+          </div>
+        </div>
+
+        <!-- Metadata -->
+        <div v-if="activeStep.duration || activeStep.timestamp" class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #525252;">Meta</h4>
+          <div class="space-y-1 text-[11px]" style="color: #525252;">
+            <div v-if="activeStep.duration"><span style="color: #8B8B8E;">Time:</span> {{ activeStep.duration }}</div>
+            <div v-if="activeStep.timestamp"><span style="color: #8B8B8E;">At:</span> {{ formatTimestamp(activeStep.timestamp) }}</div>
+          </div>
+        </div>
+
+        <!-- Output -->
+        <div v-if="activeStep.output || activeStep.files" class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #525252;">Output</h4>
+          <div v-if="activeStep.output" class="px-3 py-2 rounded-md max-h-40 overflow-y-auto" style="background: #0E0E10; border: 1px solid #1F1F22;">
+            <pre class="text-[10px] whitespace-pre-wrap font-mono-log" style="color: #8B8B8E;">{{ activeStep.output }}</pre>
+          </div>
+          <div v-if="activeStep.files" class="mt-2 space-y-1">
+            <div v-for="(file, i) in activeStep.files" :key="i" class="flex items-center gap-2 text-[10px]" style="color: #525252;">
+              <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+              </svg>
+              <span class="truncate">{{ file }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Log Stream -->
+    <div class="flex-shrink-0" style="height: 200px; border-top: 1px solid #1F1F22;">
+      <LogStream :logs="logs" @clear="$emit('clear-logs')" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import StageBadge from './StageBadge.vue'
+import LogStream from './LogStream.vue'
+
+const props = defineProps({
+  isOpen: { type: Boolean, default: true },
+  activeStep: { type: Object, default: null },
+  logs: { type: Array, default: () => [] }
+})
+
+const emit = defineEmits(['close', 'clear-logs'])
+
+function formatTimestamp(ts) {
+  if (!ts) return ''
+  return new Date(ts).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+}
+</script>

package/packages/dashboard/src/components/LogStream.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="flex flex-col h-full" style="background: #0E0E10;">
+    <!-- Header -->
+    <div class="px-3 py-2 flex items-center gap-2" style="border-bottom: 1px solid #1F1F22;">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="filter logs..."
+        class="flex-1 px-2 py-1 rounded-sm text-[10px] font-mono-log outline-none transition-colors duration-100"
+        style="background: #141416; border: 1px solid #1F1F22; color: #8B8B8E;"
+      />
+      <button
+        @click="clearLogs"
+        class="px-2 py-1 text-[10px] rounded-sm transition-colors duration-100"
+        style="color: #525252; border: 1px solid #1F1F22;"
+      >
+        clear
+      </button>
+      <button
+        @click="toggleAutoScroll"
+        class="px-2 py-1 text-[10px] rounded-sm font-mono-log transition-colors duration-100"
+        :style="{
+          color: autoScroll ? '#FBBF24' : '#525252',
+          background: autoScroll ? 'rgba(251,191,36,0.08)' : 'transparent',
+          border: autoScroll ? '1px solid rgba(251,191,36,0.2)' : '1px solid #1F1F22'
+        }"
+      >
+        {{ autoScroll ? 'auto' : 'pause' }}
+      </button>
+    </div>
+
+    <!-- Log output -->
+    <div ref="logContainer" class="flex-1 overflow-y-auto px-2 py-1.5 font-mono-log text-[10px]" style="background: #0A0A0B;" @scroll="handleScroll">
+      <div v-if="filteredLogs.length === 0" class="flex items-center justify-center h-full">
+        <span class="font-mono-log" style="color: #2A2A2D;">{{ logs.length === 0 ? 'no logs' : 'no match' }}</span>
+      </div>
+      <div v-else class="space-y-px">
+        <div v-for="log in filteredLogs" :key="log.id" class="px-1.5 py-px rounded-sm" :style="{ background: logBg(log.type) }">
+          <span style="color: #3A3A3D;" class="select-none">[{{ formatTime(log.timestamp) }}]</span>
+          <span :style="{ color: logColor(log.type) }">{{ escapeHtml(log.content) }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-3 py-1 flex items-center justify-between text-[9px] font-mono-log" style="border-top: 1px solid #1F1F22; background: #0E0E10; color: #3A3A3D;">
+      <span>{{ filteredLogs.length }}/{{ logs.length }}</span>
+      <span v-if="!autoScroll" style="color: #FB923C;">paused</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+
+const props = defineProps({ logs: { type: Array, default: () => [] } })
+const emit = defineEmits(['clear'])
+
+const searchQuery = ref('')
+const autoScroll = ref(true)
+const logContainer = ref(null)
+
+const filteredLogs = computed(() => {
+  if (!searchQuery.value) return props.logs
+  const q = searchQuery.value.toLowerCase()
+  return props.logs.filter(l => l.content.toLowerCase().includes(q))
+})
+
+function formatTime(ts) { if (!ts) return ''; const d = new Date(ts); return d.toLocaleTimeString('zh-CN', { hour12: false }) }
+function escapeHtml(t) { if (!t) return ''; return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') }
+function logBg(t) { return t === 'error' ? 'rgba(239,68,68,0.05)' : t === 'warn' ? 'rgba(251,146,60,0.05)' : 'transparent' }
+function logColor(t) { return t === 'error' ? '#EF4444' : t === 'warn' ? '#FB923C' : t === 'debug' ? '#525252' : '#8B8B8E' }
+function clearLogs() { emit('clear') }
+function toggleAutoScroll() { autoScroll.value = !autoScroll.value; if (autoScroll.value) scrollToBottom() }
+function handleScroll() {
+  if (!logContainer.value) return
+  const { scrollTop, scrollHeight, clientHeight } = logContainer.value
+  const atBottom = scrollHeight - scrollTop - clientHeight < 50
+  if (!atBottom && autoScroll.value) autoScroll.value = false
+  else if (atBottom && !autoScroll.value) autoScroll.value = true
+}
+function scrollToBottom() { nextTick(() => { if (logContainer.value && autoScroll.value) logContainer.value.scrollTop = logContainer.value.scrollHeight }) }
+watch(() => props.logs.length, () => { scrollToBottom() }, { flush: 'post' })
+watch(logContainer, () => { scrollToBottom() }, { once: true })
+</script>

package/packages/dashboard/src/components/PipelineStage.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="relative">
+    <div class="flex items-start gap-3">
+      <!-- Node indicator -->
+      <div class="flex flex-col items-center flex-shrink-0 pt-1.5">
+        <div
+          class="w-2 h-2 transition-colors duration-200"
+          :style="nodeStyle"
+          :class="{ 'animate-pulse-dot': isActive || status === 'in-progress' }"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0 -mt-0.5">
+        <!-- Stage Header -->
+        <div class="flex items-center gap-2.5 mb-3">
+          <span
+            class="text-[12px] font-semibold font-[JetBrains_Mono,monospace] tracking-tight"
+            :style="{ color: isActive ? '#FBBF24' : '#E4E4E7' }"
+          >
+            {{ title }}
+          </span>
+          <StageBadge :status="status" />
+        </div>
+
+        <!-- Steps -->
+        <div class="space-y-1">
+          <div v-if="steps.length === 0" class="text-[11px] italic py-1" style="color: #525252;">
+            No steps yet
+          </div>
+          <StepCard
+            v-for="step in steps"
+            :key="step.id || step.name"
+            :step="step"
+            :is-active="isActiveStep(step)"
+            @select="$emit('select-step', $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import StageBadge from './StageBadge.vue'
+import StepCard from './StepCard.vue'
+
+const props = defineProps({
+  name: { type: String, required: true },
+  title: { type: String, required: true },
+  steps: { type: Array, default: () => [] },
+  status: { type: String, default: 'pending' },
+  isActive: { type: Boolean, default: false },
+  activeStep: { type: Object, default: null }
+})
+
+const emit = defineEmits(['select-step'])
+
+const nodeStyle = computed(() => {
+  if (props.isActive) return { background: '#FBBF24', boxShadow: '0 0 8px rgba(251,191,36,0.4)' }
+  const colors = {
+    'completed': '#34D399',
+    'in-progress': '#FBBF24',
+    'blocked': '#FB923C',
+    'failed': '#EF4444',
+    'pending': '#2A2A2D'
+  }
+  return { background: colors[props.status] || colors.pending }
+})
+
+function isActiveStep(step) {
+  return props.activeStep?.id === step.id || props.activeStep?.name === step.name
+}
+</script>

package/packages/dashboard/src/components/PipelineView.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flex flex-col h-full" style="background: #0E0E10;">
+    <!-- Header -->
+    <div class="px-6 pt-6 pb-4" style="border-bottom: 1px solid #1F1F22;">
+      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #525252;">
+        Pipeline
+      </h2>
+      <p v-if="project" class="text-[12px] mt-1.5 font-[JetBrains_Mono,monospace]" style="color: #8B8B8E;">
+        {{ project.name }} <span style="color: #2A2A2D;">/</span> <span style="color: #FBBF24;">{{ currentStage }}</span>
+      </p>
+    </div>
+
+    <!-- Stages -->
+    <div class="flex-1 overflow-y-auto px-6 py-5">
+      <!-- Empty state -->
+      <div v-if="!project || !project.state" class="flex items-center justify-center h-full">
+        <div class="text-center">
+          <div class="w-14 h-14 mx-auto mb-4 rounded-md flex items-center justify-center" style="border: 1px dashed #2A2A2D; transform: rotate(45deg);">
+            <svg class="w-5 h-5" style="color: #525252; transform: rotate(-45deg);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+            </svg>
+          </div>
+          <p class="text-[12px] font-[JetBrains_Mono,monospace]" style="color: #525252;">Select a project</p>
+        </div>
+      </div>
+
+      <div v-else class="space-y-5">
+        <PipelineStage name="brainstorm" title="BRAINSTORM" :steps="getStageSteps('brainstorm')" :status="getStageStatus('brainstorm')" :is-active="currentStage === 'brainstorm'" :active-step="activeStep" @select-step="handleSelectStep" />
+        <div v-if="hasStage('plan')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #1F1F22;" /></div>
+        <PipelineStage name="plan" title="PLAN" :steps="getStageSteps('plan')" :status="getStageStatus('plan')" :is-active="currentStage === 'plan'" :active-step="activeStep" @select-step="handleSelectStep" />
+        <div v-if="hasStage('execute')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #1F1F22;" /></div>
+        <PipelineStage name="execute" title="EXECUTE" :steps="getStageSteps('execute')" :status="getStageStatus('execute')" :is-active="currentStage === 'execute'" :active-step="activeStep" @select-step="handleSelectStep" />
+        <div v-if="hasStage('verify')" class="flex items-center pl-[3px]"><div class="w-px h-4" style="background: #1F1F22;" /></div>
+        <PipelineStage name="verify" title="VERIFY" :steps="getStageSteps('verify')" :status="getStageStatus('verify')" :is-active="currentStage === 'verify'" :active-step="activeStep" @select-step="handleSelectStep" />
+      </div>
+    </div>
+
+    <!-- Activity Log -->
+    <div v-if="project?.state?.progress" style="border-top: 1px solid #1F1F22; background: rgba(10,10,11,0.6);">
+      <div class="px-6 py-2.5 flex items-center justify-between">
+        <div class="text-[9px] font-semibold uppercase tracking-[0.25em] font-[JetBrains_Mono,monospace]" style="color: #525252;">Activity</div>
+        <div class="text-[10px] font-mono-log" style="color: #3A3A3D;">{{ activityLogs.length }}</div>
+      </div>
+      <div class="px-6 pb-3 space-y-0.5 max-h-32 overflow-y-auto">
+        <div v-for="(log, i) in activityLogs" :key="i" class="flex items-start gap-2.5 text-[11px] py-0.5">
+          <span class="w-10 font-mono-log flex-shrink-0" style="color: #3A3A3D;">{{ log.time }}</span>
+          <span :style="{ color: log.status === 'completed' ? '#34D399' : '#FBBF24' }">›</span>
+          <span style="color: #8B8B8E;">{{ log.description }}</span>
+        </div>
+        <div v-if="activityLogs.length === 0" class="text-[10px] py-1" style="color: #3A3A3D;">No activity</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import PipelineStage from './PipelineStage.vue'
+
+const props = defineProps({
+  project: { type: Object, default: null },
+  activeStep: { type: Object, default: null }
+})
+
+const emit = defineEmits(['select-step'])
+
+const currentStage = computed(() => props.project?.state?.currentStage || 'unknown')
+const progress = computed(() => props.project?.state?.progress || {})
+const stages = computed(() => progress.value.stages || {})
+
+const activityLogs = computed(() => {
+  if (!props.project?.state) return []
+  const logs = []
+  for (const [name, data] of Object.entries(progress.value.stages || {})) {
+    if (data.status === 'completed') logs.push({ time: data.completedAt ? formatTime(data.completedAt) : '--:--', status: 'completed', description: `${name} completed` })
+    else if (data.status === 'in-progress') logs.push({ time: '--:--', status: 'in-progress', description: `${name} running` })
+  }
+  return logs.reverse()
+})
+
+function formatTime(iso) { try { const d = new Date(iso); return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}` } catch { return '--:--' } }
+function hasStage(n) { return !!stages.value[n] }
+function getStageSteps(n) { return stages.value[n]?.steps || [] }
+function getStageStatus(n) {
+  const s = stages.value[n]; if (!s) return 'pending'
+  const steps = s.steps || []
+  if (steps.some(x => x.status === 'failed')) return 'failed'
+  if (steps.some(x => x.status === 'blocked')) return 'blocked'
+  if (steps.some(x => x.status === 'in-progress')) return 'in-progress'
+  if (steps.every(x => x.status === 'completed')) return 'completed'
+  return 'pending'
+}
+function handleSelectStep(step) { emit('select-step', step) }
+</script>

package/packages/dashboard/src/components/ProjectList.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="h-full flex flex-col noise-bg">
+    <!-- Header -->
+    <div class="relative z-10 px-5 pt-5 pb-4">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 rounded-md flex items-center justify-center" style="background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%); clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);">
+          <span class="text-[10px] font-bold text-black font-[JetBrains_Mono,monospace]">S</span>
+        </div>
+        <div>
+          <h1 class="text-[13px] font-semibold tracking-tight font-[JetBrains_Mono,monospace]" style="color: #E4E4E7;">
+            SillySpec
+          </h1>
+          <p class="text-[10px] tracking-widest uppercase" style="color: #525252;">Dashboard</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Divider -->
+    <div class="mx-4 h-px" style="background: linear-gradient(90deg, transparent, #2A2A2D, transparent);"></div>
+
+    <!-- Projects List -->
+    <div class="flex-1 overflow-y-auto py-3 relative z-10">
+      <!-- Loading skeleton -->
+      <div v-if="isLoading" class="px-4 space-y-2">
+        <div v-for="i in 4" :key="i" class="rounded-lg p-3" style="background: #141416;">
+          <div class="h-3 rounded w-20 skeleton-shimmer mb-2"></div>
+          <div class="h-2 rounded w-32 skeleton-shimmer"></div>
+        </div>
+        <p class="text-center text-[10px] mt-4 font-[JetBrains_Mono,monospace]" style="color: #525252;">
+          scanning projects...
+        </p>
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="projects.length === 0" class="px-4 py-12 text-center">
+        <div class="w-10 h-10 mx-auto mb-3 rounded-full flex items-center justify-center" style="border: 1px dashed #2A2A2D;">
+          <svg class="w-4 h-4" style="color: #525252;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+          </svg>
+        </div>
+        <p class="text-[11px]" style="color: #8B8B8E;">No projects found</p>
+        <p class="text-[10px] mt-1" style="color: #525252;">Looking for .sillyspec dirs</p>
+      </div>
+
+      <!-- Projects -->
+      <div v-else class="px-3 space-y-0.5">
+        <div
+          v-for="project in projects"
+          :key="project.name"
+          :class="[
+            'relative rounded-md cursor-pointer transition-all duration-150 overflow-hidden group',
+          ]"
+          :style="{
+            background: isActive(project) ? 'rgba(251,191,36,0.06)' : 'transparent',
+            borderLeft: isActive(project) ? '2px solid #FBBF24' : '2px solid transparent',
+          }"
+          @mouseenter="$event.currentTarget.style.background = isActive(project) ? 'rgba(251,191,36,0.08)' : 'rgba(255,255,255,0.02)'"
+          @mouseleave="$event.currentTarget.style.background = isActive(project) ? 'rgba(251,191,36,0.06)' : 'transparent'"
+          @click="$emit('select', project)"
+        >
+          <div class="px-3 py-2.5">
+            <div class="flex items-center justify-between gap-2">
+              <div class="flex-1 min-w-0">
+                <h3
+                  :class="['text-[12px] font-medium truncate transition-colors duration-150 font-[JetBrains_Mono,monospace]']"
+                  :style="{ color: isActive(project) ? '#FBBF24' : '#E4E4E7' }"
+                >
+                  {{ project.name }}
+                </h3>
+                <p class="text-[10px] mt-0.5 truncate font-mono-log" style="color: #525252;">
+                  {{ project.path }}
+                </p>
+              </div>
+              <StageBadge
+                v-if="project.state?.currentStage"
+                :status="getProjectStatus(project)"
+                :label="stageLabel(project)"
+                size="sm"
+              />
+            </div>
+
+            <!-- Progress -->
+            <div v-if="project.state?.progress" class="mt-2 h-[2px] rounded-full overflow-hidden" style="background: #1C1C1F;">
+              <div
+                class="h-full rounded-full transition-all duration-500 progress-gradient"
+                :style="{ width: getProjectProgress(project) + '%' }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="relative z-10 px-4 py-2.5" style="border-top: 1px solid #1F1F22;">
+      <div class="flex items-center justify-between">
+        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #525252;">{{ projects.length }} proj</span>
+        <kbd class="text-[9px] px-1.5 py-0.5 rounded font-mono-log" style="color: #525252; background: #141416; border: 1px solid #2A2A2D;">⌘K</kbd>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import StageBadge from './StageBadge.vue'
+
+const props = defineProps({
+  projects: { type: Array, default: () => [] },
+  activeProject: { type: Object, default: null },
+  isLoading: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['select'])
+
+function isActive(project) {
+  return props.activeProject?.name === project.name
+}
+
+function getProjectStatus(project) {
+  const stage = project.state?.currentStage
+  if (!stage) return 'pending'
+  const stageData = project.state?.progress?.stages?.[stage]
+  if (!stageData) return 'pending'
+  const steps = stageData.steps || []
+  if (steps.length === 0) return 'pending'
+  if (steps.some(s => s.status === 'failed')) return 'failed'
+  if (steps.some(s => s.status === 'blocked')) return 'blocked'
+  if (steps.some(s => s.status === 'in-progress')) return 'in-progress'
+  if (steps.every(s => s.status === 'completed')) return 'completed'
+  return 'pending'
+}
+
+function stageLabel(project) {
+  const stage = project.state?.currentStage
+  const labels = { 'brainstorm': '头脑风暴', 'plan': '规划', 'execute': '执行', 'verify': '验证' }
+  return labels[stage] || stage || '未知'
+}
+
+function getProjectProgress(project) {
+  const progress = project.state?.progress
+  if (!progress) return 0
+  const stages = progress.stages || {}
+  const stageNames = ['brainstorm', 'plan', 'execute', 'verify']
+  let total = 0, done = 0
+  for (const s of stageNames) {
+    const st = stages[s]
+    if (st?.steps) { total += st.steps.length; done += st.steps.filter(x => x.status === 'completed').length }
+  }
+  return total === 0 ? 0 : Math.round((done / total) * 100)
+}
+</script>

package/packages/dashboard/src/components/StageBadge.vue

@@ -0,0 +1,53 @@
+<template>
+  <span
+    :class="['inline-flex items-center gap-1.5 rounded-sm text-[10px] font-medium font-[JetBrains_Mono,monospace] uppercase tracking-wider transition-colors duration-150', sizeClass]"
+    :style="badgeStyle"
+  >
+    <span :class="['w-1 h-1 rounded-full', dotClass]" :style="dotStyle" />
+    <span>{{ displayLabel }}</span>
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  status: { type: String, default: 'pending' },
+  label: { type: String, default: '' },
+  size: { type: String, default: 'md' }
+})
+
+const displayLabel = computed(() => {
+  if (props.label) return props.label
+  const labels = { 'completed': 'done', 'in-progress': 'running', 'blocked': 'blocked', 'failed': 'error', 'pending': 'idle' }
+  return labels[props.status] || 'idle'
+})
+
+const sizeClass = computed(() => props.size === 'sm' ? 'px-1.5 py-0.5' : 'px-2 py-1')
+
+const badgeStyle = computed(() => {
+  const styles = {
+    'completed': { background: 'rgba(52,211,153,0.1)', color: '#34D399' },
+    'in-progress': { background: 'rgba(251,191,36,0.1)', color: '#FBBF24' },
+    'blocked': { background: 'rgba(251,146,60,0.1)', color: '#FB923C' },
+    'failed': { background: 'rgba(239,68,68,0.1)', color: '#EF4444' },
+    'pending': { background: 'rgba(82,82,82,0.15)', color: '#525252' }
+  }
+  return styles[props.status] || styles.pending
+})
+
+const dotClass = computed(() => {
+  return props.status === 'in-progress' ? 'animate-pulse-dot' : ''
+})
+
+const dotStyle = computed(() => {
+  const colors = {
+    'completed': '#34D399',
+    'in-progress': '#FBBF24',
+    'blocked': '#FB923C',
+    'failed': '#EF4444',
+    'pending': '#525252'
+  }
+  return { background: colors[props.status] || '#525252' }
+})
+</script>