@programinglive/dev-workflow-mcp-server 1.4.0 → 1.4.4

package/tests/handlers.test.js

@@ -40,6 +40,84 @@ function createRequest(name, args) {
   };
 }
 
+test("run_tests guidance mentions core documentation types", async () => {
+  await withWorkflowState(async (workflowState) => {
+    workflowState.state.bugFixed = true;
+    workflowState.state.testsCreated = true;
+    await workflowState.save();
+
+    const response = await handleToolCall({
+      request: createRequest("run_tests", {
+        passed: true,
+        testCommand: "npm test",
+      }),
+      normalizeRequestArgs,
+      workflowState,
+      exec: async () => ({ stdout: "" }),
+      git: {
+        hasWorkingChanges: async () => false,
+        hasStagedChanges: async () => false,
+        hasTestChanges: async () => true,
+        getStagedChanges: async () => [],
+        getCurrentBranch: async () => "main",
+        getPrimaryBranch: async () => "main",
+        getLastCommitMessage: async () => "",
+        workingTreeSummary: () => ({ hasChanges: false, lines: [] }),
+      },
+      utils,
+    });
+
+    const text = response.content[0].text;
+    assert.ok(
+      text.includes("create or update documentation using 'create_documentation'"),
+      "run_tests guidance should mention create or update documentation",
+    );
+    assert.ok(
+      text.includes('"PRD", "README", "RELEASE_NOTES"'),
+      "run_tests guidance should list core documentation types",
+    );
+  });
+});
+
+test("create_documentation accepts PRD and records created/updated message", async () => {
+  await withWorkflowState(async (workflowState) => {
+    workflowState.state.testsPassed = true;
+    await workflowState.save();
+
+    const response = await handleToolCall({
+      request: createRequest("create_documentation", {
+        documentationType: "PRD",
+        summary: "Updated PRD for documentation workflow expectations",
+      }),
+      normalizeRequestArgs,
+      workflowState,
+      exec: async () => ({ stdout: "" }),
+      git: {
+        hasWorkingChanges: async () => false,
+        hasStagedChanges: async () => false,
+        hasTestChanges: async () => true,
+        getStagedChanges: async () => [],
+        getCurrentBranch: async () => "main",
+        getPrimaryBranch: async () => "main",
+        getLastCommitMessage: async () => "",
+        workingTreeSummary: () => ({ hasChanges: false, lines: [] }),
+      },
+      utils,
+    });
+
+    assert.equal(workflowState.state.documentationCreated, true);
+    assert.equal(workflowState.state.documentationType, "PRD");
+    assert.equal(
+      workflowState.state.documentationSummary,
+      "Updated PRD for documentation workflow expectations",
+    );
+    assert.ok(
+      response.content[0].text.includes("Documentation created/updated!"),
+      "create_documentation response should mention created/updated",
+    );
+  });
+});
+
 test("commit_and_push commits changes and pushes", async () => {
   await withWorkflowState(async (workflowState) => {
     workflowState.state.readyToCommit = true;

package/tests/release-wrapper.test.js

@@ -18,6 +18,8 @@ async function runWrapper({ state, args = ["patch"], env = {} }) {
   const statePath = path.join(stateDir, "workflow-state.json");
   await mkdir(stateDir, { recursive: true });
   await writeFile(statePath, JSON.stringify(state, null, 2));
+  // Create package.json so resolveStateFile recognizes this as a project root
+  await writeFile(path.join(dir, "package.json"), JSON.stringify({ name: "test-project" }));
 
   const childEnv = {
     ...process.env,

package/tests/workflowState.test.js

@@ -67,14 +67,16 @@ test("resolveStateFile prefers current working directory when multiple project m
 
     const state = new TempWorkflowState();
     const resolvedStateFile = state.stateFile;
+    const resolvedProjectA = await realpath(projectA);
+    const resolvedProjectB = await realpath(projectB);
 
     assert.ok(
-      resolvedStateFile.startsWith(path.join(projectB, ".state", "users")),
+      resolvedStateFile.startsWith(path.join(resolvedProjectB, ".state", "users")),
       "State file should resolve under the current working directory's project"
     );
 
     assert.ok(
-      !resolvedStateFile.startsWith(path.join(projectA, ".state")),
+      !resolvedStateFile.startsWith(path.join(resolvedProjectA, ".state")),
       "State file should not use INIT_CWD project when cwd has its own markers"
     );
   } finally {
@@ -303,9 +305,11 @@ test("WorkflowState resolves state file relative to project root", async () => {
     if (devStateWasSet) {
       delete process.env.DEV_WORKFLOW_STATE_FILE;
     }
+    const resolvedProjectRoot = await realpath(projectRoot);
+
     const state = new WorkflowState();
     assert.ok(
-      state.stateFile.startsWith(path.join(projectRoot, ".state", "users")),
+      state.stateFile.startsWith(path.join(resolvedProjectRoot, ".state", "users")),
       "state file should resolve under project .state/users directory"
     );
 
@@ -314,7 +318,6 @@ test("WorkflowState resolves state file relative to project root", async () => {
     delete process.env.DEV_WORKFLOW_STATE_FILE;
 
     const state2 = new WorkflowState();
-    const resolvedProjectRoot = await realpath(projectRoot);
     assert.ok(
       state2.stateFile.startsWith(path.join(resolvedProjectRoot, ".state", "users")),
       "state file should resolve to project root"

package/tools/definitions.js

@@ -90,7 +90,7 @@ export function getToolList() {
         properties: {
           documentationType: {
             type: "string",
-            enum: ["README", "inline-comments", "API-docs", "changelog", "other"],
+            enum: ["PRD", "README", "RELEASE_NOTES", "inline-comments", "API-docs", "changelog", "other"],
             description: "Type of documentation created",
           },
           summary: {
@@ -259,7 +259,7 @@ export function getToolList() {
           },
           documentationType: {
             type: "string",
-            enum: ["README", "inline-comments", "API-docs", "changelog", "other"],
+            enum: ["PRD", "README", "RELEASE_NOTES", "inline-comments", "API-docs", "changelog", "other"],
             description: "Type of documentation created",
           },
           documentationSummary: {

package/tools/handlers.js

@@ -346,7 +346,7 @@ async function handleRunTests(args, workflowState) {
   await workflowState.save();
 
   return textResponse(
-    `✅ All tests passed! 🎉\n\nTest command: ${args.testCommand}\n\n📝 Now create documentation using 'create_documentation' with:\n- documentationType: "README", "inline-comments", "API-docs", "changelog", or "other"\n- summary: Brief description of what was documented\n\nNext Steps:\n1. ✓ Fix/implement feature\n2. ✓ Create tests\n3. ✓ Run tests (GREEN!)\n4. ⏳ Create/update documentation\n5. ⏳ Run 'check_ready_to_commit'\n6. ⏳ Run 'commit_and_push'\n7. ⏳ Run 'perform_release'\n8. ⏳ Complete task`
+    `✅ All tests passed! 🎉\n\nTest command: ${args.testCommand}\n\n📝 Now create or update documentation using 'create_documentation' with:\n- documentationType: "PRD", "README", "RELEASE_NOTES", "inline-comments", "API-docs", "changelog", or "other"\n- summary: Brief description of what was documented\n\nNext Steps:\n1. ✓ Fix/implement feature\n2. ✓ Create tests\n3. ✓ Run tests (GREEN!)\n4. ⏳ Create/update documentation\n5. ⏳ Run 'check_ready_to_commit'\n6. ⏳ Run 'commit_and_push'\n7. ⏳ Run 'perform_release'\n8. ⏳ Complete task`
   );
 }
 
@@ -368,7 +368,7 @@ async function handleCreateDocumentation(args, workflowState) {
   await workflowState.save();
 
   return textResponse(
-    `✅ Documentation created!\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 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\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/vite.web.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
+    root: 'web/public',
+    build: {
+        outDir: '../../dist/web',
+        emptyOutDir: true,
+        rollupOptions: {
+            input: path.resolve(__dirname, 'web/public/index.html'),
+        },
+    },
+    server: {
+        port: 3111,
+        proxy: {
+            '/api': 'http://localhost:3112'
+        }
+    }
+});

package/web/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/web/app/api/docs/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from "next/server";
+import { resolveDocContent, getAvailableDocs } from "@/lib/docs";
+
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams;
+    const rawDocKey = searchParams.get("doc");
+    const availableDocs = getAvailableDocs();
+
+    if (!rawDocKey) {
+        return NextResponse.json({ docs: availableDocs });
+    }
+
+    const docKey = rawDocKey.trim();
+    const resolvedKey = availableDocs.find((key) => key.toLowerCase() === docKey.toLowerCase());
+
+    if (!resolvedKey) {
+        return NextResponse.json(
+            { error: "Document not found", requested: docKey, available: availableDocs },
+            { status: 404 }
+        );
+    }
+
+    const result = await resolveDocContent(resolvedKey);
+    if (!result.exists) {
+        return NextResponse.json(
+            { error: "Document asset is missing" },
+            { status: 500 }
+        );
+    }
+
+    return NextResponse.json({ doc: resolvedKey, content: result.content, format: result.format });
+}

package/web/app/api/history/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getHistoryForUser } from "@/lib/db";
+
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams;
+    const userId = searchParams.get("user") || "default";
+    const page = Number(searchParams.get("page") || "1");
+    const pageSize = Number(searchParams.get("pageSize") || "20");
+    const startDate = searchParams.get("startDate") || undefined;
+    const endDate = searchParams.get("endDate") || undefined;
+
+    try {
+        const history = getHistoryForUser(userId, { page, pageSize, startDate, endDate });
+        return NextResponse.json(history);
+    } catch (error) {
+        console.error("Error fetching history:", error);
+        return NextResponse.json({ error: "Failed to fetch history" }, { status: 500 });
+    }
+}

package/web/app/api/npm-downloads/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+    try {
+        const packageName = "@programinglive/dev-workflow-mcp-server";
+        const response = await fetch(
+            `https://api.npmjs.org/downloads/point/last-month/${packageName}`,
+            { next: { revalidate: 3600 } } // Cache for 1 hour
+        );
+
+        if (!response.ok) {
+            return NextResponse.json({ downloads: 0 }, { status: 200 });
+        }
+
+        const data = await response.json();
+        return NextResponse.json({ downloads: data.downloads || 0 });
+    } catch (error) {
+        console.error("Error fetching npm downloads:", error);
+        return NextResponse.json({ downloads: 0 }, { status: 200 });
+    }
+}

package/web/app/api/summary/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getSummaryForUser } from "@/lib/db";
+
+export async function GET(request: NextRequest) {
+    const searchParams = request.nextUrl.searchParams;
+    const userId = searchParams.get("user") || "default";
+
+    try {
+        const summary = getSummaryForUser(userId);
+        return NextResponse.json({ summary });
+    } catch (error) {
+        console.error("Error fetching summary:", error);
+        return NextResponse.json({ error: "Failed to fetch summary" }, { status: 500 });
+    }
+}

package/web/app/api/version/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { readFile } from "fs/promises";
+import { join } from "path";
+
+export async function GET() {
+    try {
+        const packageJsonPath = join(process.cwd(), "..", "package.json");
+        const packageJson = await readFile(packageJsonPath, "utf-8");
+        const { version } = JSON.parse(packageJson);
+        return NextResponse.json({ version });
+    } catch (error) {
+        console.error("Error fetching version:", error);
+        return NextResponse.json({ error: "Failed to fetch version" }, { status: 500 });
+    }
+}

package/web/app/docs/page.tsx

@@ -0,0 +1,202 @@
+import Link from "next/link";
+import { ArrowLeft, CheckCircle, GitBranch, FileText, TestTube, Rocket } from "lucide-react";
+
+export default function DocsPage() {
+    return (
+        <div className="min-h-screen bg-[#0a0a0f] text-white pt-20 px-4 pb-12">
+            <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">
+                        <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">
+                        Dev Workflow MCP Server
+                    </h1>
+                    <p className="text-xl 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.3.12</p>
+                    </div>
+
+                    <h2 className="text-3xl font-bold mt-12 mb-6">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="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>
+                            </div>
+                            <p className="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="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>
+                            </div>
+                            <p className="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="flex items-center gap-3 mb-2">
+                                <FileText className="w-5 h-5 text-emerald-400" />
+                                <h3 className="text-lg font-semibold">Documentation</h3>
+                            </div>
+                            <p className="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="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>
+                            </div>
+                            <p className="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">
+                        <pre className="text-sm overflow-x-auto">
+                            <code className="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>
+                    <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>
+                            <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>
+                                </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>
+                            <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>
+                                </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>
+                            <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>
+                                </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>
+                            <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>
+                                </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>
+                            <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>
+                                </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>
+                            <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>
+                                </div>
+                            </div>
+                        </li>
+                    </ol>
+
+                    <h2 className="text-3xl font-bold mt-12 mb-6">Available Commands</h2>
+                    <div className="space-y-3 mb-8">
+                        {[
+                            { cmd: "start_task", desc: "Begin a new coding task" },
+                            { cmd: "mark_bug_fixed", desc: "Mark feature/bugfix as complete" },
+                            { cmd: "create_tests", desc: "Record that tests have been created" },
+                            { cmd: "run_tests", desc: "Execute and record test results" },
+                            { cmd: "skip_tests", desc: "Skip tests with justification" },
+                            { cmd: "create_documentation", desc: "Record documentation updates" },
+                            { cmd: "commit_and_push", desc: "Commit and push changes" },
+                            { cmd: "perform_release", desc: "Execute release process" },
+                            { cmd: "complete_task", desc: "Mark task as complete" },
+                            { 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>
+                        ))}
+                    </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>
+                    </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>
+
+                    <h2 className="text-3xl font-bold mt-12 mb-6">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" />
+                            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" />
+                            Git installed and configured
+                        </li>
+                        <li className="flex items-center gap-2 text-gray-400">
+                            <CheckCircle className="w-4 h-4 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">
+                        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="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>
+                        </div>
+                        <p className="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"
+                        >
+                            View on GitHub
+                        </Link>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/web/app/globals.css

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #0a0a0f;
+  --foreground: #ffffff;
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  @keyframes fadeInUp {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0px);
+    }
+  }
+
+  @keyframes fadeInRight {
+    0% {
+      opacity: 0;
+      transform: translateY(-50%) translateX(40px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(-50%) translateX(0px);
+    }
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateX(0px);
+    }
+  }
+
+  .animate-fade-in-up {
+    animation: fadeInUp 0.8s ease-out forwards;
+    opacity: 0;
+  }
+
+  .animate-fade-in-right {
+    animation: fadeInRight 0.8s ease-out forwards;
+    opacity: 0;
+  }
+
+  .terminal-line {
+    opacity: 0;
+    display: flex;
+  }
+
+  .terminal-line.visible {
+    opacity: 1;
+    transition: opacity 0.1s;
+  }
+
+  .typing-cursor::after {
+    content: '▋';
+    animation: blink 1s step-end infinite;
+    margin-left: 4px;
+    color: #a855f7;
+  }
+
+  @keyframes blink {
+
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0;
+    }
+  }
+}