npm - agents-harness - Versions diffs - 0.3.0 → 0.3.1 - Mend

agents-harness 0.3.0 → 0.3.1

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 (5) hide show

package/dist/cli.js +1 -1
package/dist/dashboard/static/index.html +518 -209
package/package.json +2 -2
package/dist/dashboard/static/static/.gitkeep +0 -0
package/dist/dashboard/static/static/index.html +0 -622

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "agents-harness",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Multi-agent orchestrator for autonomous software development",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,7 @@
     "agents-harness": "dist/cli.js"
   },
   "scripts": {
-    "build": "tsc && cp -r src/dashboard/static dist/dashboard/static",
+    "build": "tsc && rm -rf dist/dashboard/static && cp -r src/dashboard/static dist/dashboard/static",
     "dev": "tsc --watch",
     "test": "vitest run",
     "test:watch": "vitest",

package/dist/dashboard/static/static/.gitkeep DELETED Viewed

File without changes

package/dist/dashboard/static/static/index.html DELETED Viewed

@@ -1,622 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>agents-harness</title>
-<style>
-  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-  :root {
-    --bg: #0d1117; --bg-card: #161b22; --border: #30363d; --border-hover: #58a6ff;
-    --text: #c9d1d9; --text-dim: #8b949e; --text-bright: #f0f6fc;
-    --blue: #58a6ff; --green: #3fb950; --red: #f85149; --yellow: #d29922;
-    --font: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
-  }
-  body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; }
-  /* === HEADER === */
-  .header {
-    display: flex; justify-content: space-between; align-items: center;
-    padding: 12px 20px; border-bottom: 1px solid var(--border);
-  }
-  .header-left { display: flex; align-items: center; gap: 10px; }
-  .header h1 { font-size: 15px; font-weight: 600; }
-  #connection-dot {
-    width: 8px; height: 8px; border-radius: 50%;
-    background: var(--red); display: inline-block;
-  }
-  #connection-dot.connected { background: var(--green); }
-  .header-stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-dim); }
-  .header-stats span { color: var(--text); }
-  /* === PHASE PIPELINE === */
-  .pipeline {
-    display: flex; align-items: center; gap: 0; padding: 14px 20px;
-    border-bottom: 1px solid var(--border); overflow-x: auto;
-  }
-  .phase-step {
-    display: flex; align-items: center; gap: 0; white-space: nowrap;
-  }
-  .phase-dot {
-    width: 28px; height: 28px; border-radius: 50%; display: flex;
-    align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
-    border: 2px solid var(--border); color: var(--text-dim); background: var(--bg);
-    transition: all 0.3s;
-  }
-  .phase-label {
-    font-size: 11px; color: var(--text-dim); margin-left: 6px; margin-right: 6px;
-    transition: color 0.3s;
-  }
-  .phase-connector {
-    width: 24px; height: 2px; background: var(--border); margin: 0 2px;
-    transition: background 0.3s;
-  }
-  .phase-step.done .phase-dot { border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.1); }
-  .phase-step.done .phase-label { color: var(--green); }
-  .phase-step.done + .phase-step .phase-connector,
-  .phase-step.done .phase-connector { background: var(--green); }
-  .phase-step.active .phase-dot {
-    border-color: var(--blue); color: var(--blue); background: rgba(88,166,255,0.15);
-    animation: pulse 1.5s ease-in-out infinite;
-  }
-  .phase-step.active .phase-label { color: var(--blue); font-weight: 600; }
-  @keyframes pulse {
-    0%, 100% { box-shadow: 0 0 0 0 rgba(88,166,255,0.4); }
-    50% { box-shadow: 0 0 0 6px rgba(88,166,255,0); }
-  }
-  .sprint-label {
-    padding: 6px 20px; font-size: 12px; color: var(--text-dim);
-    border-bottom: 1px solid var(--border);
-  }
-  .sprint-label strong { color: var(--text); }
-  /* === MAIN SPLIT === */
-  .main {
-    display: grid; grid-template-columns: 320px 1fr;
-    height: calc(100vh - 170px); min-height: 300px;
-  }
-  /* === LEFT: SPRINT LIST === */
-  .sprint-list {
-    border-right: 1px solid var(--border); overflow-y: auto; padding: 8px;
-  }
-  .sprint-card {
-    background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
-    padding: 10px 12px; margin-bottom: 6px; cursor: pointer; user-select: none;
-    transition: border-color 0.2s;
-  }
-  .sprint-card:hover { border-color: var(--border-hover); }
-  .sprint-card.selected { border-color: var(--blue); border-left: 3px solid var(--blue); }
-  .sprint-card-header { display: flex; align-items: center; gap: 8px; font-size: 13px; }
-  .sprint-icon { font-size: 13px; width: 18px; text-align: center; }
-  .sprint-icon.passed { color: var(--green); }
-  .sprint-icon.failed { color: var(--red); }
-  .sprint-icon.in_progress { color: var(--yellow); }
-  .sprint-icon.pending { color: var(--text-dim); }
-  .sprint-name { font-weight: 600; font-size: 13px; }
-  .sprint-meta { margin-left: auto; color: var(--text-dim); font-size: 11px; }
-  .sprint-eval {
-    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px;
-  }
-  .crit-pass { color: var(--green); }
-  .crit-fail { color: var(--red); }
-  .critique-text { color: var(--text-dim); font-style: italic; margin-top: 4px; }
-  .empty-state { text-align: center; color: var(--text-dim); padding: 40px 12px; font-size: 13px; }
-  /* === RIGHT: FILE VIEWER === */
-  .file-viewer { display: flex; flex-direction: column; overflow: hidden; }
-  .file-tabs {
-    display: flex; border-bottom: 1px solid var(--border); background: var(--bg-card);
-    overflow-x: auto; flex-shrink: 0;
-  }
-  .file-tab {
-    padding: 8px 14px; font-size: 12px; color: var(--text-dim); cursor: pointer;
-    border-bottom: 2px solid transparent; white-space: nowrap; position: relative;
-    transition: color 0.2s, border-color 0.2s; user-select: none;
-  }
-  .file-tab:hover { color: var(--text); }
-  .file-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
-  .file-tab .badge {
-    width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
-    position: absolute; top: 6px; right: 6px; display: none;
-  }
-  .file-tab .badge.show { display: block; }
-  .file-content {
-    flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 12px;
-    white-space: pre-wrap; word-wrap: break-word; line-height: 1.6;
-    color: var(--text);
-  }
-  .file-content .empty-file { color: var(--text-dim); font-style: italic; }
-  /* === BOTTOM: ACTIVITY + BUDGET === */
-  .bottom-bar {
-    border-top: 1px solid var(--border);
-  }
-  .activity-toggle {
-    padding: 8px 20px; font-size: 12px; color: var(--text-dim); cursor: pointer;
-    display: flex; align-items: center; gap: 6px; user-select: none;
-    border-bottom: 1px solid var(--border);
-  }
-  .activity-toggle:hover { color: var(--text); }
-  .activity-toggle .arrow { transition: transform 0.2s; display: inline-block; }
-  .activity-toggle .arrow.open { transform: rotate(90deg); }
-  .activity-stream {
-    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
-    background: var(--bg-card);
-  }
-  .activity-stream.open { max-height: 200px; overflow-y: auto; }
-  .activity-entry {
-    padding: 3px 20px; font-size: 11px; border-bottom: 1px solid #21262d;
-  }
-  .activity-entry .time { color: var(--text-dim); margin-right: 6px; }
-  .activity-entry .role { color: var(--blue); margin-right: 4px; }
-  .budget-bar { padding: 8px 20px; }
-  .budget-label {
-    font-size: 11px; color: var(--text-dim); margin-bottom: 4px;
-    display: flex; justify-content: space-between;
-  }
-  .bar-track { height: 6px; background: #21262d; border-radius: 3px; overflow: hidden; }
-  .bar-fill { height: 100%; background: var(--blue); border-radius: 3px; transition: width 0.3s ease; }
-  .run-banner {
-    text-align: center; padding: 12px; margin: 8px 20px; font-size: 13px;
-    border: 1px solid var(--border); border-radius: 6px; display: none;
-  }
-  .run-banner.show { display: block; }
-  .run-banner.completed { border-color: var(--green); color: var(--green); }
-  .run-banner.failed { border-color: var(--red); color: var(--red); }
-  .run-banner.stopped { border-color: var(--yellow); color: var(--yellow); }
-</style>
-</head>
-<body>
-<!-- Header -->
-<div class="header">
-  <div class="header-left">
-    <span id="connection-dot"></span>
-    <h1>agents-harness</h1>
-  </div>
-  <div class="header-stats">
-    <div>Cost: <span id="total-cost">$0.00</span></div>
-    <div>Duration: <span id="duration">0s</span></div>
-  </div>
-</div>
-<!-- Phase Pipeline -->
-<div class="pipeline" id="pipeline"></div>
-<!-- Sprint Label -->
-<div class="sprint-label" id="sprint-label">Waiting for run to start...</div>
-<!-- Main Split -->
-<div class="main">
-  <!-- Left: Sprint List -->
-  <div class="sprint-list" id="sprint-list">
-    <div class="empty-state" id="sprint-empty">No sprints yet</div>
-  </div>
-  <!-- Right: File Viewer -->
-  <div class="file-viewer">
-    <div class="file-tabs" id="file-tabs"></div>
-    <div class="file-content" id="file-content">
-      <span class="empty-file">Select a file tab to view contents</span>
-    </div>
-  </div>
-</div>
-<!-- Bottom -->
-<div class="bottom-bar">
-  <div class="activity-toggle" id="activity-toggle">
-    <span class="arrow" id="activity-arrow">&#9654;</span> Activity Stream
-    <span id="activity-count" style="margin-left:auto;font-size:11px"></span>
-  </div>
-  <div class="activity-stream" id="activity-stream"></div>
-  <div class="budget-bar">
-    <div class="budget-label">
-      <span>Budget</span>
-      <span id="budget-text">$0.00 / $0.00</span>
-    </div>
-    <div class="bar-track"><div class="bar-fill" id="budget-fill" style="width:0%"></div></div>
-  </div>
-  <div class="run-banner" id="run-banner"></div>
-</div>
-<script>
-(function() {
-  // --- Constants ---
-  var PHASES = ['plan', 'decompose', 'contract', 'generate', 'evaluate', 'handoff'];
-  var FILE_TABS = [
-    { key: 'spec.md', label: 'Spec' },
-    { key: 'sprints.md', label: 'Sprints' },
-    { key: 'contract.md', label: 'Contract' },
-    { key: 'evaluation.md', label: 'Evaluation' },
-    { key: 'handoff.md', label: 'Handoff' },
-  ];
-  var PHASE_TO_TAB = {
-    plan: 'spec.md', decompose: 'sprints.md', contract: 'contract.md',
-    generate: 'contract.md', evaluate: 'evaluation.md', handoff: 'handoff.md',
-  };
-  var MAX_ACTIVITIES = 100;
-  // --- State ---
-  var state = {
-    sprints: {},
-    files: {},
-    activities: [],
-    totalCost: 0,
-    budget: 0,
-    startTime: Date.now(),
-    runComplete: false,
-    currentPhase: null,
-    currentSprint: 0,
-    totalSprints: 0,
-    currentAttempt: 0,
-    selectedSprint: null,
-    activeTab: 'spec.md',
-    tabBadges: {},
-    activityOpen: false,
-  };
-  var ws = null;
-  var durationInterval = null;
-  // --- Init DOM ---
-  buildPipeline();
-  buildFileTabs();
-  // --- Pipeline ---
-  function buildPipeline() {
-    var el = document.getElementById('pipeline');
-    var html = '';
-    for (var i = 0; i < PHASES.length; i++) {
-      var p = PHASES[i];
-      if (i > 0) html += '<div class="phase-connector" id="conn-' + i + '"></div>';
-      html += '<div class="phase-step" id="phase-' + p + '">';
-      html += '<div class="phase-dot">' + (i + 1) + '</div>';
-      html += '<span class="phase-label">' + p.charAt(0).toUpperCase() + p.slice(1) + '</span>';
-      html += '</div>';
-    }
-    el.innerHTML = html;
-  }
-  function updatePipeline() {
-    var activeIdx = PHASES.indexOf(state.currentPhase);
-    for (var i = 0; i < PHASES.length; i++) {
-      var el = document.getElementById('phase-' + PHASES[i]);
-      el.className = 'phase-step';
-      if (i < activeIdx) el.className += ' done';
-      else if (i === activeIdx) el.className += ' active';
-    }
-  }
-  // --- File Tabs ---
-  function buildFileTabs() {
-    var container = document.getElementById('file-tabs');
-    var html = '';
-    for (var i = 0; i < FILE_TABS.length; i++) {
-      var t = FILE_TABS[i];
-      var cls = t.key === state.activeTab ? ' active' : '';
-      html += '<div class="file-tab' + cls + '" data-key="' + t.key + '" onclick="window.__selectTab(\'' + t.key + '\')">';
-      html += t.label;
-      html += '<span class="badge" id="badge-' + t.key.replace('.', '-') + '"></span>';
-      html += '</div>';
-    }
-    container.innerHTML = html;
-  }
-  window.__selectTab = function(key) {
-    state.activeTab = key;
-    state.tabBadges[key] = false;
-    renderFileTabs();
-    renderFileContent();
-  };
-  function renderFileTabs() {
-    var tabs = document.getElementById('file-tabs').children;
-    for (var i = 0; i < tabs.length; i++) {
-      var tab = tabs[i];
-      var key = tab.getAttribute('data-key');
-      tab.className = 'file-tab' + (key === state.activeTab ? ' active' : '');
-      var badge = tab.querySelector('.badge');
-      if (badge) badge.className = 'badge' + (state.tabBadges[key] ? ' show' : '');
-    }
-  }
-  function renderFileContent() {
-    var el = document.getElementById('file-content');
-    var content = state.files[state.activeTab];
-    if (content) {
-      el.textContent = content;
-    } else {
-      el.innerHTML = '<span class="empty-file">No content yet — file will appear when the agent writes to it</span>';
-    }
-  }
-  // --- Sprint List ---
-  function renderSprints() {
-    var container = document.getElementById('sprint-list');
-    var keys = Object.keys(state.sprints).map(Number).sort(function(a,b){return a-b;});
-    if (keys.length === 0) return;
-    var emptyEl = document.getElementById('sprint-empty');
-    if (emptyEl) emptyEl.remove();
-    var html = '';
-    for (var i = 0; i < keys.length; i++) {
-      var num = keys[i];
-      var s = state.sprints[num];
-      var sel = state.selectedSprint === num ? ' selected' : '';
-      var iconCls = s.status || 'pending';
-      var iconChar = s.status === 'passed' ? '&#10003;' : s.status === 'failed' ? '&#10007;' : s.status === 'in_progress' ? '&#9679;' : '&#9675;';
-      html += '<div class="sprint-card' + sel + '" onclick="window.__selectSprint(' + num + ')">';
-      html += '<div class="sprint-card-header">';
-      html += '<span class="sprint-icon ' + iconCls + '">' + iconChar + '</span>';
-      html += '<span class="sprint-name">Sprint ' + num + '</span>';
-      html += '<span class="sprint-meta">' + (s.attempts || 0) + ' att &middot; $' + (s.cost || 0).toFixed(2) + '</span>';
-      html += '</div>';
-      if (s.eval) {
-        html += '<div class="sprint-eval">';
-        if (s.eval.passedCriteria && s.eval.passedCriteria.length > 0) {
-          for (var j = 0; j < s.eval.passedCriteria.length; j++) {
-            html += '<div class="crit-pass">+ ' + esc(s.eval.passedCriteria[j]) + '</div>';
-          }
-        }
-        if (s.eval.failedCriteria && s.eval.failedCriteria.length > 0) {
-          for (var j = 0; j < s.eval.failedCriteria.length; j++) {
-            html += '<div class="crit-fail">- ' + esc(s.eval.failedCriteria[j]) + '</div>';
-          }
-        }
-        if (s.eval.critique) {
-          html += '<div class="critique-text">' + esc(s.eval.critique.slice(0, 200)) + '</div>';
-        }
-        html += '</div>';
-      }
-      html += '</div>';
-    }
-    container.innerHTML = html;
-  }
-  window.__selectSprint = function(num) {
-    state.selectedSprint = num;
-    renderSprints();
-  };
-  // --- Sprint Label ---
-  function updateSprintLabel() {
-    var el = document.getElementById('sprint-label');
-    if (state.currentSprint > 0) {
-      var parts = ['<strong>Sprint ' + state.currentSprint + '</strong>'];
-      if (state.totalSprints > 0) parts[0] += ' of ' + state.totalSprints;
-      if (state.currentAttempt > 0) parts.push('Attempt ' + state.currentAttempt);
-      if (state.currentPhase) parts.push(state.currentPhase.charAt(0).toUpperCase() + state.currentPhase.slice(1) + ' phase');
-      el.innerHTML = parts.join(' &mdash; ');
-    } else if (state.currentPhase) {
-      el.innerHTML = '<strong>' + state.currentPhase.charAt(0).toUpperCase() + state.currentPhase.slice(1) + '</strong> phase';
-    } else if (state.runComplete) {
-      el.innerHTML = 'Run complete';
-    } else {
-      el.innerHTML = 'Waiting for run to start...';
-    }
-  }
-  // --- Activity ---
-  function renderActivity() {
-    var el = document.getElementById('activity-stream');
-    var html = '';
-    for (var i = 0; i < state.activities.length; i++) {
-      var a = state.activities[i];
-      var t = new Date(a.timestamp).toLocaleTimeString();
-      html += '<div class="activity-entry">';
-      html += '<span class="time">' + t + '</span>';
-      html += '<span class="role">[' + esc(a.role) + ']</span> ';
-      html += esc(a.summary);
-      html += '</div>';
-    }
-    el.innerHTML = html;
-    el.scrollTop = el.scrollHeight;
-    document.getElementById('activity-count').textContent = state.activities.length > 0 ? '(' + state.activities.length + ')' : '';
-  }
-  document.getElementById('activity-toggle').addEventListener('click', function() {
-    state.activityOpen = !state.activityOpen;
-    document.getElementById('activity-stream').className = 'activity-stream' + (state.activityOpen ? ' open' : '');
-    document.getElementById('activity-arrow').className = 'arrow' + (state.activityOpen ? ' open' : '');
-  });
-  // --- Event Handlers ---
-  function ensureSprint(num) {
-    if (!state.sprints[num]) {
-      state.sprints[num] = { status: 'in_progress', attempts: 0, cost: 0, eval: null };
-    }
-    return state.sprints[num];
-  }
-  function handleEvent(event) {
-    var type = event.type;
-    var data = event.data;
-    if (type === 'phase:start') {
-      state.currentPhase = data.phase;
-      state.currentSprint = data.sprint;
-      state.currentAttempt = data.attempt;
-      if (data.sprint > 0) {
-        var s = ensureSprint(data.sprint);
-        s.attempts = Math.max(s.attempts, data.attempt || 1);
-        if (!state.selectedSprint) state.selectedSprint = data.sprint;
-      }
-      updatePipeline();
-      updateSprintLabel();
-      renderSprints();
-      // Auto-switch tab
-      var tabKey = PHASE_TO_TAB[data.phase];
-      if (tabKey) {
-        state.activeTab = tabKey;
-        state.tabBadges[tabKey] = false;
-        renderFileTabs();
-        renderFileContent();
-      }
-    }
-    else if (type === 'agent:activity') {
-      state.activities.push(data);
-      if (state.activities.length > MAX_ACTIVITIES) state.activities.shift();
-      if (data.sprint > 0) ensureSprint(data.sprint);
-      renderActivity();
-    }
-    else if (type === 'evaluation') {
-      var s = ensureSprint(data.sprint);
-      s.attempts = Math.max(s.attempts, data.attempt);
-      s.eval = data.result;
-      renderSprints();
-    }
-    else if (type === 'cost:update') {
-      state.totalCost = data.totalCostUsd;
-      state.budget = data.budgetUsd;
-      document.getElementById('total-cost').textContent = '$' + data.totalCostUsd.toFixed(2);
-      document.getElementById('budget-text').textContent =
-        '$' + data.totalCostUsd.toFixed(2) + ' / $' + data.budgetUsd.toFixed(2);
-      var pct = data.budgetUsd > 0 ? Math.min(100, (data.totalCostUsd / data.budgetUsd) * 100) : 0;
-      document.getElementById('budget-fill').style.width = pct + '%';
-    }
-    else if (type === 'sprint:complete') {
-      var s = ensureSprint(data.sprint);
-      s.status = data.status;
-      s.attempts = data.attempts;
-      s.cost = data.costUsd;
-      renderSprints();
-    }
-    else if (type === 'run:complete') {
-      state.runComplete = true;
-      if (durationInterval) { clearInterval(durationInterval); durationInterval = null; }
-      document.getElementById('duration').textContent = formatDuration(data.durationMs);
-      document.getElementById('total-cost').textContent = '$' + data.totalCostUsd.toFixed(2);
-      updateSprintLabel();
-      var banner = document.getElementById('run-banner');
-      banner.className = 'run-banner show ' + data.status;
-      banner.textContent = 'Run ' + data.status.toUpperCase() +
-        ' \u2014 ' + data.totalSprints + ' sprint' + (data.totalSprints !== 1 ? 's' : '') +
-        ', $' + data.totalCostUsd.toFixed(2) +
-        ', ' + formatDuration(data.durationMs);
-    }
-    else if (type === 'file:update') {
-      state.files[data.name] = data.content;
-      if (data.name === state.activeTab) {
-        renderFileContent();
-      } else {
-        state.tabBadges[data.name] = true;
-        renderFileTabs();
-      }
-    }
-    else if (type === 'state:snapshot') {
-      // Restore files
-      if (data.files) {
-        for (var key in data.files) {
-          if (data.files[key] !== null) {
-            state.files[key] = data.files[key];
-          }
-        }
-      }
-      // Replay persisted events to rebuild full state (sprints, activities, cost, etc.)
-      if (data.events && data.events.length > 0) {
-        for (var i = 0; i < data.events.length; i++) {
-          handleEvent(data.events[i]);
-        }
-      }
-      // Restore progress (override with latest from progress file)
-      if (data.progress) {
-        var p = data.progress;
-        state.currentPhase = p.currentPhase;
-        state.currentSprint = p.currentSprint;
-        state.totalSprints = p.totalSprints;
-        state.currentAttempt = p.currentAttempt;
-        state.totalCost = p.costUsd || 0;
-        state.budget = p.maxBudgetUsd || 0;
-        if (p.sprints) {
-          for (var sn in p.sprints) {
-            var existing = state.sprints[sn];
-            state.sprints[sn] = {
-              status: p.sprints[sn].status,
-              attempts: p.sprints[sn].attempts,
-              cost: p.sprints[sn].costUsd || 0,
-              eval: existing ? existing.eval : null,
-            };
-          }
-        }
-        if (p.status === 'completed' || p.status === 'failed' || p.status === 'stopped') {
-          state.runComplete = true;
-        }
-      }
-      // Re-render everything
-      updatePipeline();
-      updateSprintLabel();
-      renderSprints();
-      renderFileTabs();
-      renderFileContent();
-      renderActivity();
-      if (state.totalCost > 0) {
-        document.getElementById('total-cost').textContent = '$' + state.totalCost.toFixed(2);
-      }
-      if (state.budget > 0) {
-        document.getElementById('budget-text').textContent =
-          '$' + state.totalCost.toFixed(2) + ' / $' + state.budget.toFixed(2);
-        var pct = Math.min(100, (state.totalCost / state.budget) * 100);
-        document.getElementById('budget-fill').style.width = pct + '%';
-      }
-    }
-  }
-  // --- WebSocket ---
-  function connect() {
-    var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-    ws = new WebSocket(proto + '//' + location.host);
-    ws.onopen = function() {
-      document.getElementById('connection-dot').classList.add('connected');
-    };
-    ws.onclose = function() {
-      document.getElementById('connection-dot').classList.remove('connected');
-      setTimeout(connect, 3000);
-    };
-    ws.onerror = function() { ws.close(); };
-    ws.onmessage = function(e) {
-      try { handleEvent(JSON.parse(e.data)); } catch(err) { console.error('WS parse error', err); }
-    };
-  }
-  // --- Helpers ---
-  function esc(s) {
-    if (!s) return '';
-    var d = document.createElement('div');
-    d.textContent = s;
-    return d.innerHTML;
-  }
-  function formatDuration(ms) {
-    var s = Math.floor(ms / 1000);
-    if (s < 60) return s + 's';
-    var m = Math.floor(s / 60);
-    var rs = s % 60;
-    if (m < 60) return m + 'm ' + rs + 's';
-    var h = Math.floor(m / 60);
-    var rm = m % 60;
-    return h + 'h ' + rm + 'm';
-  }
-  function updateDuration() {
-    if (state.runComplete) return;
-    var elapsed = Date.now() - state.startTime;
-    document.getElementById('duration').textContent = formatDuration(elapsed);
-  }
-  // --- Boot ---
-  connect();
-  durationInterval = setInterval(updateDuration, 1000);
-})();
-</script>
-</body>
-</html>