sillyspec 3.9.0 → 3.10.0

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

@@ -0,0 +1,152 @@
+<template>
+  <div class="overview-section">
+    <!-- 头部 -->
+    <div class="section-header">
+      <h1 class="section-title">
+        项目概览
+        <span class="badge">{{ projects.length }} 个项目</span>
+      </h1>
+      <div class="section-actions">
+        <button class="btn btn-icon" title="刷新" @click="refresh">↻</button>
+        <button class="btn btn-secondary" @click="resetLayout">重置布局</button>
+      </div>
+    </div>
+
+    <!-- 卡片容器 -->
+    <div class="cards-container">
+      <ProjectCard
+        v-for="project in projects"
+        :key="project.name"
+        :project="project"
+        :is-selected="activeProject?.name === project.name"
+        @select="handleSelect"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+import ProjectCard from './ProjectCard.vue'
+import { useLayout } from '../composables/useLayout.js'
+
+const props = defineProps({
+  projects: { type: Array, default: () => [] },
+  activeProject: { type: Object, default: null }
+})
+
+const emit = defineEmits(['select'])
+
+function handleSelect(project) {
+  emit('select', project)
+}
+
+function refresh() {
+  // TODO: 实现刷新逻辑
+  window.location.reload()
+}
+
+function resetLayout() {
+  if (confirm('确定要重置布局吗？')) {
+    useLayout().resetLayout()
+  }
+}
+</script>
+
+<style scoped>
+.overview-section {
+  height: 100%;
+  background: #FFFFFF;
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1A1A1A;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge {
+  font-size: 12px;
+  padding: 2px 8px;
+  background: #E5E7EB;
+  border-radius: 10px;
+  color: #6B7280;
+  font-weight: 500;
+}
+
+.section-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.btn {
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: none;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  opacity: 0.9;
+}
+
+.btn-secondary {
+  background: #E5E7EB;
+  color: #374151;
+}
+
+.btn-icon {
+  padding: 6px;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F3F4F6;
+  border-radius: 6px;
+}
+
+.btn-icon:hover {
+  background: #E5E7EB;
+}
+
+.cards-container {
+  flex: 1;
+  display: flex;
+  gap: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 8px;
+}
+
+.cards-container::-webkit-scrollbar {
+  height: 8px;
+}
+
+.cards-container::-webkit-scrollbar-track {
+  background: #F3F4F6;
+  border-radius: 4px;
+}
+
+.cards-container::-webkit-scrollbar-thumb {
+  background: #D1D5DB;
+  border-radius: 4px;
+}
+</style>

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

@@ -19,19 +19,19 @@ const props = defineProps({
 
 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 labels = { 'completed': 'done', 'in-progress': 'running', 'blocked': 'blocked', 'failed': 'error' }
+  return labels[props.status] || ''
 })
 
 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' }
+    'completed': { background: 'rgba(22,163,74,0.1)', color: '#16A34A' },
+    'in-progress': { background: 'rgba(251,191,36,0.1)', color: '#D97706' },
+    'blocked': { background: 'rgba(251,146,60,0.1)', color: '#EA580C' },
+    'failed': { background: 'rgba(239,68,68,0.1)', color: '#DC2626' },
+    'pending': { background: 'rgba(82,82,82,0.15)', color: '#6B7280' }
   }
   return styles[props.status] || styles.pending
 })
