@programinglive/dev-workflow-mcp-server 1.6.1 → 1.6.3

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.6.3](https://github.com/programinglive/dev-workflow-mcp-server/compare/v1.6.2...v1.6.3) (2025-12-06)
+
+
+### 📝 Documentation
+
+* update release notes for 1.6.2 ([f0c2d49](https://github.com/programinglive/dev-workflow-mcp-server/commit/f0c2d4965f3e08afdaccae5eb49f7ea7d21a6ed3))
+
+
+### 🐛 Bug Fixes
+
+* add light mode support to docs page ([490cf22](https://github.com/programinglive/dev-workflow-mcp-server/commit/490cf2210253a7498cbb3d3a33d1c329672a2dfa))
+
+### [1.6.2](https://github.com/programinglive/dev-workflow-mcp-server/compare/v1.6.1...v1.6.2) (2025-12-06)
+
+
+### 📝 Documentation
+
+* update release notest for 1.6.1 ([72a9284](https://github.com/programinglive/dev-workflow-mcp-server/commit/72a92847444436e2c4bd17407e664117fe08a31f))
+
+
+### ✅ Tests
+
+* update create_documentation test to verify PRD check and remove incompatible jest test ([a7f2b28](https://github.com/programinglive/dev-workflow-mcp-server/commit/a7f2b28e65116cfb556767e7e6b25c0b4cdba613))
+
+
+### ✨ Features
+
+* add PRD file existence check to create_documentation workflow step ([62cdee3](https://github.com/programinglive/dev-workflow-mcp-server/commit/62cdee3f7402ed70e3e36003020e84958cdd4a3d))
+* add PRD file existence check to create_documentation workflow step ([6c51012](https://github.com/programinglive/dev-workflow-mcp-server/commit/6c510121980789c3d0e96376fe0375fbaf78a656))
+
 ### [1.6.1](https://github.com/programinglive/dev-workflow-mcp-server/compare/v1.6.0...v1.6.1) (2025-12-06)
 
 

package/README.md

@@ -353,6 +353,7 @@ The tool will:
 2. `create_tests`
 3. `run_tests` with `testsPassed`, `testCommand`, and optional `testDetails`
 4. `create_documentation` with `documentationType` and `documentationSummary`
+   - **Requires**: `docs/product/PRD.md` must exist before documentation can be marked complete
 5. `check_ready_to_commit`
 6. `commit_and_push` with `commitMessage` and optional `branch`
 7. `perform_release` with `releaseCommand`, plus optional `releaseNotes`, `releaseType`, and `preset`
@@ -360,6 +361,10 @@ The tool will:
 
 All arguments except the optional flags are required and must be non-empty strings.
 
+### Documentation Requirements
+
+The `create_documentation` step enforces that a PRD (Product Requirements Document) exists at `docs/product/PRD.md` before documentation can be marked as complete. This ensures all projects maintain a current PRD that describes the product's goals, features, and requirements.
+
 ## 🚫 Releasing Without the Workflow Steps
 
 The package ships with a release guard (`release-wrapper.js`) that backs the `npm run release:*` scripts. The guard refuses to run unless:

package/docs/release-notes/RELEASE_NOTES.md

@@ -4,6 +4,26 @@ Authoritative history of user-visible changes for the Development Workflow MCP S
 
 | Version | Date | Notes |
 |---------|------|-------|
+| 1.6.2 | 2025-12-06 | update release notest for 1.6.1 (72a9284) |
+| 1.6.1 | 2025-12-06 | add table header to release notes for release script compatibility (44e47fc) |
+
+
+
+## 1.6.2 – 📝 Documentation
+
+Released on **2025-12-06**.
+
+- update release notest for 1.6.1 (72a9284)
+- update create_documentation test to verify PRD check and remove incompatible jest test (a7f2b28)
+- add PRD file existence check to create_documentation workflow step (62cdee3)
+- add PRD file existence check to create_documentation workflow step (6c51012)
+
+## 1.6.1 – 🐛 Bug Fixes
+
+Released on **2025-12-06**.
+
+- add table header to release notes for release script compatibility (44e47fc)
+- add responsive vertical monitor support and dark/light mode toggle (5565765)
 
 ## Unreleased
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programinglive/dev-workflow-mcp-server",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "MCP server to enforce development workflow discipline",
   "homepage": "https://devworkflow.programinglive.com/",
   "mcpName": "io.github.programinglive/dev-workflow-mcp-server",

package/tests/handlers.test.js

@@ -79,7 +79,7 @@ test("run_tests guidance mentions core documentation types", async () => {
   });
 });
 
-test("create_documentation accepts PRD and records created/updated message", async () => {
+test("create_documentation verifies PRD file exists", async () => {
   await withWorkflowState(async (workflowState) => {
     workflowState.state.testsPassed = true;
     await workflowState.save();
@@ -105,6 +105,7 @@ test("create_documentation accepts PRD and records created/updated message", asy
       utils,
     });
 
+    // Should succeed since PRD.md exists in the project
     assert.equal(workflowState.state.documentationCreated, true);
     assert.equal(workflowState.state.documentationType, "PRD");
     assert.equal(
@@ -115,6 +116,10 @@ test("create_documentation accepts PRD and records created/updated message", asy
       response.content[0].text.includes("Documentation created/updated!"),
       "create_documentation response should mention created/updated",
     );
+    assert.ok(
+      response.content[0].text.includes("PRD verified"),
+      "create_documentation response should verify PRD file",
+    );
   });
 });
 

package/tools/handlers.js

@@ -355,6 +355,16 @@ async function handleCreateDocumentation(args, workflowState) {
     return textResponse("⚠️ Please ensure tests are passing first! Run 'run_tests' with passed=true.");
   }
 
+  // Check if PRD exists in docs folder
+  const prdPath = path.join(__dirname, "..", "docs", "product", "PRD.md");
+  const prdExists = existsSync(prdPath);
+  
+  if (!prdExists) {
+    return textResponse(
+      `⚠️ PRD file not found!\n\nExpected location: docs/product/PRD.md\n\nPlease create or update the PRD before marking documentation as complete.`
+    );
+  }
+
   workflowState.state.documentationCreated = true;
   workflowState.state.documentationType = args.documentationType;
   workflowState.state.documentationSummary = args.summary;
@@ -368,7 +378,7 @@ async function handleCreateDocumentation(args, workflowState) {
   await workflowState.save();
 
   return textResponse(
-    `✅ Documentation created/updated!\n\nType: ${args.documentationType}\nSummary: ${args.summary}\n\n🎉 You're ready to verify your work!\n\nNext Steps:\n1. ✓ Fix/implement feature\n2. ✓ Create tests\n3. ✓ Run tests (GREEN!)\n4. ✓ Create/update documentation\n5. ⏳ Run 'check_ready_to_commit' to verify\n6. ⏳ Run 'commit_and_push'\n7. ⏳ Run 'perform_release'\n8. ⏳ Mark as complete with 'complete_task'`
+    `✅ Documentation created/updated!\n\nType: ${args.documentationType}\nSummary: ${args.summary}\n✅ PRD verified: docs/product/PRD.md exists\n\n🎉 You're ready to verify your work!\n\nNext Steps:\n1. ✓ Fix/implement feature\n2. ✓ Create tests\n3. ✓ Run tests (GREEN!)\n4. ✓ Create/update documentation\n5. ⏳ Run 'check_ready_to_commit' to verify\n6. ⏳ Run 'commit_and_push'\n7. ⏳ Run 'perform_release'\n8. ⏳ Mark as complete with 'complete_task'`
   );
 }
 

package/web/app/docs/page.tsx

@@ -3,132 +3,132 @@ import { ArrowLeft, CheckCircle, GitBranch, FileText, TestTube, Rocket } from "l
 
 export default function DocsPage() {
     return (
-        <div className="min-h-screen bg-[#0a0a0f] text-white pt-20 px-4 pb-12">
+        <div className="min-h-screen bg-white dark:bg-[#0a0a0f] text-gray-900 dark:text-white pt-20 px-4 pb-12 transition-colors duration-300">
             <div className="max-w-4xl mx-auto">
                 <div className="mb-8">
-                    <Link href="/" className="inline-flex items-center gap-2 text-indigo-400 hover:text-indigo-300 transition">
+                    <Link href="/" className="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition">
                         <ArrowLeft className="w-4 h-4" />
                         Back to Dashboard
                     </Link>
                 </div>
 
-                <div className="prose prose-invert max-w-none">
-                    <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
+                <div className="prose dark:prose-invert max-w-none">
+                    <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-indigo-600 dark:from-indigo-400 via-purple-600 dark:via-purple-400 to-pink-600 dark:to-pink-400 bg-clip-text text-transparent">
                         Dev Workflow MCP Server
                     </h1>
-                    <p className="text-xl text-gray-400 mb-8">
+                    <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
                         An MCP server that acts as your coding conscience. Enforce test-driven development, ensure documentation,
                         and never skip a step in your release process.
                     </p>
 
-                    <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-lg p-4 mb-8">
-                        <p className="text-emerald-400 font-semibold">Version: 1.5.3</p>
+                    <div className="bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 rounded-lg p-4 mb-8">
+                        <p className="text-emerald-700 dark:text-emerald-400 font-semibold">Version: 1.6.2</p>
                     </div>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">Features</h2>
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Features</h2>
                     <div className="grid md:grid-cols-2 gap-4 mb-8">
-                        <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+                        <div className="p-4 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10">
                             <div className="flex items-center gap-3 mb-2">
-                                <CheckCircle className="w-5 h-5 text-indigo-400" />
-                                <h3 className="text-lg font-semibold">Enforced Discipline</h3>
+                                <CheckCircle className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Enforced Discipline</h3>
                             </div>
-                            <p className="text-gray-400 text-sm">Won't let you skip important steps. Follows a strict, proven development workflow.</p>
+                            <p className="text-gray-600 dark:text-gray-400 text-sm">Won't let you skip important steps. Follows a strict, proven development workflow.</p>
                         </div>
-                        <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+                        <div className="p-4 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10">
                             <div className="flex items-center gap-3 mb-2">
-                                <TestTube className="w-5 h-5 text-purple-400" />
-                                <h3 className="text-lg font-semibold">Test-Driven</h3>
+                                <TestTube className="w-5 h-5 text-purple-600 dark:text-purple-400" />
+                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Test-Driven</h3>
                             </div>
-                            <p className="text-gray-400 text-sm">Blocks commits if tests fail. Encourages writing tests before marking tasks complete.</p>
+                            <p className="text-gray-600 dark:text-gray-400 text-sm">Blocks commits if tests fail. Encourages writing tests before marking tasks complete.</p>
                         </div>
-                        <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+                        <div className="p-4 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10">
                             <div className="flex items-center gap-3 mb-2">
-                                <FileText className="w-5 h-5 text-emerald-400" />
-                                <h3 className="text-lg font-semibold">Documentation</h3>
+                                <FileText className="w-5 h-5 text-emerald-600 dark:text-emerald-400" />
+                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">Documentation</h3>
                             </div>
-                            <p className="text-gray-400 text-sm">Reminds you to update documentation (README, docs, changelog) for every change.</p>
+                            <p className="text-gray-600 dark:text-gray-400 text-sm">Reminds you to update documentation (README, docs, changelog) for every change.</p>
                         </div>
-                        <div className="p-4 rounded-lg bg-white/5 border border-white/10">
+                        <div className="p-4 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10">
                             <div className="flex items-center gap-3 mb-2">
-                                <GitBranch className="w-5 h-5 text-orange-400" />
-                                <h3 className="text-lg font-semibold">State Tracking</h3>
+                                <GitBranch className="w-5 h-5 text-orange-600 dark:text-orange-400" />
+                                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">State Tracking</h3>
                             </div>
-                            <p className="text-gray-400 text-sm">Remembers exactly where you are in the workflow, even across sessions.</p>
+                            <p className="text-gray-600 dark:text-gray-400 text-sm">Remembers exactly where you are in the workflow, even across sessions.</p>
                         </div>
                     </div>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">Installation</h2>
-                    <div className="bg-[#1a1a24] rounded-lg p-6 border border-white/10 mb-8">
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Installation</h2>
+                    <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-6 border border-gray-300 dark:border-white/10 mb-8">
                         <pre className="text-sm overflow-x-auto">
-                            <code className="text-gray-300">npm install -g @programinglive/dev-workflow-mcp-server</code>
+                            <code className="text-gray-700 dark:text-gray-300">npm install -g @programinglive/dev-workflow-mcp-server</code>
                         </pre>
                     </div>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">Quick Start</h2>
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Quick Start</h2>
                     <ol className="space-y-4 mb-8">
                         <li className="flex gap-4">
-                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center text-indigo-400 font-bold">1</span>
+                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-500/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 font-bold">1</span>
                             <div>
-                                <h3 className="font-semibold mb-1">Start a Task</h3>
-                                <p className="text-gray-400">Begin your coding session by defining what you're working on.</p>
-                                <div className="bg-[#1a1a24] rounded-lg p-3 mt-2 border border-white/10">
-                                    <code className="text-sm text-gray-300">start_task</code>
+                                <h3 className="font-semibold mb-1 text-gray-900 dark:text-white">Start a Task</h3>
+                                <p className="text-gray-600 dark:text-gray-400">Begin your coding session by defining what you're working on.</p>
+                                <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-3 mt-2 border border-gray-300 dark:border-white/10">
+                                    <code className="text-sm text-gray-700 dark:text-gray-300">start_task</code>
                                 </div>
                             </div>
                         </li>
                         <li className="flex gap-4">
-                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-500/20 flex items-center justify-center text-purple-400 font-bold">2</span>
+                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-500/20 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">2</span>
                             <div>
-                                <h3 className="font-semibold mb-1">Mark Bug Fixed</h3>
-                                <p className="text-gray-400">Once you've implemented your feature or fix, mark it as complete.</p>
-                                <div className="bg-[#1a1a24] rounded-lg p-3 mt-2 border border-white/10">
-                                    <code className="text-sm text-gray-300">mark_bug_fixed</code>
+                                <h3 className="font-semibold mb-1 text-gray-900 dark:text-white">Mark Bug Fixed</h3>
+                                <p className="text-gray-600 dark:text-gray-400">Once you've implemented your feature or fix, mark it as complete.</p>
+                                <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-3 mt-2 border border-gray-300 dark:border-white/10">
+                                    <code className="text-sm text-gray-700 dark:text-gray-300">mark_bug_fixed</code>
                                 </div>
                             </div>
                         </li>
                         <li className="flex gap-4">
-                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-400 font-bold">3</span>
+                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-emerald-100 dark:bg-emerald-500/20 flex items-center justify-center text-emerald-600 dark:text-emerald-400 font-bold">3</span>
                             <div>
-                                <h3 className="font-semibold mb-1">Create Tests</h3>
-                                <p className="text-gray-400">Write tests to verify your changes work correctly.</p>
-                                <div className="bg-[#1a1a24] rounded-lg p-3 mt-2 border border-white/10">
-                                    <code className="text-sm text-gray-300">create_tests</code>
+                                <h3 className="font-semibold mb-1 text-gray-900 dark:text-white">Create Tests</h3>
+                                <p className="text-gray-600 dark:text-gray-400">Write tests to verify your changes work correctly.</p>
+                                <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-3 mt-2 border border-gray-300 dark:border-white/10">
+                                    <code className="text-sm text-gray-700 dark:text-gray-300">create_tests</code>
                                 </div>
                             </div>
                         </li>
                         <li className="flex gap-4">
-                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-orange-500/20 flex items-center justify-center text-orange-400 font-bold">4</span>
+                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-orange-100 dark:bg-orange-500/20 flex items-center justify-center text-orange-600 dark:text-orange-400 font-bold">4</span>
                             <div>
-                                <h3 className="font-semibold mb-1">Run Tests</h3>
-                                <p className="text-gray-400">Execute your test suite and ensure everything passes.</p>
-                                <div className="bg-[#1a1a24] rounded-lg p-3 mt-2 border border-white/10">
-                                    <code className="text-sm text-gray-300">run_tests</code>
+                                <h3 className="font-semibold mb-1 text-gray-900 dark:text-white">Run Tests</h3>
+                                <p className="text-gray-600 dark:text-gray-400">Execute your test suite and ensure everything passes.</p>
+                                <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-3 mt-2 border border-gray-300 dark:border-white/10">
+                                    <code className="text-sm text-gray-700 dark:text-gray-300">run_tests</code>
                                 </div>
                             </div>
                         </li>
                         <li className="flex gap-4">
-                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-pink-500/20 flex items-center justify-center text-pink-400 font-bold">5</span>
+                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-500/20 flex items-center justify-center text-pink-600 dark:text-pink-400 font-bold">5</span>
                             <div>
-                                <h3 className="font-semibold mb-1">Create Documentation</h3>
-                                <p className="text-gray-400">Update relevant documentation for your changes.</p>
-                                <div className="bg-[#1a1a24] rounded-lg p-3 mt-2 border border-white/10">
-                                    <code className="text-sm text-gray-300">create_documentation</code>
+                                <h3 className="font-semibold mb-1 text-gray-900 dark:text-white">Create Documentation</h3>
+                                <p className="text-gray-600 dark:text-gray-400">Update relevant documentation for your changes.</p>
+                                <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-3 mt-2 border border-gray-300 dark:border-white/10">
+                                    <code className="text-sm text-gray-700 dark:text-gray-300">create_documentation</code>
                                 </div>
                             </div>
                         </li>
                         <li className="flex gap-4">
-                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400 font-bold">6</span>
+                            <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-500/20 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold">6</span>
                             <div>
-                                <h3 className="font-semibold mb-1">Commit and Push</h3>
-                                <p className="text-gray-400">Commit your changes and push to the repository.</p>
-                                <div className="bg-[#1a1a24] rounded-lg p-3 mt-2 border border-white/10">
-                                    <code className="text-sm text-gray-300">commit_and_push</code>
+                                <h3 className="font-semibold mb-1 text-gray-900 dark:text-white">Commit and Push</h3>
+                                <p className="text-gray-600 dark:text-gray-400">Commit your changes and push to the repository.</p>
+                                <div className="bg-gray-100 dark:bg-[#1a1a24] rounded-lg p-3 mt-2 border border-gray-300 dark:border-white/10">
+                                    <code className="text-sm text-gray-700 dark:text-gray-300">commit_and_push</code>
                                 </div>
                             </div>
                         </li>
                     </ol>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">Available Commands</h2>
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Available Commands</h2>
                     <div className="space-y-3 mb-8">
                         {[
                             { cmd: "start_task", desc: "Begin a new coding task" },
@@ -143,54 +143,54 @@ export default function DocsPage() {
                             { cmd: "get_workflow_status", desc: "Check current workflow state" },
                             { cmd: "view_history", desc: "View completed tasks" },
                         ].map((item) => (
-                            <div key={item.cmd} className="p-4 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition">
-                                <code className="text-indigo-400 font-mono">{item.cmd}</code>
-                                <p className="text-gray-400 text-sm mt-1">{item.desc}</p>
+                            <div key={item.cmd} className="p-4 rounded-lg bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 hover:bg-gray-100 dark:hover:bg-white/10 transition">
+                                <code className="text-indigo-600 dark:text-indigo-400 font-mono">{item.cmd}</code>
+                                <p className="text-gray-600 dark:text-gray-400 text-sm mt-1">{item.desc}</p>
                             </div>
                         ))}
                     </div>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">Configuration</h2>
-                    <p className="text-gray-400 mb-4">
-                        The server stores workflow state in a SQLite database located at <code className="text-indigo-400 bg-white/5 px-2 py-1 rounded">.state/dev-workflow.db</code>
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Configuration</h2>
+                    <p className="text-gray-600 dark:text-gray-400 mb-4">
+                        The server stores workflow state in a SQLite database located at <code className="text-indigo-600 dark:text-indigo-400 bg-gray-100 dark:bg-white/5 px-2 py-1 rounded">.state/dev-workflow.db</code>
                     </p>
-                    <p className="text-gray-400 mb-8">
-                        Set the <code className="text-indigo-400 bg-white/5 px-2 py-1 rounded">DEV_WORKFLOW_USER_ID</code> environment variable to isolate workflow state per user.
+                    <p className="text-gray-600 dark:text-gray-400 mb-8">
+                        Set the <code className="text-indigo-600 dark:text-indigo-400 bg-gray-100 dark:bg-white/5 px-2 py-1 rounded">DEV_WORKFLOW_USER_ID</code> environment variable to isolate workflow state per user.
                     </p>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">Requirements</h2>
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Requirements</h2>
                     <ul className="space-y-2 mb-8">
-                        <li className="flex items-center gap-2 text-gray-400">
-                            <CheckCircle className="w-4 h-4 text-emerald-400" />
+                        <li className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                            <CheckCircle className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                             Node.js 18 or higher
                         </li>
-                        <li className="flex items-center gap-2 text-gray-400">
-                            <CheckCircle className="w-4 h-4 text-emerald-400" />
+                        <li className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                            <CheckCircle className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                             Git installed and configured
                         </li>
-                        <li className="flex items-center gap-2 text-gray-400">
-                            <CheckCircle className="w-4 h-4 text-emerald-400" />
+                        <li className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
+                            <CheckCircle className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                             MCP-compatible AI assistant (e.g., Claude Desktop)
                         </li>
                     </ul>
 
-                    <h2 className="text-3xl font-bold mt-12 mb-6">License</h2>
-                    <p className="text-gray-400 mb-8">
+                    <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">License</h2>
+                    <p className="text-gray-600 dark:text-gray-400 mb-8">
                         MIT License - Free to use for personal and commercial projects.
                     </p>
 
-                    <div className="bg-gradient-to-r from-indigo-500/10 via-purple-500/10 to-pink-500/10 border border-white/10 rounded-lg p-6 mt-12">
+                    <div className="bg-gradient-to-r from-indigo-50 dark:from-indigo-500/10 via-purple-50 dark:via-purple-500/10 to-pink-50 dark:to-pink-500/10 border border-gray-300 dark:border-white/10 rounded-lg p-6 mt-12">
                         <div className="flex items-center gap-3 mb-3">
-                            <Rocket className="w-6 h-6 text-pink-400" />
-                            <h3 className="text-xl font-bold">Ready to get started?</h3>
+                            <Rocket className="w-6 h-6 text-pink-600 dark:text-pink-400" />
+                            <h3 className="text-xl font-bold text-gray-900 dark:text-white">Ready to get started?</h3>
                         </div>
-                        <p className="text-gray-400 mb-4">
+                        <p className="text-gray-600 dark:text-gray-400 mb-4">
                             Install the MCP server and start enforcing best practices in your development workflow today!
                         </p>
                         <Link
                             href="https://github.com/programinglive/dev-workflow-mcp-server"
                             target="_blank"
-                            className="inline-flex items-center gap-2 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"
+                            className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-600 dark:to-purple-600 rounded-lg font-semibold text-white hover:shadow-lg hover:shadow-indigo-500/50 transition"
                         >
                             View on GitHub
                         </Link>

package/web/tests/build.test.js

@@ -1,69 +0,0 @@
-/**
- * Build Verification Tests
- * Tests that the website builds successfully and key features are present
- */
-
-import { execSync } from 'child_process';
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const webDir = path.join(__dirname, '..');
-const outDir = path.join(webDir, 'out');
-
-describe('Build Tests', () => {
-  test('should build successfully', () => {
-    execSync('npm run build', { cwd: webDir, stdio: 'pipe' });
-    expect(fs.existsSync(outDir)).toBe(true);
-  });
-
-  test('should generate homepage', () => {
-    const indexPath = path.join(outDir, 'index.html');
-    expect(fs.existsSync(indexPath)).toBe(true);
-    const content = fs.readFileSync(indexPath, 'utf-8');
-    expect(content).toContain('Dev Workflow');
-  });
-
-  test('should include dark mode support', () => {
-    const indexPath = path.join(outDir, 'index.html');
-    const content = fs.readFileSync(indexPath, 'utf-8');
-    expect(content).toContain('dark:');
-  });
-
-  test('should include responsive design', () => {
-    const indexPath = path.join(outDir, 'index.html');
-    const content = fs.readFileSync(indexPath, 'utf-8');
-    expect(content).toContain('sm:');
-    expect(content).toContain('md:');
-    expect(content).toContain('lg:');
-  });
-});
-
-describe('Theme Toggle Tests', () => {
-  test('should have theme persistence', () => {
-    const navbarPath = path.join(webDir, 'components', 'Navbar.tsx');
-    const content = fs.readFileSync(navbarPath, 'utf-8');
-    expect(content).toContain('localStorage');
-  });
-
-  test('should detect system preference', () => {
-    const navbarPath = path.join(webDir, 'components', 'Navbar.tsx');
-    const content = fs.readFileSync(navbarPath, 'utf-8');
-    expect(content).toContain('prefers-color-scheme');
-  });
-});
-
-describe('Responsive Design Tests', () => {
-  test('should optimize for vertical monitors', () => {
-    const heroPath = path.join(webDir, 'components', 'Hero.tsx');
-    const content = fs.readFileSync(heroPath, 'utf-8');
-    expect(content).toContain('xl:grid-cols-2');
-  });
-
-  test('should have responsive navbar', () => {
-    const navbarPath = path.join(webDir, 'components', 'Navbar.tsx');
-    const content = fs.readFileSync(navbarPath, 'utf-8');
-    expect(content).toContain('md:hidden');
-  });
-});