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

package/scripts/create-admin.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+import 'dotenv/config';
+import pg from 'pg';
+import { createUser } from '../web/lib/auth.js';
+
+const { Pool } = pg;
+
+// Get database configuration from environment
+const dbUrl = process.env.DEV_WORKFLOW_DB_URL;
+
+if (!dbUrl) {
+    console.error('Error: DEV_WORKFLOW_DB_URL environment variable is not set');
+    process.exit(1);
+}
+
+const pool = new Pool({ connectionString: dbUrl });
+
+async function createAdminUser() {
+    const username = process.env.ADMIN_USERNAME || 'admin';
+    const password = process.env.ADMIN_PASSWORD || 'admin123';
+    const email = process.env.ADMIN_EMAIL || 'admin@example.com';
+
+    try {
+        // Check if admin user already exists
+        const existing = await pool.query('SELECT id FROM users WHERE username = $1', [username]);
+
+        if (existing.rows.length > 0) {
+            console.log(`✓ Admin user '${username}' already exists`);
+            process.exit(0);
+        }
+
+        // Create admin user
+        const user = await createUser(pool, username, password, email);
+        console.log(`✓ Created admin user: ${user.username}`);
+        console.log(`  Email: ${user.email}`);
+        console.log(`  Password: ${password}`);
+        console.log('\n⚠️  Please change the password after first login!');
+
+    } catch (error) {
+        console.error('Error creating admin user:', error.message);
+        process.exit(1);
+    } finally {
+        await pool.end();
+    }
+}
+
+createAdminUser();

package/scripts/deploy-gcloud.ps1

