viepilot 1.14.0 → 2.4.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 (58) hide show
  1. package/CHANGELOG.md +191 -0
  2. package/README.md +27 -17
  3. package/bin/viepilot.cjs +19 -9
  4. package/bin/vp-tools.cjs +193 -0
  5. package/docs/user/features/adapters.md +74 -0
  6. package/docs/user/features/hooks.md +93 -0
  7. package/lib/adapters/antigravity.cjs +33 -0
  8. package/lib/adapters/claude-code.cjs +42 -0
  9. package/lib/adapters/codex.cjs +34 -0
  10. package/lib/adapters/cursor.cjs +32 -0
  11. package/lib/adapters/index.cjs +28 -0
  12. package/lib/hooks/brainstorm-staleness.cjs +231 -0
  13. package/lib/viepilot-config.cjs +103 -0
  14. package/lib/viepilot-install.cjs +125 -152
  15. package/package.json +1 -3
  16. package/skills/vp-audit/SKILL.md +23 -23
  17. package/skills/vp-auto/SKILL.md +23 -9
  18. package/skills/vp-brainstorm/SKILL.md +44 -38
  19. package/skills/vp-crystallize/SKILL.md +25 -19
  20. package/skills/vp-debug/SKILL.md +4 -4
  21. package/skills/vp-docs/SKILL.md +8 -8
  22. package/skills/vp-evolve/SKILL.md +26 -13
  23. package/skills/vp-info/SKILL.md +24 -24
  24. package/skills/vp-pause/SKILL.md +7 -7
  25. package/skills/vp-request/SKILL.md +14 -14
  26. package/skills/vp-resume/SKILL.md +6 -6
  27. package/skills/vp-rollback/SKILL.md +4 -4
  28. package/skills/vp-status/SKILL.md +4 -4
  29. package/skills/vp-task/SKILL.md +2 -2
  30. package/skills/vp-ui-components/SKILL.md +14 -14
  31. package/skills/vp-update/SKILL.md +18 -18
  32. package/templates/architect/apis.html +11 -10
  33. package/templates/architect/architect-actions.js +217 -0
  34. package/templates/architect/architecture.html +8 -7
  35. package/templates/architect/data-flow.html +5 -4
  36. package/templates/architect/decisions.html +4 -3
  37. package/templates/architect/deployment.html +10 -9
  38. package/templates/architect/erd.html +7 -6
  39. package/templates/architect/feature-map.html +5 -4
  40. package/templates/architect/sequence-diagram.html +6 -5
  41. package/templates/architect/style.css +146 -0
  42. package/templates/architect/tech-notes.html +3 -2
  43. package/templates/architect/tech-stack.html +8 -7
  44. package/templates/architect/user-use-cases.html +8 -7
  45. package/templates/project/AI-GUIDE.md +49 -49
  46. package/workflows/audit.md +3 -3
  47. package/workflows/autonomous.md +70 -5
  48. package/workflows/brainstorm.md +398 -222
  49. package/workflows/crystallize.md +51 -33
  50. package/workflows/debug.md +9 -9
  51. package/workflows/documentation.md +5 -5
  52. package/workflows/evolve.md +46 -12
  53. package/workflows/pause-work.md +2 -2
  54. package/workflows/request.md +8 -8
  55. package/workflows/resume-work.md +1 -1
  56. package/workflows/rollback.md +1 -1
  57. package/dev-install.sh +0 -150
  58. package/install.sh +0 -125
package/templates/architect/architecture.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Architecture — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="architecture">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
37
37
  <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
38
38
  </div>
39
39
 
40
- <div class="card">
40
+ <div class="card" data-arch-id="ARCH-DIAG1" data-arch-title="C4 Context Diagram">
41
41
  <h2>C4 Context Diagram</h2>
42
42
  <div class="mermaid-wrap">
43
43
  <div class="mermaid">
@@ -55,7 +55,7 @@ C4Context
55
55
  </div>
56
56
  </div>
57
57
 
