sillyspec 3.20.2 → 3.20.4

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

@@ -1,137 +1,137 @@
-<template>
-  <div
-    :class="['flex flex-col transition-all duration-300', isOpen ? 'w-[340px]' : 'w-0 opacity-0 overflow-hidden']"
-    style="background: #F5F5F7;"
-  >
-    <!-- Header -->
-    <div class="px-4 py-3 flex items-center justify-between flex-shrink-0" style="border-bottom: 1px solid #F0F0F3;">
-      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ detailType ? detailTitle : '详情' }}</h2>
-      <n-button quaternary size="tiny" @click="handleClose">
-        <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="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </template>
-      </n-button>
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-y-auto">
-      <!-- Empty state -->
-      <n-empty v-if="!activeStep && !detailType" description="选择一个步骤" style="margin: auto; padding: 48px 0;" />
-
-      <!-- Detail views -->
-      <template v-if="detailType === 'git'">
-        <GitDetail :data="detailData" />
-      </template>
-      <template v-else-if="detailType === 'tech'">
-        <TechDetail :data="detailData" />
-      </template>
-      <template v-else-if="detailType === 'docs'">
-        <DocsDetail :data="detailData" @open-file="$emit('open-doc-file', $event)" />
-      </template>
-
-      <!-- Step detail (original) -->
-      <div v-else-if="activeStep">
-        <!-- Title -->
-        <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h3 class="text-[13px] font-semibold font-[JetBrains_Mono,monospace]" style="color: #D97706;">
-            {{ 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 #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">描述</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #636366;">{{ activeStep.description || activeStep.summary }}</p>
-        </div>
-
-        <!-- Conclusion -->
-        <div v-if="activeStep.conclusion" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">结论</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.conclusion }}</p>
-        </div>
-
-        <!-- Decision -->
-        <div v-if="activeStep.decision" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">决策</h4>
-          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.decision }}</p>
-        </div>
-
-        <!-- User Query -->
-        <div v-if="activeStep.userQuery" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">用户提问</h4>
-          <div class="px-3 py-2 rounded-md" style="background: #F5F5F7; border: 1px solid #F0F0F3;">
-            <p class="text-[11px] italic" style="color: #636366;">"{{ activeStep.userQuery }}"</p>
-          </div>
-        </div>
-
-        <!-- Metadata -->
-        <div v-if="activeStep.duration || activeStep.timestamp" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">元信息</h4>
-          <div class="space-y-1 text-[11px]" style="color: #6B7280;">
-            <div v-if="activeStep.duration"><span style="color: #636366;">耗时：</span> {{ activeStep.duration }}</div>
-            <div v-if="activeStep.timestamp"><span style="color: #636366;">时间：</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 #F0F0F3;">
-          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">输出</h4>
-          <n-code v-if="activeStep.output" :code="activeStep.output" language="text" word-wrap style="max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 4px; background: #F5F5F7;" />
-          <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: #6B7280;">
-              <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 #F0F0F3;">
-      <LogStream :logs="logs" @clear="$emit('clear-logs')" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import StageBadge from './StageBadge.vue'
-import LogStream from './LogStream.vue'
-import GitDetail from './detail/GitDetail.vue'
-import TechDetail from './detail/TechDetail.vue'
-import DocsDetail from './detail/DocsDetail.vue'
-
-const props = defineProps({
-  isOpen: { type: Boolean, default: true },
-  activeStep: { type: Object, default: null },
-  logs: { type: Array, default: () => [] },
-  detailType: { type: String, default: null },
-  detailData: { type: [Object, Array], default: null }
-})
-
-const emit = defineEmits(['close', 'clear-logs', 'open-doc-file'])
-
-const detailTitle = computed(() => {
-  if (props.detailType === 'git') return 'Git 详情'
-  if (props.detailType === 'tech') return '技术栈详情'
-  if (props.detailType === 'docs') return '文档列表'
-  return '详情'
-})
-
-function handleClose() {
-  emit('close')
-}
-
-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>
+<template>
+  <div
+    :class="['flex flex-col transition-all duration-300', isOpen ? 'w-[340px]' : 'w-0 opacity-0 overflow-hidden']"
+    style="background: #F5F5F7;"
+  >
+    <!-- Header -->
+    <div class="px-4 py-3 flex items-center justify-between flex-shrink-0" style="border-bottom: 1px solid #F0F0F3;">
+      <h2 class="text-[11px] font-semibold uppercase tracking-[0.2em] font-[JetBrains_Mono,monospace]" style="color: #6B7280;">{{ detailType ? detailTitle : '详情' }}</h2>
+      <n-button quaternary size="tiny" @click="handleClose">
+        <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="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </template>
+      </n-button>
+    </div>
+
+    <!-- Content -->
+    <div class="flex-1 overflow-y-auto">
+      <!-- Empty state -->
+      <n-empty v-if="!activeStep && !detailType" description="选择一个步骤" style="margin: auto; padding: 48px 0;" />
+
+      <!-- Detail views -->
+      <template v-if="detailType === 'git'">
+        <GitDetail :data="detailData" />
+      </template>
+      <template v-else-if="detailType === 'tech'">
+        <TechDetail :data="detailData" />
+      </template>
+      <template v-else-if="detailType === 'docs'">
+        <DocsDetail :data="detailData" @open-file="$emit('open-doc-file', $event)" />
+      </template>
+
+      <!-- Step detail (original) -->
+      <div v-else-if="activeStep">
+        <!-- Title -->
+        <div class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h3 class="text-[13px] font-semibold font-[JetBrains_Mono,monospace]" style="color: #D97706;">
+            {{ 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 #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">描述</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #636366;">{{ activeStep.description || activeStep.summary }}</p>
+        </div>
+
+        <!-- Conclusion -->
+        <div v-if="activeStep.conclusion" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">结论</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.conclusion }}</p>
+        </div>
+
+        <!-- Decision -->
+        <div v-if="activeStep.decision" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">决策</h4>
+          <p class="text-[11px] leading-relaxed" style="color: #1C1C1E;">{{ activeStep.decision }}</p>
+        </div>
+
+        <!-- User Query -->
+        <div v-if="activeStep.userQuery" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">用户提问</h4>
+          <div class="px-3 py-2 rounded-md" style="background: #F5F5F7; border: 1px solid #F0F0F3;">
+            <p class="text-[11px] italic" style="color: #636366;">"{{ activeStep.userQuery }}"</p>
+          </div>
+        </div>
+
+        <!-- Metadata -->
+        <div v-if="activeStep.duration || activeStep.timestamp" class="px-4 py-3" style="border-bottom: 1px solid #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">元信息</h4>
+          <div class="space-y-1 text-[11px]" style="color: #6B7280;">
+            <div v-if="activeStep.duration"><span style="color: #636366;">耗时：</span> {{ activeStep.duration }}</div>
+            <div v-if="activeStep.timestamp"><span style="color: #636366;">时间：</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 #F0F0F3;">
+          <h4 class="text-[9px] font-semibold uppercase tracking-[0.2em] mb-1.5 font-[JetBrains_Mono,monospace]" style="color: #6B7280;">输出</h4>
+          <n-code v-if="activeStep.output" :code="activeStep.output" language="text" word-wrap style="max-height: 300px; overflow-y: auto; padding: 8px; border-radius: 4px; background: #F5F5F7;" />
+          <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: #6B7280;">
+              <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 #F0F0F3;">
+      <LogStream :logs="logs" @clear="$emit('clear-logs')" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import StageBadge from './StageBadge.vue'
+import LogStream from './LogStream.vue'
+import GitDetail from './detail/GitDetail.vue'
+import TechDetail from './detail/TechDetail.vue'
+import DocsDetail from './detail/DocsDetail.vue'
+
+const props = defineProps({
+  isOpen: { type: Boolean, default: true },
+  activeStep: { type: Object, default: null },
+  logs: { type: Array, default: () => [] },
+  detailType: { type: String, default: null },
+  detailData: { type: [Object, Array], default: null }
+})
+
+const emit = defineEmits(['close', 'clear-logs', 'open-doc-file'])
+
+const detailTitle = computed(() => {
+  if (props.detailType === 'git') return 'Git 详情'
+  if (props.detailType === 'tech') return '技术栈详情'
+  if (props.detailType === 'docs') return '文档列表'
+  return '详情'
+})
+
+function handleClose() {
+  emit('close')
+}
+
+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

@@ -1,65 +1,65 @@
-<template>
-  <div class="flex flex-col h-full" style="background: #F5F5F7;">
-    <!-- Header -->
-    <div class="px-3 py-2 flex items-center gap-2" style="border-bottom: 1px solid #F0F0F3;">
-      <n-input v-model:value="searchQuery" size="tiny" placeholder="过滤日志..." clearable style="flex: 1;" />
-      <n-button size="tiny" @click="clearLogs">清空</n-button>
-      <n-button size="tiny" :type="autoScroll ? 'primary' : 'default'" @click="toggleAutoScroll">
-        {{ autoScroll ? '自动' : '暂停' }}
-      </n-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: #F0F0F3;" @scroll="handleScroll">
-      <div v-if="filteredLogs.length === 0" class="flex items-center justify-center h-full">
-        <span class="font-mono-log" style="color: #E5E5EA;">{{ logs.length === 0 ? '暂无日志' : '无匹配' }}</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: #D1D1D6;" 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 #F0F0F3; background: #F5F5F7; color: #D1D1D6;">
-      <span>{{ filteredLogs.length }}/{{ logs.length }}</span>
-      <span v-if="!autoScroll" style="color: #EA580C;">已暂停</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' ? '#DC2626' : t === 'warn' ? '#EA580C' : t === 'debug' ? '#6B7280' : '#636366' }
-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>
+<template>
+  <div class="flex flex-col h-full" style="background: #F5F5F7;">
+    <!-- Header -->
+    <div class="px-3 py-2 flex items-center gap-2" style="border-bottom: 1px solid #F0F0F3;">
+      <n-input v-model:value="searchQuery" size="tiny" placeholder="过滤日志..." clearable style="flex: 1;" />
+      <n-button size="tiny" @click="clearLogs">清空</n-button>
+      <n-button size="tiny" :type="autoScroll ? 'primary' : 'default'" @click="toggleAutoScroll">
+        {{ autoScroll ? '自动' : '暂停' }}
+      </n-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: #F0F0F3;" @scroll="handleScroll">
+      <div v-if="filteredLogs.length === 0" class="flex items-center justify-center h-full">
+        <span class="font-mono-log" style="color: #E5E5EA;">{{ logs.length === 0 ? '暂无日志' : '无匹配' }}</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: #D1D1D6;" 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 #F0F0F3; background: #F5F5F7; color: #D1D1D6;">
+      <span>{{ filteredLogs.length }}/{{ logs.length }}</span>
+      <span v-if="!autoScroll" style="color: #EA580C;">已暂停</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' ? '#DC2626' : t === 'warn' ? '#EA580C' : t === 'debug' ? '#6B7280' : '#636366' }
+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

@@ -1,95 +1,95 @@
-<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 ? '#D97706' : '#1C1C1E' }"
-          >
-            {{ title }}
-          </span>
-          <StageBadge :status="status" />
-        </div>
-
-        <!-- Steps -->
-        <div v-if="status === 'stale' && staleReason" class="mb-2 text-[10px] italic" style="color: #CA8A04;">
-          ⚠️ {{ staleReason }}
-          <span v-if="name === 'archive'">（已有归档文件保留但不再可信）</span>
-        </div>
-        <div v-if="status === 'revising' && revisionInfo" class="mb-2 text-[10px]" style="color: #7C3AED;">
-          🔧 {{ revisionInfo }}
-        </div>
-        <div class="space-y-1">
-          <div v-if="steps.length === 0" class="text-[11px] italic py-1" style="color: #6B7280;">
-            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 },
-  staleReason: { type: String, default: '' },
-  revision: { type: Number, default: 0 },
-  reopenedFromStep: { type: String, default: '' },
-})
-
-const emit = defineEmits(['select-step'])
-
-const revisionInfo = computed(() => {
-  if (!props.revision) return ''
-  const parts = [`revision ${props.revision}`]
-  if (props.reopenedFromStep) parts.push(`from: ${props.reopenedFromStep}`)
-  return parts.join(', ')
-})
-
-const nodeStyle = computed(() => {
-  if (props.isActive) return { background: '#D97706', boxShadow: '0 0 8px rgba(251,191,36,0.4)' }
-  const colors = {
-    'completed': '#16A34A',
-    'in-progress': '#D97706',
-    'blocked': '#EA580C',
-    'failed': '#DC2626',
-    'pending': '#E5E5EA',
-    'revising': '#7C3AED',
-    'stale': '#CA8A04',
-    'waiting': '#2563EB',
-  }
-  return { background: colors[props.status] || colors.pending }
-})
-
-function isActiveStep(step) {
-  return props.activeStep?.id === step.id || props.activeStep?.name === step.name
-}
-</script>
+<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 ? '#D97706' : '#1C1C1E' }"
+          >
+            {{ title }}
+          </span>
+          <StageBadge :status="status" />
+        </div>
+
+        <!-- Steps -->
+        <div v-if="status === 'stale' && staleReason" class="mb-2 text-[10px] italic" style="color: #CA8A04;">
+          ⚠️ {{ staleReason }}
+          <span v-if="name === 'archive'">（已有归档文件保留但不再可信）</span>
+        </div>
+        <div v-if="status === 'revising' && revisionInfo" class="mb-2 text-[10px]" style="color: #7C3AED;">
+          🔧 {{ revisionInfo }}
+        </div>
+        <div class="space-y-1">
+          <div v-if="steps.length === 0" class="text-[11px] italic py-1" style="color: #6B7280;">
+            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 },
+  staleReason: { type: String, default: '' },
+  revision: { type: Number, default: 0 },
+  reopenedFromStep: { type: String, default: '' },
+})
+
+const emit = defineEmits(['select-step'])
+
+const revisionInfo = computed(() => {
+  if (!props.revision) return ''
+  const parts = [`revision ${props.revision}`]
+  if (props.reopenedFromStep) parts.push(`from: ${props.reopenedFromStep}`)
+  return parts.join(', ')
+})
+
+const nodeStyle = computed(() => {
+  if (props.isActive) return { background: '#D97706', boxShadow: '0 0 8px rgba(251,191,36,0.4)' }
+  const colors = {
+    'completed': '#16A34A',
+    'in-progress': '#D97706',
+    'blocked': '#EA580C',
+    'failed': '#DC2626',
+    'pending': '#E5E5EA',
+    'revising': '#7C3AED',
+    'stale': '#CA8A04',
+    'waiting': '#2563EB',
+  }
+  return { background: colors[props.status] || colors.pending }
+})
+
+function isActiveStep(step) {
+  return props.activeStep?.id === step.id || props.activeStep?.name === step.name
+}
+</script>