sillyspec 3.7.7 → 3.7.9

package/packages/dashboard/server/watcher.js

@@ -0,0 +1,277 @@
+import chokidar from 'chokidar'
+import { join } from 'path'
+import { homedir } from 'os'
+import { existsSync } from 'fs'
+import { parseProjectState } from './parser.js'
+
+let watcher = null
+let updateCallback = null
+let projectStates = new Map()
+
+/**
+ * Start watching all .sillyspec directories
+ * @param {function} callback - Callback function when projects are updated
+ * @returns {object} The watcher instance
+ */
+export function startWatcher(callback) {
+  if (watcher) {
+    stopWatcher()
+  }
+
+  updateCallback = callback
+
+  // Discover all .sillyspec directories
+  const home = homedir()
+  const cwd = process.cwd()
+
+  // Directories to exclude (system junk, cache, etc.)
+  const excludeDirs = new Set([
+    '.Trash', '.cache', '.npm', '.local', '.vscode', 'Library',
+    '.git', 'node_modules', '.Trash-*', '.DS_Store', '.config',
+    '.cocoapods', '.gem', '.rvm', '.nvm', '.asdf', '.brew'
+  ])
+
+  // Helper to check if directory should be excluded
+  const shouldExclude = (name) => {
+    // Check exact matches
+    if (excludeDirs.has(name)) return true
+    // Check wildcard patterns (like .Trash-*)
+    for (const pattern of excludeDirs) {
+      if (pattern.includes('*')) {
+        const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$')
+        if (regex.test(name)) return true
+      }
+    }
+    // Exclude hidden directories (starting with .) unless it's the cwd basename
+    if (name.startsWith('.') && name !== cwd.split('/').pop()) {
+      return true
+    }
+    return false
+  }
+
+  // Build scan directories: cwd + home subdirs + common project locations
+  const scanDirs = [cwd, home]
+  const extraDirs = ['Desktop', 'Documents', 'Projects', 'Work', 'Repos', 'Code', 'src', 'dev']
+
+  for (const extra of extraDirs) {
+    const extraPath = join(home, extra)
+    if (existsSync(extraPath)) {
+      scanDirs.push(extraPath)
+    }
+  }
+
+  const watchPaths = []
+  const projects = []
+  const seen = new Set() // Dedupe by path
+
+  for (const baseDir of scanDirs) {
+    try {
+      const { readdirSync } = require('fs')
+      const entries = readdirSync(baseDir, { withFileTypes: true })
+
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue
+        if (shouldExclude(entry.name)) continue
+
+        const dirPath = join(baseDir, entry.name)
+
+        // Skip if we've already seen this path
+        if (seen.has(dirPath)) continue
+        seen.add(dirPath)
+
+        const sillyspecPath = join(dirPath, '.sillyspec')
+
+        if (existsSync(sillyspecPath)) {
+          watchPaths.push(sillyspecPath)
+          projects.push({
+            name: entry.name,
+            path: dirPath
+          })
+        }
+      }
+    } catch (err) {
+      // Skip directories we can't read
+      continue
+    }
+  }
+
+  // Parse initial states
+  for (const project of projects) {
+    const state = parseProjectState(project.path)
+    if (state) {
+      projectStates.set(project.name, { ...project, state })
+    }
+  }
+
+  // Emit initial state
+  if (updateCallback) {
+    updateCallback(Array.from(projectStates.values()))
+  }
+
+  // Watch for changes
+  watcher = chokidar.watch(watchPaths, {
+    ignored: /node_modules/,
+    persistent: true,
+    ignoreInitial: true,
+    awaitWriteFinish: {
+      stabilityThreshold: 300,
+      pollInterval: 100
+    },
+    depth: 5
+  })
+
+  watcher.on('change', async (filePath) => {
+    await handleFileChange(filePath)
+  })
+
+  watcher.on('add', async (filePath) => {
+    await handleFileChange(filePath)
+  })
+
+  watcher.on('unlink', async (filePath) => {
+    await handleFileChange(filePath)
+  })
+
+  watcher.on('error', (error) => {
+    console.error('Watcher error:', error)
+  })
+
+  return watcher
+}
+
+/**
+ * Handle file change events
+ * @param {string} filePath - Path to the changed file
+ */
+async function handleFileChange(filePath) {
+  // Find which project this file belongs to
+  const projectName = Array.from(projectStates.values()).find(p =>
+    filePath.startsWith(p.path)
+  )?.name
+
+  if (!projectName) {
+    // Re-scan for new projects
+    await rescanProjects()
+    return
+  }
+
+  // Re-parse the project state
+  const project = projectStates.get(projectName)
+  if (project) {
+    const newState = parseProjectState(project.path)
+    if (newState) {
+      projectStates.set(projectName, { ...project, state: newState })
+    }
+  }
+
+  // Emit updated state
+  if (updateCallback) {
+    updateCallback(Array.from(projectStates.values()))
+  }
+}
+
+/**
+ * Re-scan for projects (e.g., new .sillyspec directories)
+ */
+async function rescanProjects() {
+  const home = homedir()
+  const cwd = process.cwd()
+
+  // Directories to exclude (system junk, cache, etc.)
+  const excludeDirs = new Set([
+    '.Trash', '.cache', '.npm', '.local', '.vscode', 'Library',
+    '.git', 'node_modules', '.Trash-*', '.DS_Store', '.config',
+    '.cocoapods', '.gem', '.rvm', '.nvm', '.asdf', '.brew'
+  ])
+
+  const shouldExclude = (name) => {
+    if (excludeDirs.has(name)) return true
+    for (const pattern of excludeDirs) {
+      if (pattern.includes('*')) {
+        const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$')
+        if (regex.test(name)) return true
+      }
+    }
+    if (name.startsWith('.') && name !== cwd.split('/').pop()) {
+      return true
+    }
+    return false
+  }
+
+  // Build scan directories
+  const scanDirs = [cwd, home]
+  const extraDirs = ['Desktop', 'Documents', 'Projects', 'Work', 'Repos', 'Code', 'src', 'dev']
+
+  for (const extra of extraDirs) {
+    const extraPath = join(home, extra)
+    if (existsSync(extraPath)) {
+      scanDirs.push(extraPath)
+    }
+  }
+
+  const seen = new Set()
+
+  for (const baseDir of scanDirs) {
+    try {
+      const { readdirSync } = require('fs')
+      const entries = readdirSync(baseDir, { withFileTypes: true })
+
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue
+        if (shouldExclude(entry.name)) continue
+
+        const dirPath = join(baseDir, entry.name)
+        if (seen.has(dirPath)) continue
+        seen.add(dirPath)
+
+        const sillyspecPath = join(dirPath, '.sillyspec')
+
+        if (existsSync(sillyspecPath) && !projectStates.has(entry.name)) {
+          const state = parseProjectState(dirPath)
+          if (state) {
+            projectStates.set(entry.name, {
+              name: entry.name,
+              path: dirPath,
+              state
+            })
+          }
+        }
+      }
+    } catch (err) {
+      continue
+    }
+  }
+
+  if (updateCallback) {
+    updateCallback(Array.from(projectStates.values()))
+  }
+}
+
+/**
+ * Stop the file watcher
+ */
+export function stopWatcher() {
+  if (watcher) {
+    watcher.close()
+    watcher = null
+    projectStates.clear()
+  }
+}
+
+/**
+ * Get current project states
+ * @returns {array} Array of project states
+ */
+export function getProjectStates() {
+  return Array.from(projectStates.values())
+}
+
+/**
+ * Get a specific project state
+ * @param {string} projectName - Name of the project
+ * @returns {object|null} Project state or null
+ */
+export function getProjectState(projectName) {
+  return projectStates.get(projectName) || null
+}
+