58
- <div class="card">
58
+ <div class="card" data-arch-id="ARCH-DIAG2" data-arch-title="System Diagram">
59
59
  <h2>System Diagram</h2>
60
60
  <div class="mermaid-wrap">
61
61
  <div class="mermaid">
@@ -89,13 +89,13 @@ graph TD
89
89
  </tr>
90
90
  </thead>
91
91
  <tbody>
92
- <tr>
92
+ <tr data-arch-id="C1">
93
93
  <td>{Component 1}</td>
94
94
  <td>{Responsibility}</td>
95
95
  <td>{Technology}</td>
96
96
  <td>{Notes}</td>
97
97
  </tr>
98
- <tr>
98
+ <tr data-arch-id="C2">
99
99
  <td>{Component 2}</td>
100
100
  <td>{Responsibility}</td>
101
101
  <td>{Technology}</td>
@@ -124,7 +124,7 @@ graph TD
124
124
  </tr>
125
125
  </thead>
126
126
  <tbody>
127
- <tr>
127
+ <tr data-arch-id="C3">
128
128
  <td>{External System 1}</td>
129
129
  <td>{SaaS / Internal / 3rd party}</td>
130
130
  <td>{What it does}</td>
@@ -132,7 +132,7 @@ graph TD
132
132
  <td>{Team / Vendor}</td>
133
133
  <td>{Notes}</td>
134
134
  </tr>
135
- <tr>
135
+ <tr data-arch-id="C4">
136
136
  <td>{External System 2}</td>
137
137
  <td>{SaaS / Internal / 3rd party}</td>
138
138
  <td>{What it does}</td>
@@ -155,5 +155,6 @@ graph TD
155
155
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
156
156
  }
157
157
  </script>
158
+ <script src="architect-actions.js"></script>
158
159
  </body>
159
160
  </html>
package/templates/architect/data-flow.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Data Flow — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="data-flow">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
37
37
  <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
38
38
  </div>
39
39
 
40
- <div class="card">
40
+ <div class="card" data-arch-id="DF-DIAG1" data-arch-title="Primary Request Flow">
41
41
  <h2>Primary Request Flow</h2>
42
42
  <div class="mermaid-wrap">
43
43
  <div class="mermaid">
@@ -58,7 +58,7 @@ sequenceDiagram
58
58
  </div>
59
59
  </div>
60
60
 
61
- <div class="card">
61
+ <div class="card" data-arch-id="DF-DIAG2" data-arch-title="Event Flow (Async)">
62
62
  <h2>Event Flow (Async)</h2>
63
63
  <div class="mermaid-wrap">
64
64
  <div class="mermaid">
@@ -83,7 +83,7 @@ flowchart LR
83
83
  </tr>
84
84
  </thead>
85
85
  <tbody>
86
- <tr>
86
+ <tr data-arch-id="DF1">
87
87
  <td>{Flow name}</td>
88
88
  <td>{Trigger}</td>
89
89
  <td>{Steps}</td>
@@ -104,5 +104,6 @@ flowchart LR
104
104
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
105
105
  }
106
106
  </script>
107
+ <script src="architect-actions.js"></script>
107
108
  </body>
108
109
  </html>
package/templates/architect/decisions.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Architecture Decisions — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="decisions">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -52,7 +52,7 @@
52
52
  </tr>
53
53
  </thead>
54
54
  <tbody>
55
- <tr data-updated="true" class="updated">
55
+ <tr data-updated="true" class="updated" data-arch-id="D1">
56
56
  <td>D001</td>
57
57
  <td>{date}</td>
58
58
  <td>{Topic, e.g. "Database choice"}</td>
@@ -61,7 +61,7 @@
61
61
  <td>{Rationale}</td>
62
62
  <td><span class="badge badge-decided">Decided</span></td>
63
63
  </tr>
64
- <tr>
64
+ <tr data-arch-id="D2">
65
65
  <td>D002</td>
66
66
  <td>{date}</td>
67
67
  <td>{Topic}</td>
