sillyspec 3.9.1 → 3.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/.claude/skills/sillyspec-commit/SKILL.md +1 -1
  2. package/.claude/skills/sillyspec-continue/SKILL.md +1 -1
  3. package/.claude/skills/sillyspec-explore/SKILL.md +9 -0
  4. package/.claude/skills/sillyspec-plan/SKILL.md +0 -35
  5. package/.claude/skills/sillyspec-workspace/SKILL.md +1 -1
  6. package/README.md +7 -6
  7. package/SKILL.md +15 -10
  8. package/package.json +1 -1
  9. package/packages/dashboard/dist/assets/index-BcM2J-hv.css +1 -0
  10. package/packages/dashboard/dist/assets/{index-RsLVPAy7.js → index-DpLHK4jv.js} +974 -974
  11. package/packages/dashboard/dist/index.html +16 -17
  12. package/packages/dashboard/dist/prototype-dashboard.html +836 -0
  13. package/packages/dashboard/dist/prototype-overview.html +256 -0
  14. package/packages/dashboard/public/prototype-dashboard.html +836 -0
  15. package/packages/dashboard/public/prototype-overview.html +256 -0
  16. package/packages/dashboard/server/index.js +18 -13
  17. package/packages/dashboard/server/parser.js +109 -1
  18. package/packages/dashboard/server/watcher.js +14 -6
  19. package/packages/dashboard/src/App.vue +414 -186
  20. package/packages/dashboard/src/components/ActionBar.vue +10 -1
  21. package/packages/dashboard/src/components/CommandPalette.vue +5 -1
  22. package/packages/dashboard/src/components/DocPreview.vue +105 -8
  23. package/packages/dashboard/src/components/DocTree.vue +75 -19
  24. package/packages/dashboard/src/components/HResizeHandle.vue +48 -0
  25. package/packages/dashboard/src/components/PipelineView.vue +23 -4
  26. package/packages/dashboard/src/components/ProjectCard.vue +187 -0
  27. package/packages/dashboard/src/components/ProjectOverview.vue +113 -139
  28. package/packages/dashboard/src/components/VResizeHandle.vue +61 -0
  29. package/packages/dashboard/src/composables/useDashboard.js +28 -0
  30. package/packages/dashboard/src/composables/useLayout.js +131 -0
  31. package/src/index.js +7 -0
  32. package/src/init.js +17 -10
  33. package/src/migrate.js +5 -5
  34. package/src/progress.js +2 -1
  35. package/src/run.js +72 -61
  36. package/src/stages/brainstorm.js +28 -3
  37. package/src/stages/execute.js +52 -27
  38. package/src/stages/explore.js +34 -0
  39. package/src/stages/index.js +3 -1
  40. package/src/stages/plan.js +86 -14
  41. package/src/stages/scan.js +11 -11
  42. package/src/stages/status.js +1 -1
  43. package/.sillyspec/changes/archive/2026-04-08-derive-state/design.md +0 -97
  44. package/.sillyspec/changes/archive/2026-04-08-derive-state/plan.md +0 -51
  45. package/.sillyspec/changes/archive/2026-04-08-derive-state/proposal.md +0 -29
  46. package/.sillyspec/changes/archive/2026-04-08-derive-state/requirements.md +0 -34
  47. package/.sillyspec/changes/archive/2026-04-08-derive-state/tasks.md +0 -13
  48. package/.sillyspec/changes/archive/2026-04-08-derive-state/verify-result.md +0 -43
  49. package/.sillyspec/changes/auto-mode/design.md +0 -50
  50. package/.sillyspec/changes/auto-mode/proposal.md +0 -19
  51. package/.sillyspec/changes/auto-mode/requirements.md +0 -21
  52. package/.sillyspec/changes/auto-mode/tasks.md +0 -7
  53. package/.sillyspec/changes/brainstorm-archive/2026-04-05-dashboard-design.md +0 -206
  54. package/.sillyspec/changes/brainstorm-archive/2026-04-05-unified-docs-design.md +0 -199
  55. package/.sillyspec/changes/dashboard/design.md +0 -219
  56. package/.sillyspec/changes/dashboard/design.md.braindraft +0 -206
  57. package/.sillyspec/changes/run-command-design/design.md +0 -1230
  58. package/.sillyspec/changes/unified-docs-design/design.md +0 -199
  59. package/.sillyspec/docs/sillyspec/scan/.gitkeep +0 -0
  60. package/.sillyspec/knowledge/INDEX.md +0 -8
  61. package/.sillyspec/knowledge/uncategorized.md +0 -3
  62. package/.sillyspec/plans/2026-04-05-dashboard.md +0 -737
  63. package/.sillyspec/projects/sillyspec.yaml +0 -3
  64. package/packages/dashboard/dist/assets/index-CntACGUN.css +0 -1
