@programinglive/dev-workflow-mcp-server 1.8.1 → 1.10.0

package/web/app/history/page.tsx

@@ -1,220 +0,0 @@
-'use client';
-
-import { useEffect, useState, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
-import { apiClient } from '@/lib/api-client';
-import {
-    CheckCircle,
-    XCircle,
-    AlertTriangle,
-    GitCommit,
-    FileText,
-    Activity,
-    Search,
-    Filter,
-    Calendar,
-    BarChart3
-} from 'lucide-react';
-
-interface WorkflowHistoryItem {
-    id: number;
-    task_type: string;
-    description: string;
-    commit_message: string;
-    completed_at: string;
-    tests_passed: boolean;
-    documentation_type: string;
-}
-
-export default function HistoryPage() {
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [loading, setLoading] = useState(true);
-    const [history, setHistory] = useState<WorkflowHistoryItem[]>([]);
-    const [searchQuery, setSearchQuery] = useState('');
-    const [typeFilter, setTypeFilter] = useState<string>('all');
-    const router = useRouter();
-
-    useEffect(() => {
-        const loadData = async () => {
-            try {
-                // Verify auth
-                const user = await apiClient.getCurrentUser();
-                if (!user) {
-                    throw new Error('Not authenticated');
-                }
-
-                setIsAuthenticated(true);
-                // Sync auth state
-                localStorage.setItem('isLoggedIn', 'true');
-                window.dispatchEvent(new Event('authUpdate'));
-
-                // Fetch history
-                const result = await apiClient.getHistory();
-                if (result?.history) {
-                    setHistory(result.history);
-                }
-            } catch (error) {
-                console.error('History load error:', error);
-                router.push('/login');
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        loadData();
-    }, [router]);
-
-    const stats = useMemo(() => {
-        const total = history.length;
-        const features = history.filter(h => h.task_type === 'feature').length;
-        const bugs = history.filter(h => h.task_type === 'bugfix').length;
-        const passedTests = history.filter(h => h.tests_passed).length;
-        const successRate = total > 0 ? Math.round((passedTests / total) * 100) : 0;
-
-        return { total, features, bugs, successRate };
-    }, [history]);
-
-    const filteredHistory = useMemo(() => {
-        return history.filter(item => {
-            const matchesSearch = item.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
-                item.commit_message.toLowerCase().includes(searchQuery.toLowerCase());
-            const matchesType = typeFilter === 'all' || item.task_type === typeFilter;
-            return matchesSearch && matchesType;
-        });
-    }, [history, searchQuery, typeFilter]);
-
-    if (loading) {
-        return (
-            <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-[#0a0a0f]">
-                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
-            </div>
-        );
-    }
-
-    if (!isAuthenticated) return null;
-
-    return (
-        <div className="min-h-screen pt-24 pb-12 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-[#0a0a0f] transition-colors duration-300">
-            <div className="max-w-7xl mx-auto space-y-8">
-                {/* Header */}
-                <div>
-                    <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-2">Workflow Insights</h1>
-                    <p className="text-gray-600 dark:text-gray-400">Track and analyze your development velocity and quality.</p>
-                </div>
-
-                {/* Stats Grid */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-                    <StatCard icon={<Activity className="w-5 h-5 text-indigo-500" />} label="Total Tasks" value={stats.total} />
-                    <StatCard icon={<CheckCircle className="w-5 h-5 text-green-500" />} label="Success Rate" value={`${stats.successRate}%`} />
-                    <StatCard icon={<BarChart3 className="w-5 h-5 text-blue-500" />} label="Features Built" value={stats.features} />
-                    <StatCard icon={<AlertTriangle className="w-5 h-5 text-red-500" />} label="Bugs Fixed" value={stats.bugs} />
-                </div>
-
-                {/* Controls */}
-                <div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-white dark:bg-white/5 p-4 rounded-xl border border-gray-200 dark:border-white/10">
-                    <div className="relative w-full sm:w-96">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
-                        <input
-                            type="text"
-                            placeholder="Search tasks, commits..."
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white placeholder-gray-500"
-                        />
-                    </div>
-                    <div className="flex gap-2 w-full sm:w-auto">
-                        <select
-                            value={typeFilter}
-                            onChange={(e) => setTypeFilter(e.target.value)}
-                            className="px-4 py-2 bg-gray-100 dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white"
-                        >
-                            <option value="all">All Types</option>
-                            <option value="feature">Features</option>
-                            <option value="bugfix">Bug Fixes</option>
-                            <option value="refactor">Refactors</option>
-                        </select>
-                    </div>
-                </div>
-
-                {/* Timeline */}
-                <div className="space-y-6 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-gray-300 before:dark:via-white/20 before:to-transparent">
-                    {filteredHistory.length === 0 ? (
-                        <div className="text-center py-12">
-                            <p className="text-gray-500 dark:text-gray-400">No workflow history found.</p>
-                        </div>
-                    ) : (
-                        filteredHistory.map((item, index) => (
-                            <div key={item.id} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
-                                {/* Icon */}
-                                <div className="flex items-center justify-center w-10 h-10 rounded-full border border-white dark:border-[#0a0a0f] bg-gray-100 dark:bg-white/10 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">
-                                    {getTaskIcon(item.task_type)}
-                                </div>
-
-                                {/* Card */}
-                                <div className="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white dark:bg-white/5 p-6 rounded-xl border border-gray-200 dark:border-white/10 shadow-sm hover:shadow-md transition-all duration-300">
-                                    <div className="flex items-center justify-between mb-3">
-                                        <span className={`px-2.5 py-0.5 rounded-full text-xs font-medium uppercase tracking-wide ${getTypeColor(item.task_type)}`}>
-                                            {item.task_type}
-                                        </span>
-                                        <time className="text-xs text-gray-500 dark:text-gray-400 font-mono">
-                                            {new Date(item.completed_at).toLocaleDateString()}
-                                        </time>
-                                    </div>
-                                    <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">{item.description}</h3>
-                                    <div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-4 bg-gray-50 dark:bg-black/20 p-2 rounded-lg break-all font-mono">
-                                        <GitCommit className="w-4 h-4 shrink-0" />
-                                        {item.commit_message}
-                                    </div>
-                                    <div className="flex flex-wrap items-center gap-3 pt-3 border-t border-gray-100 dark:border-white/10">
-                                        <div className={`flex items-center gap-1.5 text-xs font-medium ${item.tests_passed ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}`}>
-                                            {item.tests_passed ? <CheckCircle className="w-3.5 h-3.5" /> : <AlertTriangle className="w-3.5 h-3.5" />}
-                                            {item.tests_passed ? 'Tests Passed' : 'Tests Skipped'}
-                                        </div>
-                                        {item.documentation_type && (
-                                            <div className="flex items-center gap-1.5 text-xs font-medium text-blue-600 dark:text-blue-400">
-                                                <FileText className="w-3.5 h-3.5" />
-                                                {item.documentation_type}
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            </div>
-                        ))
-                    )}
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function StatCard({ icon, label, value }: { icon: React.ReactNode, label: string, value: string | number }) {
-    return (
-        <div className="bg-white dark:bg-white/5 p-6 rounded-xl border border-gray-200 dark:border-white/10 shadow-sm">
-            <div className="flex items-center gap-4">
-                <div className="p-3 bg-gray-50 dark:bg-white/5 rounded-lg">
-                    {icon}
-                </div>
-                <div>
-                    <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{label}</p>
-                    <p className="text-2xl font-bold text-gray-900 dark:text-white">{value}</p>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function getTaskIcon(type: string) {
-    switch (type) {
-        case 'feature': return <CheckCircle className="w-5 h-5 text-blue-500" />;
-        case 'bugfix': return <XCircle className="w-5 h-5 text-red-500" />;
-        default: return <Activity className="w-5 h-5 text-gray-500" />;
-    }
-}
-
-function getTypeColor(type: string) {
-    switch (type) {
-        case 'feature': return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
-        case 'bugfix': return 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300';
-        default: return 'bg-gray-100 text-gray-800 dark:bg-gray-800/50 dark:text-gray-300';
-    }
-}

package/web/app/layout.tsx

@@ -1,39 +0,0 @@
-import type { Metadata } from "next";
-import "./globals.css";
-import Navbar from "@/components/Navbar";
-import Footer from "@/components/Footer";
-import { ThemeProvider } from "@/components/ThemeProvider";
-
-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" data-scroll-behavior="smooth">
-      <body className="antialiased bg-white dark:bg-[#0a0a0f] text-gray-900 dark:text-white transition-colors duration-300">
-        <ThemeProvider>
-          <Navbar />
-          {children}
-          <Footer />
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

package/web/app/login/page.tsx

@@ -1,142 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-import { Lock, User } from 'lucide-react';
-import { apiClient } from '@/lib/api-client';
-
-export default function LoginPage() {
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
-    const [error, setError] = useState('');
-    const [loading, setLoading] = useState(false);
-    const [authChecking, setAuthChecking] = useState(true);
-    const router = useRouter();
-
-    useEffect(() => {
-        // Check if already logged in
-        const mightBeLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-        if (!mightBeLoggedIn) {
-            setAuthChecking(false);
-            return;
-        }
-
-        apiClient.getCurrentUser()
-            .then(user => {
-                if (user) {
-                    router.push('/history');
-                }
-            })
-            .catch(() => { })
-            .finally(() => setAuthChecking(false));
-    }, [router]);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-        setError('');
-        setLoading(true);
-
-        try {
-            const data = await apiClient.login(username, password);
-
-            if (data.success) {
-                localStorage.setItem('isLoggedIn', 'true');
-                window.dispatchEvent(new Event('authUpdate'));
-                router.push('/history');
-            } else {
-                setError('Login failed');
-            }
-        } catch (err: any) {
-            setError(err.message || 'Network error. Please try again.');
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (authChecking) {
-        return null; // Or a loading spinner
-    }
-
-    return (
-        <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-[#0a0a0f] px-4 transition-colors duration-300">
-            <div className="max-w-md w-full space-y-8 bg-white dark:bg-white/5 p-8 rounded-2xl shadow-xl border border-gray-100 dark:border-white/10">
-                <div className="text-center">
-                    <div className="mx-auto h-12 w-12 relative mb-4">
-                        <div className="absolute inset-0 bg-blue-500 rounded-xl blur opacity-20 dark:opacity-40"></div>
-                        <Image src="/assets/logo.png" alt="Logo" width={48} height={48} className="relative rounded-xl" />
-                    </div>
-                    <h2 className="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">
-                        Welcome Back
-                    </h2>
-                    <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
-                        Sign in to access your workflow history
-                    </p>
-                    <p className="mt-1 text-xs text-gray-400 font-mono">
-                        v1.7.15
-                    </p>
-                </div>
-
-                <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
-                    {error && (
-                        <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-900/50">
-                            <p className="text-sm text-red-600 dark:text-red-400 text-center font-medium">{error}</p>
-                        </div>
-                    )}
-
-                    <div className="space-y-4">
-                        <div className="relative">
-                            <label htmlFor="username" className="sr-only">Username</label>
-                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <User className="h-5 w-5 text-gray-400" />
-                            </div>
-                            <input
-                                id="username"
-                                name="username"
-                                type="text"
-                                required
-                                className="appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-white/10 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-black/20 text-gray-900 dark:text-white sm:text-sm transition-all"
-                                placeholder="Username"
-                                value={username}
-                                onChange={(e) => setUsername(e.target.value)}
-                                disabled={loading}
-                            />
-                        </div>
-                        <div className="relative">
-                            <label htmlFor="password" className="sr-only">Password</label>
-                            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <Lock className="h-5 w-5 text-gray-400" />
-                            </div>
-                            <input
-                                id="password"
-                                name="password"
-                                type="password"
-                                required
-                                className="appearance-none block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-white/10 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-black/20 text-gray-900 dark:text-white sm:text-sm transition-all"
-                                placeholder="Password"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                disabled={loading}
-                            />
-                        </div>
-                    </div>
-
-                    <div>
-                        <button
-                            type="submit"
-                            disabled={loading}
-                            className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-blue-500/30 hover:shadow-blue-500/40"
-                        >
-                            {loading ? (
-                                <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                </svg>
-                            ) : 'Sign in'}
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-}

package/web/app/page.tsx

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

package/web/components/ApiReference.tsx

@@ -1,20 +0,0 @@
-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

@@ -1,61 +0,0 @@
-import { ShieldCheck, TestTube, FileText, GitBranch, History, Zap } from "lucide-react";
-
-export default function Features() {
-    return (
-        <section id="features" className="py-12 sm:py-16 lg:py-20 px-3 sm:px-4 bg-gray-50 dark:bg-transparent transition-colors duration-300">
-            <div className="max-w-7xl mx-auto">
-                <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 sm:mb-12 lg:mb-16 text-gray-900 dark:text-white">Your Coding Conscience</h2>
-                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm: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 dark:bg-white/5 border border-gray-200 dark:border-white/10 hover:bg-gray-100 dark: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 text-gray-900 dark:text-white">{title}</h3>
-            <p className="text-gray-600 dark:text-gray-400">{description}</p>
-        </div>
-    );
-}

package/web/components/Footer.tsx

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

package/web/components/Hero.tsx

@@ -1,96 +0,0 @@
-"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.7.15");
-    }, []);
-
-    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-3 sm:px-4 pt-16 relative overflow-hidden bg-white dark:bg-transparent transition-colors duration-300">
-            <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/5 dark:from-indigo-500/10 via-purple-500/5 dark:via-purple-500/10 to-pink-500/5 dark:to-pink-500/10"></div>
-            <div className="max-w-7xl mx-auto grid xl:grid-cols-2 gap-6 sm:gap-8 lg: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-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold mb-4 sm: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-base sm:text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-6 sm: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 text-white">
-                            View History <ArrowRight className="w-4 h-4" />
-                        </Link>
-                        <Link href="/docs" className="px-6 py-3 bg-gray-200 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-lg font-semibold hover:bg-gray-300 dark:hover:bg-white/10 transition text-center text-gray-900 dark:text-white">
-                            Documentation
-                        </Link>
-                    </div>
-                    <div className="flex flex-wrap gap-4 sm:gap-6 lg:gap-8 text-xs sm:text-sm animate-fade-in-up" style={{ animationDelay: "0.5s" }}>
-                        <div>
-                            <div className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{version ?? "..."}</div>
-                            <div className="text-gray-600 dark:text-gray-500">Latest Version</div>
-                        </div>
-                        <div>
-                            <div className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">MIT</div>
-                            <div className="text-gray-600 dark:text-gray-500">License</div>
-                        </div>
-                        <div>
-                            <div className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">Node 18+</div>
-                            <div className="text-gray-600 dark:text-gray-500">Compatibility</div>
-                        </div>
-                        {downloads !== null && (
-                            <div>
-                                <div className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white">{formatDownloads(downloads)}</div>
-                                <div className="text-gray-600 dark:text-gray-500">Downloads/mo</div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-                {/* Right Column - Terminal */}
-                <div className="hidden xl: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-4 sm: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>
-    );
-}