@@ -91,5 +91,6 @@
91
91
  document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
92
92
  }
93
93
  </script>
94
+ <script src="architect-actions.js"></script>
94
95
  </body>
95
96
  </html>
package/templates/architect/deployment.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Deployment — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="deployment">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
37
37
  <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
38
38
  </div>
39
39
 
40
- <div class="card">
40
+ <div class="card" data-arch-id="DEP-DIAG1" data-arch-title="Infrastructure Diagram">
41
41
  <h2>Infrastructure Diagram</h2>
42
42
  <div class="mermaid-wrap">
43
43
  <div class="mermaid">
@@ -83,21 +83,21 @@ graph TD
83
83
  </tr>
84
84
  </thead>
85
85
  <tbody>
86
- <tr>
86
+ <tr data-arch-id="DEP1">
87
87
  <td>Dev</td>
88
88
  <td>http://localhost:3000</td>
89
89
  <td>Local development</td>
90
90
  <td>App, DB</td>
91
91
  <td>{Notes}</td>
92
92
  </tr>
93
- <tr>
93
+ <tr data-arch-id="DEP2">
94
94
  <td>Staging</td>
95
95
  <td>{staging URL}</td>
96
96
  <td>QA / integration testing</td>
97
97
  <td>App, DB, Cache, LB</td>
98
98
  <td>{Notes}</td>
99
99
  </tr>
100
- <tr>
100
+ <tr data-arch-id="DEP3">
101
101
  <td>Production</td>
102
102
  <td>{prod URL}</td>
103
103
  <td>Live system</td>
@@ -121,28 +121,28 @@ graph TD
121
121
  </tr>
122
122
  </thead>
123
123
  <tbody>
124
- <tr>
124
+ <tr data-arch-id="DEP4">
125
125
  <td>App Server</td>
126
126
  <td>Compute</td>
127
127
  <td>{AWS EC2 / GCP GCE / Heroku / ...}</td>
128
128
  <td>{Instance size}</td>
129
129
  <td>{Notes}</td>
130
130
  </tr>
131
- <tr>
131
+ <tr data-arch-id="DEP5">
132
132
  <td>Database</td>
133
133
  <td>Managed DB</td>
134
134
  <td>{RDS / Cloud SQL / PlanetScale / ...}</td>
135
135
  <td>{Size}</td>
136
136
  <td>{Notes}</td>
137
137
  </tr>
138
- <tr>
138
+ <tr data-arch-id="DEP6">
139
139
  <td>Cache</td>
140
140
  <td>In-memory</td>
141
141
  <td>{ElastiCache / Upstash / ...}</td>
142
142
  <td>{Size}</td>
143
143
  <td>{Notes}</td>
144
144
  </tr>
145
- <tr>
145
+ <tr data-arch-id="DEP7">
146
146
  <td>CDN</td>
147
147
  <td>Content delivery</td>
148
148
  <td>{CloudFront / Cloudflare / ...}</td>
@@ -179,5 +179,6 @@ flowchart LR
179
179
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
180
180
  }
181
181
  </script>
182
+ <script src="architect-actions.js"></script>
182
183
  </body>
183
184
  </html>
package/templates/architect/erd.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>ERD — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="erd">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
37
37
  <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
38
38
  </div>
39
39
 
40
- <div class="card">
40
+ <div class="card" data-arch-id="ERD-DIAG1" data-arch-title="ERD Diagram">
41
41
  <h2>ERD Diagram</h2>
42
42
  <div class="mermaid-wrap">
43
43
  <div class="mermaid">
@@ -89,14 +89,14 @@ erDiagram
89
89
  </tr>
90
90
  </thead>
91
91
  <tbody>
92
- <tr>
92
+ <tr data-arch-id="E1">
93
93
  <td><strong>{Entity 1}</strong></td>
94
94
  <td>{id, name, ...}</td>
95
95
  <td>id</td>
96
96
  <td>—</td>
97
97
  <td>{notes}</td>