@@ -1,199 +0,0 @@
1
- # 统一文档管理 + Dashboard 文档浏览
2
-
3
- ## 动机
4
-
5
- ### 现状问题
6
- 1. 文档散落在各子项目的 `.sillyspec/` 里,没有统一视角
7
- 2. Dashboard 只能发现项目,看不到文档内容
8
- 3. 扫描的 `codebase/` 文档只在子项目里,主项目看不到
9
- 4. 归档后文档沉入 `knowledge/`,跨项目复用不方便
10
- 5. 单项目模式和工作区模式两套逻辑,维护成本高
11
-
12
- ### 目标
13
- - 文档只写一份,集中管理
14
- - 默认工作区模式,去掉模式切换
15
- - Dashboard 支持文档浏览
16
- - 子项目保持干净(只有源代码)
17
-
18
- ## 方案
19
-
20
- ### 核心原则
21
- - **文档只写一份**,在哪执行就写在哪
22
- - **默认工作区模式**,每个项目天生就是"主项目"
23
- - **子项目不生成文档**,文档全部在主项目的 `.sillyspec/docs/<project>/` 下
24
-
25
- ### 目录结构
26
-
27
- ```
28
- my-project/.sillyspec/
29
- ├── STATE.md # 主项目状态(含当前操作的项目)
30
- ├── projects/ # 子项目注册表
31
- │ ├── my-project.yaml # 默认注册自己
32
- │ ├── frontend.yaml # { name, path, status }
33
- │ └── backend.yaml
34
-
35
- ├── docs/ # 统一文档中心
36
- │ └── my-project/ # 按子项目分目录
37
- │ ├── scan/ # scan 产出
38
- │ │ ├── ARCHITECTURE.md
39
- │ │ └── CONVENTIONS.md
40
- │ ├── brainstorm/ # brainstorm 设计文档
41
- │ │ └── 2026-04-05-user-auth.md
42
- │ ├── plan/ # plan 产出
43
- │ │ └── 2026-04-05-user-auth.md
44
- │ ├── changes/ # 当前变更(WIP)
45
- │ │ └── user-auth/
46
- │ │ ├── design.md
47
- │ │ └── tasks.md
48
- │ ├── archive/ # 归档
49
- │ │ └── 2026-03-20-db-redesign.md
50
- │ └── quicklog/ # quick 操作记录
51
- │ └── 2026-04-05-fix-login.md
52
-
53
- ├── knowledge/ # 跨项目共享知识库(不变)
54
- └── .runtime/
55
- └── progress.json # 运行时数据(含子项目维度)
56
- ```
57
-
58
- ### 子项目保持干净
59
-
60
- ```
61
- frontend/ # 只有源代码
62
- ├── src/
63
- ├── package.json
64
- └── .gitignore
65
- ```
66
-
67
- 子项目不再有 `.sillyspec/` 目录。
68
-
69
- ## 命令变更
70
-
71
- ### --project 参数
72
-
73
- 所有产生文档的命令支持 `--project <name>` 参数:
74
-
75
- ```bash
76
- /sillyspec:scan --project frontend
77
- /sillyspec:brainstorm "用户认证" --project frontend
78
- /sillyspec:plan --project frontend
79
- /sillyspec:execute --project frontend
80
- /sillyspec:archive --project frontend
81
- /sillyspec:quick --project frontend --change "修复登录bug"
82
- ```
83
-
84
- 不指定 `--project` 时,默认使用 `STATE.md` 中记录的当前项目。
85
-
86
- ### 文档输出路径映射
87
-
88
- | 命令 | 输出路径 |
89
- |------|---------|
90
- | scan | `.sillyspec/docs/<project>/scan/` |
91
- | brainstorm | `.sillyspec/docs/<project>/brainstorm/<name>.md` |
92
- | propose | `.sillyspec/docs/<project>/brainstorm/<name>.md` |
93
- | plan | `.sillyspec/docs/<project>/plan/<name>.md` |
94
- | execute | `.sillyspec/docs/<project>/changes/<name>/` (WIP) |
95
- | archive | `.sillyspec/docs/<project>/archive/<name>.md` |
96
- | quick | `.sillyspec/docs/<project>/quicklog/<name>.md` |
97
-
98
- ### init 变更
99
-
100
- - `sillyspec init` 初始化时,`projects/` 默认注册当前目录自己
101
- - 去掉 `--workspace` 参数(默认就是工作区模式)
102
- - 去掉 `--interactive` 参数(默认零交互)
103
-
104
- ### STATE.md 变更
105
-
106
- ```markdown
107
- # 项目状态
108
-
109
- ## 当前项目
110
- - 名称:frontend
111
- - 路径:./frontend
112
-
113
- ## 当前变更
114
- - 名称:user-auth
115
- - 当前阶段:execute ⏳
116
- - 下一步:执行任务 3/8
117
- ```
118
-
119
- ### progress.json 变更
120
-
121
- 增加子项目维度:
122
-
123
- ```json
124
- {
125
- "_version": 1,
126
- "schemaVersion": "1.0",
127
- "currentProject": "frontend",
128
- "currentStage": "execute",
129
- "stages": {
130
- "brainstorm": { "status": "completed", "steps": [...] },
131
- "plan": { "status": "completed", "steps": [...] },
132
- "execute": { "status": "in-progress", "steps": [...] },
133
- "verify": { "status": "pending", "steps": [] }
134
- }
135
- }
136
- ```
137
-
138
- ## Dashboard 文档浏览
139
-
140
- ### 新增文档 Tab
141
-
142
- 选中项目后,中间区域顶部增加 Tab 切换:
143
-
144
- ```
145
- [ 流水线 ] [ 文档 ]
146
- ```
147
-
148
- ### 文档 Tab 内容
149
-
150
- 左侧:文档树(按类型分组)
151
-
152
- ```
153
- 📋 设计文档
154
- 📄 用户认证功能设计
155
-
156
- 📐 实现计划
157
- 📄 用户认证功能计划
158
-
159
- ⚙️ 当前变更
160
- 📄 design.md
161
- 📄 tasks.md
162
-
163
- 📦 已归档
164
- 📄 数据库重设计
165
-
166
- 🔍 架构文档
167
- 📄 ARCHITECTURE.md
168
- 📄 CONVENTIONS.md
169
-
170
- ⚡ 快速修复
171
- 📄 修复登录bug
172
- ```
173
-
174
- 右侧:文档预览(Markdown 渲染)
175
-
176
- 点击左侧文档,右侧显示内容。
177
-
178
- ### 后端新增 API
179
-
180
- ```
181
- GET /api/projects/:path/docs # 获取项目文档树
182
- GET /api/projects/:path/docs/:filePath # 获取文档内容
183
- ```
184
-
185
- ## 兼容性
186
-
187
- - 旧项目 `.sillyspec/codebase/`、`.sillyspec/specs/` 不受影响,只是新文档不再往那写
188
- - 可加 `sillyspec docs migrate` 命令把旧文档迁移到新结构
189
- - Dashboard 的项目发现逻辑不变(扫描 `.sillyspec` 目录)
190
-
191
- ## 验收标准
192
-
193
- 1. `sillyspec init` 生成 `projects/` 和 `docs/` 结构
194
- 2. `--project` 参数在所有命令中生效
195
- 3. 文档输出到 `.sillyspec/docs/<project>/` 对应子目录
196
- 4. 子项目目录不生成任何 `.sillyspec` 文件
197
- 5. Dashboard 文档 Tab 能展示文档树和预览内容
198
- 6. 旧项目不受影响
199
- 7. `sillyspec docs migrate` 能迁移旧文档
@@ -1,219 +0,0 @@
1
- # SillySpec Dashboard — 技术方案
2
-
3
- ## 架构决策
4
-
5
- | 决策 | 选择 | 理由 |
6
- |---|---|---|
7
- | 前端框架 | Vue 3 + Vite | 轻量、打包快、SillySpec 用户已有 Node.js |
8
- | CSS | Tailwind CSS | 原子化、深色主题变量管理方便 |
9
- | 后端 | Node.js 原生 http + ws | 不引入 Express,零重依赖 |
10
- | 文件监听 | chokidar | 跨平台、成熟稳定 |
11
- | 数据库 | 无 | 纯文件系统,与 SillySpec 哲学一致 |
12
- | 包结构 | SillySpec 子包 packages/dashboard | 独立 package.json,可单独开发 |
13
-
14
- ## 文件变更清单
15
-
16
- ### 新增文件
17
-
18
- | 文件 | 说明 |
19
- |---|---|
20
- | `packages/dashboard/package.json` | 子包配置,依赖 vue/vite/tailwind/chokidar/ws |
21
- | `packages/dashboard/vite.config.js` | Vite 构建配置,构建产物输出到 dist/ |
22
- | `packages/dashboard/server/index.js` | HTTP + WebSocket 服务启动入口 |
23
- | `packages/dashboard/server/watcher.js` | chokidar 监听 .sillyspec/,解析文件变化,emit 事件 |
24
- | `packages/dashboard/server/api.js` | REST 路由:GET /api/projects, GET /api/project/:name/status |
25
- | `packages/dashboard/server/executor.js` | CLI 命令执行器(child_process.spawn + stdout 流式推送) |
26
- | `packages/dashboard/src/main.js` | Vue 应用入口 |
27
- | `packages/dashboard/src/App.vue` | 根组件,三栏布局 |
28
- | `packages/dashboard/src/components/ProjectList.vue` | 左栏项目列表 |
29
- | `packages/dashboard/src/components/PipelineView.vue` | 中栏阶段 pipeline + 时间线 |
30
- | `packages/dashboard/src/components/StepCard.vue` | 步骤卡片(三级信息密度) |
31
- | `packages/dashboard/src/components/DetailPanel.vue` | 右栏详情 + 日志 |
32
- | `packages/dashboard/src/components/LogStream.vue` | 终端风格日志流(等宽字体、语法高亮、搜索过滤) |
33
- | `packages/dashboard/src/components/CommandPalette.vue` | Cmd+K 命令面板 |
34
- | `packages/dashboard/src/components/StageBadge.vue` | 阶段状态标签组件 |
35
- | `packages/dashboard/src/components/ActionBar.vue` | CLI 操作按钮(下一步、阶段切换) |
36
- | `packages/dashboard/src/composables/useWebSocket.js` | WebSocket 连接管理(自动重连、心跳) |
37
- | `packages/dashboard/src/composables/useKeyboard.js` | 全局键盘快捷键 |
38
- | `packages/dashboard/src/styles/theme.css` | CSS 变量(配色、间距、动效) |
39
- | `packages/dashboard/index.html` | Vite HTML 入口 |
40
- | `packages/dashboard/tailwind.config.js` | Tailwind 配置(自定义颜色) |
41
-
42
- ### 修改文件
43
-
44
- | 文件 | 变更 |
45
- |---|---|
46
- | `src/index.js` | 新增 `dashboard` 命令分支 |
47
- | `package.json` | workspace 引用 packages/dashboard |
48
-
49
- ## 数据模型
50
-
51
- ### 前端状态(composable/store)
52
-
53
- ```javascript
54
- {
55
- projects: [
56
- {
57
- name: 'my-project',
58
- path: '/Users/x/my-project',
59
- currentStage: 'plan',
60
- stages: {
61
- brainstorm: { status: 'completed', steps: 10, completedSteps: 10, duration: '25min' },
62
- plan: { status: 'in-progress', steps: 5, completedSteps: 2, duration: '8min' },
63
- execute: { status: 'pending', steps: 0, completedSteps: 0 },
64
- verify: { status: 'pending', steps: 0, completedSteps: 0 }
65
- },
66
- lastActive: '2026-04-05T14:30:00Z'
67
- }
68
- ],
69
- activeProject: 'my-project', // 当前选中
70
- activeStep: 3, // 当前选中步骤
71
- logs: [], // 实时日志行
72
- isPanelOpen: true // 右侧面板是否展开
73
- }
74
- ```
75
-
76
- ### WebSocket 消息协议
77
-
78
- ```javascript
79
- // 服务端 → 客户端
80
- { type: 'project:updated', project: { name, stages, currentStage } }
81
- { type: 'step:updated', project: 'name', step: { id, status, summary } }
82
- { type: 'log:append', project: 'name', lines: ['> analyzing...', '> done ✅'] }
83
- { type: 'cli:output', project: 'name', data: 'stdout/stderr 流' }
84
- { type: 'cli:complete', project: 'name', exitCode: 0 }
85
-
86
- // 客户端 → 服务端
87
- { type: 'cli:execute', project: 'name', command: 'sillyspec next' }
88
- { type: 'project:select', name: 'my-project' }
89
- ```
90
-
91
- ### REST API
92
-
93
- ```
94
- GET /api/projects → 项目列表(扫描用户目录下的 .sillyspec/)
95
- GET /api/project/:name → 项目完整状态(STATE.md + progress.json 合并)
96
- GET /api/project/:name/logs → 最近日志(user-inputs.md)
97
- ```
98
-
99
- ## 关键组件实现
100
-
101
- ### StepCard.vue — 三级信息密度
102
-
103
- ```vue
104
- <template>
105
- <div class="step-card" :class="[statusClass]"
106
- @mouseenter="hovered = true" @mouseleave="hovered = false"
107
- @click="select">
108
- <!-- 低密度:始终显示 -->
109
- <div class="step-header">
110
- <span class="step-icon">{{ icon }}</span>
111
- <span class="step-title">{{ step.title }}</span>
112
- </div>
113
-
114
- <!-- 中密度:hover 显示 -->
115
- <transition name="fade">
116
- <div v-if="hovered && step.summary?.conclusion" class="step-summary">
117
- {{ step.summary.conclusion }}
118
- </div>
119
- </transition>
120
-
121
- <!-- 高密度:点击后在右侧 DetailPanel 展示 -->
122
- </div>
123
- </template>
124
- ```
125
-
126
- ### LogStream.vue — 终端风格日志
127
-
128
- - 等宽字体(JetBrains Mono / monospace)
129
- - 新行淡入动画(CSS transition opacity)
130
- - 搜索过滤:顶部搜索框,实时过滤匹配行
131
- - 自动滚动到底部,用户上翻时暂停自动滚动
132
- - ANSI 颜色码支持(使用 ansi-to-html)
133
-
134
- ### CommandPalette.vue
135
-
136
- - `Cmd/Ctrl+K` 打开,`Escape` 关闭
137
- - 模糊搜索项目名、阶段名
138
- - 选中后跳转视图
139
- - 参考 shadcn/ui 的 Command 组件风格
140
-
141
- ## CLI 集成
142
-
143
- ### src/index.js 新增命令
144
-
145
- ```javascript
146
- // 在现有 commander 配置中新增
147
- program
148
- .command('dashboard')
149
- .description('启动可视化仪表盘')
150
- .option('--port <number>', '端口号', 3456)
151
- .option('--no-open', '不自动打开浏览器')
152
- .action(async (options) => {
153
- const { startServer } = await import('../packages/dashboard/server/index.js');
154
- await startServer(options);
155
- });
156
- ```
157
-
158
- ### server/index.js 启动流程
159
-
160
- ```javascript
161
- async function startServer({ port = 3456, open = true }) {
162
- // 1. 启动 HTTP 服务,serve 前端静态文件
163
- const server = http.createServer(handler);
164
-
165
- // 2. 挂载 WebSocket
166
- const wss = new WebSocketServer({ server });
167
-
168
- // 3. 启动文件监听
169
- const watcher = new ProjectWatcher();
170
- watcher.on('change', (event) => wss.broadcast(event));
171
-
172
- // 4. 启动服务
173
- server.listen(port, () => {
174
- console.log(`🚀 SillySpec Dashboard: http://localhost:${port}`);
175
- if (open) openBrowser(`http://localhost:${port}`);
176
- });
177
- }
178
- ```
179
-
180
- ## 项目发现机制
181
-
182
- 扫描用户常用项目目录,查找包含 `.sillyspec/` 的目录:
183
-
184
- ```javascript
185
- // 优先级:
186
- // 1. 当前工作目录
187
- // 2. HOME 目录下第一层子目录
188
- // 3. 用户可通过设置文件配置额外路径 ~/.sillyspec/dashboard.json
189
- ```
190
-
191
- ## 构建与发布
192
-
193
- ### 开发模式
194
-
195
- ```bash
196
- cd packages/dashboard
197
- npm run dev # Vite dev server + 后端热重载
198
- ```
199
-
200
- ### 生产构建
201
-
202
- ```bash
203
- cd packages/dashboard
204
- npm run build # Vite 构建 → dist/
205
- ```
206
-
207
- 前端构建产物(dist/)嵌入 npm 包,`sillyspec dashboard` 启动时 serve 静态文件。
208
-
209
- ### 发布
210
-
211
- 作为 SillySpec 的子包,跟随主包版本一起发布。不需要独立版本号。
212
-
213
- ## 代码风格参照
214
-
215
- - Vue 3 Composition API(`<script setup>`)
216
- - Tailwind CSS utility-first
217
- - 组件命名:PascalCase
218
- - composable 命名:use 前缀
219
- - 不使用 Vuex/Pinia,composable 管理状态即可(项目规模不需要)
@@ -1,206 +0,0 @@
1
- # SillySpec Dashboard 设计
2
-
3
- ## 概述
4
-
5
- 为 SillySpec CLI 工具添加可视化仪表盘(`sillyspec dashboard`),用户通过浏览器直观查看和管理项目进度、阶段流程、任务详情和实时日志。
6
-
7
- ## 目标用户
8
-
9
- SillySpec 全部用户(官方功能,随 npm 包发布)。
10
-
11
- ## 分期计划
12
-
13
- ### 一期(MVP)
14
-
15
- 可视化仪表盘 + CLI 命令执行 + 实时日志流。
16
-
17
- ### 二期(进阶)
18
-
19
- Web Terminal(xterm.js)+ 自定义命令 + AI 交互(视需求而定)。
20
-
21
- ## 架构
22
-
23
- ```
24
- sillyspec dashboard
25
-
26
-
27
- Node.js HTTP Server (localhost:3456)
28
-
29
- ├─ chokidar: watch .sillyspec/ 目录
30
- ├─ WebSocket: 实时推送状态变更
31
- └─ REST API: 项目列表、状态、日志、CLI 执行
32
-
33
-
34
- Vue 3 SPA (浏览器)
35
- ```
36
-
37
- ### 文件结构
38
-
39
- ```
40
- sillyspec/packages/dashboard/
41
- ├── server/
42
- │ ├── index.js # HTTP + WebSocket 服务启动
43
- │ ├── watcher.js # chokidar 文件监听 + 增量解析
44
- │ └── api.js # REST 路由
45
- ├── src/
46
- │ ├── App.vue
47
- │ ├── components/
48
- │ │ ├── ProjectList.vue # 左栏:项目列表
49
- │ │ ├── PipelineView.vue # 中栏:阶段 pipeline
50
- │ │ ├── StepCard.vue # 步骤卡片(可展开折叠)
51
- │ │ ├── DetailPanel.vue # 右栏:详情 + 日志
52
- │ │ ├── LogStream.vue # 终端风格日志流
53
- │ │ ├── CommandPalette.vue # Cmd+K 命令面板
54
- │ │ └── StageBadge.vue # 阶段状态标签
55
- │ ├── composables/
56
- │ │ ├── useWebSocket.js # WebSocket 连接管理
57
- │ │ └── useKeyboard.js # 键盘快捷键
58
- │ └── styles/
59
- │ └── theme.css # 深色主题变量
60
- ├── package.json
61
- └── vite.config.js
62
- ```
63
-
64
- ## 核心页面设计
65
-
66
- ### 三栏布局
67
-
68
- ```
69
- ┌──────────┬─────────────────────────┬──────────────────┐
70
- │ 项目列表 │ Pipeline 视图(中) │ 详情+日志(右) │
71
- │ (200px) │ (flex-1) │ (320px,可收起) │
72
- │ │ │ │
73
- │ 📁 proj1 │ ✅ brainstorm │ Step 3 详情 │
74
- │ 📁 proj2 │ ⏳ plan ← 当前 │ 结论:选择React │
75
- │ 📁 proj3 │ ⬜ execute │ 决策:... │
76
- │ │ ⬜ verify │ 📋 实时日志 │
77
- └──────────┴─────────────────────────┴──────────────────┘
78
- ```
79
-
80
- ### 信息分层(三级密度)
81
-
82
- 1. **低密度(默认)**:阶段名 + 状态图标
83
- 2. **中密度(hover)**:步骤摘要(1-2 句话)
84
- 3. **高密度(点击)**:右侧面板展开完整详情 + 日志
85
-
86
- ### 异常高亮
87
-
88
- 失败/阻塞/超时步骤自动标红,视觉上突出,不需用户手动查找。
89
-
90
- ## 数据源与同步
91
-
92
- ### 数据文件
93
-
94
- | 文件 | 用途 |
95
- |---|---|
96
- | `STATE.md` | 当前阶段、状态、下一步命令 |
97
- | `.runtime/progress.json` | 步骤进度、摘要、时间戳 |
98
- | `.runtime/user-inputs.md` | 用户输入记录 |
99
- | `specs/*.md` | 设计文档 |
100
- | `changes/*/design.md` | 技术方案 |
101
-
102
- ### 同步方案
103
-
104
- - **启动时**:全量读取 `.sillyspec/` 目录,构建初始状态
105
- - **运行时**:chokidar watch 文件变化 → 解析 → WebSocket 增量推送
106
- - **不轮询,不做 diff**,文件变化直接读取推送
107
-
108
- ### CLI 命令执行(一期)
109
-
110
- 后端通过 `child_process.spawn` 执行 CLI 命令:
111
- - "下一步"按钮 → `sillyspec next`
112
- - 阶段切换按钮 → `sillyspec plan` / `sillyspec execute` 等
113
- - 执行结果通过 WebSocket 实时推送到前端日志面板
114
-
115
- ## 交互设计
116
-
117
- ### 键盘快捷键
118
-
119
- | 快捷键 | 功能 |
120
- |---|---|
121
- | `j/k` | 上下切换步骤 |
122
- | `Enter` | 展开详情 |
123
- | `Escape` | 收起面板 |
124
- | `/` | 搜索日志 |
125
- | `Cmd/Ctrl+K` | 命令面板 |
126
-
127
- ### 命令面板功能
128
-
129
- - 搜索项目名
130
- - 跳转到指定阶段
131
- - 切换深色/浅色主题
132
-
133
- ### CLI 命令
134
-
135
- ```bash
136
- sillyspec dashboard # 启动 + 自动开浏览器
137
- sillyspec dashboard --port 8080 # 自定义端口
138
- sillyspec dashboard --no-open # 不自动打开浏览器
139
- ```
140
-
141
- ## 视觉设计
142
-
143
- ### 配色
144
-
145
- | 用途 | 色值 |
146
- |---|---|
147
- | 背景 | `#0D1117` |
148
- | 主色(进行中) | `#00D4AA` |
149
- | 阻塞 | `#F59E0B` |
150
- | 失败 | `#F87171` |
151
- | 未开始 | `#6B7280` |
152
-
153
- ### 动效
154
-
155
- - 阶段完成:脉冲光效(CSS animation,200ms)
156
- - 日志新行:淡入
157
- - hover 过渡:100ms
158
- - 进度条:弹性缓动
159
-
160
- ## 技术选型
161
-
162
- | 层 | 技术 |
163
- |---|---|
164
- | 前端框架 | Vue 3 |
165
- | 构建工具 | Vite |
166
- | CSS | Tailwind CSS |
167
- | 后端 | Node.js 原生 http + ws |
168
- | 文件监听 | chokidar |
169
- | 数据库 | 无,纯文件系统 |
170
-
171
- ## 约束和假设
172
-
173
- - 用户本地已有 Node.js(SillySpec 前置依赖)
174
- - 仪表盘为本地工具,不考虑多用户并发
175
- - 前端构建产物嵌入 npm 包,无需额外 build
176
- - 不引入 Express、数据库等重依赖
177
-
178
- ## 状态历史时间线
179
-
180
- Pipeline 视图下方展示时间线,记录每个步骤的:
181
- - 开始时间 / 结束时间 / 耗时
182
- - 状态变化(进行中 → 完成/阻塞/失败)
183
- - 可按时间排序,快速定位耗时最长或异常步骤
184
-
185
- 数据来源:`progress.json` 中的 `summaries` 和时间戳。
186
-
187
- ## 不在范围内(一期)
188
-
189
- - 用户认证/权限
190
- - 多人协作
191
- - 数据持久化(纯文件系统)
192
- - AI 对话交互(二期)
193
- - Web Terminal(二期)
194
-
195
- ## 验收标准
196
-
197
- - [ ] `sillyspec dashboard` 一键启动,自动打开浏览器
198
- - [ ] 三栏布局正确渲染,响应式适配
199
- - [ ] 文件变化后前端实时更新(<1s 延迟)
200
- - [ ] 步骤卡片三级信息分层(默认/hover/点击)
201
- - [ ] 实时日志流正常显示,可搜索可过滤
202
- - [ ] 键盘快捷键可用(j/k/Enter/Escape/Cmd+K)
203
- - [ ] 命令面板可搜索项目名和阶段
204
- - [ ] CLI 命令执行按钮可用,结果实时显示
205
- - [ ] 异常步骤自动高亮
206
- - [ ] 深色/浅色主题切换