package/packages/dashboard/src/App.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="h-screen w-screen flex flex-col overflow-hidden font-[DM_Sans,sans-serif] relative" style="background-color: #0A0A0B;">
+    <!-- Ambient background -->
+    <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse 60% 40% at 10% 20%, rgba(251,191,36,0.04) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 90% 80%, rgba(251,191,36,0.02) 0%, transparent 70%);" />
+
+    <!-- Main Content -->
+    <div class="flex-1 flex overflow-hidden relative z-10">
+      <!-- Left: Project List -->
+      <aside class="w-[240px] flex-shrink-0 relative" style="background: #111113; border-right: 1px solid #1F1F22;">
+        <ProjectList
+          :projects="dashboard.state.projects"
+          :active-project="dashboard.state.activeProject"
+          :is-loading="dashboard.state.isLoading"
+          @select="handleSelectProject"
+        />
+      </aside>
+
+      <!-- Center: Pipeline View -->
+      <main class="flex-1 overflow-hidden accent-stripe">
+        <PipelineView
+          :project="dashboard.state.activeProject"
+          :active-step="dashboard.state.activeStep"
+          @select-step="handleSelectStep"
+        />
+      </main>
+
+      <!-- Right: Detail Panel -->
+      <aside
+        :class="[
+          'flex-shrink-0 transition-all duration-300 relative overflow-hidden',
+          dashboard.state.isPanelOpen ? 'w-[340px]' : 'w-0'
+        ]"
+        style="background: #111113; border-left: 1px solid #1F1F22;"
+      >
+        <DetailPanel
+          :is-open="dashboard.state.isPanelOpen"
+          :active-step="dashboard.state.activeStep"
+          :logs="dashboard.state.logs"
+          @close="dashboard.closePanel"
+          @clear-logs="dashboard.clearLogs"
+        />
+      </aside>
+    </div>
+
+    <!-- Bottom: Action Bar -->
+    <ActionBar
+      :project="dashboard.state.activeProject"
+      :is-executing="dashboard.state.executingProject !== null"
+      :execution-result="executionResult"
+      :is-panel-open="dashboard.state.isPanelOpen"
+      @execute="handleExecute"
+      @kill="handleKill"
+      @toggle-panel="dashboard.togglePanel"
+      @open-palette="isCommandPaletteOpen = true"
+    />
+
+    <!-- Command Palette Overlay -->
+    <CommandPalette
+      :is-open="isCommandPaletteOpen"
+      :projects="dashboard.state.projects"
+      @close="isCommandPaletteOpen = false"
+      @select-project="handleSelectProject"
+      @select-stage="handleSelectStage"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useWebSocket } from './composables/useWebSocket.js'
+import { useDashboard } from './composables/useDashboard.js'
+import { useDashboardKeyboard } from './composables/useKeyboard.js'
+import ProjectList from './components/ProjectList.vue'
+import PipelineView from './components/PipelineView.vue'
+import DetailPanel from './components/DetailPanel.vue'
+import ActionBar from './components/ActionBar.vue'
+import CommandPalette from './components/CommandPalette.vue'
+
+// Composables
+const ws = useWebSocket()
+const dashboard = useDashboard()
+const isCommandPaletteOpen = ref(false)
+const executionResult = ref(null)
+
+// Keyboard shortcuts
+useDashboardKeyboard({
+  onOpenCommandPalette: () => { isCommandPaletteOpen.value = true },
+  onClose: () => {
+    if (isCommandPaletteOpen.value) {
+      isCommandPaletteOpen.value = false
+    } else if (dashboard.state.activeStep) {
+      dashboard.state.activeStep = null
+    } else {
+      dashboard.closePanel()
+    }
+  }
+})
+
+// WebSocket event handlers
+onMounted(() => {
+  ws.on('projects:init', (projects) => { dashboard.updateProjects(projects) })
+  ws.on('projects:updated', (projects) => { dashboard.updateProjects(projects) })
+  ws.on('cli:output', (data) => {
+    if (data.projectName === dashboard.activeProjectName.value) {
+      dashboard.appendLog(data.output)
+    }
+  })
+  ws.on('cli:complete', (data) => {
+    if (data.projectName === dashboard.activeProjectName.value) {
+      dashboard.setExecuting(null)
+      executionResult.value = { exitCode: data.exitCode, signal: data.signal }
+    }
+  })
+  ws.on('cli:started', (data) => {
+    if (data.projectName === dashboard.activeProjectName.value) {
+      dashboard.setExecuting(data.projectName)
+      executionResult.value = null
+    }
+  })
+  ws.on('cli:killed', (data) => {
+    if (data.projectName === dashboard.activeProjectName.value) {
+      dashboard.setExecuting(null)
+      executionResult.value = { exitCode: -1, signal: 'SIGTERM' }
+    }
+  })
+})
+
+function handleSelectProject(project) { dashboard.selectProject(project) }
+function handleSelectStage({ project, stage }) { dashboard.selectProject(project) }
+function handleSelectStep(step) { dashboard.selectStep(step) }
+function handleExecute() {
+  const projectName = dashboard.activeProjectName.value
+  if (!projectName) return
+  dashboard.clearLogs()
+  ws.send({ type: 'cli:execute', data: { projectName, command: 'next' } })
+}
+function handleKill() {
+  const projectName = dashboard.activeProjectName.value
+  if (!projectName) return
+  ws.send({ type: 'cli:kill', data: { projectName } })
+}
+</script>
+
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+body {
+  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#app { width: 100vw; height: 100vh; overflow: hidden; }
+</style>

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

@@ -0,0 +1,100 @@
+<template>
+  <div class="h-12 flex items-center justify-between px-5 relative" style="background: rgba(17,17,19,0.9); backdrop-filter: blur(20px); border-top: 1px solid #1F1F22;">
+    <!-- Ambient top glow -->
+    <div class="absolute inset-x-0 top-0 h-px" style="background: linear-gradient(90deg, transparent, rgba(251,191,36,0.1), transparent);"></div>
+
+    <!-- Left: Status -->
+    <div class="flex items-center gap-3">
+      <div v-if="project" class="flex items-center gap-2">
+        <span class="text-[11px] font-[JetBrains_Mono,monospace]" style="color: #525252;">{{ project.name }}</span>
+        <span style="color: #1F1F22;">|</span>
+        <StageBadge v-if="project.state?.currentStage" :status="getProjectStatus()" :label="stageLabel()" />
+      </div>
+      <div v-else class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #3A3A3D;">
+        no project
+      </div>
+    </div>
+
+    <!-- Center: Execution -->
+    <div class="flex items-center gap-2">
+      <div v-if="isExecuting" class="flex items-center gap-2">
+        <div class="w-1 h-1 rounded-full animate-pulse-dot" style="background: #FBBF24;" />
+        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #FBBF24;">running</span>
+      </div>
+      <div v-else-if="executionResult" class="flex items-center gap-1.5">
+        <span class="text-[10px] font-[JetBrains_Mono,monospace]" :style="{ color: executionResult.exitCode === 0 ? '#34D399' : '#EF4444' }">
+          {{ executionResult.exitCode === 0 ? '● done' : `● exit ${executionResult.exitCode}` }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Right: Actions -->
+    <div class="flex items-center gap-1">
+      <button
+        @click="$emit('toggle-panel')"
+        class="p-1.5 rounded-sm transition-colors duration-100"
+        style="color: #525252;"
+        @mouseenter="$event.target.style.color='#FBBF24';$event.target.style.background='rgba(251,191,36,0.06)'"
+        @mouseleave="$event.target.style.color='#525252';$event.target.style.background='transparent'"
+        title="Toggle detail panel"
+      >
+        <svg :class="['w-3.5 h-3.5 transition-transform duration-200', { 'rotate-180': !isPanelOpen }]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+
+      <button
+        v-if="isExecuting"
+        @click="$emit('kill')"
+        class="px-2.5 py-1 rounded-sm text-[10px] font-[JetBrains_Mono,monospace] transition-colors duration-100"
+        style="background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); color: #EF4444;"
+      >
+        kill
+      </button>
+
+      <button
+        @click="$emit('open-palette')"
+        class="p-1.5 rounded-sm transition-colors duration-100"
+        style="color: #525252;"
+        @mouseenter="$event.target.style.color='#FBBF24';$event.target.style.background='rgba(251,191,36,0.06)'"
+        @mouseleave="$event.target.style.color='#525252';$event.target.style.background='transparent'"
+        title="Command palette (⌘K)"
+      >
+        <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import StageBadge from './StageBadge.vue'
+
+const props = defineProps({
+  project: { type: Object, default: null },
+  isExecuting: { type: Boolean, default: false },
+  executionResult: { type: Object, default: null },
+  isPanelOpen: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['execute', 'kill', 'toggle-panel', 'open-palette'])
+
+function getProjectStatus() {
+  if (!props.project?.state) return 'pending'
+  const stage = props.project.state.currentStage
+  const steps = props.project.state.progress?.stages?.[stage]?.steps || []
+  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() {
+  const stage = props.project?.state?.currentStage
+  const labels = { 'brainstorm': '头脑风暴', 'plan': '规划', 'execute': '执行', 'verify': '验证' }
+  return labels[stage] || stage || '未知'
+}
+</script>

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

@@ -0,0 +1,117 @@
+<template>
+  <Teleport to="body">
+    <Transition name="backdrop">
+      <div v-if="isOpen" class="fixed inset-0 z-40" style="background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);" @click="close" />
+    </Transition>
+
+    <Transition name="palette">
+      <div v-if="isOpen" class="fixed left-1/2 top-[18%] -translate-x-1/2 w-full max-w-md z-50">
+        <div class="overflow-hidden rounded-md" style="background: #141416; border: 1px solid #2A2A2D; box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(251,191,36,0.05);">
+          <!-- Search -->
+          <div class="px-4 py-3" style="border-bottom: 1px solid #1F1F22;">
+            <div class="flex items-center gap-3">
+              <svg class="w-3.5 h-3.5 flex-shrink-0" style="color: #525252;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+              </svg>
+              <input
+                ref="searchInput"
+                v-model="searchQuery"
+                type="text"
+                placeholder="Search projects or stages..."
+                class="flex-1 bg-transparent border-none outline-none text-[12px] font-[JetBrains_Mono,monospace]"
+                style="color: #E4E4E7;"
+                @keydown="handleKeydown"
+              />
+              <kbd v-if="searchQuery" class="text-[9px] px-1 py-0.5 rounded-sm font-mono-log" style="color: #525252; background: #0A0A0B; border: 1px solid #2A2A2D;">ESC</kbd>
+            </div>
+          </div>
+
+          <!-- Results -->
+          <div class="max-h-72 overflow-y-auto">
+            <div v-if="filteredItems.length === 0" class="py-10 text-center">
+              <p class="text-[11px] font-[JetBrains_Mono,monospace]" style="color: #3A3A3D;">No results</p>
+            </div>
+            <div v-else class="py-0.5">
+              <div
+                v-for="(item, index) in filteredItems"
+                :key="item.id"
+                :class="['px-4 py-2.5 cursor-pointer transition-colors duration-100 flex items-center gap-3']"
+                :style="{ background: selectedIndex === index ? 'rgba(251,191,36,0.06)' : 'transparent' }"
+                @click="selectItem(item)"
+                @mouseenter="selectedIndex = index"
+              >
+                <div class="w-6 h-6 rounded-sm flex items-center justify-center text-[10px] font-[JetBrains_Mono,monospace] flex-shrink-0" style="background: #0A0A0B; border: 1px solid #1F1F22; color: #525252;">
+                  {{ item.type === 'project' ? '□' : '◇' }}
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="text-[12px] font-medium truncate font-[JetBrains_Mono,monospace]" style="color: #E4E4E7;">{{ item.title }}</div>
+                  <div class="text-[10px] truncate" style="color: #525252;">{{ item.subtitle }}</div>
+                </div>
+                <StageBadge v-if="item.status" :status="item.status" size="sm" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <div class="px-4 py-2 flex items-center gap-4 text-[9px] font-mono-log" style="border-top: 1px solid #1F1F22; color: #3A3A3D;">
+            <span><kbd class="px-1 rounded-sm" style="background: #0A0A0B; border: 1px solid #1F1F22;">↑↓</kbd> nav</span>
+            <span><kbd class="px-1 rounded-sm" style="background: #0A0A0B; border: 1px solid #1F1F22;">↵</kbd> open</span>
+            <span><kbd class="px-1 rounded-sm" style="background: #0A0A0B; border: 1px solid #1F1F22;">esc</kbd> close</span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+import StageBadge from './StageBadge.vue'
+
+const props = defineProps({ isOpen: { type: Boolean, default: false }, projects: { type: Array, default: () => [] } })
+const emit = defineEmits(['close', 'select-project', 'select-stage'])
+
+const searchQuery = ref('')
+const searchInput = ref(null)
+const selectedIndex = ref(0)
+
+const stageNames = [
+  { id: 'brainstorm', name: '头脑风暴' },
+  { id: 'plan', name: '规划' },
+  { id: 'execute', name: '执行' },
+  { id: 'verify', name: '验证' }
+]
+
+const filteredItems = computed(() => {
+  const items = []
+  for (const project of props.projects) {
+    const pm = !searchQuery.value || project.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || project.path.toLowerCase().includes(searchQuery.value.toLowerCase())
+    if (pm) items.push({ id: `project-${project.name}`, type: 'project', title: project.name, subtitle: project.path, data: project, status: getProjectStatus(project) })
+    for (const stage of stageNames) {
+      const sm = !searchQuery.value || stage.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || stage.id.toLowerCase().includes(searchQuery.value.toLowerCase())
+      if (sm || pm) items.push({ id: `stage-${project.name}-${stage.id}`, type: 'stage', title: `${project.name} / ${stage.name}`, subtitle: `Jump to ${stage.name}`, data: { project, stage: stage.id }, status: getStageStatus(project, stage.id) })
+    }
+  }
+  return items
+})
+
+function getProjectStatus(p) { const s = p.state?.progress?.stages?.[p.state?.currentStage]?.steps || []; if (s.some(x => x.status === 'failed')) return 'failed'; if (s.some(x => x.status === 'in-progress')) return 'in-progress'; if (s.every(x => x.status === 'completed')) return 'completed'; return 'pending' }
+function getStageStatus(p, id) { const s = p.state?.progress?.stages?.[id]?.steps || []; if (!s.length) return 'pending'; if (s.some(x => x.status === 'failed')) return 'failed'; if (s.some(x => x.status === 'in-progress')) return 'in-progress'; if (s.every(x => x.status === 'completed')) return 'completed'; return 'pending' }
+function close() { searchQuery.value = ''; selectedIndex.value = 0; emit('close') }
+function selectItem(item) { if (item.type === 'project') emit('select-project', item.data); else emit('select-stage', item.data); close() }
+function handleKeydown(e) {
+  if (e.key === 'ArrowDown') { e.preventDefault(); selectedIndex.value = Math.min(selectedIndex.value + 1, filteredItems.value.length - 1) }
+  else if (e.key === 'ArrowUp') { e.preventDefault(); selectedIndex.value = Math.max(selectedIndex.value - 1, 0) }
+  else if (e.key === 'Enter') { e.preventDefault(); if (filteredItems.value[selectedIndex.value]) selectItem(filteredItems.value[selectedIndex.value]) }
+  else if (e.key === 'Escape') { e.preventDefault(); close() }
+}
+watch(filteredItems, () => { selectedIndex.value = 0 })
+watch(() => props.isOpen, (v) => { if (v) nextTick(() => { searchInput.value?.focus() }) })
+</script>
+
+<style scoped>
+.backdrop-enter-active, .backdrop-leave-active { transition: opacity 150ms ease; }
+.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
+.palette-enter-active, .palette-leave-active { transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+.palette-enter-from, .palette-leave-to { opacity: 0; transform: translate(-50%, -8px) scale(0.98); }
+</style>