@programinglive/dev-workflow-mcp-server 1.4.6 → 1.5.1

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 (38) hide show
  1. package/CHANGELOG.md +114 -0
  2. package/docs/NETLIFY_DEPLOYMENT.md +125 -0
  3. package/docs/product/PRD.md +4 -2
  4. package/docs/release-notes/RELEASE_NOTES.md +32 -0
  5. package/docs/web-dashboard.md +12 -0
  6. package/package.json +1 -1
  7. package/server.json +13 -3
  8. package/tests/build.test.js +30 -0
  9. package/tests/mcpRegistry.test.js +13 -3
  10. package/web/app/api/history/route.ts +10 -17
  11. package/web/app/api/summary/route.ts +11 -13
  12. package/web/app/api/version/route.ts +4 -11
  13. package/web/netlify.toml +6 -0
  14. package/web/next.config.ts +1 -2
  15. package/web/package-lock.json +17 -428
  16. package/web/package.json +0 -1
  17. package/web-legacy/public/assets/android-chrome-192x192.png +0 -0
  18. package/web-legacy/public/assets/android-chrome-512x512.png +0 -0
  19. package/web-legacy/public/assets/apple-touch-icon.png +0 -0
  20. package/web-legacy/public/assets/favicon-16x16.png +0 -0
  21. package/web-legacy/public/assets/favicon-32x32.png +0 -0
  22. package/web-legacy/public/assets/favicon.ico +0 -0
  23. package/web-legacy/public/assets/favicon.png +0 -0
  24. package/web-legacy/public/assets/logo.png +0 -0
  25. package/web-legacy/public/assets/og-preview.png +0 -0
  26. package/web-legacy/public/assets/site.webmanifest +0 -1
  27. package/web-legacy/public/docs/EXAMPLES.html +0 -496
  28. package/web-legacy/public/docs/GETTING-STARTED.html +0 -318
  29. package/web-legacy/public/docs/README.html +0 -620
  30. package/web-legacy/public/docs/RELEASE_NOTES.html +0 -275
  31. package/web-legacy/public/docs/TROUBLESHOOTING.html +0 -627
  32. package/web-legacy/public/docs/WORKFLOW-TEMPLATES.html +0 -676
  33. package/web-legacy/public/docs/web-dashboard.html +0 -243
  34. package/web-legacy/public/index.html +0 -223
  35. package/web-legacy/public/input.css +0 -80
  36. package/web-legacy/public/main.js +0 -167
  37. package/web-legacy/public/output.css +0 -1559
  38. package/web-legacy/server.js +0 -207
