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

package/tests/workflowState.test.js

@@ -14,6 +14,13 @@ import { constants as fsConstants } from "node:fs";
 import { tmpdir } from "node:os";
 import path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
+
+// Isolate these tests from the real database configuration
+delete process.env.DEV_WORKFLOW_DB_TYPE;
+delete process.env.DEV_WORKFLOW_DB_URL;
+delete process.env.TEST_MYSQL_URL;
+delete process.env.TEST_POSTGRES_URL;
+
 import {
   WorkflowState,
   getNextStep,
@@ -50,7 +57,9 @@ test("resolveStateFile prefers current working directory when multiple project m
   const sourceModulePath = fileURLToPath(new URL("../workflow-state.js", import.meta.url));
   await copyFile(sourceModulePath, path.join(moduleDir, "workflow-state.js"));
 
-  await writeFile(path.join(moduleDir, "package.json"), JSON.stringify({ name: "module" }));
+  await writeFile(path.join(moduleDir, "package.json"), JSON.stringify({ name: "module", type: "module" }));
+  await mkdir(path.join(moduleDir, "db"), { recursive: true });
+  await writeFile(path.join(moduleDir, "db", "index.js"), 'export function getDbAdapter() { return { connect: async () => {}, saveState: async () => {}, getState: async () => null }; } export async function insertHistoryEntry() {} export async function updateSummaryForUser() {} export async function saveState() {} export async function getState() {} export async function getSummaryForUser() { return { totalTasks: 0, taskTypes: {} }; } export async function getHistoryForUser() { return { entries: [], total: 0 }; }');
   await writeFile(path.join(projectA, "package.json"), JSON.stringify({ name: "project-a" }));
   await writeFile(path.join(projectB, "package.json"), JSON.stringify({ name: "project-b" }));
 
@@ -101,6 +110,9 @@ test("WorkflowState mirrors state file to compatibility locations", async () =>
   await mkdir(path.join(tempRoot, "dist"), { recursive: true });
   await mkdir(stateDir, { recursive: true });
   await copyFile(sourceModulePath, path.join(moduleDir, "workflow-state.js"));
+  await writeFile(path.join(moduleDir, "package.json"), JSON.stringify({ name: "module", type: "module" }));
+  await mkdir(path.join(moduleDir, "db"), { recursive: true });
+  await writeFile(path.join(moduleDir, "db", "index.js"), 'export function getDbAdapter() { return { connect: async () => {}, saveState: async () => {}, getState: async () => null }; } export async function insertHistoryEntry() {} export async function updateSummaryForUser() {} export async function saveState() {} export async function getState() {} export async function getSummaryForUser() { return { totalTasks: 0, taskTypes: {} }; } export async function getHistoryForUser() { return { entries: [], total: 0 }; }');
   await writeFile(path.join(projectRoot, "package.json"), JSON.stringify({ name: "temp" }));
 
   const stateFile = path.join(stateDir, "workflow-state.json");
@@ -129,6 +141,9 @@ test("WorkflowState avoids filesystem root when no project markers found", async
 
   const sourceModulePath = fileURLToPath(new URL("../workflow-state.js", import.meta.url));
   await copyFile(sourceModulePath, path.join(moduleDir, "workflow-state.js"));
+  await writeFile(path.join(moduleDir, "package.json"), JSON.stringify({ name: "module", type: "module" }));
+  await mkdir(path.join(moduleDir, "db"), { recursive: true });
+  await writeFile(path.join(moduleDir, "db", "index.js"), 'export function getDbAdapter() { return { connect: async () => {}, saveState: async () => {}, getState: async () => null }; } export async function insertHistoryEntry() {} export async function updateSummaryForUser() {} export async function saveState() {} export async function getState() {} export async function getSummaryForUser() { return { totalTasks: 0, taskTypes: {} }; } export async function getHistoryForUser() { return { entries: [], total: 0 }; }');
 
   const moduleUrl = pathToFileURL(path.join(moduleDir, "workflow-state.js"));
   const { WorkflowState: TempWorkflowState } = await import(moduleUrl.href);

package/web/__tests__/api/workflow-history.test.js

@@ -0,0 +1,61 @@
+const request = require('supertest');
+const express = require('express');
+
+describe('Workflow History API', () => {
+    let app;
+    let server;
+
+    beforeAll(() => {
+        // Mock Express app for testing
+        app = express();
+        app.use(express.json());
+
+        // Mock session middleware
+        app.use((req, res, next) => {
+            req.session = { userId: 1 };
+            next();
+        });
+
+        // Mock history endpoint
+        app.get('/api/workflow/history', async (req, res) => {
+            // Mock response
+            res.json({
+                history: [
+                    {
+                        id: 1,
+                        task_type: 'feature',
+                        description: 'Test feature',
+                        commit_message: 'feat: test commit',
+                        completed_at: new Date().toISOString(),
+                        tests_passed: true,
+                        documentation_type: 'README'
+                    }
+                ]
+            });
+        });
+    });
+
+    test('GET /api/workflow/history returns workflow history', async () => {
+        const response = await request(app)
+            .get('/api/workflow/history')
+            .expect(200);
+
+        expect(response.body).toHaveProperty('history');
+        expect(Array.isArray(response.body.history)).toBe(true);
+        expect(response.body.history.length).toBeGreaterThan(0);
+    });
+
+    test('History items have required fields', async () => {
+        const response = await request(app)
+            .get('/api/workflow/history')
+            .expect(200);
+
+        const item = response.body.history[0];
+        expect(item).toHaveProperty('id');
+        expect(item).toHaveProperty('task_type');
+        expect(item).toHaveProperty('description');
+        expect(item).toHaveProperty('commit_message');
+        expect(item).toHaveProperty('completed_at');
+        expect(item).toHaveProperty('tests_passed');
+    });
+});

package/web/app/docs/page.tsx

@@ -22,7 +22,7 @@ export default function DocsPage() {
                     </p>
 
                     <div className="bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-200 dark:border-emerald-500/20 rounded-lg p-4 mb-8">
-                        <p className="text-emerald-700 dark:text-emerald-400 font-semibold">Version: 1.6.2</p>
+                        <p className="text-emerald-700 dark:text-emerald-400 font-semibold">Version: 1.7.11</p>
                     </div>
 
                     <h2 className="text-3xl font-bold mt-12 mb-6 text-gray-900 dark:text-white">Features</h2>

package/web/app/history/page.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useEffect, useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+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(() => {
+        fetch('/api/auth/me')
+            .then(res => {
+                if (res.ok) {
+                    setIsAuthenticated(true);
+                    // Sync auth state with Navbar
+                    localStorage.setItem('isLoggedIn', 'true');
+                    window.dispatchEvent(new Event('authUpdate'));
+                    return fetch('/api/workflow/history');
+                } else {
+                    router.push('/login');
+                    throw new Error('Not authenticated');
+                }
+            })
+            .then(res => res?.json())
+            .then(data => {
+                if (data?.history) {
+                    setHistory(data.history);
+                }
+            })
+            .catch(() => { })
+            .finally(() => setLoading(false));
+    }, [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

@@ -26,7 +26,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="scroll-smooth">
+    <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 />

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>
                                 ))
                             ) : (