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

package/web/components/Hero.tsx

@@ -1,97 +1,96 @@
-"use client";
-
-import Link from "next/link";
-import { ArrowRight } from "lucide-react";
-import Terminal from "./Terminal";
-import { useEffect, useState } from "react";
-
-export default function Hero() {
-    const [downloads, setDownloads] = useState<number | null>(null);
-    const [version, setVersion] = useState<string | null>(null);
-
-    useEffect(() => {
-        fetch("/api/npm-downloads")
-            .then(res => res.json())
-            .then(data => setDownloads(data.downloads))
-            .catch(() => setDownloads(null));
-
-        fetch("/api/version")
-            .then(res => res.json())
-            .then(data => setVersion(data.version))
-            .catch(() => setVersion(null));
-    }, []);
-
-    const formatDownloads = (num: number) => {
-        if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
-        if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
-        return num.toString();
-    };
-
-    return (
-        <section className="min-h-screen flex items-center justify-center px-4 pt-16 relative overflow-hidden">
-            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10"></div>
-            <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
-                {/* Left Column - Content */}
-                <div>
-                    <div className="animate-fade-in-up" style={{ animationDelay: "0.1s" }}>
-                        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm mb-8">
-                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
-                            <span>v{version ?? "..."} - Active</span>
-                        </div>
-                    </div>
-
-                    <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
-                        Master Your<br />
-                        <span className="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Workflow</span>
-                    </h1>
-                    <p className="text-lg md:text-xl text-gray-400 mb-8 max-w-xl animate-fade-in-up" style={{ animationDelay: "0.3s" }}>
-                        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="flex flex-col sm:flex-row gap-4 mb-8 animate-fade-in-up" style={{ animationDelay: "0.4s" }}>
-                        <Link href="#history" className="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:shadow-lg hover:shadow-indigo-500/50 transition inline-flex items-center justify-center gap-2">
-                            View History <ArrowRight className="w-4 h-4" />
-                        </Link>
-                        <Link href="/docs" className="px-6 py-3 bg-white/5 border border-white/10 rounded-lg font-semibold hover:bg-white/10 transition text-center">
-                            Documentation
-                        </Link>
-                    </div>
-                    <div className="flex flex-wrap gap-6 sm:gap-8 text-sm animate-fade-in-up" style={{ animationDelay: "0.5s" }}>
-                        <div>
-                            <div className="text-2xl font-bold">{version ?? "..."}</div>
-                            <div className="text-gray-500">Latest Version</div>
-                        </div>
-                        <div>
-                            <div className="text-2xl font-bold">MIT</div>
-                            <div className="text-gray-500">License</div>
-                        </div>
-                        <div>
-                            <div className="text-2xl font-bold">Node 18+</div>
-                            <div className="text-gray-500">Compatibility</div>
-                        </div>
-                        {downloads !== null && (
-                            <div>
-                                <div className="text-2xl font-bold">{formatDownloads(downloads)}</div>
-                                <div className="text-gray-500">Downloads/mo</div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-                {/* Right Column - Terminal */}
-                <div className="hidden lg:block">
-                    <div className="relative">
-                        <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 blur-3xl"></div>
-                        <div className="relative bg-[#1a1a24] rounded-xl border border-white/10 p-6 shadow-2xl">
-                            <div className="flex items-center gap-2 mb-4">
-                                <div className="w-3 h-3 rounded-full bg-red-500"></div>
-                                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
-                                <div className="w-3 h-3 rounded-full bg-green-500"></div>
-                                <span className="ml-auto text-xs text-gray-500">terminal</span>
-                            </div>
-                            <Terminal />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
+"use client";
+
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import Terminal from "./Terminal";
+import { useEffect, useState } from "react";
+
+export default function Hero() {
+    const [downloads, setDownloads] = useState<number | null>(null);
+    const [version, setVersion] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Fetch npm downloads directly from npm API
+        fetch("https://api.npmjs.org/downloads/point/last-month/@programinglive/dev-workflow-mcp-server")
+            .then(res => res.json())
+            .then(data => setDownloads(data.downloads || 0))
+            .catch(() => setDownloads(null));
+
+        // Version is hardcoded for static export
+        setVersion("1.5.1");
+    }, []);
+
+    const formatDownloads = (num: number) => {
+        if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+        if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+        return num.toString();
+    };
+
+    return (
+        <section className="min-h-screen flex items-center justify-center px-4 pt-16 relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10"></div>
+            <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
+                {/* Left Column - Content */}
+                <div>
+                    <div className="animate-fade-in-up" style={{ animationDelay: "0.1s" }}>
+                        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm mb-8">
+                            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
+                            <span>v{version ?? "..."} - Active</span>
+                        </div>
+                    </div>
+
+                    <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight animate-fade-in-up" style={{ animationDelay: "0.2s" }}>
+                        Master Your<br />
+                        <span className="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">Workflow</span>
+                    </h1>
+                    <p className="text-lg md:text-xl text-gray-400 mb-8 max-w-xl animate-fade-in-up" style={{ animationDelay: "0.3s" }}>
+                        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="flex flex-col sm:flex-row gap-4 mb-8 animate-fade-in-up" style={{ animationDelay: "0.4s" }}>
+                        <Link href="#history" className="px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:shadow-lg hover:shadow-indigo-500/50 transition inline-flex items-center justify-center gap-2">
+                            View History <ArrowRight className="w-4 h-4" />
+                        </Link>
+                        <Link href="/docs" className="px-6 py-3 bg-white/5 border border-white/10 rounded-lg font-semibold hover:bg-white/10 transition text-center">
+                            Documentation
+                        </Link>
+                    </div>
+                    <div className="flex flex-wrap gap-6 sm:gap-8 text-sm animate-fade-in-up" style={{ animationDelay: "0.5s" }}>
+                        <div>
+                            <div className="text-2xl font-bold">{version ?? "..."}</div>
+                            <div className="text-gray-500">Latest Version</div>
+                        </div>
+                        <div>
+                            <div className="text-2xl font-bold">MIT</div>
+                            <div className="text-gray-500">License</div>
+                        </div>
+                        <div>
+                            <div className="text-2xl font-bold">Node 18+</div>
+                            <div className="text-gray-500">Compatibility</div>
+                        </div>
+                        {downloads !== null && (
+                            <div>
+                                <div className="text-2xl font-bold">{formatDownloads(downloads)}</div>
+                                <div className="text-gray-500">Downloads/mo</div>
+                            </div>
+                        )}
+                    </div>
+                </div>
+                {/* Right Column - Terminal */}
+                <div className="hidden lg:block">
+                    <div className="relative">
+                        <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-purple-500/20 blur-3xl"></div>
+                        <div className="relative bg-[#1a1a24] rounded-xl border border-white/10 p-6 shadow-2xl">
+                            <div className="flex items-center gap-2 mb-4">
+                                <div className="w-3 h-3 rounded-full bg-red-500"></div>
+                                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+                                <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                                <span className="ml-auto text-xs text-gray-500">terminal</span>
+                            </div>
+                            <Terminal />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/web/components/History.tsx

@@ -1,143 +1,143 @@
-"use client";
-
-import { useState, useEffect } from "react";
-
-type HistoryItem = {
-    task_description: string;
-    created_at: string;
-};
-
-type SummaryData = {
-    summary: {
-        totalTasks: number;
-    };
-};
-
-export default function History() {
-    const [history, setHistory] = useState<HistoryItem[]>([]);
-    const [summary, setSummary] = useState<SummaryData | null>(null);
-    const [page, setPage] = useState(1);
-    const [totalPages, setTotalPages] = useState(1);
-    const [filters, setFilters] = useState({
-        userId: "",
-        startDate: "",
-        endDate: ""
-    });
-
-    const loadData = async () => {
-        const params = new URLSearchParams({
-            page: page.toString(),
-            pageSize: "20",
-            ...(filters.userId && { user: filters.userId }),
-            ...(filters.startDate && { startDate: filters.startDate }),
-            ...(filters.endDate && { endDate: filters.endDate }),
-        });
-
-        try {
-            const res = await fetch(`/api/history?${params}`);
-            const data = await res.json();
-            setHistory(data.data || []);
-            setTotalPages(data.totalPages || 1);
-        } catch (err) {
-            console.error("Failed to load history", err);
-        }
-
-        try {
-            const res = await fetch(`/api/summary?${params}`);
-            const data = await res.json();
-            setSummary(data);
-        } catch (err) {
-            console.error("Failed to load summary", err);
-        }
-    };
-
-    useEffect(() => {
-        loadData();
-    }, [page]); // Reload when page changes
-
-    const handleApplyFilters = () => {
-        setPage(1);
-        loadData();
-    };
-
-    return (
-        <section id="history" className="py-20 px-4 bg-white/5">
-            <div className="max-w-7xl mx-auto">
-                <h2 className="text-3xl md:text-4xl font-bold mb-8">Workflow History</h2>
-                <p className="text-gray-400 mb-12">Track your development progress and analyze your workflow patterns.</p>
-                <div className="bg-[#0a0a0f] rounded-xl border border-white/10 p-6">
-                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
-                        <input
-                            type="text"
-                            placeholder="User ID"
-                            value={filters.userId}
-                            onChange={(e) => setFilters({ ...filters, userId: e.target.value })}
-                            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
-                        />
-                        <input
-                            type="date"
-                            value={filters.startDate}
-                            onChange={(e) => setFilters({ ...filters, startDate: e.target.value })}
-                            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 [color-scheme:dark]"
-                        />
-                        <input
-                            type="date"
-                            value={filters.endDate}
-                            onChange={(e) => setFilters({ ...filters, endDate: e.target.value })}
-                            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 [color-scheme:dark]"
-                        />
-                        <button
-                            onClick={handleApplyFilters}
-                            className="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:shadow-lg hover:shadow-indigo-500/50 transition"
-                        >
-                            Apply Filters
-                        </button>
-                    </div>
-
-                    {summary && (
-                        <div className="mb-6">
-                            <h3 className="text-lg font-semibold mb-4">Project Summary</h3>
-                            <div className="text-gray-400">
-                                <p>Total tasks: {summary.summary?.totalTasks || 0}</p>
-                            </div>
-                        </div>
-                    )}
-
-                    <div>
-                        <h3 className="text-lg font-semibold mb-4">Recent History</h3>
-                        <div className="space-y-3">
-                            {history.length > 0 ? (
-                                history.map((row, i) => (
-                                    <div key={i} className="p-4 rounded-lg bg-white/5 border border-white/10">
-                                        <div className="font-semibold">{row.task_description}</div>
-                                        <div className="text-sm text-gray-400 mt-1">{new Date(row.created_at).toLocaleString()}</div>
-                                    </div>
-                                ))
-                            ) : (
-                                <p className="text-gray-500">No history yet.</p>
-                            )}
-                        </div>
-
-                        <div className="flex items-center justify-between mt-6">
-                            <button
-                                onClick={() => setPage(p => Math.max(1, p - 1))}
-                                disabled={page <= 1}
-                                className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 disabled:opacity-50"
-                            >
-                                Previous
-                            </button>
-                            <span className="text-sm text-gray-400">Page {page} of {totalPages}</span>
-                            <button
-                                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-                                disabled={page >= totalPages}
-                                className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 disabled:opacity-50"
-                            >
-                                Next
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}
+"use client";
+
+import { useState, useEffect } from "react";
+
+type HistoryItem = {
+    task_description: string;
+    created_at: string;
+};
+
+type SummaryData = {
+    summary: {
+        totalTasks: number;
+    };
+};
+
+export default function History() {
+    const [history, setHistory] = useState<HistoryItem[]>([]);
+    const [summary, setSummary] = useState<SummaryData | null>(null);
+    const [page, setPage] = useState(1);
+    const [totalPages, setTotalPages] = useState(1);
+    const [filters, setFilters] = useState({
+        userId: "",
+        startDate: "",
+        endDate: ""
+    });
+
+    const loadData = async () => {
+        const params = new URLSearchParams({
+            page: page.toString(),
+            pageSize: "20",
+            ...(filters.userId && { user: filters.userId }),
+            ...(filters.startDate && { startDate: filters.startDate }),
+            ...(filters.endDate && { endDate: filters.endDate }),
+        });
+
+        try {
+            const res = await fetch(`/api/history?${params}`);
+            const data = await res.json();
+            setHistory(data.data || []);
+            setTotalPages(data.totalPages || 1);
+        } catch (err) {
+            console.error("Failed to load history", err);
+        }
+
+        try {
+            const res = await fetch(`/api/summary?${params}`);
+            const data = await res.json();
+            setSummary(data);
+        } catch (err) {
+            console.error("Failed to load summary", err);
+        }
+    };
+
+    useEffect(() => {
+        loadData();
+    }, [page]); // Reload when page changes
+
+    const handleApplyFilters = () => {
+        setPage(1);
+        loadData();
+    };
+
+    return (
+        <section id="history" className="py-20 px-4 bg-white/5">
+            <div className="max-w-7xl mx-auto">
+                <h2 className="text-3xl md:text-4xl font-bold mb-8">Workflow History</h2>
+                <p className="text-gray-400 mb-12">Track your development progress and analyze your workflow patterns.</p>
+                <div className="bg-[#0a0a0f] rounded-xl border border-white/10 p-6">
+                    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
+                        <input
+                            type="text"
+                            placeholder="User ID"
+                            value={filters.userId}
+                            onChange={(e) => setFilters({ ...filters, userId: e.target.value })}
+                            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
+                        />
+                        <input
+                            type="date"
+                            value={filters.startDate}
+                            onChange={(e) => setFilters({ ...filters, startDate: e.target.value })}
+                            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 [color-scheme:dark]"
+                        />
+                        <input
+                            type="date"
+                            value={filters.endDate}
+                            onChange={(e) => setFilters({ ...filters, endDate: e.target.value })}
+                            className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 [color-scheme:dark]"
+                        />
+                        <button
+                            onClick={handleApplyFilters}
+                            className="px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg font-semibold hover:shadow-lg hover:shadow-indigo-500/50 transition"
+                        >
+                            Apply Filters
+                        </button>
+                    </div>
+
+                    {summary && (
+                        <div className="mb-6">
+                            <h3 className="text-lg font-semibold mb-4">Project Summary</h3>
+                            <div className="text-gray-400">
+                                <p>Total tasks: {summary.summary?.totalTasks || 0}</p>
+                            </div>
+                        </div>
+                    )}
+
+                    <div>
+                        <h3 className="text-lg font-semibold mb-4">Recent History</h3>
+                        <div className="space-y-3">
+                            {history.length > 0 ? (
+                                history.map((row, i) => (
+                                    <div key={i} className="p-4 rounded-lg bg-white/5 border border-white/10">
+                                        <div className="font-semibold">{row.task_description}</div>
+                                        <div className="text-sm text-gray-400 mt-1">{new Date(row.created_at).toLocaleString()}</div>
+                                    </div>
+                                ))
+                            ) : (
+                                <p className="text-gray-500">No history yet.</p>
+                            )}
+                        </div>
+
+                        <div className="flex items-center justify-between mt-6">
+                            <button
+                                onClick={() => setPage(p => Math.max(1, p - 1))}
+                                disabled={page <= 1}
+                                className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 disabled:opacity-50"
+                            >
+                                Previous
+                            </button>
+                            <span className="text-sm text-gray-400">Page {page} of {totalPages}</span>
+                            <button
+                                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                                disabled={page >= totalPages}
+                                className="px-4 py-2 bg-white/5 border border-white/10 rounded-lg hover:bg-white/10 disabled:opacity-50"
+                            >
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+}

package/web/components/Navbar.tsx

@@ -1,64 +1,64 @@
-"use client";
-
-import { useState } from "react";
-import Link from "next/link";
-import { Github, Menu, X } from "lucide-react";
-import Image from "next/image";
-
-export default function Navbar() {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <nav className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-lg border-b border-white/10">
-            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-                <div className="flex items-center justify-between h-16">
-                    <Link href="/" className="flex items-center gap-2">
-                        <Image src="/assets/logo.png" alt="Dev Workflow" width={32} height={32} className="rounded-lg" />
-                        <span className="text-lg font-bold">Dev Workflow</span>
-                    </Link>
-                    <div className="hidden md:flex items-center gap-6">
-                        <Link href="/#features" className="text-gray-300 hover:text-white transition">Features</Link>
-                        <Link href="/#history" className="text-gray-300 hover:text-white transition">History</Link>
-                        <Link href="/#api" className="text-gray-300 hover:text-white transition">API</Link>
-                        <Link href="/docs" className="text-gray-300 hover:text-white transition">Docs</Link>
-                        <a
-                            href="https://github.com/programinglive/dev-workflow-mcp-server"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg transition"
-                        >
-                            <Github className="w-4 h-4" />
-                            GitHub
-                        </a>
-                    </div>
-                    <button
-                        className="md:hidden p-2 rounded-lg hover:bg-white/5"
-                        onClick={() => setIsOpen(!isOpen)}
-                    >
-                        {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-                    </button>
-                </div>
-            </div>
-            {/* Mobile Menu */}
-            {isOpen && (
-                <div className="md:hidden border-t border-white/10 bg-[#0a0a0f]">
-                    <div className="px-4 py-4 space-y-3">
-                        <Link href="/#features" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>Features</Link>
-                        <Link href="/#history" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>History</Link>
-                        <Link href="/#api" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>API</Link>
-                        <Link href="/docs" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>Docs</Link>
-                        <a
-                            href="https://github.com/programinglive/dev-workflow-mcp-server"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center gap-2 text-gray-300 hover:text-white transition"
-                        >
-                            <Github className="w-4 h-4" />
-                            GitHub
-                        </a>
-                    </div>
-                </div>
-            )}
-        </nav>
-    );
-}
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { Github, Menu, X } from "lucide-react";
+import Image from "next/image";
+
+export default function Navbar() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <nav className="fixed top-0 left-0 right-0 z-50 bg-[#0a0a0f]/80 backdrop-blur-lg border-b border-white/10">
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div className="flex items-center justify-between h-16">
+                    <Link href="/" className="flex items-center gap-2">
+                        <Image src="/assets/logo.png" alt="Dev Workflow" width={32} height={32} className="rounded-lg" />
+                        <span className="text-lg font-bold">Dev Workflow</span>
+                    </Link>
+                    <div className="hidden md:flex items-center gap-6">
+                        <Link href="/#features" className="text-gray-300 hover:text-white transition">Features</Link>
+                        <Link href="/#history" className="text-gray-300 hover:text-white transition">History</Link>
+                        <Link href="/#api" className="text-gray-300 hover:text-white transition">API</Link>
+                        <Link href="/docs" className="text-gray-300 hover:text-white transition">Docs</Link>
+                        <a
+                            href="https://github.com/programinglive/dev-workflow-mcp-server"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg transition"
+                        >
+                            <Github className="w-4 h-4" />
+                            GitHub
+                        </a>
+                    </div>
+                    <button
+                        className="md:hidden p-2 rounded-lg hover:bg-white/5"
+                        onClick={() => setIsOpen(!isOpen)}
+                    >
+                        {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
+                    </button>
+                </div>
+            </div>
+            {/* Mobile Menu */}
+            {isOpen && (
+                <div className="md:hidden border-t border-white/10 bg-[#0a0a0f]">
+                    <div className="px-4 py-4 space-y-3">
+                        <Link href="/#features" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>Features</Link>
+                        <Link href="/#history" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>History</Link>
+                        <Link href="/#api" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>API</Link>
+                        <Link href="/docs" className="block text-gray-300 hover:text-white transition" onClick={() => setIsOpen(false)}>Docs</Link>
+                        <a
+                            href="https://github.com/programinglive/dev-workflow-mcp-server"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="flex items-center gap-2 text-gray-300 hover:text-white transition"
+                        >
+                            <Github className="w-4 h-4" />
+                            GitHub
+                        </a>
+                    </div>
+                </div>
+            )}
+        </nav>
+    );
+}