98
98
  </tr>
99
- <tr>
99
+ <tr data-arch-id="E2">
100
100
  <td><strong>{Entity 2}</strong></td>
101
101
  <td>{id, entity1_id, ...}</td>
102
102
  <td>id</td>
@@ -120,14 +120,14 @@ erDiagram
120
120
  </tr>
121
121
  </thead>
122
122
  <tbody>
123
- <tr>
123
+ <tr data-arch-id="E3">
124
124
  <td>{Entity A}</td>
125
125
  <td>one-to-many</td>
126
126
  <td>{Entity B}</td>
127
127
  <td>{label}</td>
128
128
  <td>{notes}</td>
129
129
  </tr>
130
- <tr>
130
+ <tr data-arch-id="E4">
131
131
  <td>{Entity B}</td>
132
132
  <td>many-to-one</td>
133
133
  <td>{Entity C}</td>
@@ -149,5 +149,6 @@ erDiagram
149
149
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
150
150
  }
151
151
  </script>
152
+ <script src="architect-actions.js"></script>
152
153
  </body>
153
154
  </html>
package/templates/architect/feature-map.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Feature Map — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="features">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -69,7 +69,7 @@ mindmap
69
69
  </tr>
70
70
  </thead>
71
71
  <tbody>
72
- <tr>
72
+ <tr data-arch-id="F1">
73
73
  <td>{Feature name}</td>
74
74
  <td>{Frontend/Backend/Infra}</td>
75
75
  <td>Phase 1</td>
@@ -77,7 +77,7 @@ mindmap
77
77
  <td>{todo/in-progress/done}</td>
78
78
  <td>{notes}</td>
79
79
  </tr>
80
- <tr>
80
+ <tr data-arch-id="F2">
81
81
  <td>{Feature name}</td>
82
82
  <td>{Layer}</td>
83
83
  <td>Phase 2</td>
@@ -85,7 +85,7 @@ mindmap
85
85
  <td>{status}</td>
86
86
  <td>{notes}</td>
87
87
  </tr>
88
- <tr>
88
+ <tr data-arch-id="F3">
89
89
  <td>{Feature name}</td>
90
90
  <td>{Layer}</td>
91
91
  <td>Phase 3</td>
@@ -108,5 +108,6 @@ mindmap
108
108
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
109
109
  }
110
110
  </script>
111
+ <script src="architect-actions.js"></script>
111
112
  </body>
112
113
  </html>
package/templates/architect/sequence-diagram.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Sequence Diagram — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="sequence">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -57,7 +57,7 @@
57
57
  </tr>
58
58
  </thead>
59
59
  <tbody>
60
- <tr>
60
+ <tr data-arch-id="SEQ1">
61
61
  <td>SEQ-01</td>
62
62
  <td>{Scenario name}</td>
63
63
  <td>{Actor A, Actor B}</td>
@@ -65,7 +65,7 @@
65
65
  <td>{UC-ID}</td>
66
66
  <td>{Notes}</td>
67
67
  </tr>
68
- <tr>
68
+ <tr data-arch-id="SEQ2">
69
69
  <td>SEQ-02</td>
70
70
  <td>{Scenario name}</td>
71
71
  <td>{Actor A, Actor B}</td>
@@ -77,7 +77,7 @@
77
77
  </table>
78
78
  </div>
79
79
 
80
- <div class="card">
80
+ <div class="card" data-arch-id="SEQ-DIAG1" data-arch-title="SEQ-01: {Scenario 1 Name}">
81
81
  <h2>SEQ-01: {Scenario 1 Name}</h2>
82
82
  <div class="mermaid-wrap">
83
83
  <div class="mermaid">
@@ -97,7 +97,7 @@ sequenceDiagram
97
97
  </div>
98
98
  </div>
99
99
 
100
- <div class="card">
100
+ <div class="card" data-arch-id="SEQ-DIAG2" data-arch-title="SEQ-02: {Scenario 2 Name}">
101
101
  <h2>SEQ-02: {Scenario 2 Name}</h2>
