create-claude-flow-codex-ui 0.1.0-alpha.0

package/templates/admin/dashboard.js

@@ -0,0 +1,1004 @@
+const STATE_URL = "./state/swarm-state.json";
+const WS_PATH = "/__swarm_ws";
+const POLL_INTERVAL_MS = 4000;
+const WS_RECONNECT_BASE_MS = 800;
+const WS_RECONNECT_MAX_MS = 10000;
+const SIMULATION_TICK_MS = 1150;
+const CLOCK_TICK_MS = 1000;
+const MAX_EVENTS = 16;
+const FILTER_SEQUENCE = ["all", "active", "warn", "error", "idle"];
+
+const elements = {
+  kpiGrid: document.getElementById("kpi-grid"),
+  swarmMeta: document.getElementById("swarm-meta"),
+  livePill: document.getElementById("live-pill"),
+  liveLabel: document.getElementById("live-label"),
+  topology: document.getElementById("topology"),
+  eventStream: document.getElementById("event-stream"),
+  agentGrid: document.getElementById("agent-grid"),
+  taskBody: document.getElementById("task-body"),
+  agentSummary: document.getElementById("agent-summary"),
+  taskSummary: document.getElementById("task-summary"),
+  signalLane: document.getElementById("signal-lane"),
+  signalSummary: document.getElementById("signal-summary"),
+  simulateToggle: document.getElementById("simulate-toggle"),
+  statusFilter: document.getElementById("status-filter"),
+};
+
+const ns = "http://www.w3.org/2000/svg";
+const byId = new Map();
+
+let state = null;
+let simulationEnabled = false;
+let ws = null;
+let wsConnected = false;
+let pollTimer = 0;
+let simulationTimer = 0;
+let clockTimer = 0;
+let reconnectTimer = 0;
+let reconnectAttempt = 0;
+let lastSyncOk = true;
+let consecutiveFetchFailures = 0;
+let filterIndex = 0;
+let firstRender = true;
+let lastDataSignature = "";
+let lastEventsSignature = "";
+
+bootstrap();
+
+function bootstrap() {
+  const params = new URLSearchParams(window.location.search);
+  simulationEnabled = params.get("simulate") === "1";
+
+  const filterFromUrl = (params.get("filter") || "all").toLowerCase();
+  const nextFilterIndex = FILTER_SEQUENCE.indexOf(filterFromUrl);
+  filterIndex = nextFilterIndex >= 0 ? nextFilterIndex : 0;
+
+  elements.simulateToggle?.addEventListener("click", toggleSimulation);
+  elements.statusFilter?.addEventListener("click", cycleFilter);
+
+  syncSimulationButton();
+  syncFilterButton();
+
+  ensurePolling(true, true);
+  connectWebSocket();
+
+  simulationTimer = window.setInterval(() => {
+    if (simulationEnabled) {
+      runSimulationTick();
+      render(false);
+    }
+  }, SIMULATION_TICK_MS);
+
+  clockTimer = window.setInterval(() => {
+    if (!state) {
+      return;
+    }
+    const filteredCount = filterAgents(state.agents, currentFilter()).length;
+    renderHeader(filteredCount);
+  }, CLOCK_TICK_MS);
+
+  window.addEventListener("beforeunload", teardown);
+}
+
+function teardown() {
+  if (pollTimer) {
+    window.clearInterval(pollTimer);
+    pollTimer = 0;
+  }
+  if (simulationTimer) {
+    window.clearInterval(simulationTimer);
+    simulationTimer = 0;
+  }
+  if (clockTimer) {
+    window.clearInterval(clockTimer);
+    clockTimer = 0;
+  }
+  if (reconnectTimer) {
+    window.clearTimeout(reconnectTimer);
+    reconnectTimer = 0;
+  }
+  if (ws) {
+    ws.close();
+    ws = null;
+  }
+}
+
+function toggleSimulation() {
+  simulationEnabled = !simulationEnabled;
+  syncSimulationButton();
+
+  if (simulationEnabled) {
+    addEvent("warn", "Simulation enabled for cinematic playback.");
+  } else {
+    addEvent("info", "Simulation disabled. Showing only live source telemetry.");
+    ensurePolling(true, true);
+  }
+
+  lastDataSignature = "";
+  render(false);
+}
+
+function cycleFilter() {
+  filterIndex = (filterIndex + 1) % FILTER_SEQUENCE.length;
+  syncFilterButton();
+  addEvent("info", `Agent filter set to ${currentFilterLabel()}.`);
+  lastDataSignature = "";
+  render(false);
+}
+
+function currentFilter() {
+  return FILTER_SEQUENCE[filterIndex];
+}
+
+function currentFilterLabel() {
+  const filter = currentFilter();
+  if (filter === "active") {
+    return "Active";
+  }
+  if (filter === "warn") {
+    return "Attention";
+  }
+  if (filter === "error") {
+    return "Critical";
+  }
+  if (filter === "idle") {
+    return "Idle";
+  }
+  return "All";
+}
+
+function syncSimulationButton() {
+  elements.simulateToggle?.classList.toggle("on", simulationEnabled);
+  if (elements.simulateToggle) {
+    elements.simulateToggle.textContent = simulationEnabled
+      ? "Simulation: On"
+      : "Simulation: Off";
+  }
+}
+
+function syncFilterButton() {
+  if (elements.statusFilter) {
+    elements.statusFilter.textContent = `Filter: ${currentFilterLabel()}`;
+  }
+}
+
+function connectWebSocket() {
+  if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+    return;
+  }
+
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const url = `${protocol}//${window.location.host}${WS_PATH}`;
+
+  try {
+    ws = new WebSocket(url);
+  } catch {
+    scheduleReconnect();
+    return;
+  }
+
+  ws.addEventListener("open", () => {
+    wsConnected = true;
+    reconnectAttempt = 0;
+    ensurePolling(false);
+    renderHeader(state ? filterAgents(state.agents, currentFilter()).length : 0);
+  });
+
+  ws.addEventListener("message", (event) => {
+    let payload;
+    try {
+      payload = JSON.parse(String(event.data));
+    } catch {
+      return;
+    }
+
+    if (!payload || payload.type !== "state") {
+      return;
+    }
+
+    applyIncomingState(payload.state, false, "ws");
+  });
+
+  ws.addEventListener("close", () => {
+    handleSocketDisconnect();
+  });
+
+  ws.addEventListener("error", () => {
+    handleSocketDisconnect();
+  });
+}
+
+function handleSocketDisconnect() {
+  if (wsConnected) {
+    addEvent("warn", "WebSocket disconnected, switching to HTTP polling.");
+  }
+
+  wsConnected = false;
+  ws = null;
+  ensurePolling(true);
+  scheduleReconnect();
+
+  if (!state) {
+    return;
+  }
+  renderHeader(filterAgents(state.agents, currentFilter()).length);
+}
+
+function scheduleReconnect() {
+  if (reconnectTimer) {
+    return;
+  }
+
+  const delay = Math.min(
+    WS_RECONNECT_BASE_MS * Math.pow(2, reconnectAttempt),
+    WS_RECONNECT_MAX_MS
+  );
+  reconnectAttempt += 1;
+
+  reconnectTimer = window.setTimeout(() => {
+    reconnectTimer = 0;
+    connectWebSocket();
+  }, delay);
+}
+
+function ensurePolling(enabled, triggerImmediate = false) {
+  if (enabled) {
+    if (!pollTimer) {
+      pollTimer = window.setInterval(() => refresh(false), POLL_INTERVAL_MS);
+    }
+    if (triggerImmediate) {
+      refresh(true);
+    }
+    return;
+  }
+
+  if (pollTimer) {
+    window.clearInterval(pollTimer);
+    pollTimer = 0;
+  }
+}
+
+async function refresh(initial) {
+  try {
+    const response = await fetch(`${STATE_URL}?t=${Date.now()}`, {
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}`);
+    }
+
+    const incoming = await response.json();
+    applyIncomingState(incoming, initial, "poll");
+  } catch (error) {
+    if (!state) {
+      state = normalizeState({});
+    }
+
+    lastSyncOk = false;
+    consecutiveFetchFailures += 1;
+
+    if (consecutiveFetchFailures === 1 || consecutiveFetchFailures % 5 === 0) {
+      addEvent("error", `Source refresh failed (${error.message}).`);
+    }
+
+    render(initial);
+  }
+}
+
+function applyIncomingState(raw, initial, source) {
+  const incoming = normalizeState(raw);
+
+  if (!state || !simulationEnabled || initial) {
+    state = incoming;
+  }
+
+  lastSyncOk = true;
+  consecutiveFetchFailures = 0;
+
+  if (source === "ws") {
+    wsConnected = true;
+  }
+
+  render(initial);
+}
+
+function normalizeState(raw) {
+  const normalized = {
+    swarmId: raw?.swarmId || "unknown",
+    orchestrationId: raw?.orchestrationId || "n/a",
+    lastUpdated: raw?.lastUpdated || new Date().toISOString(),
+    agents: Array.isArray(raw?.agents) ? raw.agents : [],
+    tasks: Array.isArray(raw?.tasks) ? raw.tasks : [],
+    events: Array.isArray(raw?.events) ? raw.events : [],
+  };
+
+  byId.clear();
+  normalized.agents.forEach((agent) => {
+    byId.set(agent.id, agent);
+  });
+
+  return normalized;
+}
+
+function runSimulationTick() {
+  if (!state || !state.tasks.length) {
+    return;
+  }
+
+  const touched = [];
+  const inProgress = state.tasks.filter((task) => task.status === "in_progress");
+  const pending = state.tasks.filter((task) => task.status === "pending");
+
+  if (pending.length && Math.random() < 0.2) {
+    const promote = pending[rand(0, pending.length - 1)];
+    promote.status = "in_progress";
+    promote.progress = Math.max(1, promote.progress || 0);
+    touched.push(`${promote.id} moved to in_progress.`);
+  }
+
+  for (const task of inProgress) {
+    const delta = rand(2, 8);
+    const next = clamp((task.progress || 0) + delta, 0, 100);
+    task.progress = next;
+
+    if (next >= 100) {
+      task.status = "completed";
+      touched.push(`${task.id} completed by ${task.assignedTo}.`);
+    }
+
+    const agent = byId.get(task.assignedTo);
+    if (!agent) {
+      continue;
+    }
+
+    agent.progress = next;
+    agent.status = next >= 100 ? "idle" : "working";
+    agent.health = clamp((agent.health || 1) - 0.006 + Math.random() * 0.016, 0.86, 1);
+  }
+
+  state.lastUpdated = new Date().toISOString();
+  touched.slice(0, 3).forEach((message) => addEvent("success", message));
+}
+
+function render(initial) {
+  if (!state) {
+    return;
+  }
+
+  const filteredAgents = filterAgents(state.agents, currentFilter());
+  renderHeader(filteredAgents.length);
+
+  const dataSignature = buildDataSignature(state, currentFilter());
+  const shouldRenderBody = initial || simulationEnabled || dataSignature !== lastDataSignature;
+  if (!shouldRenderBody) {
+    return;
+  }
+
+  renderKpis();
+  renderTopology(filteredAgents);
+  renderEvents();
+  renderSignalLane();
+  renderAgents(filteredAgents);
+  renderTasks();
+
+  lastDataSignature = dataSignature;
+
+  if (initial && firstRender) {
+    window.requestAnimationFrame(() => {
+      document.body.classList.add("ready");
+    });
+    firstRender = false;
+  }
+}
+
+function renderHeader(filteredCount) {
+  const ageSeconds = Math.floor((Date.now() - Date.parse(state.lastUpdated)) / 1000);
+
+  const base = `swarm ${state.swarmId} | orchestration ${state.orchestrationId} | ${ageSeconds}s ago`;
+  const scope = currentFilter() === "all" ? "view all agents" : `view ${currentFilterLabel().toLowerCase()}`;
+
+  elements.swarmMeta.textContent = `${base} | ${scope} (${filteredCount})`;
+
+  elements.livePill.classList.toggle("offline", !lastSyncOk);
+  if (!lastSyncOk) {
+    elements.liveLabel.textContent = "OFFLINE CACHE";
+    return;
+  }
+  elements.liveLabel.textContent = wsConnected ? "LIVE WS" : "LIVE POLL";
+}
+
+function renderKpis() {
+  const activeAgents = state.agents.filter((agent) => isLiveStatus(agent.status)).length;
+  const totalAgents = state.agents.length;
+  const completed = state.tasks.filter((task) => task.status === "completed").length;
+  const totalTasks = state.tasks.length;
+  const avgProgress = average(state.tasks.map((task) => Number(task.progress || 0)));
+  const avgHealth = average(state.agents.map((agent) => Number(agent.health || 0) * 100));
+
+  const fiveMinAgo = Date.now() - 5 * 60 * 1000;
+  const eventRate = state.events.filter((event) => Date.parse(event.time) >= fiveMinAgo).length;
+
+  const kpis = [
+    {
+      label: "Live Agents",
+      value: `${activeAgents}/${totalAgents}`,
+      sub: `${totalAgents - activeAgents} idle or non-active`,
+    },
+    {
+      label: "Completion",
+      value: `${completed}/${totalTasks}`,
+      sub: `${Math.round((completed / Math.max(totalTasks, 1)) * 100)}% delivered`,
+    },
+    {
+      label: "Mean Progress",
+      value: `${Math.round(avgProgress)}%`,
+      sub: "across all tracked tasks",
+    },
+    {
+      label: "Swarm Health",
+      value: `${Math.round(avgHealth)}%`,
+      sub: "average agent health",
+    },
+    {
+      label: "Event Velocity",
+      value: `${eventRate}`,
+      sub: "events in last 5 minutes",
+    },
+  ];
+
+  elements.kpiGrid.innerHTML = "";
+  kpis.forEach((kpi) => {
+    const card = document.createElement("article");
+    card.className = "kpi";
+
+    const label = document.createElement("div");
+    label.className = "label";
+    label.textContent = kpi.label;
+
+    const value = document.createElement("p");
+    value.className = "value";
+    value.textContent = kpi.value;
+
+    const sub = document.createElement("div");
+    sub.className = "sub";
+    sub.textContent = kpi.sub;
+
+    card.append(label, value, sub);
+    elements.kpiGrid.appendChild(card);
+  });
+}
+
+function renderTopology(agents) {
+  const svg = elements.topology;
+  svg.innerHTML = "";
+
+  const width = 980;
+  const height = 460;
+  const center = { x: width / 2, y: height / 2 };
+  const radiusX = width * 0.34;
+  const radiusY = height * 0.32;
+
+  const defs = s("defs");
+  const queenGradient = s("radialGradient", {
+    id: "queenGradient",
+    cx: "50%",
+    cy: "42%",
+    r: "65%",
+  });
+  queenGradient.append(
+    s("stop", { offset: "0%", "stop-color": "#c9fbff", "stop-opacity": "1" }),
+    s("stop", { offset: "58%", "stop-color": "#40e9ff", "stop-opacity": "0.95" }),
+    s("stop", { offset: "100%", "stop-color": "#45a6ff", "stop-opacity": "0.86" })
+  );
+  defs.appendChild(queenGradient);
+  svg.appendChild(defs);
+
+  svg.appendChild(
+    s("circle", {
+      cx: center.x,
+      cy: center.y,
+      r: 152,
+      fill: "none",
+      stroke: "rgba(127, 155, 169, 0.26)",
+      "stroke-width": "1",
+      "stroke-dasharray": "3 9",
+    })
+  );
+
+  const queenRing = s("circle", {
+    cx: center.x,
+    cy: center.y,
+    r: 34,
+    fill: "none",
+    stroke: "rgba(64, 233, 255, 0.42)",
+    "stroke-width": "2",
+  });
+  svg.appendChild(queenRing);
+
+  const queen = s("circle", {
+    cx: center.x,
+    cy: center.y,
+    r: 23,
+    fill: "url(#queenGradient)",
+  });
+  queen.classList.add("node");
+  svg.appendChild(queen);
+
+  svg.appendChild(
+    s("text", {
+      x: center.x,
+      y: center.y + 56,
+      "text-anchor": "middle",
+      "font-family": "JetBrains Mono",
+      "font-size": "12",
+      "letter-spacing": "0.08em",
+      fill: "#bde2eb",
+    }, "QUEEN")
+  );
+
+  if (!agents.length) {
+    svg.appendChild(
+      s("text", {
+        x: center.x,
+        y: center.y + 8,
+        "text-anchor": "middle",
+        "font-family": "JetBrains Mono",
+        "font-size": "12",
+        fill: "#9bbec7",
+      }, "No agents in current filter")
+    );
+    return;
+  }
+
+  agents.forEach((agent, index) => {
+    const angle = (Math.PI * 2 * index) / Math.max(agents.length, 1) - Math.PI / 2;
+    const x = center.x + Math.cos(angle) * radiusX;
+    const y = center.y + Math.sin(angle) * radiusY;
+
+    const color = statusColor(agent.status);
+    const live = isLiveStatus(agent.status);
+
+    const edge = s("line", {
+      x1: center.x,
+      y1: center.y,
+      x2: x,
+      y2: y,
+      stroke: color,
+      "stroke-opacity": live ? "0.62" : "0.36",
+      "stroke-width": live ? "2.1" : "1.4",
+    });
+    edge.classList.add("edge");
+    svg.appendChild(edge);
+
+    const halo = s("circle", {
+      cx: x,
+      cy: y,
+      r: live ? 17 : 14,
+      fill: color,
+      "fill-opacity": live ? "0.2" : "0.12",
+    });
+    svg.appendChild(halo);
+
+    const node = s("circle", {
+      cx: x,
+      cy: y,
+      r: live ? 11 : 9,
+      fill: color,
+      "fill-opacity": live ? "0.95" : "0.72",
+    });
+    node.classList.add("node");
+    svg.appendChild(node);
+
+    svg.appendChild(
+      s("text", {
+        x,
+        y: y + 26,
+        "text-anchor": "middle",
+        "font-family": "JetBrains Mono",
+        "font-size": "10",
+        fill: "#c1e5ee",
+      }, shortLabel(agent.id))
+    );
+  });
+}
+
+function renderEvents() {
+  const sorted = sortedEvents(state.events);
+  const signature = buildEventsSignature(sorted);
+  if (signature === lastEventsSignature) {
+    return;
+  }
+
+  lastEventsSignature = signature;
+  elements.eventStream.innerHTML = "";
+
+  if (!sorted.length) {
+    const empty = document.createElement("li");
+    empty.className = "empty-state";
+    empty.textContent = "No events yet.";
+    elements.eventStream.appendChild(empty);
+    return;
+  }
+
+  sorted.forEach((event) => {
+    const level = sanitizeLevel(event.level);
+
+    const item = document.createElement("li");
+    item.className = `event ${level}`;
+
+    const line = document.createElement("div");
+    line.className = "event-line";
+
+    const left = document.createElement("span");
+    left.textContent = level.toUpperCase();
+
+    const right = document.createElement("span");
+    right.textContent = formatClock(event.time);
+
+    line.append(left, right);
+
+    const msg = document.createElement("div");
+    msg.className = "event-msg";
+    msg.textContent = String(event.message || "No message");
+
+    item.append(line, msg);
+    elements.eventStream.appendChild(item);
+  });
+}
+
+function renderSignalLane() {
+  const tasks = [...state.tasks]
+    .sort((a, b) => {
+      const aBoost = a.status === "in_progress" ? 1000 : 0;
+      const bBoost = b.status === "in_progress" ? 1000 : 0;
+      return bBoost + (b.progress || 0) - (aBoost + (a.progress || 0));
+    })
+    .slice(0, 5);
+
+  elements.signalLane.innerHTML = "";
+
+  if (!tasks.length) {
+    elements.signalSummary.textContent = "No active tasks";
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = "Task signals will appear when telemetry includes tasks.";
+    elements.signalLane.appendChild(empty);
+    return;
+  }
+
+  elements.signalSummary.textContent = `${tasks.length} highlighted task signals`;
+
+  tasks.forEach((task) => {
+    const progress = clamp(Number(task.progress || 0), 0, 100);
+
+    const item = document.createElement("article");
+    item.className = "signal-item";
+
+    const top = document.createElement("div");
+    top.className = "signal-top";
+
+    const id = document.createElement("span");
+    id.textContent = shortLabel(task.id);
+
+    const pct = document.createElement("span");
+    pct.textContent = `${progress}%`;
+
+    top.append(id, pct);
+
+    const track = document.createElement("div");
+    track.className = "signal-track";
+
+    const bar = document.createElement("div");
+    bar.className = "signal-bar";
+    bar.style.width = `${progress}%`;
+
+    track.appendChild(bar);
+
+    item.append(top, track);
+    elements.signalLane.appendChild(item);
+  });
+}
+
+function renderAgents(agents) {
+  elements.agentGrid.innerHTML = "";
+  const active = agents.filter((agent) => isLiveStatus(agent.status)).length;
+  const label = currentFilter() === "all" ? "all" : currentFilterLabel().toLowerCase();
+  elements.agentSummary.textContent = `${agents.length}/${state.agents.length} shown (${label}) | ${active} active`;
+
+  if (!agents.length) {
+    const empty = document.createElement("div");
+    empty.className = "empty-state";
+    empty.textContent = `No agents match '${currentFilterLabel()}'.`;
+    elements.agentGrid.appendChild(empty);
+    return;
+  }
+
+  agents.forEach((agent) => {
+    const tone = statusTone(agent.status);
+    const progress = clamp(Number(agent.progress || 0), 0, 100);
+
+    const card = document.createElement("article");
+    card.className = `agent-card ${tone}`;
+
+    const top = document.createElement("div");
+    top.className = "agent-top";
+
+    const id = document.createElement("p");
+    id.className = "agent-id";
+    id.textContent = String(agent.id || "unknown-agent");
+
+    const badge = document.createElement("span");
+    badge.className = `badge ${badgeTone(agent.status)}`;
+    badge.textContent = String(agent.status || "idle");
+
+    top.append(id, badge);
+
+    const type = document.createElement("div");
+    type.className = "agent-detail";
+    type.textContent = `${agent.type || "unknown"} / ${agent.domain || "general"}`;
+
+    const task = document.createElement("div");
+    task.className = "agent-detail";
+    task.textContent = `Task: ${agent.taskTitle || "none"}`;
+
+    const health = document.createElement("div");
+    health.className = "agent-detail";
+    health.textContent = `Health: ${Math.round(clamp(Number(agent.health || 0), 0, 1) * 100)}%`;
+
+    const track = document.createElement("div");
+    track.className = "progress-track";
+
+    const bar = document.createElement("div");
+    bar.className = "progress-bar";
+    bar.style.width = `${progress}%`;
+
+    track.appendChild(bar);
+
+    card.append(top, type, task, health, track);
+    elements.agentGrid.appendChild(card);
+  });
+}
+
+function renderTasks() {
+  elements.taskBody.innerHTML = "";
+  elements.taskSummary.textContent = `${state.tasks.length} tasks tracked`;
+
+  if (!state.tasks.length) {
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = 6;
+    td.className = "empty-state";
+    td.textContent = "No tasks available.";
+    tr.appendChild(td);
+    elements.taskBody.appendChild(tr);
+    return;
+  }
+
+  state.tasks.forEach((task) => {
+    const tr = document.createElement("tr");
+
+    const id = document.createElement("td");
+    id.className = "mono";
+    id.textContent = String(task.id || "-");
+
+    const assigned = document.createElement("td");
+    assigned.textContent = String(task.assignedTo || "unassigned");
+
+    const type = document.createElement("td");
+    type.textContent = String(task.type || "feature");
+
+    const priority = document.createElement("td");
+    priority.className = "mono";
+    priority.textContent = String(task.priority || "normal");
+
+    const status = document.createElement("td");
+    const statusLabel = String(task.status || "pending");
+    status.className = `task-status status-${sanitizeClass(statusLabel)}`;
+    status.textContent = statusLabel;
+
+    const progressCell = document.createElement("td");
+    progressCell.className = "progress-cell";
+
+    const progressWrap = document.createElement("div");
+    progressWrap.className = "task-progress";
+
+    const pct = document.createElement("span");
+    pct.className = "pct";
+    const progress = clamp(Number(task.progress || 0), 0, 100);
+    pct.textContent = `${progress}%`;
+
+    const miniTrack = document.createElement("div");
+    miniTrack.className = "mini-track";
+
+    const miniBar = document.createElement("div");
+    miniBar.className = "mini-bar";
+    miniBar.style.width = `${progress}%`;
+
+    miniTrack.appendChild(miniBar);
+    progressWrap.append(pct, miniTrack);
+    progressCell.appendChild(progressWrap);
+
+    tr.append(id, assigned, type, priority, status, progressCell);
+    elements.taskBody.appendChild(tr);
+  });
+}
+
+function addEvent(level, message) {
+  if (!state) {
+    return;
+  }
+  state.events.unshift({
+    time: new Date().toISOString(),
+    level,
+    message,
+  });
+
+  if (state.events.length > 80) {
+    state.events.length = 80;
+  }
+}
+
+function filterAgents(agents, filter) {
+  if (filter === "all") {
+    return agents;
+  }
+
+  if (filter === "active") {
+    return agents.filter((agent) => isLiveStatus(agent.status));
+  }
+
+  if (filter === "warn") {
+    return agents.filter((agent) => ["reviewing", "pending", "stalled"].includes(agent.status));
+  }
+
+  if (filter === "error") {
+    return agents.filter((agent) => ["blocked", "error", "failed"].includes(agent.status));
+  }
+
+  if (filter === "idle") {
+    return agents.filter((agent) => statusTone(agent.status) === "idle");
+  }
+
+  return agents;
+}
+
+function isLiveStatus(status) {
+  return ["working", "in_progress", "reviewing"].includes(status);
+}
+
+function statusTone(status) {
+  if (["blocked", "error", "failed"].includes(status)) {
+    return "error";
+  }
+  if (["reviewing", "pending", "stalled"].includes(status)) {
+    return "warn";
+  }
+  if (isLiveStatus(status)) {
+    return "live";
+  }
+  return "idle";
+}
+
+function badgeTone(status) {
+  return statusTone(status);
+}
+
+function statusColor(status) {
+  const tone = statusTone(status);
+  if (tone === "error") {
+    return "#ff5f73";
+  }
+  if (tone === "warn") {
+    return "#ffba4a";
+  }
+  if (tone === "live") {
+    return "#3ee6bb";
+  }
+  return "#8fa9b5";
+}
+
+function sanitizeLevel(value) {
+  const level = String(value || "info").toLowerCase();
+  if (["warn", "error", "success", "info"].includes(level)) {
+    return level;
+  }
+  return "info";
+}
+
+function sanitizeClass(value) {
+  return String(value || "").toLowerCase().replace(/[^a-z0-9_-]/g, "_");
+}
+
+function shortLabel(text) {
+  const raw = String(text || "unknown");
+  const tokens = raw.split("-");
+  const last = tokens[tokens.length - 1] || raw;
+  if (last.length <= 8) {
+    return last.toUpperCase();
+  }
+  return `${last.slice(0, 8).toUpperCase()}..`;
+}
+
+function formatClock(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return "--:--:--";
+  }
+  return date.toLocaleTimeString([], {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+}
+
+function sortedEvents(events) {
+  return [...events]
+    .sort((a, b) => Date.parse(b.time) - Date.parse(a.time))
+    .slice(0, MAX_EVENTS);
+}
+
+function buildEventsSignature(events) {
+  return events.map((event) => `${event.time}|${event.level}|${event.message}`).join("\n");
+}
+
+function buildDataSignature(snapshot, filter) {
+  const agents = snapshot.agents.map((agent) => [
+    agent.id,
+    agent.status,
+    Number(agent.progress || 0),
+    Math.round(Number(agent.health || 0) * 100),
+    agent.taskId || "",
+    agent.taskTitle || "",
+  ]);
+
+  const tasks = snapshot.tasks.map((task) => [
+    task.id,
+    task.assignedTo,
+    task.type,
+    task.priority,
+    task.status,
+    Number(task.progress || 0),
+  ]);
+
+  const events = sortedEvents(snapshot.events).map((event) => [
+    event.time,
+    event.level,
+    event.message,
+  ]);
+
+  return JSON.stringify({
+    filter,
+    agents,
+    tasks,
+    events,
+  });
+}
+
+function average(values) {
+  if (!values.length) {
+    return 0;
+  }
+  return values.reduce((sum, value) => sum + value, 0) / values.length;
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+
+function rand(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function s(tag, attrs = {}, text = "") {
+  const el = document.createElementNS(ns, tag);
+  Object.entries(attrs).forEach(([key, value]) => {
+    el.setAttribute(key, String(value));
+  });
+  if (text) {
+    el.textContent = text;
+  }
+  return el;
+}