@@ -42,12 +42,12 @@ const dotClass = computed(() => {
 
 const dotStyle = computed(() => {
   const colors = {
-    'completed': '#34D399',
-    'in-progress': '#FBBF24',
-    'blocked': '#FB923C',
-    'failed': '#EF4444',
-    'pending': '#525252'
+    'completed': '#16A34A',
+    'in-progress': '#D97706',
+    'blocked': '#EA580C',
+    'failed': '#DC2626',
+    'pending': '#6B7280'
   }
-  return { background: colors[props.status] || '#525252' }
+  return { background: colors[props.status] || '#6B7280' }
 })
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="['group relative rounded-md cursor-pointer overflow-hidden transition-all duration-200']"
+    :class="['group relative rounded-md cursor-pointer transition-all duration-200']"
     :style="cardStyle"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
@@ -9,9 +9,9 @@
     <!-- Left accent bar -->
     <div class="absolute left-0 top-0 bottom-0 w-[2px]" :style="{ background: barColor }" />
 
-    <div class="pl-3.5 pr-3 py-2.5">
+    <div class="pl-4 pr-4 py-3">
       <div class="flex items-center gap-2">
-        <h3 class="text-[12px] font-medium transition-colors duration-150" :style="{ color: isActive ? '#FBBF24' : '#E4E4E7', fontFamily: '\'JetBrains Mono\', monospace' }">
+        <h3 class="text-[12px] font-medium transition-colors duration-150" :style="{ color: isActive ? '#D97706' : '#1C1C1E', fontFamily: '\'JetBrains Mono\', monospace' }">
           {{ step.title || step.name }}
         </h3>
         <StageBadge v-if="step.status" :status="step.status" :label="statusLabel" />
@@ -20,28 +20,28 @@
       <!-- Hover summary -->
       <div
         v-if="step.summary || step.description"
-        class="overflow-hidden transition-all duration-200"
-        :style="{ maxHeight: hovered ? '60px' : '0', opacity: hovered ? 1 : 0 }"
+        class="transition-all duration-200"
+        :style="{ maxHeight: hovered ? '80px' : '0', opacity: hovered ? 1 : 0, overflow: 'hidden' }"
       >
-        <p class="mt-1.5 text-[11px] line-clamp-2" style="color: #8B8B8E;">
+        <p class="mt-1.5 text-[11px] line-clamp-2" style="color: #636366;">
           {{ step.summary || step.description }}
         </p>
       </div>
 
       <!-- Active details -->
       <div v-if="isActive" class="mt-2 space-y-1">
-        <p v-if="step.conclusion" class="text-[11px]" style="color: #E4E4E7;">
-          <span style="color: #FBBF24; font-weight: 600;">结论:</span> {{ step.conclusion }}
+        <p v-if="step.conclusion" class="text-[11px]" style="color: #1C1C1E;">
+          <span style="color: #D97706; font-weight: 600;">结论:</span> {{ step.conclusion }}
         </p>
-        <p v-if="step.decision" class="text-[11px]" style="color: #E4E4E7;">
-          <span style="color: #FBBF24; font-weight: 600;">决策:</span> {{ step.decision }}
+        <p v-if="step.decision" class="text-[11px]" style="color: #1C1C1E;">
+          <span style="color: #D97706; font-weight: 600;">决策:</span> {{ step.decision }}
         </p>
-        <p v-if="step.userQuery" class="text-[11px] italic" style="color: #8B8B8E;">
+        <p v-if="step.userQuery" class="text-[11px] italic" style="color: #636366;">
           "{{ step.userQuery }}"
         </p>
       </div>
 
-      <div v-if="step.duration" class="mt-1 text-[10px] font-mono-log" style="color: #525252;">
+      <div v-if="step.duration" class="mt-1 text-[10px] font-mono-log" style="color: #6B7280;">
         {{ step.duration }}
       </div>
     </div>
@@ -62,13 +62,13 @@ const emit = defineEmits(['select'])
 const hovered = ref(false)
 
 const barColor = computed(() => {
-  const colors = { 'completed': '#34D399', 'in-progress': '#FBBF24', 'blocked': '#FB923C', 'failed': '#EF4444', 'pending': '#2A2A2D' }
+  const colors = { 'completed': '#16A34A', 'in-progress': '#D97706', 'blocked': '#EA580C', 'failed': '#DC2626', 'pending': '#E5E5EA' }
   return colors[props.step.status] || colors.pending
 })
 
 const cardStyle = computed(() => ({
-  background: props.isActive ? 'rgba(251,191,36,0.04)' : (hovered.value ? 'rgba(255,255,255,0.015)' : '#141416'),
-  border: `1px solid ${props.isActive ? 'rgba(251,191,36,0.2)' : '#1F1F22'}`,
+  background: props.isActive ? 'rgba(217,119,6,0.08)' : (hovered.value ? 'rgba(0,0,0,0.02)' : '#FFFFFF'),
+  border: `1px solid ${props.isActive ? 'rgba(251,191,36,0.2)' : '#F0F0F3'}`,
 }))
 
 const statusLabel = computed(() => {

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

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="v-resize-handle"
+    :class="{ 'dragging': isDragging }"
+    @mousedown="handleMouseDown"
+  >
+    <div class="drag-indicator"></div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  isDragging: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['drag-start', 'drag-end', 'resize'])
+
+function handleMouseDown(e) {
+  emit('drag-start', { type: 'vertical', startY: e.clientY })
+
+  const onMove = (ev) => {
+    emit('resize', { deltaY: ev.clientY - e.clientY })
+  }
+
+  const onUp = () => {
+    emit('drag-end')
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+</script>
+
+<style scoped>
+.v-resize-handle {
+  height: 6px;
+  background: #2A3040;
+  cursor: row-resize;
+  position: relative;
+  transition: background 0.2s;
+}
+
+.v-resize-handle:hover,
+.v-resize-handle.dragging {
+  background: #D97706;
+}
+
+.drag-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 2px;
+  pointer-events: none;
+}
+</style>

package/packages/dashboard/src/components/detail/DocsDetail.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="data?.length" class="px-4 py-3">
+    <div v-for="group in data" :key="group.key" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">
+        {{ group.icon }} {{ group.label }} ({{ group.files.length }})
+      </h4>
+      <div class="space-y-1">
+        <div
+          v-for="f in group.files"
+          :key="f.path"
+          class="flex items-center gap-2 px-2 py-1.5 rounded text-[11px] cursor-pointer hover:bg-[#FEF3C7] transition-colors"
+          @click="$emit('open-file', f)"
+        >
+          <svg class="w-3 h-3 flex-shrink-0" fill="none" stroke="#9CA3AF" 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" style="color: #1C1C1E;">{{ f.name }}</span>
+          <span class="ml-auto flex-shrink-0 font-mono text-[10px]" style="color: #9CA3AF;">{{ formatSize(f.size) }}</span>
+          <span class="flex-shrink-0 text-[10px]" style="color: #9CA3AF;">{{ relativeTime(f.mtime) }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-empty v-else description="无文档" style="padding: 48px 0;" />
+</template>
+
+<script setup>
+defineProps({ data: { type: Array, default: () => [] } })
+defineEmits(['open-file'])
+
+function formatSize(bytes) {
+  if (!bytes) return '—'
+  if (bytes < 1024) return bytes + ' B'
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'
+  return (bytes / 1048576).toFixed(1) + ' MB'
+}
+
+function relativeTime(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const diff = Date.now() - d.getTime()
+  if (diff < 60000) return '刚刚'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
+  if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+</script>

package/packages/dashboard/src/components/detail/GitDetail.vue

@@ -0,0 +1,61 @@
+<template>
+  <div v-if="data" class="px-4 py-3">
+    <!-- Branch -->
+    <div class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">当前分支</h4>
+      <div class="text-[18px] font-bold font-[JetBrains_Mono,monospace]" style="color: #D97706;">{{ data.branch || '—' }}</div>
+    </div>
+
+    <!-- Commits -->
+    <div v-if="data.commits?.length" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">最近提交</h4>
+      <div class="space-y-2">
+        <div v-for="c in data.commits" :key="c.hash" class="px-3 py-2 rounded-md" style="background: #F5F5F7;">
+          <div class="flex items-center gap-2">
+            <span class="text-[11px] font-mono font-semibold" style="color: #D97706;">{{ c.hash }}</span>
+            <span class="text-[11px] flex-1 truncate" style="color: #1C1C1E;">{{ c.message }}</span>
+          </div>
+          <div class="flex items-center gap-2 mt-1 text-[10px]" style="color: #6B7280;">
+            <span>{{ c.author }}</span>
+            <span>·</span>
+            <span>{{ relativeTime(c.date) }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Untracked -->
+    <div v-if="data.untracked?.length">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">未提交文件</h4>
+      <div class="space-y-1">
+        <div v-for="f in data.untracked" :key="f.file" class="flex items-center gap-2 px-2 py-1 rounded text-[11px] font-[JetBrains_Mono,monospace]">
+          <span class="font-semibold w-5 text-center" :style="{ color: statusColor(f.status) }">{{ f.status }}</span>
+          <span class="truncate" style="color: #1C1C1E;">{{ f.file }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-empty v-else description="无 Git 信息" style="padding: 48px 0;" />
+</template>
+
+<script setup>
+defineProps({ data: { type: Object, default: null } })
+
+function statusColor(s) {
+  if (s.includes('M')) return '#F59E0B'
+  if (s.includes('A') || s === '?') return '#10B981'
+  if (s.includes('D')) return '#EF4444'
+  return '#9CA3AF'
+}
+
+function relativeTime(iso) {
+  if (!iso) return ''
+  const d = new Date(iso)
+  const diff = Date.now() - d.getTime()
+  if (diff < 60000) return '刚刚'
+  if (diff < 3600000) return `${Math.floor(diff / 60000)} 分钟前`
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)} 小时前`
+  if (diff < 604800000) return `${Math.floor(diff / 86400000)} 天前`
+  return `${d.getMonth() + 1}/${d.getDate()}`
+}
+</script>

package/packages/dashboard/src/components/detail/TechDetail.vue

@@ -0,0 +1,43 @@
+<template>
+  <div v-if="data" class="px-4 py-3">
+    <!-- Frameworks -->
+    <div v-if="data.frameworks?.length" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">识别框架</h4>
+      <div class="flex flex-wrap gap-2">
+        <n-tag v-for="f in data.frameworks" :key="f" type="warning" size="small" round>{{ f }}</n-tag>
+      </div>
+    </div>
+
+    <!-- Dependencies -->
+    <div v-if="depEntries.length" class="mb-4">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">dependencies ({{ depEntries.length }})</h4>
+      <div class="space-y-1">
+        <div v-for="[name, ver] in depEntries" :key="name" class="flex items-center gap-2 px-2 py-1 rounded text-[11px]" style="background: #F5F5F7;">
+          <span class="font-mono font-medium truncate" style="color: #1C1C1E;">{{ name }}</span>
+          <span class="font-mono ml-auto flex-shrink-0" style="color: #9CA3AF;">{{ ver }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Dev Dependencies -->
+    <div v-if="devDepEntries.length">
+      <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-2 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">devDependencies ({{ devDepEntries.length }})</h4>
+      <div class="space-y-1">
+        <div v-for="[name, ver] in devDepEntries" :key="name" class="flex items-center gap-2 px-2 py-1 rounded text-[11px]" style="background: #F5F5F7;">
+          <span class="font-mono font-medium truncate" style="color: #1C1C1E;">{{ name }}</span>
+          <span class="font-mono ml-auto flex-shrink-0" style="color: #9CA3AF;">{{ ver }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <n-empty v-else description="无依赖信息" style="padding: 48px 0;" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({ data: { type: Object, default: null } })
+
+const depEntries = computed(() => props.data ? Object.entries(props.data.dependencies || {}) : [])
+const devDepEntries = computed(() => props.data ? Object.entries(props.data.devDependencies || {}) : [])
+</script>

package/packages/dashboard/src/composables/useDashboard.js

@@ -13,7 +13,12 @@ export function useDashboard() {
     logs: [],
     isPanelOpen: true,
     executingProject: null,
-    isLoading: true
+    isLoading: true,
+    activeTab: 'pipeline',
+    docs: { groups: [] },
+    selectedDocFile: null,
+    docContent: '',
+    docLoading: false
   })
 
   /**
@@ -21,13 +26,13 @@ export function useDashboard() {
    * @param {string} name - Project name
    * @returns {object|null} Project or null
    */
-  function getProject(name) {
-    return state.projects.find(p => p.name === name) || null
+  function getProject(path) {
+    return state.projects.find(p => p.path === path) || null
   }
 
   /**
    * Select a project as active
-   * @param {object|string} project - Project object or name
+   * @param {object|string} project - Project object or path
    */
   function selectProject(project) {
     const proj = typeof project === 'string'
@@ -38,6 +43,8 @@ export function useDashboard() {
       state.activeProject = proj
       state.activeStep = null
       state.logs = []
+      state.selectedDocFile = null
+      state.docContent = ''
 
       // Load initial logs from project state if available
       if (proj.state?.progress?.currentLogs) {
@@ -115,11 +122,38 @@ export function useDashboard() {
 
     // Restore active project if it still exists
     if (state.activeProject) {
-      const updated = getProject(state.activeProject.name)
+      const updated = getProject(state.activeProject.path)
       if (updated) {
         state.activeProject = updated
+        return
       }
     }
+
+    state.activeProject = state.projects[0] || null
+  }
+
+  /**
+   * Merge a single project update into the current project list.
+   * @param {object} project - Partial project payload containing at least path
+   */
+  function updateProject(project) {
+    if (!project?.path) return
+
+    const index = state.projects.findIndex(p => p.path === project.path)
+    if (index === -1) return
+
+    const updated = {
+      ...state.projects[index],
+      ...project,
+      state: project.state ?? state.projects[index].state,
+      overview: project.overview ?? state.projects[index].overview
+    }
+
+    state.projects.splice(index, 1, updated)
+
+    if (state.activeProject?.path === project.path) {
+      state.activeProject = updated
+    }
   }
 
   /**
@@ -141,6 +175,7 @@ export function useDashboard() {
 
   // Computed properties
   const activeProjectName = computed(() => state.activeProject?.name || null)
+  const activeProjectPath = computed(() => state.activeProject?.path || null)
   const activeProjectStage = computed(() => state.activeProject?.state?.currentStage || null)
   const hasProjects = computed(() => state.projects.length > 0)
   const activeProjectSteps = computed(() => {
@@ -161,11 +196,18 @@ export function useDashboard() {
     openPanel,
     closePanel,
     updateProjects,
+    updateProject,
     setExecuting,
     isExecuting,
     activeProjectName,
+    activeProjectPath,
     activeProjectStage,
     hasProjects,
-    activeProjectSteps
+    activeProjectSteps,
+  setActiveTab(tab) { state.activeTab = tab },
+  updateDocs(docs) { state.docs = docs },
+  selectDocFile(file) { state.selectedDocFile = file },
+  setDocContent(content) { state.docContent = content },
+  setDocLoading(loading) { state.docLoading = loading }
   }
 }

package/packages/dashboard/src/composables/useKeyboard.js

@@ -14,15 +14,17 @@ export function useKeyboard(options = {}) {
     onEnter = null,
     onArrowUp = null,
     onArrowDown = null,
-    disabled = false
+    disabled: initialDisabled = false
   } = options
 
+  let isDisabled = initialDisabled
+
   /**
    * Handle keyboard events
    * @param {KeyboardEvent} event
    */
   function handleKeyDown(event) {
-    if (disabled) return
+    if (isDisabled) return
 
     // Ignore if in input field
     const target = event.target
@@ -87,8 +89,8 @@ export function useKeyboard(options = {}) {
   })
 
   return {
-    disable: () => { disabled = true },
-    enable: () => { disabled = false }
+    disable: () => { isDisabled = true },
+    enable: () => { isDisabled = false }
   }
 }