102
102
  <div class="mermaid-wrap">
103
103
  <div class="mermaid">
@@ -128,5 +128,6 @@ sequenceDiagram
128
128
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
129
129
  }
130
130
  </script>
131
+ <script src="architect-actions.js"></script>
131
132
  </body>
132
133
  </html>
package/templates/architect/style.css CHANGED
@@ -217,3 +217,149 @@ tr:hover td { background: var(--surface-alt); }
217
217
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
218
218
  .nav-sidebar { display: none; }
219
219
  }
220
+
221
+ /* ── Architect Item Actions (ENH-033) ── */
222
+ /* Item ID badge */
223
+ .arch-id-badge {
224
+ display: inline-block;
225
+ font-family: "SF Mono", "Fira Code", ui-monospace, monospace;
226
+ font-size: 10px;
227
+ padding: 1px 5px;
228
+ border-radius: 3px;
229
+ background: var(--surface-alt);
230
+ color: var(--text-muted);
231
+ border: 1px solid var(--border);
232
+ letter-spacing: 0.03em;
233
+ user-select: none;
234
+ white-space: nowrap;
235
+ }
236
+
237
+ /* Action buttons container */
238
+ .arch-item-actions {
239
+ display: inline-flex;
240
+ align-items: center;
241
+ gap: 5px;
242
+ opacity: 0;
243
+ transition: opacity 0.15s ease;
244
+ white-space: nowrap;
245
+ }
246
+
247
+ /* Reveal on row/card hover */
248
+ tr:hover .arch-item-actions,
249
+ .card:hover > .arch-item-actions,
250
+ [data-arch-id]:hover > .arch-item-actions {
251
+ opacity: 1;
252
+ }
253
+
254
+ /* Always visible in actions cell */
255
+ .arch-actions-cell .arch-item-actions {
256
+ opacity: 0;
257
+ }
258
+ tr:hover .arch-actions-cell .arch-item-actions {
259
+ opacity: 1;
260
+ }
261
+
262
+ /* Actions column header — minimal width, no label */
263
+ .arch-actions-th {
264
+ width: 140px;
265
+ min-width: 140px;
266
+ }
267
+
268
+ /* Actions column cell */
269
+ .arch-actions-cell {
270
+ white-space: nowrap;
271
+ vertical-align: middle;
272
+ padding: 4px 8px !important;
273
+ }
274
+
275
+ /* Base button */
276
+ .arch-btn {
277
+ display: inline-flex;
278
+ align-items: center;
279
+ gap: 3px;
280
+ padding: 2px 8px;
281
+ border-radius: 4px;
282
+ border: 1px solid transparent;
283
+ font-size: 11px;
284
+ font-weight: 500;
285
+ cursor: pointer;
286
+ transition: background 0.12s, color 0.12s, border-color 0.12s;
287
+ line-height: 1.6;
288
+ user-select: none;
289
+ }
290
+ .arch-btn:focus-visible {
291
+ outline: 2px solid var(--accent);
292
+ outline-offset: 2px;
293
+ }
294
+
295
+ /* Approve button — green tint */
296
+ .arch-btn-approve {
297
+ background: #16a34a18;
298
+ color: #4ade80;
299
+ border-color: #16a34a40;
300
+ }
301
+ .arch-btn-approve:hover {
302
+ background: #16a34a30;
303
+ border-color: #16a34a70;
304
+ }
305
+
306
+ /* Edit button — accent tint */
307
+ .arch-btn-edit {
308
+ background: #6366f118;
309
+ color: #a5b4fc;
310
+ border-color: #6366f140;
311
+ }
312
+ .arch-btn-edit:hover {
313
+ background: #6366f130;
314
+ border-color: #6366f170;
315
+ }
316
+
317
+ /* "Copied!" feedback state */
318
+ .arch-btn.copied {
319
+ background: #f59e0b20;
320
+ color: #fbbf24;
321
+ border-color: #f59e0b50;
322
+ }
323
+
324
+ /* Light-mode overrides */
325
+ html.light .arch-btn-approve { background: #dcfce7; color: #16a34a; border-color: #bbf7d0; }
326
+ html.light .arch-btn-approve:hover { background: #bbf7d0; }
327
+ html.light .arch-btn-edit { background: #ede9fe; color: #4f46e5; border-color: #c4b5fd; }
328
+ html.light .arch-btn-edit:hover { background: #c4b5fd; }
329
+ html.light .arch-btn.copied { background: #fef9c3; color: #b45309; border-color: #fde68a; }
330
+ html.light .arch-id-badge { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
331
+
332
+ /* ── Architect Gap / Stale Indicators (ENH-034) ── */
333
+ /* Amber — "brainstorm detected a gap, HTML not synced yet"
334
+ Distinct from .updated (yellow = recently changed by architect session) */
335
+
336
+ .arch-gap-badge {
337
+ display: inline-block;
338
+ font-size: 10px;
339
+ font-weight: 600;
340
+ padding: 1px 5px;
341
+ border-radius: 3px;
342
+ background: rgba(245, 158, 11, 0.15);
343
+ color: #f59e0b;
344
+ border: 1px solid rgba(245, 158, 11, 0.3);
345
+ margin-left: 6px;
346
+ vertical-align: middle;
347
+ letter-spacing: 0.3px;
348
+ cursor: default;
349
+ }
350
+
351
+ [data-arch-stale="true"] {
352
+ border-left: 3px solid #f59e0b !important;
353
+ }
354
+
355
+ tr[data-arch-stale="true"] td:first-child .arch-gap-badge,
356
+ .card[data-arch-stale="true"] h2 .arch-gap-badge {
357
+ display: inline-block;
358
+ }
359
+
360
+ /* Light mode overrides */
361
+ html.light .arch-gap-badge {
362
+ background: rgba(217, 119, 6, 0.1);
363
+ color: #d97706;
364
+ border-color: rgba(217, 119, 6, 0.3);
365
+ }
package/templates/architect/tech-notes.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Tech Notes — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="tech-notes">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -71,7 +71,7 @@
71
71
  </div>
72
72
  </div>
73
73
 
74
- <div class="card">
74
+ <div class="card" data-arch-id="TN1">
75
75
  <h2>Additional Notes</h2>
76
76
  <p style="color:var(--text-muted);font-size:13px;">{Additional context, constraints, or design notes that don't fit in other sections}</p>
77
77
  </div>
@@ -84,5 +84,6 @@
84
84
  document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
85
85
  }
86
86
  </script>
87
+ <script src="architect-actions.js"></script>
87
88
  </body>
88
89
  </html>
package/templates/architect/tech-stack.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>Tech Stack — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="tech-stack">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -50,42 +50,42 @@
50
50
  </tr>
51
51
  </thead>
52
52
  <tbody>
53
- <tr>
53
+ <tr data-arch-id="TS1">
54
54
  <td><strong>Frontend</strong></td>
55
55
  <td>{e.g. React + TypeScript}</td>
56
56
  <td>{version}</td>
57
57
  <td>{rationale}</td>
58
58
  <td>{alternatives}</td>
59
59
  </tr>
60
- <tr>
60
+ <tr data-arch-id="TS2">
61
61
  <td><strong>Backend</strong></td>
62
62
  <td>{e.g. Node.js + Express}</td>
63
63
  <td>{version}</td>
64
64
  <td>{rationale}</td>
65
65
  <td>{alternatives}</td>
66
66
  </tr>
67
- <tr>
67
+ <tr data-arch-id="TS3">
68
68
  <td><strong>Database</strong></td>
69
69
  <td>{e.g. PostgreSQL}</td>
70
70
  <td>{version}</td>
71
71
  <td>{rationale}</td>
72
72
  <td>{alternatives}</td>
73
73
  </tr>
74
- <tr>
74
+ <tr data-arch-id="TS4">
75
75
  <td><strong>Cache</strong></td>
76
76
  <td>{e.g. Redis}</td>
77
77
  <td>{version}</td>
78
78
  <td>{rationale}</td>
79
79
  <td>{alternatives}</td>
80
80
  </tr>
81
- <tr>
81
+ <tr data-arch-id="TS5">
82
82
  <td><strong>Infrastructure</strong></td>
83
83
  <td>{e.g. AWS ECS + RDS}</td>
84
84
  <td>—</td>
85
85
  <td>{rationale}</td>
86
86
  <td>{alternatives}</td>
87
87
  </tr>
88
- <tr>
88
+ <tr data-arch-id="TS6">
89
89
  <td><strong>DevOps</strong></td>
90
90
  <td>{e.g. GitHub Actions + Terraform}</td>
91
91
  <td>—</td>
@@ -109,5 +109,6 @@
109
109
  document.getElementById('theme-toggle').textContent = isLight ? '🌙 Dark' : '☀️ Light';
110
110
  }
111
111
  </script>
112
+ <script src="architect-actions.js"></script>
112
113
  </body>
113
114
  </html>
package/templates/architect/user-use-cases.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <title>User Use Cases — {project}</title>
7
7
  <link rel="stylesheet" href="style.css" />
8
8
  </head>
9
- <body>
9
+ <body data-arch-slug="use-cases">
10
10
  <nav class="nav-sidebar">
11
11
  <div class="logo">
12
12
  <span>ViePilot Architect Mode</span>
@@ -37,7 +37,7 @@
37
37
  <button id="theme-toggle" onclick="toggleTheme()">☀️ Light</button>
38
38
  </div>
39
39
 
40
- <div class="card">
40
+ <div class="card" data-arch-id="UC-DIAG1" data-arch-title="Actor / Use Case Diagram">
41
41
  <h2>Actor / Use Case Diagram</h2>
42
42
  <div class="mermaid-wrap">
43
43
  <div class="mermaid">
@@ -82,7 +82,7 @@ flowchart LR
82
82
  </tr>
83
83
  </thead>
84
84
  <tbody>
85
- <tr>
85
+ <tr data-arch-id="UC1">
86
86
  <td>UC-001</td>
87
87
  <td>{Use case name}</td>
88
88
  <td>{Actor}</td>
@@ -90,7 +90,7 @@ flowchart LR
90
90
  <td>{Brief main flow}</td>
91
91
  <td><span class="badge badge-phase-1">Phase 1</span></td>
92
92
  </tr>
93
- <tr>
93
+ <tr data-arch-id="UC2">
94
94
  <td>UC-002</td>
95
95
  <td>{Use case name}</td>
96
96
  <td>{Actor}</td>
@@ -98,7 +98,7 @@ flowchart LR
98
98
  <td>{Brief main flow}</td>
99
99
  <td><span class="badge badge-phase-2">Phase 2</span></td>
100
100
  </tr>
101
- <tr>
101
+ <tr data-arch-id="UC3">
102
102
  <td>UC-003</td>
103
103
  <td>{Use case name}</td>
104
104
  <td>{Actor}</td>
@@ -122,13 +122,13 @@ flowchart LR
122
122
  </tr>
123
123
  </thead>
124
124
  <tbody>
125
- <tr>
125
+ <tr data-arch-id="UC4">
126
126
  <td><strong>{Actor 1}</strong></td>
127
127
  <td>{Role description}</td>
128
128
  <td>{Primary goals}</td>
129
129
  <td>{notes}</td>
130
130
  </tr>
131
- <tr>
131
+ <tr data-arch-id="UC5">
132
132
  <td><strong>{Actor 2}</strong></td>
133
133
  <td>{Role description}</td>
134
134
  <td>{Primary goals}</td>
@@ -149,5 +149,6 @@ flowchart LR
149
149
  mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
150
150
  }
151
151
  </script>
152
+ <script src="architect-actions.js"></script>
152
153
  </body>
153
154
  </html>