@programinglive/dev-workflow-mcp-server 1.7.11 → 1.7.12

package/web/app/login/page.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import { Lock, User } from 'lucide-react';
+
+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;
+        }
+
+        fetch('/api/auth/me')
+            .then(res => {
+                if (res.ok) {
+                    router.push('/history');
+                }
+            })
+            .catch(() => { })
+            .finally(() => setAuthChecking(false));
+    }, [router]);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username, password }),
+            });
+
+            const data = await response.json();
+
+            if (response.ok) {
+                localStorage.setItem('isLoggedIn', 'true');
+                window.dispatchEvent(new Event('authUpdate'));
+                router.push('/history');
+            } else {
+                setError(data.error || 'Login failed');
+            }
+        } catch (err) {
+            setError('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>
+                </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,6 +1,5 @@
 import Hero from "@/components/Hero";
 import Features from "@/components/Features";
-import History from "@/components/History";
 import ApiReference from "@/components/ApiReference";
 
 export default function Home() {
@@ -8,7 +7,6 @@ export default function Home() {
     <main>
       <Hero />
       <Features />
-      <History />
       <ApiReference />
     </main>
   );

package/web/components/Hero.tsx

@@ -17,7 +17,7 @@ export default function Hero() {
             .catch(() => setDownloads(null));
 
         // Version is hardcoded for static export
-        setVersion("1.5.3");
+        setVersion("1.7.11");
     }, []);
 
     const formatDownloads = (num: number) => {

package/web/components/History.tsx

@@ -3,8 +3,13 @@
 import { useState, useEffect } from "react";
 
 type HistoryItem = {
-    task_description: string;
-    created_at: string;
+    id: number;
+    task_type: string;
+    description: string;
+    commit_message: string;
+    completed_at: string;
+    tests_passed: boolean;
+    documentation_type: string;
 };
 
 type SummaryData = {
@@ -25,19 +30,47 @@ export default function History() {
     });
 
     const loadData = async () => {
-        // Placeholder for future API integration
-        // For now, show empty state
-        setHistory([]);
-        setTotalPages(1);
-        setSummary({
-            summary: {
-                totalTasks: 0,
-            },
-        });
+        try {
+            // Fetch workflow history from API
+            const response = await fetch('/api/workflow/history');
+
+            if (response.ok) {
+                const data = await response.json();
+                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(() => {
-        loadData();
+        // 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 = () => {
@@ -92,10 +125,24 @@ export default function History() {
                         <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, i) => (
-                                    <div key={i} className="p-4 rounded-lg bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10">
-                                        <div className="font-semibold text-gray-900 dark:text-white">{row.task_description}</div>
-                                        <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">{new Date(row.created_at).toLocaleString()}</div>
+                                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>
                                 ))
                             ) : (

package/web/components/Navbar.tsx

@@ -2,22 +2,67 @@
 
 import { useState, useEffect } from "react";
 import Link from "next/link";
-import { Github, Menu, X, Moon, Sun } from "lucide-react";
+import { Github, Menu, X, Moon, Sun, LogOut } from "lucide-react";
 import Image from "next/image";
 
 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;
-        if (savedTheme) {
-            setTheme(savedTheme);
-        } else {
-            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-            setTheme(prefersDark ? "dark" : "light");
-        }
+        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) {
+                fetch('/api/auth/me')
+                    .then(res => {
+                        if (res.ok) {
+                            return res.json();
+                        }
+                        throw new Error('Not authenticated');
+                    })
+                    .then(data => {
+                        setIsAuthenticated(true);
+                        setUsername(data.user?.username || 'User');
+                        // Ensure local storage is in sync
+                        localStorage.setItem('isLoggedIn', 'true');
+                    })
+                    .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 = () => {
@@ -27,6 +72,19 @@ export default function Navbar() {
         document.documentElement.classList.toggle("dark", newTheme === "dark");
     };
 
+    const handleLogout = async () => {
+        try {
+            await fetch('/api/auth/logout', { method: 'POST' });
+            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">
@@ -37,7 +95,7 @@ export default function Navbar() {
                     </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="/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
@@ -60,6 +118,28 @@ export default function Navbar() {
                             <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
@@ -86,8 +166,13 @@ export default function Navbar() {
             {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="/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
@@ -99,6 +184,23 @@ export default function Navbar() {
                             <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>
             )}

package/web/lib/auth.js

@@ -0,0 +1,75 @@
+import bcrypt from 'bcrypt';
+import pg from 'pg';
+
+const SALT_ROUNDS = 10;
+
+/**
+ * Hash a password using bcrypt
+ */
+export async function hashPassword(password) {
+    return bcrypt.hash(password, SALT_ROUNDS);
+}
+
+/**
+ * Verify a password against a hash
+ */
+export async function verifyPassword(password, hash) {
+    return bcrypt.compare(password, hash);
+}
+
+/**
+ * Create a new user
+ */
+export async function createUser(pool, username, password, email = null) {
+    const passwordHash = await hashPassword(password);
+
+    const result = await pool.query(
+        'INSERT INTO users (username, password_hash, email) VALUES ($1, $2, $3) RETURNING id, username, email, created_at',
+        [username, passwordHash, email]
+    );
+
+    return result.rows[0];
+}
+
+/**
+ * Authenticate a user
+ */
+export async function authenticateUser(pool, username, password) {
+    const result = await pool.query(
+        'SELECT id, username, password_hash, email FROM users WHERE username = $1',
+        [username]
+    );
+
+    if (result.rows.length === 0) {
+        return null;
+    }
+
+    const user = result.rows[0];
+    const isValid = await verifyPassword(password, user.password_hash);
+
+    if (!isValid) {
+        return null;
+    }
+
+    // Update last login
+    await pool.query(
+        'UPDATE users SET last_login = CURRENT_TIMESTAMP WHERE id = $1',
+        [user.id]
+    );
+
+    // Return user without password hash
+    const { password_hash, ...userWithoutPassword } = user;
+    return userWithoutPassword;
+}
+
+/**
+ * Get user by ID
+ */
+export async function getUserById(pool, id) {
+    const result = await pool.query(
+        'SELECT id, username, email, created_at, last_login FROM users WHERE id = $1',
+        [id]
+    );
+
+    return result.rows[0] || null;
+}

package/web/middleware/auth.js

@@ -0,0 +1,26 @@
+/**
+ * Middleware to require authentication
+ */
+export function requireAuth(req, res, next) {
+    if (req.session && req.session.userId) {
+        return next();
+    }
+
+    // If it's an API request, return 401
+    if (req.path.startsWith('/api/')) {
+        return res.status(401).json({ error: 'Authentication required' });
+    }
+
+    // Otherwise redirect to login
+    res.redirect('/login');
+}
+
+/**
+ * Middleware to redirect if already authenticated
+ */
+export function redirectIfAuthenticated(req, res, next) {
+    if (req.session && req.session.userId) {
+        return res.redirect('/');
+    }
+    next();
+}

package/web/next.config.ts

@@ -3,6 +3,10 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   // Static export for Netlify deployment
   output: 'export',
+  // Set turbopack root to silence multi-lockfile warning
+  turbopack: {
+    root: __dirname,
+  },
   // Disable image optimization for static export
   images: {
     unoptimized: true,