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

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,12 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+    // Return placeholder data - database integration not available in static deployment
+    return NextResponse.json({
+        data: [],
+        total: 0,
+        page: 1,
+        pageSize: 20,
+        totalPages: 1
+    });
+}

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,13 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+    // Return placeholder data - database integration not available in static deployment
+    const summary = {
+        totalTasks: 0,
+        taskTypes: {},
+        lastActive: null,
+        recentTasks: [],
+        updatedAt: null,
+    };
+    return NextResponse.json({ summary });
+}

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

@@ -0,0 +1,8 @@
+import { NextResponse } from "next/server";
+
+// Version is updated during build/release process
+const PACKAGE_VERSION = "1.5.1";
+
+export async function GET() {
+    return NextResponse.json({ version: PACKAGE_VERSION });
+}

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;
+    }
+  }
+}

package/web/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+export const metadata: Metadata = {
+  title: "Dev Workflow Dashboard",
+  description: "Enforce development discipline and best practices",
+  icons: {
+    icon: [
+      { url: "/assets/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/assets/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/assets/favicon.ico" },
+    ],
+    apple: [
+      { url: "/assets/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
+    ],
+  },
+  manifest: "/assets/site.webmanifest",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="scroll-smooth">
+      <body className="antialiased bg-[#0a0a0f] text-white">
+        <Navbar />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  );
+}

package/web/app/page.tsx

@@ -0,0 +1,15 @@
+import Hero from "@/components/Hero";
+import Features from "@/components/Features";
+import History from "@/components/History";
+import ApiReference from "@/components/ApiReference";
+
+export default function Home() {
+  return (
+    <main>
+      <Hero />
+      <Features />
+      <History />
+      <ApiReference />
+    </main>
+  );
+}

package/web/components/ApiReference.tsx

@@ -0,0 +1,20 @@
+export default function ApiReference() {
+    return (
+        <section id="api" className="py-20 px-4">
+            <div className="max-w-7xl mx-auto">
+                <h2 className="text-3xl md:text-4xl font-bold mb-8">API Reference</h2>
+                <p className="text-gray-400 mb-12">Query workflow data programmatically with our JSON API.</p>
+                <div className="grid md:grid-cols-2 gap-6">
+                    <div className="p-6 rounded-xl bg-white/5 border border-white/10">
+                        <code className="text-indigo-400 font-mono text-sm">GET /api/history</code>
+                        <p className="text-gray-400 mt-2">Retrieve paginated task history entries.</p>
+                    </div>
+                    <div className="p-6 rounded-xl bg-white/5 border border-white/10">
+                        <code className="text-indigo-400 font-mono text-sm">GET /api/summary</code>
+                        <p className="text-gray-400 mt-2">Get project health stats and recent tasks.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/web/components/Features.tsx

@@ -0,0 +1,61 @@
+import { ShieldCheck, TestTube, FileText, GitBranch, History, Zap } from "lucide-react";
+
+export default function Features() {
+    return (
+        <section id="features" className="py-20 px-4">
+            <div className="max-w-7xl mx-auto">
+                <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">Your Coding Conscience</h2>
+                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <FeatureCard
+                        icon={<ShieldCheck className="w-6 h-6 text-indigo-400" />}
+                        title="Enforced Discipline"
+                        description="Won't let you skip important steps. Follows a strict, proven development workflow."
+                        bg="bg-indigo-500/20"
+                    />
+                    <FeatureCard
+                        icon={<TestTube className="w-6 h-6 text-purple-400" />}
+                        title="Test-Driven"
+                        description="Blocks commits if tests fail. Encourages writing tests before marking tasks complete."
+                        bg="bg-purple-500/20"
+                    />
+                    <FeatureCard
+                        icon={<FileText className="w-6 h-6 text-emerald-400" />}
+                        title="Documentation"
+                        description="Reminds you to update documentation (README, docs, changelog) for every change."
+                        bg="bg-emerald-500/20"
+                    />
+                    <FeatureCard
+                        icon={<GitBranch className="w-6 h-6 text-orange-400" />}
+                        title="State Tracking"
+                        description="Remembers exactly where you are in the workflow, even across sessions."
+                        bg="bg-orange-500/20"
+                    />
+                    <FeatureCard
+                        icon={<History className="w-6 h-6 text-blue-400" />}
+                        title="Task History"
+                        description="Keeps a detailed log of all completed tasks, commits, and releases."
+                        bg="bg-blue-500/20"
+                    />
+                    <FeatureCard
+                        icon={<Zap className="w-6 h-6 text-pink-400" />}
+                        title="Smart Prompts"
+                        description="Provides quick reminders and guidance on best practices as you work."
+                        bg="bg-pink-500/20"
+                    />
+                </div>
+            </div>
+        </section>
+    );
+}
+
+function FeatureCard({ icon, title, description, bg }: { icon: React.ReactNode, title: string, description: string, bg: string }) {
+    return (
+        <div className="p-6 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition">
+            <div className={`w-12 h-12 rounded-lg ${bg} flex items-center justify-center mb-4`}>
+                {icon}
+            </div>
+            <h3 className="text-xl font-semibold mb-2">{title}</h3>
+            <p className="text-gray-400">{description}</p>
+        </div>
+    );
+}

package/web/components/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+    return (
+        <footer className="py-12 px-4 border-t border-white/10">
+            <div className="max-w-7xl mx-auto text-center text-gray-400">
+                <p>Built with ❤️ for developers who care about quality</p>
+            </div>
+        </footer>
+    );
+}