viepilot 1.9.11 β 2.1.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.
- package/CHANGELOG.md +175 -2
- package/README.md +3 -3
- package/bin/viepilot.cjs +7 -5
- package/bin/vp-tools.cjs +193 -0
- package/dev-install.sh +34 -13
- package/docs/user/features/architect-design-mode.md +170 -0
- package/docs/user/features/hooks.md +93 -0
- package/docs/user/features/ui-direction.md +79 -3
- package/lib/adapters/claude-code.cjs +42 -0
- package/lib/adapters/cursor.cjs +31 -0
- package/lib/adapters/index.cjs +26 -0
- package/lib/hooks/brainstorm-staleness.cjs +231 -0
- package/lib/viepilot-config.cjs +103 -0
- package/lib/viepilot-install.cjs +128 -153
- package/package.json +1 -1
- package/skills/vp-audit/SKILL.md +21 -21
- package/skills/vp-auto/SKILL.md +21 -7
- package/skills/vp-brainstorm/SKILL.md +46 -35
- package/skills/vp-crystallize/SKILL.md +37 -25
- package/skills/vp-debug/SKILL.md +2 -2
- package/skills/vp-docs/SKILL.md +7 -7
- package/skills/vp-evolve/SKILL.md +25 -12
- package/skills/vp-info/SKILL.md +23 -23
- package/skills/vp-pause/SKILL.md +5 -5
- package/skills/vp-request/SKILL.md +12 -12
- package/skills/vp-resume/SKILL.md +4 -4
- package/skills/vp-rollback/SKILL.md +3 -3
- package/skills/vp-status/SKILL.md +4 -4
- package/skills/vp-task/SKILL.md +3 -3
- package/skills/vp-ui-components/SKILL.md +12 -12
- package/skills/vp-update/SKILL.md +17 -17
- package/templates/architect/apis.html +159 -0
- package/templates/architect/architect-actions.js +217 -0
- package/templates/architect/architecture.html +160 -0
- package/templates/architect/data-flow.html +109 -0
- package/templates/architect/decisions.html +96 -0
- package/templates/architect/deployment.html +184 -0
- package/templates/architect/erd.html +154 -0
- package/templates/architect/feature-map.html +113 -0
- package/templates/architect/index.html +108 -0
- package/templates/architect/sequence-diagram.html +133 -0
- package/templates/architect/style.css +365 -0
- package/templates/architect/tech-notes.html +89 -0
- package/templates/architect/tech-stack.html +114 -0
- package/templates/architect/user-use-cases.html +154 -0
- package/templates/project/AI-GUIDE.md +53 -54
- package/templates/project/PROJECT-CONTEXT.md +7 -11
- package/templates/project/README.md +43 -0
- package/templates/project/ROADMAP.md +1 -27
- package/workflows/audit.md +3 -3
- package/workflows/autonomous.md +38 -5
- package/workflows/brainstorm.md +575 -191
- package/workflows/crystallize.md +168 -58
- package/workflows/debug.md +9 -9
- package/workflows/documentation.md +5 -5
- package/workflows/evolve.md +44 -12
- package/workflows/pause-work.md +2 -2
- package/workflows/request.md +8 -8
- package/workflows/resume-work.md +1 -1
- package/workflows/rollback.md +1 -1
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="vi">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Deployment β {project}</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body data-arch-slug="deployment">
|
|
10
|
+
<nav class="nav-sidebar">
|
|
11
|
+
<div class="logo">
|
|
12
|
+
<span>ViePilot Architect Mode</span>
|
|
13
|
+
<strong>{project}</strong>
|
|
14
|
+
</div>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><a href="index.html">π Hub</a></li>
|
|
17
|
+
<li><a href="architecture.html">ποΈ Architecture</a></li>
|
|
18
|
+
<li><a href="sequence-diagram.html">π¬ Sequence</a></li>
|
|
19
|
+
<li><a href="data-flow.html">π Data Flow</a></li>
|
|
20
|
+
<li><a href="decisions.html">π Decisions (ADR)</a></li>
|
|
21
|
+
<li><a href="tech-stack.html">π οΈ Tech Stack</a></li>
|
|
22
|
+
<li><a href="tech-notes.html">π Tech Notes</a></li>
|
|
23
|
+
<li><a href="feature-map.html">πΊοΈ Feature Map</a></li>
|
|
24
|
+
<li><a href="erd.html">ποΈ ERD</a></li>
|
|
25
|
+
<li><a href="user-use-cases.html">π€ Use Cases</a></li>
|
|
26
|
+
<li><a href="deployment.html" class="active">π Deployment</a></li>
|
|
27
|
+
<li><a href="apis.html">π APIs</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</nav>
|
|
30
|
+
|
|
31
|
+
<main class="main-content">
|
|
32
|
+
<div class="page-header">
|
|
33
|
+
<div>
|
|
34
|
+
<h1>π Deployment</h1>
|
|
35
|
+
<p>Infrastructure, environments, and CI/CD pipeline</p>
|
|
36
|
+
</div>
|
|
37
|
+
<button id="theme-toggle" onclick="toggleTheme()">βοΈ Light</button>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="card" data-arch-id="DEP-DIAG1" data-arch-title="Infrastructure Diagram">
|
|
41
|
+
<h2>Infrastructure Diagram</h2>
|
|
42
|
+
<div class="mermaid-wrap">
|
|
43
|
+
<div class="mermaid">
|
|
44
|
+
graph TD
|
|
45
|
+
subgraph dev["Dev"]
|
|
46
|
+
DevApp["App"]
|
|
47
|
+
DevDB["DB"]
|
|
48
|
+
end
|
|
49
|
+
subgraph staging["Staging"]
|
|
50
|
+
StagLB["Load Balancer"]
|
|
51
|
+
StagApp["App"]
|
|
52
|
+
StagDB["DB"]
|
|
53
|
+
StagCache["Cache"]
|
|
54
|
+
StagLB --> StagApp
|
|
55
|
+
StagApp --> StagDB
|
|
56
|
+
StagApp --> StagCache
|
|
57
|
+
end
|
|
58
|
+
subgraph prod["Production"]
|
|
59
|
+
ProdCDN["CDN"]
|
|
60
|
+
ProdLB["Load Balancer"]
|
|
61
|
+
ProdApp["App"]
|
|
62
|
+
ProdDB["DB"]
|
|
63
|
+
ProdCache["Cache"]
|
|
64
|
+
ProdCDN --> ProdLB
|
|
65
|
+
ProdLB --> ProdApp
|
|
66
|
+
ProdApp --> ProdDB
|
|
67
|
+
ProdApp --> ProdCache
|
|
68
|
+
end
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<div class="card">
|
|
74
|
+
<h2>Environments</h2>
|
|
75
|
+
<table>
|
|
76
|
+
<thead>
|
|
77
|
+
<tr>
|
|
78
|
+
<th>Env</th>
|
|
79
|
+
<th>URL</th>
|
|
80
|
+
<th>Purpose</th>
|
|
81
|
+
<th>Services</th>
|
|
82
|
+
<th>Config notes</th>
|
|
83
|
+
</tr>
|
|
84
|
+
</thead>
|
|
85
|
+
<tbody>
|
|
86
|
+
<tr data-arch-id="DEP1">
|
|
87
|
+
<td>Dev</td>
|
|
88
|
+
<td>http://localhost:3000</td>
|
|
89
|
+
<td>Local development</td>
|
|
90
|
+
<td>App, DB</td>
|
|
91
|
+
<td>{Notes}</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr data-arch-id="DEP2">
|
|
94
|
+
<td>Staging</td>
|
|
95
|
+
<td>{staging URL}</td>
|
|
96
|
+
<td>QA / integration testing</td>
|
|
97
|
+
<td>App, DB, Cache, LB</td>
|
|
98
|
+
<td>{Notes}</td>
|
|
99
|
+
</tr>
|
|
100
|
+
<tr data-arch-id="DEP3">
|
|
101
|
+
<td>Production</td>
|
|
102
|
+
<td>{prod URL}</td>
|
|
103
|
+
<td>Live system</td>
|
|
104
|
+
<td>App, DB, Cache, LB, CDN</td>
|
|
105
|
+
<td>{Notes}</td>
|
|
106
|
+
</tr>
|
|
107
|
+
</tbody>
|
|
108
|
+
</table>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="card">
|
|
112
|
+
<h2>Infrastructure Components</h2>
|
|
113
|
+
<table>
|
|
114
|
+
<thead>
|
|
115
|
+
<tr>
|
|
116
|
+
<th>Component</th>
|
|
117
|
+
<th>Type</th>
|
|
118
|
+
<th>Provider</th>
|
|
119
|
+
<th>Sizing</th>
|
|
120
|
+
<th>Notes</th>
|
|
121
|
+
</tr>
|
|
122
|
+
</thead>
|
|
123
|
+
<tbody>
|
|
124
|
+
<tr data-arch-id="DEP4">
|
|
125
|
+
<td>App Server</td>
|
|
126
|
+
<td>Compute</td>
|
|
127
|
+
<td>{AWS EC2 / GCP GCE / Heroku / ...}</td>
|
|
128
|
+
<td>{Instance size}</td>
|
|
129
|
+
<td>{Notes}</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr data-arch-id="DEP5">
|
|
132
|
+
<td>Database</td>
|
|
133
|
+
<td>Managed DB</td>
|
|
134
|
+
<td>{RDS / Cloud SQL / PlanetScale / ...}</td>
|
|
135
|
+
<td>{Size}</td>
|
|
136
|
+
<td>{Notes}</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr data-arch-id="DEP6">
|
|
139
|
+
<td>Cache</td>
|
|
140
|
+
<td>In-memory</td>
|
|
141
|
+
<td>{ElastiCache / Upstash / ...}</td>
|
|
142
|
+
<td>{Size}</td>
|
|
143
|
+
<td>{Notes}</td>
|
|
144
|
+
</tr>
|
|
145
|
+
<tr data-arch-id="DEP7">
|
|
146
|
+
<td>CDN</td>
|
|
147
|
+
<td>Content delivery</td>
|
|
148
|
+
<td>{CloudFront / Cloudflare / ...}</td>
|
|
149
|
+
<td>β</td>
|
|
150
|
+
<td>{Notes}</td>
|
|
151
|
+
</tr>
|
|
152
|
+
</tbody>
|
|
153
|
+
</table>
|
|
154
|
+
</div>
|
|
155
|
+
|
|
156
|
+
<div class="card">
|
|
157
|
+
<h2>CI/CD Pipeline</h2>
|
|
158
|
+
<div class="mermaid-wrap">
|
|
159
|
+
<div class="mermaid">
|
|
160
|
+
flowchart LR
|
|
161
|
+
Code["π Code\nPush / PR"]
|
|
162
|
+
Build["π¨ Build\nDocker image"]
|
|
163
|
+
Test["π§ͺ Test\nUnit + Integration"]
|
|
164
|
+
Deploy["π Deploy\nStaging β Prod"]
|
|
165
|
+
|
|
166
|
+
Code --> Build --> Test --> Deploy
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</main>
|
|
171
|
+
|
|
172
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
173
|
+
<script>
|
|
174
|
+
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
|
|
175
|
+
function toggleTheme() {
|
|
176
|
+
const html = document.documentElement;
|
|
177
|
+
const isLight = html.classList.toggle('light');
|
|
178
|
+
document.getElementById('theme-toggle').textContent = isLight ? 'π Dark' : 'βοΈ Light';
|
|
179
|
+
mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
|
|
180
|
+
}
|
|
181
|
+
</script>
|
|
182
|
+
<script src="architect-actions.js"></script>
|
|
183
|
+
</body>
|
|
184
|
+
</html>
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="vi">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>ERD β {project}</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body data-arch-slug="erd">
|
|
10
|
+
<nav class="nav-sidebar">
|
|
11
|
+
<div class="logo">
|
|
12
|
+
<span>ViePilot Architect Mode</span>
|
|
13
|
+
<strong>{project}</strong>
|
|
14
|
+
</div>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><a href="index.html">π Hub</a></li>
|
|
17
|
+
<li><a href="architecture.html">ποΈ Architecture</a></li>
|
|
18
|
+
<li><a href="sequence-diagram.html">π¬ Sequence</a></li>
|
|
19
|
+
<li><a href="data-flow.html">π Data Flow</a></li>
|
|
20
|
+
<li><a href="decisions.html">π Decisions (ADR)</a></li>
|
|
21
|
+
<li><a href="tech-stack.html">π οΈ Tech Stack</a></li>
|
|
22
|
+
<li><a href="tech-notes.html">π Tech Notes</a></li>
|
|
23
|
+
<li><a href="feature-map.html">πΊοΈ Feature Map</a></li>
|
|
24
|
+
<li><a href="erd.html" class="active">ποΈ ERD</a></li>
|
|
25
|
+
<li><a href="user-use-cases.html">π€ Use Cases</a></li>
|
|
26
|
+
<li><a href="deployment.html">π Deployment</a></li>
|
|
27
|
+
<li><a href="apis.html">π APIs</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</nav>
|
|
30
|
+
|
|
31
|
+
<main class="main-content">
|
|
32
|
+
<div class="page-header">
|
|
33
|
+
<div>
|
|
34
|
+
<h1>ποΈ Entity Relationship Diagram</h1>
|
|
35
|
+
<p>Database entities, attributes, and relationships</p>
|
|
36
|
+
</div>
|
|
37
|
+
<button id="theme-toggle" onclick="toggleTheme()">βοΈ Light</button>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="card" data-arch-id="ERD-DIAG1" data-arch-title="ERD Diagram">
|
|
41
|
+
<h2>ERD Diagram</h2>
|
|
42
|
+
<div class="mermaid-wrap">
|
|
43
|
+
<div class="mermaid">
|
|
44
|
+
erDiagram
|
|
45
|
+
User {
|
|
46
|
+
int id PK
|
|
47
|
+
string email
|
|
48
|
+
string name
|
|
49
|
+
datetime created_at
|
|
50
|
+
}
|
|
51
|
+
Order {
|
|
52
|
+
int id PK
|
|
53
|
+
int user_id FK
|
|
54
|
+
decimal total
|
|
55
|
+
string status
|
|
56
|
+
datetime created_at
|
|
57
|
+
}
|
|
58
|
+
OrderItem {
|
|
59
|
+
int id PK
|
|
60
|
+
int order_id FK
|
|
61
|
+
int product_id FK
|
|
62
|
+
int quantity
|
|
63
|
+
decimal price
|
|
64
|
+
}
|
|
65
|
+
Product {
|
|
66
|
+
int id PK
|
|
67
|
+
string name
|
|
68
|
+
decimal price
|
|
69
|
+
int stock
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
User ||--o{ Order : "places"
|
|
73
|
+
Order ||--|{ OrderItem : "contains"
|
|
74
|
+
Product ||--o{ OrderItem : "included in"
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<div class="card">
|
|
80
|
+
<h2>Entity List</h2>
|
|
81
|
+
<table>
|
|
82
|
+
<thead>
|
|
83
|
+
<tr>
|
|
84
|
+
<th>Entity</th>
|
|
85
|
+
<th>Attributes</th>
|
|
86
|
+
<th>Primary Key</th>
|
|
87
|
+
<th>Foreign Keys</th>
|
|
88
|
+
<th>Notes</th>
|
|
89
|
+
</tr>
|
|
90
|
+
</thead>
|
|
91
|
+
<tbody>
|
|
92
|
+
<tr data-arch-id="E1">
|
|
93
|
+
<td><strong>{Entity 1}</strong></td>
|
|
94
|
+
<td>{id, name, ...}</td>
|
|
95
|
+
<td>id</td>
|
|
96
|
+
<td>β</td>
|
|
97
|
+
<td>{notes}</td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr data-arch-id="E2">
|
|
100
|
+
<td><strong>{Entity 2}</strong></td>
|
|
101
|
+
<td>{id, entity1_id, ...}</td>
|
|
102
|
+
<td>id</td>
|
|
103
|
+
<td>entity1_id β Entity1</td>
|
|
104
|
+
<td>{notes}</td>
|
|
105
|
+
</tr>
|
|
106
|
+
</tbody>
|
|
107
|
+
</table>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div class="card">
|
|
111
|
+
<h2>Relationship Summary</h2>
|
|
112
|
+
<table>
|
|
113
|
+
<thead>
|
|
114
|
+
<tr>
|
|
115
|
+
<th>Entity A</th>
|
|
116
|
+
<th>Relationship</th>
|
|
117
|
+
<th>Entity B</th>
|
|
118
|
+
<th>Label</th>
|
|
119
|
+
<th>Notes</th>
|
|
120
|
+
</tr>
|
|
121
|
+
</thead>
|
|
122
|
+
<tbody>
|
|
123
|
+
<tr data-arch-id="E3">
|
|
124
|
+
<td>{Entity A}</td>
|
|
125
|
+
<td>one-to-many</td>
|
|
126
|
+
<td>{Entity B}</td>
|
|
127
|
+
<td>{label}</td>
|
|
128
|
+
<td>{notes}</td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr data-arch-id="E4">
|
|
131
|
+
<td>{Entity B}</td>
|
|
132
|
+
<td>many-to-one</td>
|
|
133
|
+
<td>{Entity C}</td>
|
|
134
|
+
<td>{label}</td>
|
|
135
|
+
<td>{notes}</td>
|
|
136
|
+
</tr>
|
|
137
|
+
</tbody>
|
|
138
|
+
</table>
|
|
139
|
+
</div>
|
|
140
|
+
</main>
|
|
141
|
+
|
|
142
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
143
|
+
<script>
|
|
144
|
+
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
|
|
145
|
+
function toggleTheme() {
|
|
146
|
+
const html = document.documentElement;
|
|
147
|
+
const isLight = html.classList.toggle('light');
|
|
148
|
+
document.getElementById('theme-toggle').textContent = isLight ? 'π Dark' : 'βοΈ Light';
|
|
149
|
+
mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
|
|
150
|
+
}
|
|
151
|
+
</script>
|
|
152
|
+
<script src="architect-actions.js"></script>
|
|
153
|
+
</body>
|
|
154
|
+
</html>
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="vi">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Feature Map β {project}</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body data-arch-slug="features">
|
|
10
|
+
<nav class="nav-sidebar">
|
|
11
|
+
<div class="logo">
|
|
12
|
+
<span>ViePilot Architect Mode</span>
|
|
13
|
+
<strong>{project}</strong>
|
|
14
|
+
</div>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><a href="index.html">π Hub</a></li>
|
|
17
|
+
<li><a href="architecture.html">ποΈ Architecture</a></li>
|
|
18
|
+
<li><a href="sequence-diagram.html">π¬ Sequence</a></li>
|
|
19
|
+
<li><a href="data-flow.html">π Data Flow</a></li>
|
|
20
|
+
<li><a href="decisions.html">π Decisions (ADR)</a></li>
|
|
21
|
+
<li><a href="tech-stack.html">π οΈ Tech Stack</a></li>
|
|
22
|
+
<li><a href="tech-notes.html">π Tech Notes</a></li>
|
|
23
|
+
<li><a href="feature-map.html" class="active">πΊοΈ Feature Map</a></li>
|
|
24
|
+
<li><a href="erd.html">ποΈ ERD</a></li>
|
|
25
|
+
<li><a href="user-use-cases.html">π€ Use Cases</a></li>
|
|
26
|
+
<li><a href="deployment.html">π Deployment</a></li>
|
|
27
|
+
<li><a href="apis.html">π APIs</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</nav>
|
|
30
|
+
|
|
31
|
+
<main class="main-content">
|
|
32
|
+
<div class="page-header">
|
|
33
|
+
<div>
|
|
34
|
+
<h1>πΊοΈ Feature Map</h1>
|
|
35
|
+
<p>Features with layer, phase, and priority tags</p>
|
|
36
|
+
</div>
|
|
37
|
+
<button id="theme-toggle" onclick="toggleTheme()">βοΈ Light</button>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="card">
|
|
41
|
+
<h2>Feature Overview (Mindmap)</h2>
|
|
42
|
+
<div class="mermaid-wrap">
|
|
43
|
+
<div class="mermaid">
|
|
44
|
+
mindmap
|
|
45
|
+
root(({project}))
|
|
46
|
+
Phase 1
|
|
47
|
+
{Feature 1}
|
|
48
|
+
{Feature 2}
|
|
49
|
+
Phase 2
|
|
50
|
+
{Feature 3}
|
|
51
|
+
{Feature 4}
|
|
52
|
+
Phase 3
|
|
53
|
+
{Feature 5}
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<div class="card">
|
|
59
|
+
<h2>Feature List</h2>
|
|
60
|
+
<table>
|
|
61
|
+
<thead>
|
|
62
|
+
<tr>
|
|
63
|
+
<th>Feature</th>
|
|
64
|
+
<th>Layer</th>
|
|
65
|
+
<th>Phase</th>
|
|
66
|
+
<th>Phase</th>
|
|
67
|
+
<th>Status</th>
|
|
68
|
+
<th>Notes</th>
|
|
69
|
+
</tr>
|
|
70
|
+
</thead>
|
|
71
|
+
<tbody>
|
|
72
|
+
<tr data-arch-id="F1">
|
|
73
|
+
<td>{Feature name}</td>
|
|
74
|
+
<td>{Frontend/Backend/Infra}</td>
|
|
75
|
+
<td>Phase 1</td>
|
|
76
|
+
<td><span class="badge badge-phase-1">Phase 1</span></td>
|
|
77
|
+
<td>{todo/in-progress/done}</td>
|
|
78
|
+
<td>{notes}</td>
|
|
79
|
+
</tr>
|
|
80
|
+
<tr data-arch-id="F2">
|
|
81
|
+
<td>{Feature name}</td>
|
|
82
|
+
<td>{Layer}</td>
|
|
83
|
+
<td>Phase 2</td>
|
|
84
|
+
<td><span class="badge badge-phase-2">Phase 2</span></td>
|
|
85
|
+
<td>{status}</td>
|
|
86
|
+
<td>{notes}</td>
|
|
87
|
+
</tr>
|
|
88
|
+
<tr data-arch-id="F3">
|
|
89
|
+
<td>{Feature name}</td>
|
|
90
|
+
<td>{Layer}</td>
|
|
91
|
+
<td>Phase 3</td>
|
|
92
|
+
<td><span class="badge badge-phase-3">Phase 3</span></td>
|
|
93
|
+
<td>{status}</td>
|
|
94
|
+
<td>{notes}</td>
|
|
95
|
+
</tr>
|
|
96
|
+
</tbody>
|
|
97
|
+
</table>
|
|
98
|
+
</div>
|
|
99
|
+
</main>
|
|
100
|
+
|
|
101
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
|
|
102
|
+
<script>
|
|
103
|
+
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
|
|
104
|
+
function toggleTheme() {
|
|
105
|
+
const html = document.documentElement;
|
|
106
|
+
const isLight = html.classList.toggle('light');
|
|
107
|
+
document.getElementById('theme-toggle').textContent = isLight ? 'π Dark' : 'βοΈ Light';
|
|
108
|
+
mermaid.initialize({ startOnLoad: false, theme: isLight ? 'default' : 'dark' });
|
|
109
|
+
}
|
|
110
|
+
</script>
|
|
111
|
+
<script src="architect-actions.js"></script>
|
|
112
|
+
</body>
|
|
113
|
+
</html>
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="vi">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Architecture Hub β {project}</title>
|
|
7
|
+
<link rel="stylesheet" href="style.css" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<nav class="nav-sidebar">
|
|
11
|
+
<div class="logo">
|
|
12
|
+
<span>ViePilot Architect Mode</span>
|
|
13
|
+
<strong>{project}</strong>
|
|
14
|
+
</div>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><a href="index.html" class="active">π Hub</a></li>
|
|
17
|
+
<li><a href="architecture.html">ποΈ Architecture</a></li>
|
|
18
|
+
<li><a href="sequence-diagram.html">π¬ Sequence</a></li>
|
|
19
|
+
<li><a href="data-flow.html">π Data Flow</a></li>
|
|
20
|
+
<li><a href="decisions.html">π Decisions (ADR)</a></li>
|
|
21
|
+
<li><a href="tech-stack.html">π οΈ Tech Stack</a></li>
|
|
22
|
+
<li><a href="tech-notes.html">π Tech Notes</a></li>
|
|
23
|
+
<li><a href="feature-map.html">πΊοΈ Feature Map</a></li>
|
|
24
|
+
<li><a href="erd.html">ποΈ ERD</a></li>
|
|
25
|
+
<li><a href="user-use-cases.html">π€ Use Cases</a></li>
|
|
26
|
+
<li><a href="deployment.html">π Deployment</a></li>
|
|
27
|
+
<li><a href="apis.html">π APIs</a></li>
|
|
28
|
+
</ul>
|
|
29
|
+
</nav>
|
|
30
|
+
|
|
31
|
+
<main class="main-content">
|
|
32
|
+
<div class="page-header">
|
|
33
|
+
<div>
|
|
34
|
+
<h1>Architecture Hub</h1>
|
|
35
|
+
<p>Session: {session-id} Β· Updated: {date}</p>
|
|
36
|
+
</div>
|
|
37
|
+
<button id="theme-toggle" onclick="toggleTheme()">βοΈ Light</button>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="card">
|
|
41
|
+
<h2>Project Summary</h2>
|
|
42
|
+
<table>
|
|
43
|
+
<tr><th>Field</th><th>Value</th></tr>
|
|
44
|
+
<tr><td>Project</td><td>{project}</td></tr>
|
|
45
|
+
<tr><td>Session</td><td>{session-id}</td></tr>
|
|
46
|
+
<tr><td>Created</td><td>{date}</td></tr>
|
|
47
|
+
<tr><td>Open Questions</td><td>{open-questions-count}</td></tr>
|
|
48
|
+
<tr><td>Decisions</td><td>{decisions-count}</td></tr>
|
|
49
|
+
</table>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="cols-2">
|
|
53
|
+
<a href="architecture.html" class="card" style="text-decoration:none;display:block;">
|
|
54
|
+
<h2>ποΈ Architecture</h2>
|
|
55
|
+
<p style="color:var(--text-muted);font-size:13px;">C4 Context + components + external systems</p>
|
|
56
|
+
</a>
|
|
57
|
+
<a href="data-flow.html" class="card" style="text-decoration:none;display:block;">
|
|
58
|
+
<h2>π Data Flow</h2>
|
|
59
|
+
<p style="color:var(--text-muted);font-size:13px;">Request/event flows, sequence diagrams</p>
|
|
60
|
+
</a>
|
|
61
|
+
<a href="decisions.html" class="card" style="text-decoration:none;display:block;">
|
|
62
|
+
<h2>π Decisions (ADR)</h2>
|
|
63
|
+
<p style="color:var(--text-muted);font-size:13px;">Architecture decision log β context, options, rationale</p>
|
|
64
|
+
</a>
|
|
65
|
+
<a href="tech-stack.html" class="card" style="text-decoration:none;display:block;">
|
|
66
|
+
<h2>π οΈ Tech Stack</h2>
|
|
67
|
+
<p style="color:var(--text-muted);font-size:13px;">Layer-by-layer: frontend, backend, infra, data, DevOps</p>
|
|
68
|
+
</a>
|
|
69
|
+
<a href="tech-notes.html" class="card" style="text-decoration:none;display:block;">
|
|
70
|
+
<h2>π Tech Notes</h2>
|
|
71
|
+
<p style="color:var(--text-muted);font-size:13px;">Assumptions, risks, open questions</p>
|
|
72
|
+
</a>
|
|
73
|
+
<a href="feature-map.html" class="card" style="text-decoration:none;display:block;">
|
|
74
|
+
<h2>πΊοΈ Feature Map</h2>
|
|
75
|
+
<p style="color:var(--text-muted);font-size:13px;">Features with tags: layer, phase, priority</p>
|
|
76
|
+
</a>
|
|
77
|
+
<a href="erd.html" class="card" style="text-decoration:none;display:block;">
|
|
78
|
+
<h2>ποΈ ERD</h2>
|
|
79
|
+
<p style="color:var(--text-muted);font-size:13px;">Database entities, attributes, relationships (erDiagram)</p>
|
|
80
|
+
</a>
|
|
81
|
+
<a href="user-use-cases.html" class="card" style="text-decoration:none;display:block;">
|
|
82
|
+
<h2>π€ Use Cases</h2>
|
|
83
|
+
<p style="color:var(--text-muted);font-size:13px;">User stories, use cases, actors, flows</p>
|
|
84
|
+
</a>
|
|
85
|
+
<a href="sequence-diagram.html" class="card" style="text-decoration:none;display:block;">
|
|
86
|
+
<h2>π¬ Sequence Diagram</h2>
|
|
87
|
+
<p style="color:var(--text-muted);font-size:13px;">Per-scenario step-by-step interactions</p>
|
|
88
|
+
</a>
|
|
89
|
+
<a href="deployment.html" class="card" style="text-decoration:none;display:block;">
|
|
90
|
+
<h2>π Deployment</h2>
|
|
91
|
+
<p style="color:var(--text-muted);font-size:13px;">Infrastructure, environments, CI/CD pipeline</p>
|
|
92
|
+
</a>
|
|
93
|
+
<a href="apis.html" class="card" style="text-decoration:none;display:block;">
|
|
94
|
+
<h2>π APIs</h2>
|
|
95
|
+
<p style="color:var(--text-muted);font-size:13px;">Service API listing, endpoint design, HTTP methods</p>
|
|
96
|
+
</a>
|
|
97
|
+
</div>
|
|
98
|
+
</main>
|
|
99
|
+
|
|
100
|
+
<script>
|
|
101
|
+
function toggleTheme() {
|
|
102
|
+
const html = document.documentElement;
|
|
103
|
+
const isLight = html.classList.toggle('light');
|
|
104
|
+
document.getElementById('theme-toggle').textContent = isLight ? 'π Dark' : 'βοΈ Light';
|
|
105
|
+
}
|
|
106
|
+
</script>
|
|
107
|
+
</body>
|
|
108
|
+
</html>
|