@@ -1,243 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Dev Workflow Web Dashboard - Dev Workflow</title>
7
- <link rel="icon" type="image/png" href="/assets/favicon.png">
8
- <meta property="og:type" content="website">
9
- <meta property="og:url" content="https://commiter.programinglive.com/docs/web-dashboard.md">
10
- <meta property="og:title" content="Dev Workflow Web Dashboard - Dev Workflow">
11
- <meta property="og:description" content="Detailed documentation for Dev Workflow MCP Server commands and usage.">
12
- <meta property="og:image" content="/assets/og-preview.png">
13
- <meta property="twitter:card" content="summary_large_image">
14
- <meta property="twitter:url" content="https://commiter.programinglive.com/docs/web-dashboard.md">
15
- <meta property="twitter:title" content="Dev Workflow Web Dashboard - Dev Workflow">
16
- <meta property="twitter:description" content="Detailed documentation for Dev Workflow MCP Server commands and usage.">
17
- <meta property="twitter:image" content="/assets/og-preview.png">
18
- <link rel="stylesheet" href="/output.css">
19
- <script src="https://unpkg.com/lucide@latest"></script>
20
- </head>
21
- <body class="bg-[#0a0a0f] text-white font-sans antialiased selection:bg-primary/30 selection:text-white min-h-screen flex flex-col">
22
- <header class="fixed top-0 left-0 right-0 z-50 border-b border-white/10 bg-[#0a0a0f]/80 backdrop-blur-md">
23
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
24
- <div class="flex items-center gap-3">
25
- <a href="/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
26
- <div class="w-10 h-10 rounded-lg overflow-hidden border border-white/10 shadow-lg shadow-primary/20">
27
- <img src="/assets/logo.png" alt="Dev Workflow Logo" class="w-full h-full object-cover">
28
- </div>
29
- <div>
30
- <h1 class="font-bold text-lg tracking-tight text-white">Dev Workflow</h1>
31
- <div class="flex items-center gap-2 text-xs text-gray-400">
32
- <span class="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
33
- <span>Documentation</span>
34
- </div>
35
- </div>
36
- </a>
37
- </div>
38
- <div class="flex items-center gap-4">
39
- <a href="/" class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full text-sm font-medium transition-all group">
40
- <i data-lucide="layout-dashboard" class="w-4 h-4 text-gray-400 group-hover:text-white transition-colors"></i>
41
- <span>Dashboard</span>
42
- </a>
43
- </div>
44
- </div>
45
- </header>
46
-
47
- <div class="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 pt-24 pb-12 flex gap-8">
48
- <aside class="hidden lg:block w-64 flex-shrink-0 fixed h-[calc(100vh-6rem)] overflow-y-auto pr-4 custom-scrollbar">
49
- <nav class="space-y-1">
50
- <a href="/" class="flex items-center gap-3 px-4 py-3 text-sm font-medium rounded-lg text-gray-400 hover:text-white hover:bg-white/5 transition-colors">
51
- <i data-lucide="arrow-left" class="w-4 h-4"></i>
52
- Back to Dashboard
53
- </a>
54
- </nav>
55
- <div class="mt-8 pt-8 border-t border-white/10">
56
- <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Documentation</h3>
57
- <div class="space-y-1">
58
- <a href="/docs/README.html" class="doc-link block px-4 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors ">README</a>
59
- <a href="/docs/web-dashboard.html" class="doc-link block px-4 py-2 text-sm font-medium hover:text-white hover:bg-white/5 rounded-lg transition-colors bg-white/5 text-white ring-1 ring-white/5">web dashboard</a>
60
- <a href="/docs/GETTING-STARTED.html" class="doc-link block px-4 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors ">GETTING STARTED</a>
61
- <a href="/docs/EXAMPLES.html" class="doc-link block px-4 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors ">EXAMPLES</a>
62
- <a href="/docs/WORKFLOW-TEMPLATES.html" class="doc-link block px-4 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors ">WORKFLOW TEMPLATES</a>
63
- <a href="/docs/TROUBLESHOOTING.html" class="doc-link block px-4 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors ">TROUBLESHOOTING</a>
64
- <a href="/docs/RELEASE_NOTES.html" class="doc-link block px-4 py-2 text-sm font-medium text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-colors ">RELEASE_NOTES</a>
65
- </div>
66
- </div>
67
- </aside>
68
-
69
- <main class="flex-1 lg:pl-72 min-w-0">
70
- <div class="bg-surface border border-white/10 rounded-xl p-8 backdrop-blur-sm">
71
- <header class="mb-8 border-b border-white/10 pb-6">
72
- <h1 class="text-3xl font-bold text-white mb-2">Dev Workflow Web Dashboard</h1>
73
- <p class="text-gray-400 font-mono text-sm">web-dashboard.md</p>
74
- </header>
75
- <article class="prose prose-invert prose-lg max-w-none">
76
- <p>Learn how to start and use the Dev Workflow dashboard included with the MCP server. The dashboard exposes project history, summaries, and aggregates through a small Node.js service.</p>
77
- <h2>Prerequisites</h2>
78
- <p>Before launching the dashboard, confirm the following:</p>
79
- <ul>
80
- <li>Node.js 18+ installed (same requirement as the MCP server)</li>
81
- <li>Project dependencies installed with <code>npm install</code></li>
82
- <li>Workflow history stored under <code>.state/</code> (created automatically when using the MCP server)</li>
83
- </ul>
84
- <blockquote>
85
- <p><strong>Plesk users:</strong> follow the <a href="../README.md#option-3-install-on-plesk-hosting">Plesk installation guide</a> first and ensure SSH access is enabled.</p>
86
- </blockquote>
87
- <h2>Features</h2>
88
- <ul>
89
- <li><strong>Task history browser</strong> – Paginated list of completed workflow entries.</li>
90
- <li><strong>Summary stats</strong> – Counts of tasks by type and recent activity timeline.</li>
91
- <li><strong>Aggregated trends</strong> – Daily, monthly, or yearly breakdowns of workflow activity.</li>
92
- <li><strong>Multi-user support</strong> – Switch between user identifiers recorded in the <code>.state</code> directory.</li>
93
- </ul>
94
- <h2>Getting Started</h2>
95
- <p>Launch the dashboard from your project directory:</p>
96
- <pre><code class="language-bash">npm run web
97
- </code></pre>
98
- <p>When the server is ready you will see:</p>
99
- <pre><code>🌐 Dev Workflow Dashboard running at http://localhost:3111
100
- </code></pre>
101
- <p>Open the URL in your browser. If port 3111 is in use, the script automatically selects a nearby free port.</p>
102
- <h3>Choosing a Port</h3>
103
- <p>Set <code>DEV_WORKFLOW_WEB_PORT</code> to force a specific port:</p>
104
- <pre><code class="language-bash">DEV_WORKFLOW_WEB_PORT=5000 npm run web
105
- </code></pre>
106
- <h3>Selecting a User</h3>
107
- <p>The dashboard defaults to the <code>default</code> user. Append <code>?user=&lt;USER_ID&gt;</code> to view another user’s data. User IDs map to the subdirectories under <code>.state/users/</code>.</p>
108
- <pre><code>http://localhost:3111/?user=my-teammate
109
- </code></pre>
110
- <h2>Navigation</h2>
111
- <p>The HTML frontend lives in <code>web/index.html</code>. The default UI includes:</p>
112
- <ul>
113
- <li><strong>Summary cards</strong> – Total tasks completed and last active date.</li>
114
- <li><strong>Recent tasks table</strong> – Paginated entries with task descriptions and timestamps.</li>
115
- <li><strong>Charts</strong> (if script extensions are enabled) – Visual trends per frequency selection.</li>
116
- </ul>
117
- <h2>API Reference</h2>
118
- <p>Interact with the dashboard programmatically using the JSON endpoints served by <code>web/server.js</code>.</p>
119
- <h3><code>GET /api/summary</code></h3>
120
- <p>Returns aggregate statistics for a user.</p>
121
- <p><strong>Query parameters</strong></p>
122
- <ul>
123
- <li><code>user</code> <em>(optional, string)</em> – User identifier (default <code>default</code>).</li>
124
- </ul>
125
- <p><strong>Response</strong></p>
126
- <pre><code class="language-json">{
127
- &quot;summary&quot;: {
128
- &quot;totalTasks&quot;: 12,
129
- &quot;taskTypes&quot;: { &quot;feature&quot;: 8, &quot;bugfix&quot;: 3, &quot;refactor&quot;: 1 },
130
- &quot;lastActive&quot;: &quot;2025-10-01T09:25:41.123Z&quot;,
131
- &quot;recentTasks&quot;: [
132
- { &quot;description&quot;: &quot;feat: add billing webhooks&quot;, &quot;type&quot;: &quot;feature&quot;, &quot;timestamp&quot;: &quot;2025-10-01T09:25:41.123Z&quot; }
133
- ],
134
- &quot;updatedAt&quot;: &quot;2025-10-01T09:30:00.000Z&quot;
135
- }
136
- }
137
- </code></pre>
138
- <h3><code>GET /api/history</code></h3>
139
- <p>Returns paginated task history.</p>
140
- <p><strong>Query parameters</strong></p>
141
- <ul>
142
- <li><code>user</code> <em>(optional, string)</em> – User identifier (default <code>default</code>).</li>
143
- <li><code>page</code> <em>(optional, number)</em> – Page number (default <code>1</code>).</li>
144
- <li><code>pageSize</code> <em>(optional, number)</em> – Items per page (default <code>20</code>, max <code>100</code>).</li>
145
- <li><code>startDate</code> <em>(optional, string)</em> – Filter by ISO date (inclusive).</li>
146
- <li><code>endDate</code> <em>(optional, string)</em> – Filter by ISO date (inclusive).</li>
147
- </ul>
148
- <p><strong>Response</strong></p>
149
- <pre><code class="language-json">{
150
- &quot;entries&quot;: [
151
- {
152
- &quot;id&quot;: 42,
153
- &quot;user_id&quot;: &quot;default&quot;,
154
- &quot;task_description&quot;: &quot;feat: add reporting endpoint&quot;,
155
- &quot;task_type&quot;: &quot;feature&quot;,
156
- &quot;commit_message&quot;: &quot;feat: add reporting endpoint&quot;,
157
- &quot;timestamp&quot;: &quot;2025-09-30T09:18:00.000Z&quot;
158
- }
159
- ],
160
- &quot;total&quot;: 42,
161
- &quot;page&quot;: 1,
162
- &quot;pageSize&quot;: 20
163
- }
164
- </code></pre>
165
- <h3><code>GET /api/history-summary</code></h3>
166
- <p>Returns an array of task counts grouped by period.</p>
167
- <p><strong>Query parameters</strong></p>
168
- <ul>
169
- <li><code>user</code> <em>(optional, string)</em> – User identifier (default <code>default</code>).</li>
170
- <li><code>frequency</code> <em>(optional, string)</em> – <code>daily</code>, <code>monthly</code>, or <code>yearly</code> (default <code>daily</code>).</li>
171
- <li><code>startDate</code>, <code>endDate</code> <em>(optional, string)</em> – Limit range by ISO dates.</li>
172
- </ul>
173
- <p><strong>Response</strong></p>
174
- <pre><code class="language-json">{
175
- &quot;summary&quot;: [
176
- { &quot;period&quot;: &quot;2025-09-30&quot;, &quot;count&quot;: 3 },
177
- { &quot;period&quot;: &quot;2025-09-29&quot;, &quot;count&quot;: 1 }
178
- ]
179
- }
180
- </code></pre>
181
- <h2>Configuration</h2>
182
- <table>
183
- <thead>
184
- <tr>
185
- <th>Variable</th>
186
- <th>Description</th>
187
- <th>Default</th>
188
- </tr>
189
- </thead>
190
- <tbody><tr>
191
- <td><code>DEV_WORKFLOW_WEB_PORT</code></td>
192
- <td>Port for the dashboard</td>
193
- <td><code>3111</code> or next available</td>
194
- </tr>
195
- <tr>
196
- <td><code>DEV_WORKFLOW_USER_ID</code></td>
197
- <td>User identifier when launching via MCP</td>
198
- <td>auto-generated</td>
199
- </tr>
200
- <tr>
201
- <td><code>DEV_WORKFLOW_STATE_FILE</code></td>
202
- <td>Overrides path to workflow state JSON</td>
203
- <td>auto-detected</td>
204
- </tr>
205
- </tbody></table>
206
- <h2>Troubleshooting</h2>
207
- <table>
208
- <thead>
209
- <tr>
210
- <th>Symptom</th>
211
- <th>Fix</th>
212
- </tr>
213
- </thead>
214
- <tbody><tr>
215
- <td>Server fails with <code>better-sqlite3</code> build error</td>
216
- <td>Install Python 3 and build tools (Windows) or ensure SQLite build dependencies exist (Linux/macOS).</td>
217
- </tr>
218
- <tr>
219
- <td>Dashboard shows empty data</td>
220
- <td>Confirm the MCP server has generated <code>.state/users/&lt;user&gt;/workflow-state.json</code> and that the chosen <code>user</code> matches.</td>
221
- </tr>
222
- <tr>
223
- <td>Port already in use</td>
224
- <td>Set <code>DEV_WORKFLOW_WEB_PORT</code> to a free port before running <code>npm run web</code>.</td>
225
- </tr>
226
- </tbody></table>
227
- <h2>Related Topics</h2>
228
- <ul>
229
- <li><a href="../README.md">Main README</a></li>
230
- <li><a href="./state.md">Workflow State Internals</a> <em>(coming soon)</em></li>
231
- <li><a href="../README.md#%F0%9F%9B%A0%EF%B8%8F-available-tools">CLI Tools</a></li>
232
- </ul>
233
-
234
- </article>
235
- </div>
236
- </main>
237
- </div>
238
-
239
- <script>
240
- lucide.createIcons();
241
- </script>
242
- </body>
243
- </html>
@@ -1,223 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <div class="flex items-center gap-2">
4
- <img src="/assets/logo.png" alt="Dev Workflow" class="w-8 h-8 rounded-lg">
5
- <span class="text-lg font-bold">Dev Workflow</span>
6
- </div>
7
- <div class="hidden md:flex items-center gap-6">
8
- <a href="#features" class="text-gray-300 hover:text-white transition">Features</a>
9
- <a href="#history" class="text-gray-300 hover:text-white transition">History</a>
10
- <a href="#api" class="text-gray-300 hover:text-white transition">API</a>
11
- <a href="docs.html?doc=README.md" class="text-gray-300 hover:text-white transition">Docs</a>
12
- <a href="https://github.com/programinglive/dev-workflow-mcp-server" target="_blank"
13
- class="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg transition">
14
- <i data-lucide="github" class="w-4 h-4"></i>
15
- GitHub
16
- </a>
17
- </div>
18
- <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-white/5">
19
- <i data-lucide="menu" class="w-6 h-6"></i>
20
- </button>
21
- </div>
22
- </div>
23
- <!-- Mobile Menu -->
24
- <div id="mobileMenu" class="hidden border-t border-white/10 bg-[#0a0a0f]">
25
- <div class="px-4 py-4 space-y-3">
26
- <a href="#features" class="block text-gray-300 hover:text-white transition">Features</a>
27
- <a href="#history" class="block text-gray-300 hover:text-white transition">History</a>
28
- <a href="#api" class="block text-gray-300 hover:text-white transition">API</a>
29
- <a href="docs.html?doc=README.md" class="block text-gray-300 hover:text-white transition">Docs</a>
30
- <a href="https://github.com/programinglive/dev-workflow-mcp-server" target="_blank"
31
- class="flex items-center gap-2 text-gray-300 hover:text-white transition">
32
- <i data-lucide="github" class="w-4 h-4"></i>
33
- GitHub
34
- </a>
35
- </div>
36
- </div>
37
- </nav>
38
-
39
- <!-- Hero Section -->
40
- <section class="min-h-screen flex items-center justify-center px-4 pt-16 relative overflow-hidden">
41
- <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10"></div>
42
- <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
43
- <!-- Left Column - Content -->
44
- <div>
45
- <div class="animate-fade-in-up" style="animation-delay: 0.1s;">
46
- <div
47
- class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm mb-8">
48
- <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
49
- <span id="versionBadge">v1.3.12 - Active</span>
50
- </div>
51
- </div>
52
-
53
- <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight animate-fade-in-up"
54
- style="animation-delay: 0.2s;">
55
- Master Your<br><span
56
- class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Workflow</span>
57
- </h1>
58
- <p class="text-lg md:text-xl text-gray-400 mb-8 max-w-xl animate-fade-in-up" style="animation-delay: 0.3s;">
59
- An MCP server that acts as your coding conscience. Enforce test-driven development, ensure documentation, and
60
- never skip a step in your release process.
61
- </p>
62
- <div class="flex flex-col sm:flex-row gap-4 mb-8 animate-fade-in-up" style="animation-delay: 0.4s;">
63
- <a href="#history"
64
- class="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:shadow-lg hover:shadow-indigo-500/50 transition inline-flex items-center justify-center gap-2">
65
- View History <i data-lucide="arrow-right" class="w-4 h-4"></i>
66
- </a>
67
- <a href="docs.html?doc=README.md"
68
- class="px-6 py-3 bg-white/5 border border-white/10 rounded-lg font-semibold hover:bg-white/10 transition text-center">
69
- Documentation
70
- </a>
71
- </div>
72
- <div class="flex items-center gap-8 text-sm animate-fade-in-up" style="animation-delay: 0.5s;">
73
- <div>
74
- <div class="text-2xl font-bold" id="versionNum">1.3.12</div>
75
- <div class="text-gray-500">Latest Version</div>
76
- </div>
77
- <div>
78
- <div class="text-2xl font-bold">MIT</div>
79
- <div class="text-gray-500">License</div>
80
- </div>
81
- <div>
82
- <div class="text-2xl font-bold">Node 18+</div>
83
- <div class="text-gray-500">Compatibility</div>
84
- </div>
85
- </div>
86
- </div>
87
- <!-- Right Column - Terminal -->
88
- <div class="hidden lg:block">
89
- <div class="relative">
90
- <div class="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 blur-3xl"></div>
91
- <div class="relative bg-[#1a1a24] rounded-xl border border-white/10 p-6 shadow-2xl">
92
- <div class="flex items-center gap-2 mb-4">
93
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
94
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
95
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
96
- <span class="ml-auto text-xs text-gray-500">terminal</span>
97
- </div>
98
- <div class="font-mono text-sm space-y-2" id="terminalContent">
99
- <!-- Content will be generated by JS -->
100
- </div>
101
- </div>
102
- </div>
103
- </div>
104
- </div>
105
- </section>
106
-
107
- <!-- Features Section -->
108
- <section id="features" class="py-20 px-4">
109
- <div class="max-w-7xl mx-auto">
110
- <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Your Coding Conscience</h2>
111
- <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
112
- <div class="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
113
- <div class="w-12 h-12 rounded-lg bg-indigo-500/20 flex items-center justify-center mb-4">
114
- <i data-lucide="shield-check" class="w-6 h-6 text-indigo-400"></i>
115
- </div>
116
- <h3 class="text-xl font-semibold mb-2">Enforced Discipline</h3>
117
- <p class="text-gray-400">Won't let you skip important steps. Follows a strict, proven development workflow.
118
- </p>
119
- </div>
120
- <div class="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
121
- <div class="w-12 h-12 rounded-lg bg-purple-500/20 flex items-center justify-center mb-4">
122
- <i data-lucide="test-tube" class="w-6 h-6 text-purple-400"></i>
123
- </div>
124
- <h3 class="text-xl font-semibold mb-2">Test-Driven</h3>
125
- <p class="text-gray-400">Blocks commits if tests fail. Encourages writing tests before marking tasks complete.
126
- </p>
127
- </div>
128
- <div class="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
129
- <div class="w-12 h-12 rounded-lg bg-emerald-500/20 flex items-center justify-center mb-4">
130
- <i data-lucide="file-text" class="w-6 h-6 text-emerald-400"></i>
131
- </div>
132
- <h3 class="text-xl font-semibold mb-2">Documentation</h3>
133
- <p class="text-gray-400">Reminds you to update documentation (README, docs, changelog) for every change.</p>
134
- </div>
135
- <div class="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
136
- <div class="w-12 h-12 rounded-lg bg-orange-500/20 flex items-center justify-center mb-4">
137
- <i data-lucide="git-branch" class="w-6 h-6 text-orange-400"></i>
138
- </div>
139
- <h3 class="text-xl font-semibold mb-2">State Tracking</h3>
140
- <p class="text-gray-400">Remembers exactly where you are in the workflow, even across sessions.</p>
141
- </div>
142
- <div class="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
143
- <div class="w-12 h-12 rounded-lg bg-blue-500/20 flex items-center justify-center mb-4">
144
- <i data-lucide="history" class="w-6 h-6 text-blue-400"></i>
145
- </div>
146
- <h3 class="text-xl font-semibold mb-2">Task History</h3>
147
- <p class="text-gray-400">Keeps a detailed log of all completed tasks, commits, and releases.</p>
148
- </div>
149
- <div class="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
150
- <div class="w-12 h-12 rounded-lg bg-pink-500/20 flex items-center justify-center mb-4">
151
- <i data-lucide="zap" class="w-6 h-6 text-pink-400"></i>
152
- </div>
153
- <h3 class="text-xl font-semibold mb-2">Smart Prompts</h3>
154
- <p class="text-gray-400">Provides quick reminders and guidance on best practices as you work.</p>
155
- </div>
156
- </div>
157
- </div>
158
- </section>
159
-
160
- <!-- History Section -->
161
- <section id="history" class="py-20 px-4 bg-white/5">
162
- <div class="max-w-7xl mx-auto">
163
- <h2 class="text-3xl md:text-4xl font-bold mb-8">Workflow History</h2>
164
- <p class="text-gray-400 mb-12">Track your development progress and analyze your workflow patterns.</p>
165
- <div class="bg-[#0a0a0f] rounded-xl border border-white/10 p-6">
166
- <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
167
- <input type="text" id="userId" placeholder="User ID"
168
- class="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white">
169
- <input type="date" id="startDate"
170
- class="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 [color-scheme:dark]">
171
- <input type="date" id="endDate"
172
- class="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 [color-scheme:dark]">
173
- <button id="applyFiltersBtn"
174
- class="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:shadow-lg hover:shadow-indigo-500/50 transition">Apply
175
- Filters</button>
176
- </div>
177
- <div id="summarySection" class="hidden mb-6">
178
- <h3 class="text-lg font-semibold mb-4">Project Summary</h3>
179
- <div id="summaryContent" class="text-gray-400"></div>
180
- </div>
181
- <div id="historySection" class="hidden">
182
- <h3 class="text-lg font-semibold mb-4">Recent History</h3>
183
- <div id="historyContent" class="space-y-3"></div>
184
- <div id="paginationControls" class="flex items-center justify-between mt-6 hidden">
185
- <button id="prevPageBtn"
186
- class="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 disabled:opacity-50">Previous</button>
187
- <span id="pageInfo" class="text-sm text-gray-400"></span>
188
- <button id="nextPageBtn"
189
- class="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 disabled:opacity-50">Next</button>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
- </section>
195
-
196
- <!-- API Section -->
197
- <section id="api" class="py-20 px-4">
198
- <div class="max-w-7xl mx-auto">
199
- <h2 class="text-3xl md:text-4xl font-bold mb-8">API Reference</h2>
200
- <p class="text-gray-400 mb-12">Query workflow data programmatically with our JSON API.</p>
201
- <div class="grid md:grid-cols-2 gap-6">
202
- <div class="p-6 rounded-xl bg-white/5 border border-white/10">
203
- <code class="text-indigo-400 font-mono text-sm">GET /api/history</code>
204
- <p class="text-gray-400 mt-2">Retrieve paginated task history entries.</p>
205
- </div>
206
- <div class="p-6 rounded-xl bg-white/5 border border-white/10">
207
- <code class="text-indigo-400 font-mono text-sm">GET /api/summary</code>
208
- <p class="text-gray-400 mt-2">Get project health stats and recent tasks.</p>
209
- </div>
210
- </div>
211
- </div>
212
- </section>
213
-
214
- <!-- Footer -->
215
- <footer class="py-12 px-4 border-t border-white/10">
216
- <div class="max-w-7xl mx-auto text-center text-gray-400">
217
- <p>Built with ❤️ for developers who care about quality</p>
218
- </div>
219
- </footer>
220
- <script src="/main.js"></script>
221
- </body>
222
-
223
- </html>
@@ -1,80 +0,0 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
4
-
5
- @layer utilities {
6
- @keyframes fadeInUp {
7
- 0% {
8
- opacity: 0;
9
- transform: translateY(20px);
10
- }
11
-
12
- 100% {
13
- opacity: 1;
14
- transform: translateY(0px);
15
- }
16
- }
17
-
18
- @keyframes fadeInRight {
19
- 0% {
20
- opacity: 0;
21
- transform: translateY(-50%) translateX(40px);
22
- }
23
-
24
- 100% {
25
- opacity: 1;
26
- transform: translateY(-50%) translateX(0px);
27
- }
28
- }
29
-
30
- @keyframes fadeIn {
31
- 0% {
32
- opacity: 0;
33
- transform: translateX(-10px);
34
- }
35
-
36
- 100% {
37
- opacity: 1;
38
- transform: translateX(0px);
39
- }
40
- }
41
-
42
- .animate-fade-in-up {
43
- animation: fadeInUp 0.8s ease-out forwards;
44
- opacity: 0;
45
- }
46
-
47
- .animate-fade-in-right {
48
- animation: fadeInRight 0.8s ease-out forwards;
49
- opacity: 0;
50
- }
51
-
52
- .terminal-line {
53
- opacity: 0;
54
- display: flex;
55
- }
56
-
57
- .terminal-line.visible {
58
- opacity: 1;
59
- transition: opacity 0.1s;
60
- }
61
-
62
- .typing-cursor::after {
63
- content: '▋';
64
- animation: blink 1s step-end infinite;
65
- margin-left: 4px;
66
- color: #a855f7;
67
- }
68
-
69
- @keyframes blink {
70
-
71
- 0%,
72
- 100% {
73
- opacity: 1;
74
- }
75
-
76
- 50% {
77
- opacity: 0;
78
- }
79
- }
80
- }