npm - @ronkovic/aad - Versions diffs - 0.3.0 - Mend

@ronkovic/aad 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (195) hide show

package/src/modules/dashboard/services/state-aggregator.ts ADDED Viewed

@@ -0,0 +1,132 @@
+import type { LogStore, LogEntry, LogFilter } from "../../logging";
+import type { TaskId, WorkerId, ProgressState, Task } from "../../../shared/types";
+import type { TaskStore } from "../../task-queue";
+import type { ProcessManager } from "../../process-manager";
+export interface StateAggregatorOptions {
+  logStore: LogStore;
+  taskStore: TaskStore;
+  processManager: ProcessManager;
+}
+export class StateAggregator {
+  private logStore: LogStore;
+  private taskStore: TaskStore;
+  private processManager: ProcessManager;
+  constructor(options: StateAggregatorOptions) {
+    this.logStore = options.logStore;
+    this.taskStore = options.taskStore;
+    this.processManager = options.processManager;
+  }
+  async getProgress(): Promise<{ progress: ProgressState; percentComplete: number }> {
+    const tasks = await this.taskStore.getAll();
+    const progress: ProgressState = {
+      total: tasks.length,
+      pending: 0,
+      running: 0,
+      completed: 0,
+      failed: 0,
+    };
+    for (const task of tasks) {
+      switch (task.status) {
+        case "pending":
+          progress.pending++;
+          break;
+        case "running":
+          progress.running++;
+          break;
+        case "completed":
+          progress.completed++;
+          break;
+        case "failed":
+          progress.failed++;
+          break;
+      }
+    }
+    const percentComplete =
+      progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0;
+    return { progress, percentComplete };
+  }
+  async getTasks(): Promise<{ tasks: Task[]; total: number }> {
+    const tasks = await this.taskStore.getAll();
+    return {
+      tasks,
+      total: tasks.length,
+    };
+  }
+  getTaskLogs(taskId: TaskId): LogEntry[] {
+    return this.logStore.query({ taskId: taskId as string });
+  }
+  getWorkers(): {
+    stats: ReturnType<ProcessManager["getStats"]>;
+    workers: Array<{ id: WorkerId; status: "idle" | "busy" | "stopped" }>;
+  } {
+    const workerIds = this.processManager.getAllWorkers();
+    const workers = workerIds.map((id) => {
+      const worker = this.processManager.getWorker(id);
+      return {
+        id,
+        status: worker?.isIdle() ? "idle" as const : worker?.isBusy() ? "busy" as const : "stopped" as const,
+      };
+    });
+    return {
+      stats: this.processManager.getStats(),
+      workers,
+    };
+  }
+  async getGraph(): Promise<{ nodes: Array<{ id: string; status: string }>; edges: Array<{ from: string; to: string }> }> {
+    const tasks = await this.taskStore.getAll();
+    const nodes = tasks.map((task) => ({
+      id: task.taskId as string,
+      status: task.status,
+    }));
+    const edges: Array<{ from: string; to: string }> = [];
+    for (const task of tasks) {
+      for (const depId of task.dependsOn) {
+        edges.push({
+          from: depId as string,
+          to: task.taskId as string,
+        });
+      }
+    }
+    return { nodes, edges };
+  }
+  async getTimeline(): Promise<{
+    tasks: Array<{
+      id: string;
+      status: string;
+      startTime?: string;
+      endTime?: string;
+    }>;
+  }> {
+    const tasks = await this.taskStore.getAll();
+    return {
+      tasks: tasks.map((task) => ({
+        id: task.taskId as string,
+        status: task.status,
+        startTime: task.startTime,
+        endTime: task.endTime,
+      })),
+    };
+  }
+  queryLogs(filter: LogFilter): LogEntry[] {
+    return this.logStore.query(filter);
+  }
+}

package/src/modules/dashboard/ui/dashboard.html ADDED Viewed