@@ -0,0 +1,160 @@
+# GCP Deployment Script using gcloud CLI (PowerShell)
+# This script deploys the dev-workflow MCP server to a GCP Compute Engine instance
+
+$ErrorActionPreference = "Stop"
+
+# Configuration - Update these values
+$PROJECT_ID = if ($env:GCP_PROJECT_ID) { $env:GCP_PROJECT_ID } else { "edmee-project" }
+$INSTANCE_NAME = if ($env:GCP_INSTANCE_NAME) { $env:GCP_INSTANCE_NAME } else { "docker-almi" }
+$ZONE = if ($env:GCP_ZONE) { $env:GCP_ZONE } else { "asia-southeast2-a" }
+$INSTANCE_USER = if ($env:GCP_INSTANCE_USER) { $env:GCP_INSTANCE_USER } else { "dhika" }
+
+Write-Host "🚀 Deploying dev-workflow MCP server to GCP..." -ForegroundColor Cyan
+Write-Host "Project: $PROJECT_ID"
+Write-Host "Instance: $INSTANCE_NAME"
+Write-Host "Zone: $ZONE"
+Write-Host ""
+
+# Check if gcloud is installed
+if (!(Get-Command gcloud -ErrorAction SilentlyContinue)) {
+    Write-Host "❌ gcloud CLI is not installed" -ForegroundColor Red
+    Write-Host "Please install it from: https://cloud.google.com/sdk/docs/install"
+    exit 1
+}
+
+# Set the project
+Write-Host "📋 Setting GCP project..." -ForegroundColor Yellow
+gcloud config set project $PROJECT_ID
+
+# Get instance external IP
+Write-Host "🔍 Getting instance external IP..." -ForegroundColor Yellow
+$EXTERNAL_IP = gcloud compute instances describe $INSTANCE_NAME `
+    --zone=$ZONE `
+    --format="get(networkInterfaces[0].accessConfigs[0].natIP)"
+
+if ([string]::IsNullOrEmpty($EXTERNAL_IP)) {
+    Write-Host "❌ Could not get instance external IP" -ForegroundColor Red
+    exit 1
+}
+
+Write-Host "✅ Instance IP: $EXTERNAL_IP" -ForegroundColor Green
+Write-Host ""
+
+# Test SSH connection
+Write-Host "🔐 Testing SSH connection..." -ForegroundColor Yellow
+try {
+    $testResult = gcloud compute ssh "$INSTANCE_USER@$INSTANCE_NAME" `
+        --zone=$ZONE `
+        --command="echo 'Connection successful'" 2>&1
+    Write-Host "✅ SSH connection successful" -ForegroundColor Green
+} catch {
+    Write-Host "❌ Cannot connect to instance via SSH" -ForegroundColor Red
+    Write-Host "Please ensure:"
+    Write-Host "  1. SSH keys are configured in GCP"
+    Write-Host "  2. Firewall allows SSH (port 22)"
+    Write-Host "  3. Instance is running"
+    exit 1
+}
+Write-Host ""
+
+# Copy files to instance
+Write-Host "📦 Copying project files to instance..." -ForegroundColor Yellow
+gcloud compute scp --recurse `
+    --zone=$ZONE `
+    . "$INSTANCE_USER@${INSTANCE_NAME}:~/dev-workflow-mcp-server/" `
+    --exclude=".git" `
+    --exclude="node_modules" `
+    --exclude=".state" `
+    --exclude="dist"
+
+Write-Host "✅ Files copied successfully" -ForegroundColor Green
+Write-Host ""
+
+# Create deployment script for remote execution
+$deployScript = @'
+set -e
+
+cd ~/dev-workflow-mcp-server
+
+echo "📥 Installing Docker if not present..."
+if ! command -v docker &> /dev/null; then
+    curl -fsSL https://get.docker.com -o get-docker.sh
+    sudo sh get-docker.sh
+    sudo usermod -aG docker $USER
+    rm get-docker.sh
+    echo "✅ Docker installed"
+else
+    echo "✅ Docker already installed"
+fi
+
+echo "📥 Installing Docker Compose if not present..."
+if ! command -v docker-compose &> /dev/null; then
+    sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+    sudo chmod +x /usr/local/bin/docker-compose
+    echo "✅ Docker Compose installed"
+else
+    echo "✅ Docker Compose already installed"
+fi
+
+echo "⚙️  Configuring environment..."
+if [ ! -f .env ]; then
+    cp .env.production .env
+    echo "⚠️  Created .env file from template"
+    echo "⚠️  Please update the passwords in .env before production use!"
+fi
+
+echo "🛑 Stopping existing containers..."
+docker-compose down 2>/dev/null || true
+
+echo "🏗️  Building Docker images..."
+docker-compose build --no-cache
+
+echo "🚀 Starting containers..."
+docker-compose up -d
+
+echo "⏳ Waiting for services to be healthy..."
+sleep 15
+
+echo "📊 Checking container status..."
+docker-compose ps
+
+echo ""
+echo "✅ Deployment complete!"
+echo ""
+echo "Container logs:"
+docker-compose logs --tail=20
+'@
+
+# Run deployment commands on the instance
+Write-Host "🚀 Running deployment on instance..." -ForegroundColor Yellow
+$deployScript | gcloud compute ssh "$INSTANCE_USER@$INSTANCE_NAME" `
+    --zone=$ZONE `
+    --command="bash -s"
+
+Write-Host ""
+Write-Host "🎉 Deployment successful!" -ForegroundColor Green
+Write-Host ""
+Write-Host "📝 Next steps:" -ForegroundColor Cyan
+Write-Host "1. SSH into instance and update .env with secure passwords:"
+Write-Host "   gcloud compute ssh $INSTANCE_USER@$INSTANCE_NAME --zone=$ZONE"
+Write-Host "   cd ~/dev-workflow-mcp-server"
+Write-Host "   nano .env"
+Write-Host ""
+Write-Host "2. Update your local MCP client config:" -ForegroundColor Cyan
+Write-Host @"
+   {
+     "mcpServers": {
+       "dev-workflow": {
+         "command": "gcloud",
+         "args": [
+           "compute", "ssh", "$INSTANCE_USER@$INSTANCE_NAME",
+           "--zone=$ZONE",
+           "--command=docker exec -i dev-workflow-mcp node /app/index.js"
+         ]
+       }
+     }
+   }
+"@
+Write-Host ""
+Write-Host "3. Test the connection:" -ForegroundColor Cyan
+Write-Host "   gcloud compute ssh $INSTANCE_USER@$INSTANCE_NAME --zone=$ZONE --command='docker exec -i dev-workflow-mcp node /app/index.js call get_workflow_status'"

package/scripts/deploy-gcloud.sh

