@yemi33/minions 0.1.2100 → 0.1.2102

package/dashboard/slim/body.html

@@ -0,0 +1,251 @@
+
+<div class="topbar">
+  <div class="topbar-title">Minions <span class="badge">SLIM UX</span></div>
+  <div class="topbar-actions">
+    <!-- Buttons get their click handlers wired via addEventListener inside the
+         IIFE below. Inline `onclick=` was brittle: it depended on the IIFE
+         exporting handlers to window, which a single mid-IIFE error could
+         silently break (handler attaches before crash, button still renders,
+         click fires but no global handler). addEventListener attaches inside
+         the same scope and is observable in DevTools when wiring fails. -->
+    <button id="slim-new-chat-btn" class="icon-btn" title="New chat (clears session)">&#x270E;</button>
+    <button id="slim-settings-btn" class="icon-btn" title="Settings">&#9881;</button>
+  </div>
+</div>
+
+<div class="layout">
+  <!-- ACTIONS — chat + 4 concept-collapse buttons.
+       Visually dominant; this is what the human said was buried in the full
+       dashboard ("Command Center is not prominent enough"). -->
+  <div class="panel panel-actions">
+    <div class="panel-header">
+      Actions
+      <span class="panel-sub">Command Center &amp; quick triggers</span>
+    </div>
+    <div class="actions-chat">
+      <div class="chat-messages" id="chat-messages">
+        <div class="chat-empty">No messages yet — say hi to Command Center.</div>
+      </div>
+      <div class="chat-context-strip" id="chat-context-strip" style="display:none">
+        <span class="context-label">Working in</span>
+        <span id="chat-context-controls"></span>
+      </div>
+      <div class="chat-input-wrap">
+        <textarea
+          id="chat-input"
+          class="chat-input"
+          rows="2"
+          placeholder="Ask anything or give a command... (Enter to send, Shift+Enter for newline)"
+        ></textarea>
+        <button id="chat-stop" class="chat-stop" type="button" title="Stop the in-flight response">Stop</button>
+        <button id="chat-send" class="chat-send" type="button">Send</button>
+      </div>
+    </div>
+    <div class="actions-buttons">
+      <button id="slim-linkpr-btn" class="link-pr-btn" type="button">
+        <span class="link-pr-icon">&#x1F517;</span>
+        <span class="link-pr-label">Link PR</span>
+        <span class="link-pr-sub">track a pull request</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- STATUS — cockpit tiles. Lit when their indicator is non-zero. -->
+  <div class="panel panel-status">
+    <div class="panel-header">
+      Status
+      <span class="panel-sub" id="cockpit-stamp">refreshing&hellip;</span>
+    </div>
+    <div class="panel-body">
+      <!-- Team sub-section: square member cards, one per agent. Populated by
+           renderMembers() from the /api/status `agents` array. This replaces
+           the old "Minions working" cockpit tile with a richer per-member view;
+           cards are clickable and open the agent-detail modal. -->
+      <div class="team-section">
+        <div class="member-grid" id="member-grid">
+          <div class="member-empty">Loading team&hellip;</div>
+        </div>
+      </div>
+      <!-- System sub-section: cockpit indicator tiles. The per-minion "working"
+           count now lives in the Team cards above, so that tile is removed. -->
+      <div class="cockpit-section">
+        <div class="cockpit-grid" id="cockpit-grid">
+          <div class="cockpit-tile" data-tile="engine">
+            <div class="cockpit-label"><span class="cockpit-dot"></span> Engine</div>
+            <div class="cockpit-value dim">—</div>
+            <div class="cockpit-detail">checking&hellip;</div>
+          </div>
+          <div class="cockpit-tile" data-tile="dispatches">
+            <div class="cockpit-label"><span class="cockpit-dot"></span> Active dispatches</div>
+            <div class="cockpit-value dim">0</div>
+            <div class="cockpit-detail">none in flight</div>
+          </div>
+          <div class="cockpit-tile" data-tile="queued">
+            <div class="cockpit-label"><span class="cockpit-dot"></span> Queued work</div>
+            <div class="cockpit-value dim">0</div>
+            <div class="cockpit-detail">queue empty</div>
+          </div>
+          <div class="cockpit-tile" data-tile="prs">
+            <button id="slim-tile-linkpr-chip" class="linkpr-chip on-tile" type="button" title="Link a pull request">+ Link PR</button>
+            <div class="cockpit-label"><span class="cockpit-dot"></span> Active PRs</div>
+            <div class="cockpit-value dim">0</div>
+            <div class="cockpit-detail">no open PRs</div>
+          </div>
+          <div class="cockpit-tile" data-tile="watches">
+            <div class="cockpit-label"><span class="cockpit-dot"></span> Watches</div>
+            <div class="cockpit-value dim">0</div>
+            <div class="cockpit-detail">no watches set</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- HISTORY — chronological event log. Newest at top.
+       Round 1 sources: dispatch.completed (last 10), dispatch.active
+       (currently working), engineLog. -->
+  <div class="panel panel-history">
+    <div class="panel-header">
+      History
+      <span class="panel-sub" id="history-stamp">&hellip;</span>
+    </div>
+    <div class="panel-body">
+      <div class="history-list" id="history-list">
+        <div class="history-empty">Loading recent activity&hellip;</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Settings dialog (preserved from r2): lists experimental flags so the
+     user can flip 'slim-ux' off and revert to the original dashboard. -->
+<div class="modal-bg" id="slim-settings-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3>Settings &middot; Experimental flags</h3>
+      <button id="slim-settings-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body" id="slim-settings-body">
+      <p>Loading flags&hellip;</p>
+    </div>
+  </div>
+</div>
+
+<!-- Generic action prompt modal — used by the four Action buttons.
+     TEMP: routes through the chat input rather than calling /api/work-items
+     etc. directly. CC parses "create a work item: …" into an actions block
+     and dispatches it. Round-2 will replace this with direct API calls. -->
+<!-- Link Pull Request dialog — mirrors the old dashboard's PR-tab dialog.
+     Submits to POST /api/pull-requests/link. Opened from the action footer
+     button, the Active PRs tile chip, and the PR detail modal header. -->
+<div class="modal-bg" id="slim-linkpr-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3>Link Pull Request</h3>
+      <button id="slim-linkpr-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body">
+      <div id="slim-linkpr-noproj" class="linkpr-warning" style="display:none">
+        <div class="linkpr-warning-title">&#x26A0; No project configured.</div>
+        <div>This PR will be tracked, but auto-fix and auto-review can&rsquo;t dispatch against it &mdash; agents need a project worktree. Add a project first to enable automation.</div>
+      </div>
+      <label class="linkpr-label">PR URL
+        <input id="slim-linkpr-url" class="linkpr-input" type="text" placeholder="https://github.com/org/repo/pull/123">
+      </label>
+      <label class="linkpr-label">Title
+        <input id="slim-linkpr-title" class="linkpr-input" type="text" placeholder="Short description (optional &mdash; auto-detected from URL)">
+      </label>
+      <label class="linkpr-label">Project
+        <select id="slim-linkpr-project" class="linkpr-input"></select>
+      </label>
+      <label class="linkpr-label">Context
+        <textarea id="slim-linkpr-context" class="linkpr-input" rows="3" placeholder="Why are you linking this? What should agents know about it?"></textarea>
+      </label>
+      <label class="linkpr-check">
+        <input type="checkbox" id="slim-linkpr-observe">
+        <span>Auto-observe <span class="linkpr-hint-inline">(monitor builds, resolve comments, fix failures)</span></span>
+      </label>
+      <div class="linkpr-hint">Off = context only (e.g. a teammate&rsquo;s PR). On = agents actively monitor and fix issues.</div>
+    </div>
+    <div class="modal-footer">
+      <button id="slim-linkpr-cancel" class="btn-secondary" type="button">Cancel</button>
+      <button id="slim-linkpr-submit" class="btn-primary" type="button">Link PR</button>
+    </div>
+  </div>
+</div>
+
+<!-- Add Project modal — entrypoint sits next to the "Working in" picker. Hits
+     /api/projects/browse for the folder dialog and /api/projects/add for the
+     link. Same endpoints as the main dashboard's Scan Projects flow but with
+     a single-path single-add UX tuned for slim. -->
+<div class="modal-bg" id="slim-add-project-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3>Link a project</h3>
+      <button id="slim-add-project-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body">
+      <p>Point to a local git repository. Minions will read its remote, name, and main branch automatically.</p>
+      <div style="display:flex; gap:8px; align-items:stretch">
+        <input id="slim-add-project-path" type="text" placeholder="C:\path\to\repo" style="flex:1; padding:8px 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:13px; font-family:inherit">
+        <button id="slim-add-project-browse" class="btn-secondary" type="button">Browse&hellip;</button>
+      </div>
+      <div id="slim-add-project-msg" style="margin-top:10px; font-size:12px; min-height:16px"></div>
+    </div>
+    <div class="modal-footer">
+      <button id="slim-add-project-cancel" class="btn-secondary" type="button">Cancel</button>
+      <button id="slim-add-project-submit" class="btn-primary" type="button">Link project</button>
+    </div>
+  </div>
+</div>
+
+<!-- Completion details modal (W-betterHistory). Opens when a completion
+     card in the history feed is clicked. Populated dynamically by
+     showCompletionDetails(d) — see the script below. -->
+<div class="modal-bg" id="slim-completions-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="slim-completions-title">Completion</h3>
+      <button id="slim-completions-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body" id="slim-completions-body"></div>
+  </div>
+</div>
+
+<!-- Agent detail modal — opened by clicking a Team member card. Body is
+     populated by openAgentDetail(id) from the cached /api/status agents. -->
+<div class="modal-bg" id="slim-agent-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="slim-agent-title">Agent</h3>
+      <button id="slim-agent-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body" id="slim-agent-body"></div>
+  </div>
+</div>
+
+<!-- Tool-calls modal — opened by clicking a response's tool panel. Body is
+     populated by openToolsModal(list) with the full tool-call list. -->
+<div class="modal-bg" id="slim-tools-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="slim-tools-title">Tool calls</h3>
+      <button id="slim-tools-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body" id="slim-tools-body"></div>
+  </div>
+</div>
+
+<!-- Cockpit-tile detail modal — opened by clicking a Status tile. Body is
+     populated by openTileModal(key) from the latest /api/status snapshot. -->
+<div class="modal-bg" id="slim-tile-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <h3 id="slim-tile-title">Details</h3>
+      <button id="slim-tile-modal-linkpr" class="linkpr-chip" type="button" style="display:none;margin-left:auto;margin-right:8px">+ Link PR</button>
+      <button id="slim-tile-close" class="icon-btn" title="Close">&times;</button>
+    </div>
+    <div class="modal-body" id="slim-tile-body"></div>
+  </div>
+</div>
+

