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

package/web/components/History.tsx

@@ -1,175 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { apiClient } from "@/lib/api-client";
-
-type HistoryItem = {
-    id: number;
-    task_type: string;
-    description: string;
-    commit_message: string;
-    completed_at: string;
-    tests_passed: boolean;
-    documentation_type: 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 () => {
-        try {
-            // Fetch workflow history from API via apiClient
-            const data = await apiClient.getHistory();
-
-            if (data?.history) {
-                setHistory(data.history || []);
-                setTotalPages(Math.ceil((data.history?.length || 0) / 10));
-                setSummary({
-                    summary: {
-                        totalTasks: data.history?.length || 0,
-                    },
-                });
-            } else {
-                // Not authenticated or error - show empty state
-                setHistory([]);
-                setTotalPages(1);
-                setSummary({
-                    summary: {
-                        totalTasks: 0,
-                    },
-                });
-            }
-        } catch (error) {
-            // Silently handle errors - show empty state
-            setHistory([]);
-            setTotalPages(1);
-            setSummary({
-                summary: {
-                    totalTasks: 0,
-                },
-            });
-        }
-    };
-
-    useEffect(() => {
-        // Only load if we're likely authenticated (reduces 401 errors)
-        // History component should only be on authenticated pages anyway
-        if (typeof window !== 'undefined' && window.location.pathname === '/history') {
-            loadData();
-        }
-    }, [page]); // Reload when page changes
-
-    const handleApplyFilters = () => {
-        setPage(1);
-        loadData();
-    };
-
-    return (
-        <section id="history" className="py-12 sm:py-16 lg:py-20 px-3 sm:px-4 bg-gray-50 dark:bg-white/5 transition-colors duration-300">
-            <div className="max-w-7xl mx-auto">
-                <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 sm:mb-8 text-gray-900 dark:text-white">Workflow History</h2>
-                <p className="text-sm sm:text-base text-gray-600 dark:text-gray-400 mb-8 sm:mb-12">Track your development progress and analyze your workflow patterns.</p>
-                <div className="bg-white dark:bg-[#0a0a0f] rounded-xl border border-gray-200 dark:border-white/10 p-4 sm:p-6 transition-colors duration-300">
-                    <div className="grid gap-3 sm:gap-4 grid-cols-1 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-gray-100 dark:bg-white/5 border border-gray-300 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 dark:placeholder-gray-400"
-                        />
-                        <input
-                            type="date"
-                            value={filters.startDate}
-                            onChange={(e) => setFilters({ ...filters, startDate: e.target.value })}
-                            className="px-4 py-2 bg-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white [color-scheme:light] dark:[color-scheme:dark]"
-                        />
-                        <input
-                            type="date"
-                            value={filters.endDate}
-                            onChange={(e) => setFilters({ ...filters, endDate: e.target.value })}
-                            className="px-4 py-2 bg-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900 dark:text-white [color-scheme:light] dark:[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 text-white"
-                        >
-                            Apply Filters
-                        </button>
-                    </div>
-
-                    {summary && (
-                        <div className="mb-6">
-                            <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Project Summary</h3>
-                            <div className="text-gray-600 dark:text-gray-400">
-                                <p>Total tasks: {summary.summary?.totalTasks || 0}</p>
-                            </div>
-                        </div>
-                    )}
-
-                    <div>
-                        <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Recent History</h3>
-                        <div className="space-y-3">
-                            {history.length > 0 ? (
-                                history.map((row) => (
-                                    <div key={row.id} className="p-4 rounded-lg bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10">
-                                        <div className="flex items-center gap-2 mb-2">
-                                            <span className={`px-2 py-1 rounded text-xs font-medium ${row.task_type === 'feature' ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' :
-                                                row.task_type === 'bugfix' ? 'bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200' :
-                                                    'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
-                                                }`}>
-                                                {row.task_type}
-                                            </span>
-                                            <span className={`px-2 py-1 rounded text-xs font-medium ${row.tests_passed ? 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200' :
-                                                'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200'
-                                                }`}>
-                                                {row.tests_passed ? '✓ Tests' : '⚠ Skipped'}
-                                            </span>
-                                        </div>
-                                        <div className="font-semibold text-gray-900 dark:text-white">{row.description}</div>
-                                        <div className="text-sm text-gray-700 dark:text-gray-300 mt-1">{row.commit_message}</div>
-                                        <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">{new Date(row.completed_at).toLocaleString()}</div>
-                                    </div>
-                                ))
-                            ) : (
-                                <p className="text-gray-500 dark:text-gray-400">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-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-lg hover:bg-gray-200 dark:hover:bg-white/10 disabled:opacity-50 text-gray-900 dark:text-white transition"
-                            >
-                                Previous
-                            </button>
-                            <span className="text-sm text-gray-600 dark: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-gray-100 dark:bg-white/5 border border-gray-300 dark:border-white/10 rounded-lg hover:bg-gray-200 dark:hover:bg-white/10 disabled:opacity-50 text-gray-900 dark:text-white transition"
-                            >
-                                Next
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-    );
-}

package/web/components/Navbar.tsx

@@ -1,208 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import Link from "next/link";
-import { Github, Menu, X, Moon, Sun, LogOut } from "lucide-react";
-import Image from "next/image";
-import { apiClient } from "@/lib/api-client";
-
-export default function Navbar() {
-    const [isOpen, setIsOpen] = useState(false);
-    const [theme, setTheme] = useState<"light" | "dark">("dark");
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [username, setUsername] = useState<string | null>(null);
-
-    useEffect(() => {
-        // Get theme from localStorage or system preference
-        const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null;
-        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-
-        const initialTheme = savedTheme || (prefersDark ? "dark" : "light");
-        setTheme(initialTheme);
-
-        // Apply the class immediately
-        document.documentElement.classList.toggle("dark", initialTheme === "dark");
-
-        // Check authentication status
-        const checkAuth = () => {
-            // Check authentication status ONLY if we think we're logged in OR if we just received an update event
-            // This prevents 401 errors from cluttering the console for guests
-            const mightBeLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
-
-            if (mightBeLoggedIn) {
-                apiClient.getCurrentUser()
-                    .then(data => {
-                        if (data) {
-                            setIsAuthenticated(true);
-                            setUsername(data.username || 'User');
-                            // Ensure local storage is in sync
-                            localStorage.setItem('isLoggedIn', 'true');
-                        } else {
-                            throw new Error('Not authenticated');
-                        }
-                    })
-                    .catch(() => {
-                        // Session invalid/expired
-                        localStorage.removeItem('isLoggedIn');
-                        setIsAuthenticated(false);
-                        setUsername(null);
-                    });
-            } else {
-                setIsAuthenticated(false);
-                setUsername(null);
-            }
-        };
-
-        // Initial check
-        checkAuth();
-
-        // Listen for auth updates (login/logout/validated session)
-        window.addEventListener('authUpdate', checkAuth);
-
-        return () => {
-            window.removeEventListener('authUpdate', checkAuth);
-        };
-    }, []);
-
-    const toggleTheme = () => {
-        const newTheme = theme === "dark" ? "light" : "dark";
-        setTheme(newTheme);
-        localStorage.setItem("theme", newTheme);
-        document.documentElement.classList.toggle("dark", newTheme === "dark");
-    };
-
-    const handleLogout = async () => {
-        try {
-            await apiClient.logout();
-            localStorage.removeItem('isLoggedIn');
-            setIsAuthenticated(false);
-            setUsername(null);
-            window.dispatchEvent(new Event('authUpdate'));
-            window.location.href = '/login';
-        } catch (error) {
-            console.error('Logout error:', error);
-        }
-    };
-
-    return (
-        <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-[#0a0a0f]/80 backdrop-blur-lg border-b border-gray-200 dark:border-white/10 transition-colors duration-300">
-            <div className="max-w-7xl mx-auto px-3 sm:px-4 lg:px-8">
-                <div className="flex items-center justify-between h-14 sm:h-16">
-                    <Link href="/" className="flex items-center gap-2">
-                        <Image src="/assets/logo.png" alt="Dev Workflow" width={28} height={28} className="rounded-lg w-7 h-7 sm:w-8 sm:h-8" />
-                        <span className="text-sm sm:text-lg font-bold text-gray-900 dark:text-white">Dev Workflow</span>
-                    </Link>
-                    <div className="hidden md:flex items-center gap-3 lg:gap-6">
-                        <Link href="/#features" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">Features</Link>
-                        <Link href="/history" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">History</Link>
-                        <Link href="/#api" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">API</Link>
-                        <Link href="/docs" className="text-xs lg:text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition">Docs</Link>
-                        <button
-                            onClick={toggleTheme}
-                            className="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 dark:bg-white/10 hover:bg-gray-200 dark:hover:bg-white/20 transition text-gray-900 dark:text-white"
-                            aria-label="Toggle theme"
-                        >
-                            {theme === "dark" ? (
-                                <Sun className="w-4 h-4" />
-                            ) : (
-                                <Moon className="w-4 h-4" />
-                            )}
-                        </button>
-                        <a
-                            href="https://github.com/programinglive/dev-workflow-mcp-server"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center gap-1.5 px-3 py-1.5 lg:px-4 lg:py-2 bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10 rounded-lg transition text-xs lg:text-sm text-gray-900 dark:text-white"
-                        >
-                            <Github className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
-                            GitHub
-                        </a>
-                        {isAuthenticated && (
-                            <div className="flex items-center gap-4 pl-4 border-l border-gray-200 dark:border-white/10">
-                                <span className="text-sm font-medium text-gray-900 dark:text-white">
-                                    {username}
-                                </span>
-                                <button
-                                    onClick={handleLogout}
-                                    className="flex items-center gap-1.5 px-3 py-1.5 lg:px-4 lg:py-2 bg-red-100 dark:bg-red-900/50 hover:bg-red-200 dark:hover:bg-red-800/50 rounded-lg transition text-xs lg:text-sm text-red-700 dark:text-red-300"
-                                >
-                                    <LogOut className="w-3.5 h-3.5 lg:w-4 lg:h-4" />
-                                    Logout
-                                </button>
-                            </div>
-                        )}
-                        {!isAuthenticated && (
-                            <Link
-                                href="/login"
-                                className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition"
-                            >
-                                Login
-                            </Link>
-                        )}
-                    </div>
-                    <div className="md:hidden flex items-center gap-2">
-                        <button
-                            onClick={toggleTheme}
-                            className="p-2 rounded-lg bg-gray-100 dark:bg-white/10 hover:bg-gray-200 dark:hover:bg-white/20 transition text-gray-900 dark:text-white"
-                            aria-label="Toggle theme"
-                        >
-                            {theme === "dark" ? (
-                                <Sun className="w-5 h-5" />
-                            ) : (
-                                <Moon className="w-5 h-5" />
-                            )}
-                        </button>
-                        <button
-                            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 transition text-gray-900 dark:text-white"
-                            onClick={() => setIsOpen(!isOpen)}
-                        >
-                            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-                        </button>
-                    </div>
-                </div>
-            </div>
-            {/* Mobile Menu */}
-            {isOpen && (
-                <div className="md:hidden border-t border-gray-200 dark:border-white/10 bg-white dark:bg-[#0a0a0f] transition-colors duration-300">
-                    <div className="px-4 py-4 space-y-3">
-                        {isAuthenticated && (
-                            <div className="px-3 py-2 text-sm font-medium text-gray-900 dark:text-white border-b border-gray-200 dark:border-white/10 mb-2">
-                                Signed in as {username}
-                            </div>
-                        )}
-                        <Link href="/#features" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>Features</Link>
-                        <Link href="/history" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>History</Link>
-                        <Link href="/#api" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition" onClick={() => setIsOpen(false)}>API</Link>
-                        <Link href="/docs" className="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark: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-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition"
-                        >
-                            <Github className="w-4 h-4" />
-                            GitHub
-                        </a>
-                        {isAuthenticated ? (
-                            <button
-                                onClick={() => { setIsOpen(false); handleLogout(); }}
-                                className="w-full text-left flex items-center gap-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 px-2 py-1.5 rounded transition"
-                            >
-                                <LogOut className="w-4 h-4" />
-                                Logout
-                            </button>
-                        ) : (
-                            <Link
-                                href="/login"
-                                className="block w-full text-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition"
-                                onClick={() => setIsOpen(false)}
-                            >
-                                Login
-                            </Link>
-                        )}
-                    </div>
-                </div>
-            )}
-        </nav>
-    );
-}

package/web/components/Terminal.tsx

@@ -1,114 +0,0 @@
-"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-xs sm:text-sm space-y-1.5 sm:space-y-2 min-h-[300px] sm:min-h-[400px]">
-            {lines}
-        </div>
-    );
-}

package/web/components/ThemeProvider.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "light" | "dark";
-
-interface ThemeContextType {
-  theme: Theme;
-  toggleTheme: () => void;
-}
-
-const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setTheme] = useState<Theme>("dark");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    // Check localStorage for saved theme preference
-    const savedTheme = localStorage.getItem("theme") as Theme | null;
-    if (savedTheme) {
-      setTheme(savedTheme);
-      document.documentElement.classList.toggle("dark", savedTheme === "dark");
-    } else {
-      // Check system preference
-      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-      const initialTheme = prefersDark ? "dark" : "light";
-      setTheme(initialTheme);
-      document.documentElement.classList.toggle("dark", prefersDark);
-    }
-  }, []);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    document.documentElement.classList.toggle("dark", newTheme === "dark");
-  };
-
-  if (!mounted) {
-    return <>{children}</>;
-  }
-
-  return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}

package/web/eslint.config.mjs

@@ -1,18 +0,0 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;