@@ -0,0 +1,154 @@
+#!/bin/bash
+# GCP Deployment Script using gcloud CLI
+# This script deploys the dev-workflow MCP server to a GCP Compute Engine instance
+
+set -e
+
+# Configuration - Update these values
+PROJECT_ID="${GCP_PROJECT_ID:-edmee-project}"
+INSTANCE_NAME="${GCP_INSTANCE_NAME:-docker-almi}"
+ZONE="${GCP_ZONE:-asia-southeast2-a}"
+INSTANCE_USER="${GCP_INSTANCE_USER:-dhika}"
+
+echo "🚀 Deploying dev-workflow MCP server to GCP..."
+echo "Project: $PROJECT_ID"
+echo "Instance: $INSTANCE_NAME"
+echo "Zone: $ZONE"
+echo ""
+
+# Check if gcloud is installed
+if ! command -v gcloud &> /dev/null; then
+    echo "❌ gcloud CLI is not installed"
+    echo "Please install it from: https://cloud.google.com/sdk/docs/install"
+    exit 1
+fi
+
+# Set the project
+echo "📋 Setting GCP project..."
+gcloud config set project "$PROJECT_ID"
+
+# Get instance external IP
+echo "🔍 Getting instance external IP..."
+EXTERNAL_IP=$(gcloud compute instances describe "$INSTANCE_NAME" \
+    --zone="$ZONE" \
+    --format="get(networkInterfaces[0].accessConfigs[0].natIP)")
+
+if [ -z "$EXTERNAL_IP" ]; then
+    echo "❌ Could not get instance external IP"
+    exit 1
+fi
+
+echo "✅ Instance IP: $EXTERNAL_IP"
+echo ""
+
+# Test SSH connection
+echo "🔐 Testing SSH connection..."
+if ! gcloud compute ssh "$INSTANCE_USER@$INSTANCE_NAME" \
+    --zone="$ZONE" \
+    --command="echo 'Connection successful'" &> /dev/null; then
+    echo "❌ Cannot connect to instance via SSH"
+    echo "Please ensure:"
+    echo "  1. SSH keys are configured in GCP"
+    echo "  2. Firewall allows SSH (port 22)"
+    echo "  3. Instance is running"
+    exit 1
+fi
+echo "✅ SSH connection successful"
+echo ""
+
+# Copy files to instance
+echo "📦 Copying project files to instance..."
+gcloud compute scp --recurse \
+    --zone="$ZONE" \
+    . "$INSTANCE_USER@$INSTANCE_NAME:~/dev-workflow-mcp-server/" \
+    --exclude=".git" \
+    --exclude="node_modules" \
+    --exclude=".state" \
+    --exclude="dist"
+
+echo "✅ Files copied successfully"
+echo ""
+
+# Run deployment commands on the instance
+echo "🚀 Running deployment on instance..."
+gcloud compute ssh "$INSTANCE_USER@$INSTANCE_NAME" \
+    --zone="$ZONE" \
+    --command="bash -s" << 'ENDSSH'
+set -e
+
+cd ~/dev-workflow-mcp-server
+
+echo "📥 Installing Docker if not present..."
+if ! command -v docker &> /dev/null; then
+    curl -fsSL https://get.docker.com -o get-docker.sh
+    sudo sh get-docker.sh
+    sudo usermod -aG docker $USER
+    rm get-docker.sh
+    echo "✅ Docker installed"
+else
+    echo "✅ Docker already installed"
+fi
+
+echo "📥 Installing Docker Compose if not present..."
+if ! command -v docker-compose &> /dev/null; then
+    sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
+    sudo chmod +x /usr/local/bin/docker-compose
+    echo "✅ Docker Compose installed"
+else
+    echo "✅ Docker Compose already installed"
+fi
+
+echo "⚙️  Configuring environment..."
+if [ ! -f .env ]; then
+    cp .env.production .env
+    echo "⚠️  Created .env file from template"
+    echo "⚠️  Please update the passwords in .env before production use!"
+fi
+
+echo "🛑 Stopping existing containers..."
+docker-compose down 2>/dev/null || true
+
+echo "🏗️  Building Docker images..."
+docker-compose build --no-cache
+
+echo "🚀 Starting containers..."
+docker-compose up -d
+
+echo "⏳ Waiting for services to be healthy..."
+sleep 15
+
+echo "📊 Checking container status..."
+docker-compose ps
+
+echo ""
+echo "✅ Deployment complete!"
+echo ""
+echo "Container logs:"
+docker-compose logs --tail=20
+ENDSSH
+
+echo ""
+echo "🎉 Deployment successful!"
+echo ""
+echo "📝 Next steps:"
+echo "1. SSH into instance and update .env with secure passwords:"
+echo "   gcloud compute ssh $INSTANCE_USER@$INSTANCE_NAME --zone=$ZONE"
+echo "   cd ~/dev-workflow-mcp-server"
+echo "   nano .env"
+echo ""
+echo "2. Update your local MCP client config:"
+echo "   {"
+echo "     \"mcpServers\": {"
+echo "       \"dev-workflow\": {"
+echo "         \"command\": \"gcloud\","
+echo "         \"args\": ["
+echo "           \"compute\", \"ssh\", \"$INSTANCE_USER@$INSTANCE_NAME\","
+echo "           \"--zone=$ZONE\","
+echo "           \"--command=docker exec -i dev-workflow-mcp node /app/index.js\""
+echo "         ]"
+echo "       }"
+echo "     }"
+echo "   }"
+echo ""
+echo "3. Test the connection:"
+echo "   gcloud compute ssh $INSTANCE_USER@$INSTANCE_NAME --zone=$ZONE --command='docker exec -i dev-workflow-mcp node /app/index.js call get_workflow_status'"

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 />