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

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

package/web/components/Hero.tsx

@@ -0,0 +1,97 @@
+"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>
+    );
+}

package/web/components/History.tsx

@@ -0,0 +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>
+    );
+}

package/web/components/Navbar.tsx

@@ -0,0 +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>
+    );
+}

package/web/components/Terminal.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import { Rocket } from "lucide-react";
+
+type TerminalLine = {
+    type: 'command' | 'success' | 'comment' | 'info' | 'final';
+    text: string;
+    delay: number;
+};
+
+const terminalLines: TerminalLine[] = [
+    { type: 'command', text: 'start_task', delay: 500 },
+    { type: 'success', text: '✓ Task started: Implement user auth', delay: 1500 },
+    { type: 'comment', text: '# Write code...', delay: 2500 },
+    { type: 'command', text: 'mark_bug_fixed', delay: 4000 },
+    { type: 'info', text: '✨ Feature complete! Now create tests...', delay: 5000 },
+    { type: 'command', text: 'create_tests', delay: 6500 },
+    { type: 'success', text: '✓ Tests created', delay: 7500 },
+    { type: 'command', text: 'run_tests', delay: 8500 },
+    { type: 'success', text: '✓ All tests passed!', delay: 9500 },
+    { type: 'command', text: 'create_documentation', delay: 10500 },
+    { type: 'success', text: '✓ Documentation updated', delay: 11500 },
+    { type: 'command', text: 'commit_and_push', delay: 12500 },
+    { type: 'final', text: 'Ready to release!', delay: 13500 }
+];
+
+export default function Terminal() {
+    const [lines, setLines] = useState<React.ReactElement[]>([]);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const hasStarted = useRef(false);
+
+    useEffect(() => {
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting && !hasStarted.current) {
+                    hasStarted.current = true;
+                    runAnimation();
+                }
+            });
+        });
+
+        if (containerRef.current) {
+            observer.observe(containerRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, []);
+
+    const runAnimation = async () => {
+        for (const line of terminalLines) {
+            await new Promise(r => setTimeout(r, line.delay - (terminalLines[terminalLines.indexOf(line) - 1]?.delay || 0)));
+
+            if (line.type === 'command') {
+                await typeCommand(line.text);
+            } else {
+                addLine(line);
+            }
+        }
+    };
+
+    const typeCommand = async (text: string) => {
+        const id = Date.now();
+        setLines(prev => [...prev, (
+            <div key={id} className="terminal-line visible">
+                <span className="text-gray-500 mr-2">$</span>
+                <span className="text-white typing-cursor" id={`cmd-${id}`}></span>
+            </div>
+        )]);
+
+        for (let i = 0; i < text.length; i++) {
+            await new Promise(r => setTimeout(r, 50 + Math.random() * 50));
+            const el = document.getElementById(`cmd-${id}`);
+            if (el) el.textContent += text[i];
+        }
+
+        const el = document.getElementById(`cmd-${id}`);
+        if (el) el.classList.remove('typing-cursor');
+    };
+
+    const addLine = (line: TerminalLine) => {
+        let content: React.ReactElement;
+        let className = "terminal-line visible";
+
+        switch (line.type) {
+            case 'success':
+                className += " text-emerald-400";
+                content = <>{line.text}</>;
+                break;
+            case 'comment':
+                className += " mt-3";
+                content = <><span className="text-gray-500 mr-2">$</span><span className="text-white">{line.text}</span></>;
+                break;
+            case 'info':
+                className += " text-purple-400";
+                content = <>{line.text}</>;
+                break;
+            case 'final':
+                className += " text-pink-400 flex items-center gap-2";
+                content = <><Rocket className="w-4 h-4" />{line.text}</>;
+                break;
+            default:
+                content = <>{line.text}</>;
+        }
+
+        setLines(prev => [...prev, <div key={Date.now()} className={className}>{content}</div>]);
+    };
+
+    return (
+        <div ref={containerRef} className="font-mono text-sm space-y-2 min-h-[400px]">
+            {lines}
+        </div>
+    );
+}