sillyspec 3.26.4 → 3.26.5

package/packages/dashboard/src/App.vue

@@ -1,558 +0,0 @@
-<template>
-  <n-config-provider :theme-overrides="themeOverrides">
-  <div class="h-screen w-screen flex flex-col overflow-hidden font-[DM_Sans,sans-serif] relative" style="background-color: #F5F5F7;">
-    <!-- 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%);" />
-
-    <!-- 上层：多项目概览区域 -->
-    <div
-      class="relative overflow-hidden flex-shrink-0"
-      :style="{ height: layout.overviewHeight + '%' }"
-    >
-      <!-- 项目概览 -->
-      <ProjectOverview
-        :projects="dashboard.state.projects"
-        :active-project="dashboard.state.activeProject"
-        @select="handleSelectProject"
-      />
-    </div>
-
-    <!-- 垂直拖动分割线 -->
-    <div
-      class="h-[6px] flex-shrink-0 cursor-row-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20 transition-colors duration-200"
-      :class="{ 'bg-[#D97706]': isDragging }"
-      style="background: #2A3040;"
-      @mousedown="startDragVertical"
-    >
-      <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
-        <div class="w-10 h-1 bg-white/30 rounded-full"></div>
-      </div>
-    </div>
-
-    <!-- 下层：详情区域 -->
-    <div class="flex-1 overflow-hidden flex flex-col">
-      <!-- 详情内容 -->
-      <div class="flex-1 flex overflow-hidden">
-        <!-- 左栏：项目信息 -->
-        <div
-          class="detail-column flex-shrink-0 bg-white overflow-hidden"
-          :style="{ width: layout.columnWidths[0] + '%', minWidth: '150px' }"
-          :class="{ 'fade-in': projectSwitched }"
-        >
-          <div v-if="activeProject" class="project-info">
-            <div class="detail-section-title">项目信息</div>
-            <div class="detail-item">
-              <div class="detail-label">项目名称</div>
-              <div class="detail-value">{{ activeProject.name }}</div>
-            </div>
-            <div class="detail-item">
-              <div class="detail-label">路径</div>
-              <div class="detail-value detail-path">{{ shortPath }}</div>
-            </div>
-            <div class="detail-item">
-              <div class="detail-label">当前阶段</div>
-              <div class="detail-value">{{ currentStageLabel }}</div>
-            </div>
-            <div class="detail-item">
-              <div class="detail-label">进度</div>
-              <div class="detail-value">{{ progressLabel }}</div>
-            </div>
-          </div>
-          <div v-else class="text-gray-400 text-sm">选择项目查看详情</div>
-        </div>
-
-        <!-- 水平拖动分割线 1 -->
-        <div
-          class="w-[4px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20 transition-colors duration-200"
-          style="background: #E5E7EB;"
-          @mousedown="startDragHorizontal(0)"
-        ></div>
-
-        <!-- 中栏：Pipeline -->
-        <div
-          class="pipeline-column flex-1 bg-white overflow-hidden"
-          :style="{ minWidth: '200px' }"
-        >
-          <PipelineView
-            :project="dashboard.state.activeProject"
-            :active-step="dashboard.state.activeStep"
-            :active-tab="dashboard.state.activeTab"
-            :docs="dashboard.state.docs"
-            :selected-doc-file="dashboard.state.selectedDocFile"
-            :doc-content="dashboard.state.docContent"
-            :doc-loading="dashboard.state.docLoading"
-            @select-step="handleSelectStep"
-            @switch-tab="handleSwitchTab"
-            @select-doc-file="handleSelectDocFile"
-          />
-        </div>
-
-        <!-- 水平拖动分割线 2 -->
-        <div
-          class="w-[4px] flex-shrink-0 cursor-col-resize hover:bg-[#D97706] active:bg-[#D97706] relative z-20 transition-colors duration-200"
-          style="background: #E5E7EB;"
-          @mousedown="startDragHorizontal(1)"
-        ></div>
-
-        <!-- 右栏：日志/详情 -->
-        <div
-          class="activity-column flex-shrink-0 bg-white overflow-hidden flex flex-col"
-          :style="{ width: layout.columnWidths[2] + '%', minWidth: '200px' }"
-        >
-          <div class="detail-section-title px-4 pt-4">最近活动</div>
-          <div class="flex-1 overflow-y-auto px-4 pb-4">
-            <div
-              v-for="(log, i) in recentLogs"
-              :key="i"
-              class="log-entry"
-              :class="{ success: log.includes('✅'), error: log.includes('❌') }"
-            >
-              {{ log }}
-            </div>
-            <div v-if="recentLogs.length === 0" class="text-gray-400 text-sm">暂无活动</div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Bottom: Action Bar -->
-      <ActionBar
-        :project="dashboard.state.activeProject"
-        :is-executing="dashboard.state.executingProject !== null"
-        :execution-result="executionResult"
-        @execute="handleExecute"
-        @kill="handleKill"
-        @open-palette="isCommandPaletteOpen = true"
-      />
-    </div>
-
-    <!-- Command Palette Overlay -->
-    <CommandPalette
-      :is-open="isCommandPaletteOpen"
-      :projects="dashboard.state.projects"
-      @close="isCommandPaletteOpen = false"
-      @select-project="handleSelectProject"
-      @select-stage="handleSelectStage"
-    />
-
-    <!-- 尺寸指示器 -->
-    <div
-      v-if="isDragging"
-      class="fixed bottom-5 left-5 bg-black/70 text-white px-3 py-2 rounded text-xs font-mono z-50"
-    >
-      {{ sizeIndicatorText }}
-    </div>
-  </div>
-  </n-config-provider>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useWebSocket } from './composables/useWebSocket.js'
-import { useDashboard } from './composables/useDashboard.js'
-import { useLayout } from './composables/useLayout.js'
-import PipelineView from './components/PipelineView.vue'
-import ProjectOverview from './components/ProjectOverview.vue'
-import ActionBar from './components/ActionBar.vue'
-import CommandPalette from './components/CommandPalette.vue'
-
-// Composables
-const ws = useWebSocket()
-const dashboard = useDashboard()
-const layoutManager = useLayout()
-
-// 解构 layout
-const { layout, isDragging, startDrag, endDrag } = layoutManager
-
-// 状态
-const isCommandPaletteOpen = ref(false)
-const executionResult = ref(null)
-const projectSwitched = ref(false)
-const dragState = ref({
-  active: false,
-  type: null,
-  startX: 0,
-  startY: 0,
-  startValue: 0
-})
-
-// 尺寸指示器文本
-const sizeIndicatorText = computed(() => {
-  if (dragState.value.type === 'vertical') {
-    return `概览 ${Math.round(layout.overviewHeight)}% | 详情 ${Math.round(100 - layout.overviewHeight)}%`
-  } else if (dragState.value.type === 'horizontal') {
-    return `三栏: ${Math.round(layout.columnWidths[0])}% | ${Math.round(layout.columnWidths[1])}% | ${Math.round(layout.columnWidths[2])}%`
-  }
-  return ''
-})
-
-// 当前项目
-const activeProject = computed(() => dashboard.state.activeProject)
-
-// 项目短路径
-const shortPath = computed(() => {
-  const path = activeProject.value?.path || ''
-  return path.replace(/^\/Users\/[^/]+/, '~')
-})
-
-// 当前阶段标签
-const currentStageLabel = computed(() => {
-  const stage = activeProject.value?.state?.currentStage
-  if (!stage) return '未开始'
-  const stageNames = {
-    scan: '代码扫描',
-    brainstorm: '需求探索',
-    plan: '实现计划',
-    execute: '波次执行',
-    verify: '验证确认',
-    archive: '归档变更',
-    quick: '快速任务',
-    explore: '自由探索'
-  }
-  return stageNames[stage] || stage
-})
-
-// 进度标签
-const progressLabel = computed(() => {
-  const progress = activeProject.value?.state?.progress
-  if (!progress) return '-'
-  const currentStage = activeProject.value?.state?.currentStage
-  const stageProgress = currentStage ? progress.stages?.[currentStage] : null
-  if (!stageProgress) return '-'
-  if (stageProgress.completedSteps !== undefined && stageProgress.steps !== undefined) {
-    return `${stageProgress.completedSteps}/${stageProgress.steps} 步骤`
-  }
-  return stageProgress.status || '-'
-})
-
-// 最近日志（最近 10 条）
-const recentLogs = computed(() => {
-  const logs = dashboard.state.logs || []
-  return logs.slice(-10).reverse()
-})
-
-// 垂直拖动（概览 ↔ 详情）
-function startDragVertical(e) {
-  e.preventDefault()
-  dragState.value = {
-    active: true,
-    type: 'vertical',
-    startY: e.clientY,
-    startValue: layout.overviewHeight
-  }
-  document.body.classList.add('resizing')
-  startDrag('vertical')
-
-  const onMove = (ev) => {
-    const deltaY = ev.clientY - dragState.value.startY
-    const windowHeight = window.innerHeight
-    const deltaPercent = (deltaY / windowHeight) * 100
-    const newHeight = dragState.value.startValue + deltaPercent
-    layout.overviewHeight = Math.max(15, Math.min(75, newHeight))
-  }
-
-  const onUp = () => {
-    document.body.classList.remove('resizing')
-    dragState.value.active = false
-    dragState.value.type = null
-    window.removeEventListener('mousemove', onMove)
-    window.removeEventListener('mouseup', onUp)
-    endDrag()
-  }
-
-  window.addEventListener('mousemove', onMove)
-  window.addEventListener('mouseup', onUp)
-}
-
-// 水平拖动（三栏分割）
-function startDragHorizontal(colIndex) {
-  return (e) => {
-    e.preventDefault()
-    dragState.value = {
-      active: true,
-      type: 'horizontal',
-      colIndex,
-      startX: e.clientX,
-      startWidths: [...layout.columnWidths]
-    }
-    document.body.classList.add('resizing')
-    startDrag('horizontal')
-
-    const onMove = (ev) => {
-      const deltaX = ev.clientX - dragState.value.startX
-      const containerWidth = document.querySelector('.flex-1.flex.overflow-hidden').offsetWidth
-      const deltaPercent = (deltaX / containerWidth) * 100
-
-      if (colIndex === 0) {
-        // 左栏 ↔ 中栏
-        const newWidth1 = ((dragState.value.startWidths[0] * containerWidth / 100) + deltaX) / containerWidth * 100
-        const newWidth2 = ((dragState.value.startWidths[1] * containerWidth / 100) - deltaX) / containerWidth * 100
-        if (newWidth1 >= 10 && newWidth2 >= 10) {
-          layout.columnWidths[0] = newWidth1
-          layout.columnWidths[1] = newWidth2
-        }
-      } else {
-        // 中栏 ↔ 右栏
-        const newWidth2 = ((dragState.value.startWidths[1] * containerWidth / 100) + deltaX) / containerWidth * 100
-        const newWidth3 = ((dragState.value.startWidths[2] * containerWidth / 100) - deltaX) / containerWidth * 100
-        if (newWidth2 >= 10 && newWidth3 >= 10) {
-          layout.columnWidths[1] = newWidth2
-          layout.columnWidths[2] = newWidth3
-        }
-      }
-    }
-
-    const onUp = () => {
-      document.body.classList.remove('resizing')
-      dragState.value.active = false
-      dragState.value.type = null
-      window.removeEventListener('mousemove', onMove)
-      window.removeEventListener('mouseup', onUp)
-      endDrag()
-    }
-
-    window.addEventListener('mousemove', onMove)
-    window.addEventListener('mouseup', onUp)
-  }
-}
-
-// WebSocket 事件处理
-onMounted(() => {
-  ws.on('projects:init', handleProjectsUpdate)
-  ws.on('projects:updated', handleProjectsUpdate)
-  ws.on('project:update', (project) => {
-    dashboard.updateProject(project)
-  })
-  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' }
-    }
-  })
-  ws.on('scan:paths', (paths) => { scanPaths.value = paths })
-  ws.on('docs:tree', (docs) => { dashboard.updateDocs(docs) })
-})
-
-function handleProjectsUpdate(projects) {
-  const previousPath = dashboard.activeProjectPath.value
-  dashboard.updateProjects(projects)
-
-  if (!previousPath && dashboard.state.activeProject?.path) {
-    ws.send({ type: 'docs:get', data: { projectPath: dashboard.state.activeProject.path } })
-  }
-}
-
-function handleSelectProject(project) {
-  dashboard.selectProject(project)
-  dashboard.selectDocFile(null)
-  dashboard.setDocContent('')
-  // 触发淡入动画
-  projectSwitched.value = false
-  setTimeout(() => { projectSwitched.value = true }, 10)
-  setTimeout(() => { projectSwitched.value = false }, 210)
-  if (project?.path) {
-    ws.send({ type: 'docs:get', data: { projectPath: project.path } })
-  }
-}
-
-function handleSelectStage({ project, stage }) { dashboard.selectProject(project) }
-function handleSelectStep(step) { dashboard.selectStep(step) }
-function handleSwitchTab(tab) { dashboard.setActiveTab(tab) }
-function handleSelectDocFile(file) {
-  dashboard.selectDocFile(file)
-  dashboard.setDocLoading(true)
-  fetch(`/api/docs/content?path=${encodeURIComponent(file.path)}`)
-    .then(r => r.ok ? r.text() : '')
-    .then(content => {
-      dashboard.setDocContent(content)
-      dashboard.setDocLoading(false)
-    })
-    .catch(() => {
-      dashboard.setDocContent('')
-      dashboard.setDocLoading(false)
-    })
-}
-
-function handleExecute() {
-  const projectName = dashboard.activeProjectName.value
-  if (!projectName) return
-  const progress = dashboard.state.activeProject?.state?.progress
-  const stages = ['scan', 'brainstorm', 'plan', 'execute', 'verify', 'archive']
-  const currentStage = dashboard.state.activeProject?.state?.currentStage
-    || stages.find(stage => progress?.stages?.[stage]?.status !== 'completed')
-    || 'scan'
-  dashboard.clearLogs()
-  ws.send({ type: 'cli:execute', data: { projectName, command: `run ${currentStage}` } })
-}
-
-function handleKill() {
-  const projectName = dashboard.activeProjectName.value
-  if (!projectName) return
-  ws.send({ type: 'cli:kill', data: { projectName } })
-}
-
-const themeOverrides = {
-  common: {
-    primaryColor: '#D97706',
-    primaryColorHover: '#F59E0B',
-    primaryColorPressed: '#B45309',
-    borderRadius: '6px',
-    fontFamily: 'DM Sans, sans-serif',
-    fontFamilyMono: 'JetBrains Mono, monospace'
-  }
-}
-</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-smoothing: grayscale;
-}
-
-#app { width: 100vw; height: 100vh; overflow: hidden; min-width: 0; }
-
-/* 拖动时禁用选择 */
-body.resizing {
-  user-select: none;
-}
-body.resizing * {
-  cursor: inherit !important;
-}
-
-/* 响应式：小窗口时调整布局 */
-@media (max-width: 1280px) {
-  .detail-section-title {
-    font-size: 11px;
-  }
-  .detail-value {
-    font-size: 13px;
-  }
-  .log-entry {
-    font-size: 11px;
-  }
-}
-
-/* 项目信息样式 */
-.detail-column,
-.activity-column {
-  padding: 18px 20px;
-}
-
-.pipeline-column {
-  border-left: 1px solid #EEF0F4;
-  border-right: 1px solid #EEF0F4;
-}
-
-.pipeline-column > * {
-  min-width: 0;
-  padding-left: 18px;
-  padding-right: 18px;
-}
-
-.activity-column {
-  gap: 12px;
-}
-
-.activity-column .detail-section-title {
-  padding: 0;
-  margin-bottom: 0;
-}
-
-.activity-column > .flex-1 {
-  padding: 0;
-}
-
-.project-info {
-  min-width: 0;
-}
-
-.detail-section-title {
-  font-size: 12px;
-  font-weight: 600;
-  color: #9CA3AF;
-  text-transform: uppercase;
-  margin-bottom: 12px;
-}
-
-.detail-item {
-  margin-bottom: 16px;
-}
-
-.detail-label {
-  font-size: 11px;
-  color: #9CA3AF;
-  margin-bottom: 4px;
-}
-
-.detail-value {
-  font-size: 14px;
-  color: #1A1A1A;
-  font-weight: 500;
-  min-width: 0;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  line-height: 1.45;
-}
-
-.detail-path {
-  font-size: 12px;
-  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  white-space: normal;
-}
-
-/* 日志条目样式 */
-.log-entry {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 12px;
-  padding: 8px;
-  background: #F9FAFB;
-  border-radius: 4px;
-  margin-bottom: 8px;
-  color: #374151;
-}
-
-.log-entry.success {
-  color: #047857;
-  background: #D1FAE5;
-}
-
-.log-entry.error {
-  color: #DC2626;
-  background: #FEE2E2;
-}
-
-/* 淡入动画 */
-.fade-in {
-  animation: fadeIn 0.2s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>

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

@@ -1,93 +0,0 @@
-<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 #F0F0F3;">
-    <!-- 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: #6B7280;">{{ project.name }}</span>
-        <span style="color: #F0F0F3;">|</span>
-        <StageBadge v-if="project.state?.currentStage" :status="getProjectStatus()" :label="stageLabel()" />
-      </div>
-      <div v-else class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #D1D1D6;">
-        未选择项目
-      </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: #D97706;" />
-        <span class="text-[10px] font-[JetBrains_Mono,monospace]" style="color: #D97706;">执行中...</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 ? '#16A34A' : '#DC2626' }">
-          {{ executionResult.exitCode === 0 ? '● 完成' : `● 失败 (${executionResult.exitCode})` }}
-        </span>
-      </div>
-    </div>
-
-    <!-- Right: Actions -->
-    <div class="flex items-center gap-1">
-      <n-button quaternary size="tiny" @click="$emit('toggle-panel')" title="切换详情面板">
-        <template #icon>
-          <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>
-        </template>
-      </n-button>
-
-      <n-button v-if="isExecuting" size="tiny" type="error" @click="$emit('kill')">
-        停止
-      </n-button>
-
-      <n-button quaternary size="tiny" @click="$emit('open-palette')" title="命令面板 (⌘K)">
-        <template #icon>
-          <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>
-        </template>
-      </n-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-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 = {
-    scan: '代码扫描',
-    brainstorm: '头脑风暴',
-    plan: '规划',
-    execute: '执行',
-    verify: '验证',
-    archive: '归档',
-    quick: '快速任务',
-    explore: '自由探索'
-  }
-  return labels[stage] || stage || '未知'
-}
-</script>