package/dashboard/slim/js/chat.js

@@ -0,0 +1,329 @@
+  // ── Chatbox wired to /api/command-center/stream ──────────────
+  // Mirrors the full dashboard's command center: SSE streaming, tool-call
+  // progress, abort, and per-tab session continuity.
+  var SLIM_STORAGE_KEY = 'slim-cc-state-v1';
+  var SLIM_TAB_KEY     = 'slim-cc-tabid-v1';
+  var SLIM_PROJECT_KEY = 'slim-current-project-v1';
+  var SLIM_MAX_MESSAGES = 30;
+  var STREAM_TIMEOUT_MS = (60 * 60 * 1000) + 60000;
+
+  var sessionId = null;
+  var messages = [];
+  var sending = false;
+  var abortController = null;
+  var currentProject = null;
+  try { currentProject = localStorage.getItem(SLIM_PROJECT_KEY) || null; } catch (_e) { /* private mode */ }
+
+  var tabId = (function() {
+    try {
+      var t = sessionStorage.getItem(SLIM_TAB_KEY);
+      if (t) return t;
+      t = 'slim-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6);
+      sessionStorage.setItem(SLIM_TAB_KEY, t);
+      return t;
+    } catch (_e) {
+      return 'slim-' + Date.now().toString(36);
+    }
+  })();
+
+  var msgsEl  = document.getElementById('chat-messages');
+  var inputEl = document.getElementById('chat-input');
+  var sendBtn = document.getElementById('chat-send');
+  var stopBtn = document.getElementById('chat-stop');
+
+  function loadState() {
+    try {
+      var raw = localStorage.getItem(SLIM_STORAGE_KEY);
+      if (!raw) return;
+      var data = JSON.parse(raw) || {};
+      sessionId = data.sessionId || null;
+      messages = Array.isArray(data.messages) ? data.messages.slice(-SLIM_MAX_MESSAGES) : [];
+    } catch (_e) { /* ignore */ }
+  }
+  var saveDebounce = null;
+  function saveState() {
+    if (saveDebounce) return;
+    saveDebounce = setTimeout(function() {
+      saveDebounce = null;
+      try {
+        localStorage.setItem(SLIM_STORAGE_KEY, JSON.stringify({
+          sessionId: sessionId,
+          messages: messages.slice(-SLIM_MAX_MESSAGES),
+        }));
+      } catch (_e) { /* localStorage full */ }
+    }, 300);
+  }
+
+  function escHtmlChat(s) {
+    return String(s == null ? '' : s)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+  function renderMarkdown(text) {
+    if (!text) return '';
+    var html = escHtmlChat(text);
+    var codeSlots = [];
+    html = html.replace(/```(\w*)\n?([\s\S]*?)```/g, function(_, _lang, code) {
+      codeSlots.push('<pre><code>' + code + '</code></pre>');
+      return '\u0001CB' + (codeSlots.length - 1) + '\u0001';
+    });
+    html = html.replace(/`([^`\n]+)`/g, function(_, code) {
+      codeSlots.push('<code>' + code + '</code>');
+      return '\u0001CB' + (codeSlots.length - 1) + '\u0001';
+    });
+    html = html.replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>');
+    html = html.replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, '$1<em>$2</em>');
+    html = html.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, function(_, label, href) {
+      if (!/^(https?:|mailto:|\/)/i.test(href)) return label;
+      return '<a href="' + href + '" target="_blank" rel="noopener">' + label + '</a>';
+    });
+    html = html.replace(/\u0001CB(\d+)\u0001/g, function(_, i) { return codeSlots[+i] || ''; });
+    return html;
+  }
+
+  // Reconcile a streamed `chunk` frame against the text accumulated so far.
+  // The CC server emits the FULL accumulated text in each chunk (not a delta),
+  // but the pool path and re-attach snapshots can resend or partially overlap.
+  // Naive `+=` therefore duplicates ("Let me…Let me locate…"); this collapses
+  // every case: identical, cumulative extension, stale prefix, or a tail/head
+  // overlap, falling back to append only when there's no overlap.
+  function mergeStreamText(prev, incoming) {
+    var current = prev || '';
+    var next = incoming || '';
+    if (!current) return next;
+    if (!next) return current;
+    if (next === current) return current;
+    if (next.indexOf(current) === 0) return next;        // incoming extends prev → replace
+    if (current.indexOf(next) === 0) return current;      // stale/short frame → keep
+    for (var overlap = Math.min(current.length, next.length); overlap > 0; overlap--) {
+      if (current.slice(-overlap) === next.slice(0, overlap)) return current + next.slice(overlap);
+    }
+    return current + next;
+  }
+
+  function clearEmpty() {
+    var empty = msgsEl.querySelector('.chat-empty');
+    if (empty) empty.remove();
+  }
+  function scrollToBottom() {
+    msgsEl.scrollTop = msgsEl.scrollHeight;
+  }
+  function appendBubble(role, text, toolCalls) {
+    clearEmpty();
+    var div = document.createElement('div');
+    div.className = 'chat-msg ' + role;
+    if (role === 'assistant') {
+      var body = document.createElement('div');
+      body.className = 'chat-body';
+      // eslint-disable-next-line no-unsanitized/property -- reason: renderMarkdown() escapes input via escHtmlChat() first; later substitutions only re-insert pre-escaped <pre><code>/<a>/<strong>/<em> spans with scheme-validated hrefs
+      body.innerHTML = renderMarkdown(text);
+      div.appendChild(body);
+      // Replay the collapsed tool panel for responses that ran tools.
+      if (toolCalls && toolCalls.length) {
+        var toolbar = document.createElement('div');
+        toolbar.className = 'chat-toolbar';
+        var tp = buildToolsPanel(toolCalls);
+        toolbar.appendChild(tp.panel);
+        div.appendChild(toolbar);
+        tp.scroll.scrollTop = tp.scroll.scrollHeight;
+      }
+    } else {
+      div.textContent = text;
+    }
+    msgsEl.appendChild(div);
+    scrollToBottom();
+    return div;
+  }
+  function appendActionStatus(severity, label) {
+    var div = document.createElement('div');
+    div.className = 'chat-action ' + (severity || '');
+    div.textContent = label;
+    msgsEl.appendChild(div);
+    scrollToBottom();
+    return div;
+  }
+
+  // Render a tool invocation as a one-line string. `full` keeps the complete
+  // command/args (used by the tool-calls modal); otherwise long values are
+  // clipped for the collapsed 3-line panel.
+  function formatTool(name, input, full) {
+    var inp = input || {};
+    function clip(s, n) {
+      s = String(s == null ? '' : s);
+      return (!full && s.length > n) ? s.slice(0, n - 3) + '...' : s;
+    }
+    switch (name) {
+      case 'Bash':  return '$ ' + clip(inp.command, 80);
+      case 'Read':  return 'Reading ' + (inp.file_path || '');
+      case 'Edit':  return 'Editing ' + (inp.file_path || '');
+      case 'Write': return 'Writing ' + (inp.file_path || '');
+      case 'Grep':  return 'Searching `' + (inp.pattern || '') + '` in ' + (inp.path || '.');
+      case 'Glob':  return 'Glob ' + (inp.pattern || '');
+      case 'WebFetch':  return 'Fetch ' + (inp.url || '');
+      case 'WebSearch': return 'Search "' + (inp.query || '') + '"';
+      case 'TodoWrite': {
+        var items = Array.isArray(inp.todos) ? inp.todos : [];
+        return 'Update todos (' + items.length + ' items)';
+      }
+      default: {
+        var keys = Object.keys(inp);
+        if (keys.length === 0) return name + '()';
+        if (full) {
+          return name + '(' + keys.map(function(k) { return k + ': ' + String(inp[k]); }).join(', ') + ')';
+        }
+        return name + '(' + keys[0] + ': ' + clip(inp[keys[0]], 40) + ')';
+      }
+    }
+  }
+
+  // A stored tool call is { name, input }; tolerate legacy plain-string entries.
+  function toolLineText(item, full) {
+    if (typeof item === 'string') return item;
+    return formatTool(item && item.name, item && item.input, full);
+  }
+
+  function makeToolLine(text) {
+    var line = document.createElement('div');
+    line.className = 'chat-tool';
+    line.textContent = text;
+    return line;
+  }
+
+  // Open the tool-calls modal showing the full list (long commands wrapped).
+  function openToolsModal(list) {
+    var modal = document.getElementById('slim-tools-modal');
+    var body = document.getElementById('slim-tools-body');
+    var titleEl = document.getElementById('slim-tools-title');
+    if (!modal || !body) return;
+    if (titleEl) titleEl.textContent = 'Tool calls (' + (list ? list.length : 0) + ')';
+    body.textContent = '';
+    if (!list || !list.length) {
+      var none = document.createElement('div');
+      none.className = 'tools-modal-empty';
+      none.textContent = 'No tool calls.';
+      body.appendChild(none);
+    } else {
+      list.forEach(function(t) {
+        var row = document.createElement('div');
+        row.className = 'tools-modal-line';
+        row.textContent = toolLineText(t, true);
+        body.appendChild(row);
+      });
+    }
+    modal.classList.add('open');
+  }
+
+  // Build the collapsed tool panel (max 3 visible lines, scrolls, click -> modal).
+  // `list` is the backing array of formatted summaries — shared by reference so
+  // a live stream can push into it and the modal always shows the latest set.
+  function buildToolsPanel(list) {
+    var panel = document.createElement('div');
+    panel.className = 'chat-tools-panel';
+    panel.setAttribute('role', 'button');
+    panel.setAttribute('tabindex', '0');
+    panel.title = 'View all tool calls';
+    var scroll = document.createElement('div');
+    scroll.className = 'chat-tools';
+    list.forEach(function(t) { scroll.appendChild(makeToolLine(toolLineText(t, false))); });
+    panel.appendChild(scroll);
+    function open() { openToolsModal(list); }
+    panel.addEventListener('click', open);
+    panel.addEventListener('keydown', function(ev) {
+      if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); open(); }
+    });
+    return { panel: panel, scroll: scroll };
+  }
+
+  function buildStreamBubble() {
+    clearEmpty();
+    var div = document.createElement('div');
+    div.className = 'chat-msg assistant streaming';
+
+    var body = document.createElement('div');
+    body.className = 'chat-body';
+    div.appendChild(body);
+
+    // Bottom toolbar: thinking indicator (left) + tool panel (right). The panel
+    // is hidden until the first tool call arrives.
+    var toolbar = document.createElement('div');
+    toolbar.className = 'chat-toolbar';
+    div.appendChild(toolbar);
+
+    var thinking = document.createElement('div');
+    thinking.className = 'chat-thinking';
+    thinking.innerHTML = 'Thinking<span class="chat-thinking-dots"><span></span><span></span><span></span></span>';
+    toolbar.appendChild(thinking);
+
+    var toolList = [];
+    var tp = buildToolsPanel(toolList);
+    tp.panel.style.display = 'none';
+    toolbar.appendChild(tp.panel);
+
+    msgsEl.appendChild(div);
+    scrollToBottom();
+
+    return {
+      root: div,
+      body: body,
+      thinking: thinking,
+      getToolList: function() { return toolList; },
+      addTool: function(name, input) {
+        toolList.push({ name: name, input: input });
+        tp.scroll.appendChild(makeToolLine(formatTool(name, input, false)));
+        tp.panel.style.display = '';
+        tp.scroll.scrollTop = tp.scroll.scrollHeight;  // newest at bottom; older scroll off the top
+        scrollToBottom();
+      },
+      setText: function(text) {
+        // eslint-disable-next-line no-unsanitized/property -- reason: renderMarkdown() escapes input via escHtmlChat() first; later substitutions only re-insert pre-escaped <pre><code>/<a>/<strong>/<em> spans with scheme-validated hrefs
+        body.innerHTML = renderMarkdown(text || '');
+        scrollToBottom();
+      },
+      finalize: function(text) {
+        if (thinking && thinking.parentNode) thinking.parentNode.removeChild(thinking);
+        // eslint-disable-next-line no-unsanitized/property -- reason: renderMarkdown() escapes input via escHtmlChat() first; later substitutions only re-insert pre-escaped <pre><code>/<a>/<strong>/<em> spans with scheme-validated hrefs
+        body.innerHTML = renderMarkdown(text || '');
+        div.classList.remove('streaming');
+        // No tools ran — drop the now-empty toolbar entirely.
+        if (!toolList.length && toolbar.parentNode) toolbar.parentNode.removeChild(toolbar);
+        scrollToBottom();
+      },
+      replaceWithError: function(message) {
+        if (thinking && thinking.parentNode) thinking.parentNode.removeChild(thinking);
+        div.className = 'chat-msg error';
+        div.innerHTML = '';
+        div.textContent = message;
+        scrollToBottom();
+      },
+    };
+  }
+
+  function setSending(on) {
+    sending = on;
+    sendBtn.disabled = on;
+    sendBtn.textContent = on ? 'Sending…' : 'Send';
+    stopBtn.style.display = on ? 'block' : 'none';
+    inputEl.disabled = on;
+  }
+
+  function rerenderHistory() {
+    msgsEl.innerHTML = '';
+    if (!messages.length) {
+      var empty = document.createElement('div');
+      empty.className = 'chat-empty';
+      empty.textContent = 'No messages yet — say hi to Command Center.';
+      msgsEl.appendChild(empty);
+      return;
+    }
+    for (var i = 0; i < messages.length; i++) {
+      var m = messages[i];
+      if (m.role === 'action') appendActionStatus(m.severity || '', m.text || '');
+      else appendBubble(m.role, m.text || '', m.toolCalls);
+    }
+  }
+  loadState();
+  rerenderHistory();
+