ai-control-center 1.15.2

package/lib/web/public/office/js/ui.js

@@ -0,0 +1,107 @@
+export class UI {
+  constructor(engine, hub) {
+    this.engine = engine;
+    this.hub = hub;
+    this.feedList = document.getElementById('feed-list');
+
+    // Click on canvas
+    engine.canvas.addEventListener('click', (e) => this._onCanvasClick(e));
+
+    // Listen for pipeline events
+    hub.on('message', (data) => this._onEvent(data));
+
+    // Listen for state updates
+    hub.on('pipeline-event', (data) => {
+      if (data.stage) engine.updateState({ stage: data.stage });
+      if (data.message) this.addFeedItem(data.message);
+      if (data.type === 'stage_complete') {
+        const roleMap = { spec_complete: 'pm', arch_complete: 'architect', implementation_complete: 'coder', deployed: 'deployer' };
+        const role = roleMap[data.stage];
+        if (role) engine.spawnConfetti(role);
+      }
+    });
+  }
+
+  _onCanvasClick(e) {
+    const rect = this.engine.canvas.getBoundingClientRect();
+    const mx = e.clientX - rect.left, my = e.clientY - rect.top;
+    const ch = this.engine.getCharacterAt(mx, my);
+    if (ch) this.showCharacterPopup(ch);
+  }
+
+  _onEvent(data) {
+    if (data.type === 'status_update' && data.status) {
+      this.engine.updateState(data.status);
+    }
+    if (data.message) this.addFeedItem(data.message, data.type);
+  }
+
+  addFeedItem(message, type = '') {
+    const li = document.createElement('li');
+    const time = new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
+    const icon = type.includes('error') ? '❌' : type.includes('complete') ? '✅' : 'ℹ️';
+    li.innerHTML = `<span class="feed-time">[${time}]</span><span class="feed-icon">${icon}</span>${message}`;
+    this.feedList.prepend(li);
+    while (this.feedList.children.length > 50) this.feedList.lastChild.remove();
+  }
+
+  showCharacterPopup(ch) {
+    const overlay = document.getElementById('popup-overlay');
+    overlay.classList.remove('hidden');
+    overlay.innerHTML = `
+      <div class="popup-card">
+        <h2>${ch.emoji} ${ch.label}</h2>
+        <p><strong>Status:</strong> ${ch.state}</p>
+        <p><strong>Role:</strong> ${ch.role}</p>
+        <p><strong>Stage:</strong> ${this.engine.state.stage || 'idle'}</p>
+        <p><strong>Feature:</strong> ${this.engine.state.current_feature || 'None'}</p>
+        <div class="btn-row">
+          <button class="btn-cancel" onclick="document.getElementById('popup-overlay').classList.add('hidden')">Close</button>
+        </div>
+      </div>`;
+  }
+
+  showFeatureForm() {
+    const overlay = document.getElementById('popup-overlay');
+    overlay.classList.remove('hidden');
+    overlay.innerHTML = `
+      <div class="popup-card">
+        <h2>📋 Submit Feature</h2>
+        <label>Type</label>
+        <select id="ff-type"><option value="feature">Feature</option><option value="bug">Bug Fix</option></select>
+        <label>Mode</label>
+        <select id="ff-mode"><option value="auto">Auto (Full Pipeline)</option><option value="manual">Manual (Step by Step)</option></select>
+        <label>Description</label>
+        <textarea id="ff-desc" placeholder="Describe the feature or bug..."></textarea>
+        <div class="btn-row">
+          <button class="btn-cancel" onclick="document.getElementById('popup-overlay').classList.add('hidden')">Cancel</button>
+          <button class="btn-primary" id="ff-submit">🚀 Submit</button>
+        </div>
+      </div>`;
+    document.getElementById('ff-submit').addEventListener('click', () => this._submitFeature());
+  }
+
+  async _submitFeature() {
+    const desc = document.getElementById('ff-desc').value.trim();
+    const mode = document.getElementById('ff-mode').value;
+    const type = document.getElementById('ff-type').value;
+    if (!desc) return;
+    document.getElementById('popup-overlay').classList.add('hidden');
+    this.addFeedItem(`Submitting ${type}: "${desc.slice(0, 60)}..."`, 'feature_submit');
+    try {
+      const res = await fetch('/api/feature', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ description: desc, mode, type }),
+      });
+      const result = await res.json();
+      if (result.success !== false) {
+        this.addFeedItem(`✅ Feature submitted: ${result.featureId || desc.slice(0, 40)}`, 'feature_created');
+      } else {
+        this.addFeedItem(`❌ Submit failed: ${result.error}`, 'error');
+      }
+    } catch (err) {
+      this.addFeedItem(`❌ Submit error: ${err.message}`, 'error');
+    }
+  }
+}