@@ -0,0 +1,405 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AAD Dashboard</title>
+  <style>
+    *{margin:0;padding:0;box-sizing:border-box}
+    body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:#1a1a1a;color:#e0e0e0;padding:20px;line-height:1.4}
+    header{background:#2d2d2d;padding:20px 24px;border-radius:10px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
+    header h1{font-size:22px;font-weight:700;color:#4fc3f7}
+    header p{color:#9e9e9e;font-size:13px}
+    .conn-badge{font-size:11px;padding:4px 10px;border-radius:12px;font-weight:600}
+    .conn-badge.connected{background:#66bb6a33;color:#66bb6a}
+    .conn-badge.disconnected{background:#ef535033;color:#ef5350}
+    /* Progress bar */
+    .progress-section{background:#2d2d2d;border-radius:10px;padding:20px 24px;margin-bottom:20px}
+    .progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
+    .progress-header h2{font-size:16px;color:#4fc3f7}
+    .progress-header .pct{font-size:28px;font-weight:700;color:#4fc3f7}
+    .progress-bar-track{height:12px;background:#3a3a3a;border-radius:6px;overflow:hidden}
+    .progress-bar-fill{height:100%;background:linear-gradient(90deg,#4fc3f7,#66bb6a);border-radius:6px;transition:width .6s ease;min-width:0}
+    .progress-stats{display:flex;gap:24px;margin-top:14px;flex-wrap:wrap}
+    .progress-stat{text-align:center}
+    .progress-stat .val{font-size:20px;font-weight:700}
+    .progress-stat .lbl{font-size:11px;color:#9e9e9e;text-transform:uppercase;letter-spacing:.5px}
+    .stat-pending .val{color:#42a5f5}
+    .stat-running .val{color:#ffa726}
+    .stat-completed .val{color:#66bb6a}
+    .stat-failed .val{color:#ef5350}
+    /* Grid layouts */
+    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
+    .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-bottom:20px}
+    @media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}
+    @media(max-width:600px){body{padding:10px}header{padding:14px}}
+    .card{background:#2d2d2d;padding:20px;border-radius:10px}
+    .card h2{font-size:15px;margin-bottom:14px;color:#4fc3f7;display:flex;align-items:center;justify-content:space-between}
+    .card h2 .count{font-size:12px;color:#9e9e9e;font-weight:400}
+    /* Workers */
+    .worker-list{display:flex;flex-direction:column;gap:8px}
+    .worker-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#3a3a3a;border-radius:6px}
+    .worker-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
+    .worker-dot.idle{background:#9e9e9e}
+    .worker-dot.busy{background:#66bb6a;box-shadow:0 0 6px #66bb6a88}
+    .worker-dot.stopped{background:#ef5350}
+    .worker-name{font-size:13px;font-weight:600;flex:1}
+    .worker-task{font-size:11px;color:#9e9e9e}
+    /* Task table */
+    .task-table-wrap{overflow-x:auto}
+    table{width:100%;border-collapse:collapse;font-size:13px}
+    th{text-align:left;padding:8px 10px;border-bottom:2px solid #3a3a3a;color:#9e9e9e;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
+    td{padding:7px 10px;border-bottom:1px solid #333;vertical-align:middle}
+    tr:hover td{background:#333}
+    .badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase}
+    .badge-pending{background:#42a5f533;color:#42a5f5}
+    .badge-running{background:#ffa72633;color:#ffa726}
+    .badge-completed{background:#66bb6a33;color:#66bb6a}
+    .badge-failed{background:#ef535033;color:#ef5350}
+    .deps{font-size:11px;color:#9e9e9e}
+    .priority{font-size:12px;color:#bbb}
+    /* Graph */
+    .graph-container{position:relative;overflow:auto;min-height:200px}
+    .graph-container svg{display:block}
+    /* Timeline */
+    .timeline-container{overflow-x:auto;min-height:100px}
+    .timeline-row{display:flex;align-items:center;margin-bottom:4px;height:26px}
+    .timeline-label{width:100px;flex-shrink:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:8px;text-align:right;color:#bbb}
+    .timeline-track{flex:1;position:relative;height:18px;background:#3a3a3a;border-radius:3px}
+    .timeline-bar{position:absolute;height:100%;border-radius:3px;min-width:4px;transition:width .4s ease,left .4s ease}
+    /* Logs */
+    .log-section{background:#2d2d2d;border-radius:10px;padding:20px;margin-bottom:20px}
+    .log-filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
+    .log-filters label{font-size:12px;display:flex;align-items:center;gap:4px;cursor:pointer;padding:4px 8px;background:#3a3a3a;border-radius:4px}
+    .log-filters label input{accent-color:#4fc3f7}
+    .log-filters select{background:#3a3a3a;color:#e0e0e0;border:1px solid #555;border-radius:4px;padding:4px 8px;font-size:12px}
+    .log-entries{max-height:350px;overflow-y:auto;font-family:"Courier New",monospace;font-size:12px}
+    .log-entry{padding:4px 8px;margin-bottom:2px;border-radius:3px;display:flex;gap:8px}
+    .log-entry .log-time{color:#777;flex-shrink:0}
+    .log-entry .log-svc{color:#4fc3f7;flex-shrink:0;min-width:60px}
+    .log-info{background:#1e3a5f44}
+    .log-warn{background:#5f4b1e44}
+    .log-error{background:#5f1e1e66}
+    .log-hidden{display:none}
+    .empty-msg{color:#666;font-size:13px;padding:20px;text-align:center}
+  </style>
+</head>
+<body>
+  <header>
+    <div><h1>AAD Dashboard</h1><p>Real-time Task Orchestrator Monitor</p></div>
+    <span class="conn-badge disconnected" id="conn-status">Disconnected</span>
+  </header>
+  <!-- Progress Bar -->
+  <div class="progress-section">
+    <div class="progress-header">
+      <h2>Overall Progress</h2>
+      <span class="pct" id="pct-display">0%</span>
+    </div>
+    <div class="progress-bar-track"><div class="progress-bar-fill" id="progress-fill" style="width:0%"></div></div>
+    <div class="progress-stats">
+      <div class="progress-stat stat-pending"><div class="val" id="s-pending">0</div><div class="lbl">Pending</div></div>
+      <div class="progress-stat stat-running"><div class="val" id="s-running">0</div><div class="lbl">Running</div></div>
+      <div class="progress-stat stat-completed"><div class="val" id="s-completed">0</div><div class="lbl">Completed</div></div>
+      <div class="progress-stat stat-failed"><div class="val" id="s-failed">0</div><div class="lbl">Failed</div></div>
+    </div>
+  </div>
+  <!-- Workers + Tasks -->
+  <div class="grid-2">
+    <div class="card">
+      <h2>Workers <span class="count" id="workers-count"></span></h2>
+      <div class="worker-list" id="worker-list"><div class="empty-msg">No workers</div></div>
+    </div>
+    <div class="card">
+      <h2>Dependency Graph</h2>
+      <div class="graph-container" id="graph-container"><div class="empty-msg">No graph data</div></div>
+    </div>
+  </div>
+  <!-- Task Table -->
+  <div class="card" style="margin-bottom:20px">
+    <h2>Tasks <span class="count" id="tasks-count"></span></h2>
+    <div class="task-table-wrap">
+      <table>
+        <thead><tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th><th>Dependencies</th></tr></thead>
+        <tbody id="task-tbody"><tr><td colspan="5" class="empty-msg">No tasks</td></tr></tbody>
+      </table>
+    </div>
+  </div>
+  <!-- Timeline -->
+  <div class="card" style="margin-bottom:20px">
+    <h2>Timeline</h2>
+    <div class="timeline-container" id="timeline-container"><div class="empty-msg">No timeline data</div></div>
+  </div>
+  <!-- Logs -->
+  <div class="log-section">
+    <h2 style="font-size:15px;color:#4fc3f7;margin-bottom:10px">Logs <span class="count" id="log-count" style="font-size:12px;color:#9e9e9e;font-weight:400"></span></h2>
+    <div class="log-filters">
+      <label><input type="checkbox" checked data-level="info"> Info</label>
+      <label><input type="checkbox" checked data-level="warn"> Warn</label>
+      <label><input type="checkbox" checked data-level="error"> Error</label>
+      <select id="svc-filter"><option value="">All Services</option></select>
+    </div>
+    <div class="log-entries" id="log-entries"></div>
+  </div>
+  <script>
+    // State
+    let allTasks = [];
+    let logEntries = [];
+    let knownServices = new Set();
+    let logFilters = { info: true, warn: true, error: true, service: '' };
+    // --- Data fetching ---
+    async function loadAll() {
+      try {
+        const [pRes, wRes, tRes, gRes, tlRes, lRes] = await Promise.all([
+          fetch('/api/progress'), fetch('/api/workers'), fetch('/api/tasks'),
+          fetch('/api/graph'), fetch('/api/timeline'), fetch('/api/logs')
+        ]);
+        const [progress, workers, tasks, graph, timeline, logs] = await Promise.all([
+          pRes.json(), wRes.json(), tRes.json(), gRes.json(), tlRes.json(), lRes.json()
+        ]);
+        updateProgress(progress);
+        renderWorkers(workers);
+        allTasks = tasks.tasks || [];
+        renderTasks();
+        renderGraph(graph);
+        renderTimeline(timeline);
+        if (Array.isArray(logs)) logs.forEach(e => addLogEntry(e, true));
+        else if (logs && logs.entries) logs.entries.forEach(e => addLogEntry(e, true));
+        applyLogFilters();
+      } catch (e) { console.error('Load failed:', e); }
+    }
+    // --- Progress ---
+    function updateProgress(data) {
+      const p = data.progress || data;
+      const pct = data.percentComplete != null ? data.percentComplete : (p.total > 0 ? Math.round((p.completed / p.total) * 100) : 0);
+      document.getElementById('pct-display').textContent = pct + '%';
+      document.getElementById('progress-fill').style.width = pct + '%';
+      document.getElementById('s-pending').textContent = p.pending || 0;
+      document.getElementById('s-running').textContent = p.running || 0;
+      document.getElementById('s-completed').textContent = p.completed || 0;
+      document.getElementById('s-failed').textContent = p.failed || 0;
+    }
+    // --- Workers ---
+    function renderWorkers(data) {
+      const list = document.getElementById('worker-list');
+      const workers = data.workers || [];
+      const stats = data.stats || {};
+      document.getElementById('workers-count').textContent = '(' + (stats.total || workers.length) + ')';
+      if (!workers.length) { list.innerHTML = '<div class="empty-msg">No workers</div>'; return; }
+      list.innerHTML = workers.map(w => {
+        const taskInfo = w.currentTask ? '<span class="worker-task">Task: ' + esc(String(w.currentTask)) + '</span>' : '';
+        return '<div class="worker-item"><span class="worker-dot ' + w.status + '"></span><span class="worker-name">' + esc(String(w.id)) + '</span>' + taskInfo + '<span class="badge badge-' + w.status + '" style="margin-left:auto">' + w.status + '</span></div>';
+      }).join('');
+    }
+    // --- Tasks ---
+    function renderTasks() {
+      const tbody = document.getElementById('task-tbody');
+      document.getElementById('tasks-count').textContent = '(' + allTasks.length + ')';
+      if (!allTasks.length) { tbody.innerHTML = '<tr><td colspan="5" class="empty-msg">No tasks</td></tr>'; return; }
+      tbody.innerHTML = allTasks.map(t => {
+        const deps = (t.dependsOn || []).map(d => esc(String(d))).join(', ') || '—';
+        return '<tr><td style="font-family:monospace;font-size:11px">' + esc(String(t.taskId)) + '</td><td>' + esc(t.title || '—') + '</td><td><span class="badge badge-' + t.status + '">' + t.status + '</span></td><td class="priority">' + (t.priority || 0) + '</td><td class="deps">' + deps + '</td></tr>';
+      }).join('');
+    }
+    function updateTaskInList(taskId, updates) {
+      const idx = allTasks.findIndex(t => t.taskId === taskId);
+      if (idx >= 0) Object.assign(allTasks[idx], updates);
+      renderTasks();
+    }
+    // --- Graph ---
+    function renderGraph(data) {
+      const container = document.getElementById('graph-container');
+      const nodes = data.nodes || [];
+      const edges = data.edges || [];
+      if (!nodes.length) { container.innerHTML = '<div class="empty-msg">No graph data</div>'; return; }
+      // Simple layered layout using topological sort
+      const adj = {}, inDeg = {};
+      nodes.forEach(n => { adj[n.id] = []; inDeg[n.id] = 0; });
+      edges.forEach(e => { if (adj[e.from]) adj[e.from].push(e.to); inDeg[e.to] = (inDeg[e.to] || 0) + 1; });
+      // BFS layers
+      const layers = []; const visited = new Set();
+      let queue = nodes.filter(n => (inDeg[n.id] || 0) === 0).map(n => n.id);
+      while (queue.length) {
+        layers.push([...queue]); const next = [];
+        queue.forEach(id => { visited.add(id); (adj[id] || []).forEach(to => { inDeg[to]--; if (inDeg[to] <= 0 && !visited.has(to)) next.push(to); }); });
+        queue = [...new Set(next)];
+      }
+      // Add unvisited nodes
+      nodes.forEach(n => { if (!visited.has(n.id)) { if (!layers.length) layers.push([]); layers[layers.length - 1].push(n.id); } });
+      const nodeMap = {}; nodes.forEach(n => nodeMap[n.id] = n);
+      const colW = 140, rowH = 50, padX = 80, padY = 30;
+      const maxPerLayer = Math.max(...layers.map(l => l.length), 1);
+      const svgW = layers.length * colW + padX * 2;
+      const svgH = maxPerLayer * rowH + padY * 2;
+      const pos = {};
+      layers.forEach((layer, li) => {
+        const offset = (maxPerLayer - layer.length) * rowH / 2;
+        layer.forEach((id, ni) => { pos[id] = { x: padX + li * colW, y: padY + offset + ni * rowH }; });
+      });
+      const statusColor = { pending: '#42a5f5', running: '#ffa726', completed: '#66bb6a', failed: '#ef5350' };
+      let svg = '<svg width="' + svgW + '" height="' + svgH + '" xmlns="http://www.w3.org/2000/svg">';
+      // Edges
+      edges.forEach(e => {
+        const from = pos[e.from], to = pos[e.to];
+        if (from && to) svg += '<line x1="' + (from.x + 90) + '" y1="' + (from.y + 15) + '" x2="' + to.x + '" y2="' + (to.y + 15) + '" stroke="#555" stroke-width="1.5" marker-end="url(#arrow)"/>';
+      });
+      svg += '<defs><marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#555"/></marker></defs>';
+      // Nodes
+      nodes.forEach(n => {
+        const p = pos[n.id]; if (!p) return;
+        const c = statusColor[n.status] || '#777';
+        svg += '<rect x="' + p.x + '" y="' + p.y + '" width="90" height="30" rx="5" fill="' + c + '22" stroke="' + c + '" stroke-width="2"/>';
+        const label = String(n.id).length > 12 ? String(n.id).slice(0, 11) + '…' : String(n.id);
+        svg += '<text x="' + (p.x + 45) + '" y="' + (p.y + 19) + '" text-anchor="middle" fill="' + c + '" font-size="10" font-weight="600">' + esc(label) + '</text>';
+      });
+      svg += '</svg>';
+      container.innerHTML = svg;
+    }
+    // --- Timeline ---
+    function renderTimeline(data) {
+      const container = document.getElementById('timeline-container');
+      const tasks = (data.tasks || []).filter(t => t.startTime);
+      if (!tasks.length) { container.innerHTML = '<div class="empty-msg">No timeline data</div>'; return; }
+      const times = tasks.map(t => [new Date(t.startTime).getTime(), t.endTime ? new Date(t.endTime).getTime() : Date.now()]);
+      const minT = Math.min(...times.map(t => t[0]));
+      const maxT = Math.max(...times.map(t => t[1]));
+      const range = maxT - minT || 1;
+      const statusColor = { pending: '#42a5f5', running: '#ffa726', completed: '#66bb6a', failed: '#ef5350' };
+      container.innerHTML = tasks.map((t, i) => {
+        const s = new Date(t.startTime).getTime();
+        const e = t.endTime ? new Date(t.endTime).getTime() : Date.now();
+        const left = ((s - minT) / range * 100).toFixed(2);
+        const width = (((e - s) / range) * 100).toFixed(2);
+        const c = statusColor[t.status] || '#777';
+        const dur = ((e - s) / 1000).toFixed(1) + 's';
+        return '<div class="timeline-row"><span class="timeline-label" title="' + esc(String(t.id)) + '">' + esc(String(t.id)) + '</span><div class="timeline-track"><div class="timeline-bar" style="left:' + left + '%;width:' + width + '%;background:' + c + '" title="' + dur + '"></div></div></div>';
+      }).join('');
+    }
+    // --- Logs ---
+    function addLogEntry(entry, bulk) {
+      if (!entry) return;
+      const svc = entry.service || 'unknown';
+      if (!knownServices.has(svc)) {
+        knownServices.add(svc);
+        const sel = document.getElementById('svc-filter');
+        const opt = document.createElement('option'); opt.value = svc; opt.textContent = svc; sel.appendChild(opt);
+      }
+      logEntries.unshift(entry);
+      if (logEntries.length > 200) logEntries.pop();
+      if (!bulk) renderLogEntry(entry, true);
+    }
+    function renderLogEntry(entry, prepend) {
+      const container = document.getElementById('log-entries');
+      const div = document.createElement('div');
+      const level = entry.level || 'info';
+      div.className = 'log-entry log-' + level;
+      div.dataset.level = level;
+      div.dataset.service = entry.service || '';
+      const time = entry.timestamp ? new Date(entry.timestamp).toLocaleTimeString() : '';
+      div.innerHTML = '<span class="log-time">' + time + '</span><span class="log-svc">' + esc(entry.service || '') + '</span><span>' + esc(entry.message || '') + '</span>';
+      if (prepend) container.insertBefore(div, container.firstChild); else container.appendChild(div);
+      applyLogFilterToEntry(div);
+    }
+    function renderAllLogs() {
+      document.getElementById('log-entries').innerHTML = '';
+      logEntries.forEach(e => renderLogEntry(e, false));
+      updateLogCount();
+    }
+    function applyLogFilters() {
+      renderAllLogs();
+    }
+    function applyLogFilterToEntry(div) {
+      const show = logFilters[div.dataset.level] && (!logFilters.service || div.dataset.service === logFilters.service);
+      div.classList.toggle('log-hidden', !show);
+      updateLogCount();
+    }
+    function updateLogCount() {
+      const visible = document.querySelectorAll('#log-entries .log-entry:not(.log-hidden)').length;
+      document.getElementById('log-count').textContent = '(' + visible + ')';
+    }
+    // Filter event listeners
+    document.querySelectorAll('.log-filters input[data-level]').forEach(cb => {
+      cb.addEventListener('change', () => { logFilters[cb.dataset.level] = cb.checked; applyLogFilters(); });
+    });
+    document.getElementById('svc-filter').addEventListener('change', function() { logFilters.service = this.value; applyLogFilters(); });
+    // --- SSE ---
+    let evtSource;
+    function connectSSE() {
+      if (evtSource) { try { evtSource.close(); } catch(e){} }
+      evtSource = new EventSource('/events/all');
+      const badge = document.getElementById('conn-status');
+      evtSource.addEventListener('open', () => { badge.textContent = 'Connected'; badge.className = 'conn-badge connected'; });
+      evtSource.addEventListener('message', (e) => {
+        try {
+          const ev = JSON.parse(e.data);
+          switch (ev.type) {
+            case 'log:entry': addLogEntry(ev.entry || ev); break;
+            case 'progress:updated': updateProgress(ev.state ? { progress: ev.state, percentComplete: ev.percentComplete } : ev); break;
+            case 'task:dispatched':
+            case 'task:completed':
+            case 'task:failed':
+              if (ev.task) { updateTaskInList(ev.task.taskId, ev.task); }
+              // Refresh progress
+              fetch('/api/progress').then(r=>r.json()).then(updateProgress).catch(()=>{});
+              fetch('/api/timeline').then(r=>r.json()).then(renderTimeline).catch(()=>{});
+              break;
+            case 'worker:idle':
+            case 'worker:busy':
+              fetch('/api/workers').then(r=>r.json()).then(renderWorkers).catch(()=>{});
+              break;
+          }
+        } catch (err) { console.error('SSE parse error:', err); }
+      });
+      evtSource.addEventListener('error', () => {
+        badge.textContent = 'Disconnected'; badge.className = 'conn-badge disconnected';
+        evtSource.close();
+        setTimeout(connectSSE, 3000);
+      });
+    }
+    // --- Util ---
+    function esc(s) { const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
+    // Init
+    loadAll();
+    connectSSE();
+  </script>
+</body>
+</html>