package/lib/web/public/onboarding/index.html

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Control Center - Setup Wizard</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
+    .wizard { max-width: 640px; width: 100%; padding: 2rem; }
+    .wizard h1 { font-size: 2rem; margin-bottom: 0.5rem; }
+    .wizard .subtitle { color: #94a3b8; margin-bottom: 2rem; }
+    .progress { display: flex; gap: 4px; margin-bottom: 2rem; }
+    .progress .step { flex: 1; height: 4px; background: #334155; border-radius: 2px; transition: background 0.3s; }
+    .progress .step.active { background: #3b82f6; }
+    .progress .step.done { background: #22c55e; }
+    .step-content { background: #1e293b; border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; min-height: 300px; }
+    .step-content h2 { font-size: 1.25rem; margin-bottom: 1rem; }
+    .step-content p { color: #94a3b8; margin-bottom: 1rem; line-height: 1.6; }
+    .form-group { margin-bottom: 1rem; }
+    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }
+    .form-group input, .form-group select { width: 100%; padding: 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 8px; color: #e2e8f0; font-size: 0.875rem; }
+    .form-group input:focus, .form-group select:focus { outline: none; border-color: #3b82f6; }
+    .option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+    .option-card { padding: 1rem; background: #0f172a; border: 2px solid #334155; border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: center; }
+    .option-card:hover { border-color: #3b82f6; }
+    .option-card.selected { border-color: #3b82f6; background: #1e3a5f; }
+    .option-card .emoji { font-size: 2rem; display: block; margin-bottom: 0.5rem; }
+    .option-card .name { font-weight: 600; }
+    .option-card .desc { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }
+    .btn-row { display: flex; justify-content: space-between; }
+    .btn { padding: 0.75rem 1.5rem; border-radius: 8px; border: none; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
+    .btn-primary { background: #3b82f6; color: white; }
+    .btn-primary:hover { background: #2563eb; }
+    .btn-secondary { background: #334155; color: #e2e8f0; }
+    .btn-secondary:hover { background: #475569; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .code-block { background: #0f172a; padding: 1rem; border-radius: 8px; font-family: 'SF Mono', monospace; font-size: 0.8rem; overflow-x: auto; margin-top: 1rem; border: 1px solid #334155; white-space: pre; }
+    .check-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: #0f172a; border-radius: 8px; margin-bottom: 0.5rem; }
+    .check-item .status { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
+    .check-item .status.pass { background: #166534; color: #4ade80; }
+    .check-item .status.fail { background: #7f1d1d; color: #fca5a5; }
+    .check-item .status.pending { background: #334155; color: #94a3b8; }
+    .confetti { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
+  </style>
+</head>
+<body>
+  <div class="wizard">
+    <h1>🤖 AI Control Center</h1>
+    <p class="subtitle">Let's get your AI-powered development pipeline set up</p>
+    
+    <div class="progress" id="progress"></div>
+    <div class="step-content" id="stepContent"></div>
+    <div class="btn-row">
+      <button class="btn btn-secondary" id="prevBtn" onclick="prevStep()">← Back</button>
+      <button class="btn btn-primary" id="nextBtn" onclick="nextStep()">Next →</button>
+    </div>
+  </div>
+
+  <script>
+    let currentStep = 0;
+    const config = { models: ['gemini'], primaryModel: 'gemini', projectName: '', features: [] };
+    
+    const steps = [
+      { title: '👋 Welcome', render: renderWelcome },
+      { title: '🤖 AI Models', render: renderModels },
+      { title: '📁 Project Setup', render: renderProject },
+      { title: '🔧 Features', render: renderFeatures },
+      { title: '✅ Pre-flight Check', render: renderPreflight },
+      { title: '🚀 Ready!', render: renderComplete },
+    ];
+
+    function renderProgress() {
+      const el = document.getElementById('progress');
+      el.innerHTML = steps.map((_, i) => 
+        `<div class="step ${i < currentStep ? 'done' : ''} ${i === currentStep ? 'active' : ''}"></div>`
+      ).join('');
+    }
+
+    function renderWelcome() {
+      return `
+        <h2>👋 Welcome to AI Control Center</h2>
+        <p>This wizard will help you configure your AI-powered development pipeline in just a few steps.</p>
+        <p>AICC orchestrates multiple AI models to handle your entire development workflow — from feature specs to code review and deployment.</p>
+        <div style="margin-top:1.5rem">
+          <div class="check-item"><div class="status pending">1</div><span>Choose your AI models</span></div>
+          <div class="check-item"><div class="status pending">2</div><span>Configure your project</span></div>
+          <div class="check-item"><div class="status pending">3</div><span>Select features</span></div>
+          <div class="check-item"><div class="status pending">4</div><span>Run pre-flight checks</span></div>
+        </div>
+      `;
+    }
+
+    function renderModels() {
+      const models = [
+        { id: 'gemini', emoji: '💎', name: 'Gemini', desc: 'Google AI (recommended)' },
+        { id: 'claude', emoji: '🧠', name: 'Claude', desc: 'Anthropic AI' },
+        { id: 'copilot', emoji: '🐙', name: 'Copilot', desc: 'GitHub Copilot CLI' },
+        { id: 'codex', emoji: '⚡', name: 'Codex', desc: 'OpenAI Codex CLI' },
+      ];
+      return `
+        <h2>🤖 Select AI Models</h2>
+        <p>Choose which AI models you want to use. You can select multiple models for A/B testing.</p>
+        <div class="option-grid">
+          ${models.map(m => `
+            <div class="option-card ${config.models.includes(m.id) ? 'selected' : ''}" onclick="toggleModel('${m.id}')">
+              <span class="emoji">${m.emoji}</span>
+              <div class="name">${m.name}</div>
+              <div class="desc">${m.desc}</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+    }
+
+    function renderProject() {
+      return `
+        <h2>📁 Project Configuration</h2>
+        <div class="form-group">
+          <label>Project Name</label>
+          <input type="text" id="projectName" value="${config.projectName}" placeholder="my-awesome-project" onchange="config.projectName=this.value">
+        </div>
+        <div class="form-group">
+          <label>Primary Model</label>
+          <select id="primaryModel" onchange="config.primaryModel=this.value">
+            ${config.models.map(m => `<option value="${m}" ${m === config.primaryModel ? 'selected' : ''}>${m}</option>`).join('')}
+          </select>
+        </div>
+        <div class="form-group">
+          <label>Pipeline Template</label>
+          <select id="template">
+            <option value="default">Default (Full Pipeline)</option>
+            <option value="react">React/Next.js</option>
+            <option value="nodejs-api">Node.js API</option>
+            <option value="python">Python</option>
+            <option value="mobile">Mobile App</option>
+          </select>
+        </div>
+      `;
+    }
+
+    function renderFeatures() {
+      const features = [
+        { id: 'webhooks', emoji: '🔗', name: 'Webhooks', desc: 'HTTP notifications' },
+        { id: 'slack', emoji: '💬', name: 'Slack Bot', desc: 'Slack integration' },
+        { id: 'hub', emoji: '🏢', name: 'Hub Mode', desc: 'Multi-project dashboard' },
+        { id: 'rbac', emoji: '🔒', name: 'RBAC', desc: 'Access control' },
+        { id: 'achievements', emoji: '🏆', name: 'Achievements', desc: 'Gamification' },
+        { id: 'office', emoji: '🎮', name: 'Office Visualizer', desc: 'Animated AI office' },
+      ];
+      return `
+        <h2>🔧 Optional Features</h2>
+        <p>Enable additional features (you can change these later in aicc.config.js)</p>
+        <div class="option-grid">
+          ${features.map(f => `
+            <div class="option-card ${config.features.includes(f.id) ? 'selected' : ''}" onclick="toggleFeature('${f.id}')">
+              <span class="emoji">${f.emoji}</span>
+              <div class="name">${f.name}</div>
+              <div class="desc">${f.desc}</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+    }
+
+    function renderPreflight() {
+      return `
+        <h2>✅ Pre-flight Checks</h2>
+        <p>Checking your environment...</p>
+        <div id="checks">
+          <div class="check-item"><div class="status pending" id="chk-node">⏳</div><span>Node.js ≥ 18</span></div>
+          <div class="check-item"><div class="status pending" id="chk-git">⏳</div><span>Git repository</span></div>
+          <div class="check-item"><div class="status pending" id="chk-model">⏳</div><span>AI model configured</span></div>
+          <div class="check-item"><div class="status pending" id="chk-dir">⏳</div><span>.ai-workflow directory</span></div>
+        </div>
+        <p style="margin-top:1rem;font-size:0.8rem;color:#64748b">These checks run locally in your browser as a visual guide. Actual validation happens when you run <code>aicc init</code>.</p>
+      `;
+    }
+
+    function renderComplete() {
+      const configStr = JSON.stringify({
+        models: config.models,
+        primaryModel: config.primaryModel,
+        features: config.features,
+      }, null, 2);
+      return `
+        <h2>🚀 You're All Set!</h2>
+        <p>Run these commands to initialize your project:</p>
+        <div class="code-block">npx aicc init
+aicc health
+aicc feature "My first AI feature"</div>
+        <p style="margin-top:1rem">Your configuration:</p>
+        <div class="code-block">${configStr}</div>
+        <p style="margin-top:1rem">📖 <a href="https://github.com/ai-control-center" style="color:#3b82f6">Documentation</a> | 💬 <a href="/office" style="color:#3b82f6">Open Office Visualizer</a></p>
+      `;
+    }
+
+    function toggleModel(id) {
+      const idx = config.models.indexOf(id);
+      if (idx >= 0) config.models.splice(idx, 1);
+      else config.models.push(id);
+      if (!config.models.includes(config.primaryModel)) config.primaryModel = config.models[0] || 'gemini';
+      renderStep();
+    }
+
+    function toggleFeature(id) {
+      const idx = config.features.indexOf(id);
+      if (idx >= 0) config.features.splice(idx, 1);
+      else config.features.push(id);
+      renderStep();
+    }
+
+    function renderStep() {
+      document.getElementById('stepContent').innerHTML = steps[currentStep].render();
+      renderProgress();
+      document.getElementById('prevBtn').disabled = currentStep === 0;
+      document.getElementById('nextBtn').textContent = currentStep === steps.length - 1 ? '✨ Done' : 'Next →';
+      
+      if (currentStep === 4) runPreflight();
+    }
+
+    function prevStep() { if (currentStep > 0) { currentStep--; renderStep(); } }
+    function nextStep() {
+      if (currentStep < steps.length - 1) { currentStep++; renderStep(); }
+      else { window.location.href = '/'; }
+    }
+
+    function runPreflight() {
+      setTimeout(() => setCheck('chk-node', true), 500);
+      setTimeout(() => setCheck('chk-git', true), 1000);
+      setTimeout(() => setCheck('chk-model', config.models.length > 0), 1500);
+      setTimeout(() => setCheck('chk-dir', true), 2000);
+    }
+
+    function setCheck(id, pass) {
+      const el = document.getElementById(id);
+      if (el) { el.className = 'status ' + (pass ? 'pass' : 'fail'); el.textContent = pass ? '✓' : '✗'; }
+    }
+
+    renderStep();
+  </script>
+</body>
+</html>

package/lib/web/public/timeline/index.html

@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AICC - Pipeline Timeline</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e2e8f0; }
+    .header { padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #1e293b; }
+    .header h1 { font-size: 1.25rem; }
+    .header .controls { display: flex; gap: 0.5rem; }
+    .header .controls button { padding: 0.5rem 1rem; background: #1e293b; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; cursor: pointer; font-size: 0.8rem; }
+    .header .controls button.active { background: #3b82f6; border-color: #3b82f6; }
+    .timeline-container { padding: 2rem; overflow-x: auto; }
+    .timeline { position: relative; min-height: 400px; }
+    .timeline-line { position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: #334155; }
+    .timeline-item { position: relative; padding-left: 60px; margin-bottom: 1.5rem; }
+    .timeline-item .dot { position: absolute; left: 16px; top: 8px; width: 18px; height: 18px; border-radius: 50%; border: 3px solid; }
+    .timeline-item .dot.success { border-color: #22c55e; background: #166534; }
+    .timeline-item .dot.error { border-color: #ef4444; background: #7f1d1d; }
+    .timeline-item .dot.running { border-color: #3b82f6; background: #1e3a5f; animation: pulse 2s infinite; }
+    .timeline-item .dot.pending { border-color: #64748b; background: #334155; }
+    @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); } }
+    .timeline-item .card { background: #1e293b; border-radius: 8px; padding: 1rem; border: 1px solid #334155; }
+    .timeline-item .card:hover { border-color: #475569; }
+    .timeline-item .card .title { font-weight: 600; margin-bottom: 0.25rem; }
+    .timeline-item .card .meta { font-size: 0.75rem; color: #64748b; display: flex; gap: 1rem; margin-bottom: 0.5rem; }
+    .timeline-item .card .stages { display: flex; gap: 4px; margin-top: 0.5rem; }
+    .timeline-item .card .stage { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 500; }
+    .stage.spec { background: #1e3a5f; color: #60a5fa; }
+    .stage.arch { background: #14532d; color: #4ade80; }
+    .stage.impl { background: #713f12; color: #fbbf24; }
+    .stage.review { background: #4c1d95; color: #a78bfa; }
+    .stage.deploy { background: #7f1d1d; color: #fca5a5; }
+    .stats-bar { display: flex; gap: 2rem; padding: 1rem 2rem; background: #1e293b; border-bottom: 1px solid #334155; }
+    .stat { text-align: center; }
+    .stat .value { font-size: 1.5rem; font-weight: 700; }
+    .stat .label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; }
+    .empty { text-align: center; padding: 4rem 2rem; color: #64748b; }
+    .empty .emoji { font-size: 3rem; margin-bottom: 1rem; display: block; }
+    .dark-toggle { position: fixed; bottom: 1rem; right: 1rem; padding: 0.5rem 1rem; background: #334155; border: none; border-radius: 8px; color: #e2e8f0; cursor: pointer; font-size: 0.8rem; }
+    body.light { background: #f8fafc; color: #1e293b; }
+    body.light .header { border-color: #e2e8f0; }
+    body.light .stats-bar { background: #fff; border-color: #e2e8f0; }
+    body.light .timeline-line { background: #e2e8f0; }
+    body.light .timeline-item .card { background: #fff; border-color: #e2e8f0; }
+    body.light .header .controls button { background: #fff; border-color: #e2e8f0; color: #1e293b; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1>📊 Pipeline Timeline</h1>
+    <div class="controls">
+      <button class="active" onclick="setFilter('all')">All</button>
+      <button onclick="setFilter('feature')">Features</button>
+      <button onclick="setFilter('review')">Reviews</button>
+      <button onclick="setFilter('deploy')">Deploys</button>
+      <a href="/" style="padding:0.5rem 1rem;background:#334155;border:1px solid #475569;border-radius:6px;color:#e2e8f0;text-decoration:none;font-size:0.8rem">← Dashboard</a>
+    </div>
+  </div>
+  <div class="stats-bar" id="statsBar"></div>
+  <div class="timeline-container">
+    <div class="timeline" id="timeline">
+      <div class="timeline-line"></div>
+    </div>
+  </div>
+  <button class="dark-toggle" onclick="toggleTheme()">🌓 Toggle Theme</button>
+
+  <script>
+    let pipelines = [];
+    let filter = 'all';
+    let isDark = true;
+
+    async function fetchPipelines() {
+      try {
+        const res = await fetch('/api/status');
+        const data = await res.json();
+        // Build timeline from available data
+        if (data.history) {
+          pipelines = data.history;
+        } else {
+          // Construct from current status
+          pipelines = [{
+            id: 1,
+            action: data.currentAction || 'idle',
+            status: data.phase === 'idle' ? 'success' : 'running',
+            startTime: data.startTime || Date.now(),
+            duration: data.duration || 0,
+            cost: data.totalCost || 0,
+            model: data.model || 'gemini',
+            stages: data.completedStages || [],
+          }];
+        }
+      } catch (e) {
+        pipelines = [];
+      }
+      render();
+    }
+
+    function render() {
+      const filtered = filter === 'all' ? pipelines : pipelines.filter(p => p.action === filter);
+      renderStats(filtered);
+      renderTimeline(filtered);
+    }
+
+    function renderStats(items) {
+      const total = items.length;
+      const successful = items.filter(p => p.status === 'success').length;
+      const totalCost = items.reduce((s, p) => s + (p.cost || 0), 0);
+      const avgDuration = total ? items.reduce((s, p) => s + (p.duration || 0), 0) / total : 0;
+      document.getElementById('statsBar').innerHTML = `
+        <div class="stat"><div class="value">${total}</div><div class="label">Total Runs</div></div>
+        <div class="stat"><div class="value">${successful}</div><div class="label">Successful</div></div>
+        <div class="stat"><div class="value">${total ? Math.round(successful/total*100) : 0}%</div><div class="label">Success Rate</div></div>
+        <div class="stat"><div class="value">$${totalCost.toFixed(2)}</div><div class="label">Total Cost</div></div>
+        <div class="stat"><div class="value">${formatDuration(avgDuration)}</div><div class="label">Avg Duration</div></div>
+      `;
+    }
+
+    function renderTimeline(items) {
+      const el = document.getElementById('timeline');
+      if (items.length === 0) {
+        el.innerHTML = '<div class="timeline-line"></div><div class="empty"><span class="emoji">📭</span>No pipeline runs yet.<br>Run <code>aicc feature "something"</code> to get started.</div>';
+        return;
+      }
+      el.innerHTML = '<div class="timeline-line"></div>' + items.map(p => `
+        <div class="timeline-item">
+          <div class="dot ${p.status}"></div>
+          <div class="card">
+            <div class="title">${getActionEmoji(p.action)} ${p.action || 'Pipeline'} ${p.description ? '— ' + p.description : ''}</div>
+            <div class="meta">
+              <span>🕐 ${formatTime(p.startTime)}</span>
+              <span>⏱️ ${formatDuration(p.duration)}</span>
+              <span>💰 $${(p.cost || 0).toFixed(4)}</span>
+              <span>🤖 ${p.model || 'unknown'}</span>
+            </div>
+            <div class="stages">
+              ${['spec', 'arch', 'impl', 'review', 'deploy'].map(s => 
+                `<span class="stage ${s}" style="opacity:${(p.stages || []).includes(s) ? 1 : 0.3}">${s}</span>`
+              ).join('')}
+            </div>
+          </div>
+        </div>
+      `).join('');
+    }
+
+    function getActionEmoji(action) {
+      return { feature: '🎯', review: '🔍', deploy: '🚀', fix: '🔧' }[action] || '⚡';
+    }
+
+    function formatTime(ts) {
+      if (!ts) return 'N/A';
+      return new Date(ts).toLocaleString();
+    }
+
+    function formatDuration(ms) {
+      if (!ms) return '0s';
+      if (ms < 1000) return ms + 'ms';
+      const s = Math.round(ms / 1000);
+      return s < 60 ? s + 's' : Math.floor(s/60) + 'm ' + (s%60) + 's';
+    }
+
+    function setFilter(f) {
+      filter = f;
+      document.querySelectorAll('.controls button').forEach(b => b.classList.remove('active'));
+      event.target.classList.add('active');
+      render();
+    }
+
+    function toggleTheme() {
+      isDark = !isDark;
+      document.body.classList.toggle('light', !isDark);
+      localStorage.setItem('aicc-theme', isDark ? 'dark' : 'light');
+    }
+
+    // Load saved theme
+    if (localStorage.getItem('aicc-theme') === 'light') { isDark = false; document.body.classList.add('light'); }
+
+    fetchPipelines();
+    setInterval(fetchPipelines, 5000);
+
+    // WebSocket for live updates
+    try {
+      const ws = new WebSocket(`ws://${location.host}`);
+      ws.onmessage = (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          if (data.type === 'pipeline-event') fetchPipelines();
+        } catch {}
+      };
+    } catch {}
+  </script>
+</body>
+</html>