@mjasnikovs/pi-task 0.17.22 → 0.17.23

package/dist/remote/ui-script.js

@@ -15,18 +15,57 @@ export function clientScript(wsUrl) {
     const contextFill = document.getElementById('context-bar-fill');
     function setContextBar(usage) {
       if (usage && usage.percent != null) contextFill.style.width = usage.percent + '%';
+      setStatusChip(usage);
+    }
+    // Compact token count for the header chip (mirrors formatContextTokens).
+    function fmtTokens(n) {
+      if (n == null) return '';
+      if (n < 1000) return String(n);
+      if (n < 10000) return (n / 1000).toFixed(1) + 'k';
+      if (n < 1000000) return Math.round(n / 1000) + 'k';
+      return (n / 1000000).toFixed(1) + 'M';
+    }
+    function setStatusChip(usage) {
+      if (!usage) return;
+      var parts = [];
+      if (usage.percent != null) parts.push(Math.round(usage.percent) + '%');
+      if (usage.tokens != null && usage.contextWindow) {
+        parts.push(fmtTokens(usage.tokens) + '/' + fmtTokens(usage.contextWindow));
+      }
+      statusCtx.textContent = parts.join(' \\u00B7 ');
+    }
+    function setModelName(name) {
+      if (name && name !== modelName) { modelName = name; statusModel.textContent = name; }
+    }
+    // Connection dot: red disconnected, mauve pulsing while running, green idle.
+    function updateStatusDot() {
+      statusDot.className = !connected ? 'disconnected' : (agentRunning ? 'running' : 'idle');
     }
     const reconnectOverlay = document.getElementById('reconnect-overlay');
     const reconnectMsg = document.getElementById('reconnect-msg');
     const cmdSuggestions = document.getElementById('cmd-suggestions');
     const statusPanel = document.getElementById('status-panel');
+    const statusDot = document.getElementById('status-dot');
+    const statusModel = document.getElementById('status-model');
+    const statusCtx = document.getElementById('status-ctx');
+    const notifPanel = document.getElementById('notif-panel');
+    const notifList = document.getElementById('notif-list');
+    const notifToggle = document.getElementById('notif-toggle');
+    // Last ~20 toasts, newest first, for the bell dropdown history.
+    let notifHistory = [];
+    let modelName = '';
     // Widgets are keyed (e.g. 'pi-tasks', 'pi-task-auto'); track them per key so a
     // clear for one key can't be masked by a stale message from another.
     // Single authoritative task-widget slot. The snapshot and the live 'widget'
     // delta both set this; null hides the panel. (No more per-key map that could
     // strand an orphaned widget on screen.)
     let taskWidgetLines = null;
+    let taskWidgetData = null;
     function renderWidgets() {
+      // Structured payload wins (progress bar + phase badge + elapsed); the plain
+      // text lines are the fallback for older/unstructured producers.
+      if (taskWidgetData) { renderStructuredWidget(taskWidgetData); return; }
+      statusPanel.classList.remove('structured');
       if (taskWidgetLines && taskWidgetLines.length) {
         statusPanel.textContent = taskWidgetLines.join('\\n');
         statusPanel.style.display = 'block';
@@ -34,6 +73,21 @@ export function clientScript(wsUrl) {
         statusPanel.style.display = 'none';
       }
     }
+    function renderStructuredWidget(d) {
+      statusPanel.classList.add('structured');
+      statusPanel.style.display = 'block';
+      var top = '<div class="widget-top">'
+        + '<span class="widget-title">' + escHtml(d.title || '') + '</span>'
+        + (d.phase ? '<span class="widget-phase">' + escHtml(d.phase) + '</span>' : '')
+        + (d.elapsed ? '<span class="widget-elapsed">' + escHtml(d.elapsed) + '</span>' : '')
+        + '</div>';
+      var bar = '';
+      if (d.total > 0 && d.done != null) {
+        var pct = Math.max(0, Math.min(100, Math.round((d.done / d.total) * 100)));
+        bar = '<div class="widget-bar"><div class="widget-bar-fill" style="width:' + pct + '%"></div></div>';
+      }
+      statusPanel.innerHTML = top + bar;
+    }
     const promptCard = document.getElementById('prompt-card');
     const promptQ = document.getElementById('prompt-q');
     const promptRec = document.getElementById('prompt-rec');
@@ -50,6 +104,19 @@ export function clientScript(wsUrl) {
     const toolCallMap = {};
     let currentBubble = null;
     let streamText = '';
+    // Composer state: input is enabled whenever connected AND no prompt card is
+    // open (messages typed mid-run steer the live turn); the Send button morphs
+    // into a red Stop while the agent is running.
+    let agentRunning = false;
+    let connected = false;
+    // Whether the current live turn produced any content — gates the trailing
+    // turn-timestamp so an empty/aborted turn doesn't leave a stray clock.
+    let turnHadContent = false;
+    let stopArmed = false;
+    let stopArmTimer = null;
+    // The live thinking (<details>) block being streamed, and its accumulated text.
+    let currentThinking = null;
+    let thinkingText = '';
     let autoScroll = true;
     let reconnectDelay = 1000;
     let reconnectAnim = null;
@@ -144,7 +211,7 @@ export function clientScript(wsUrl) {
       el.className = 'bubble ' + role;
       // Only assistant text is markdown-rendered; user/error bubbles stay plain so a
       // user's literal *asterisks* or backticks show verbatim.
-      if (role === 'assistant') setContent(el, text);
+      if (role === 'assistant') { setContent(el, text); attachBubbleCopy(el, text); }
       else el.textContent = text;
       chatLog.appendChild(el);
       scrollBottom();
@@ -235,10 +302,160 @@ export function clientScript(wsUrl) {
       s.appendChild(e);
     }
 
-    function setEnabled(on) {
-      const allow = on && activePromptId === null;
-      inputEl.disabled = !allow;
-      sendBtn.disabled = !allow;
+    // Reconcile the composer (input + Send/Stop button) with the current state.
+    // The input is disabled ONLY while disconnected or a prompt card is open — a
+    // running agent no longer locks it, so messages can steer the live turn.
+    function refreshComposer() {
+      updateStatusDot();
+      const promptOpen = activePromptId !== null;
+      inputEl.disabled = !connected || promptOpen;
+      inputEl.placeholder = agentRunning
+        ? 'message the agent — delivered mid-run'
+        : 'type a message\\u2026 (/ for commands)';
+      if (agentRunning && !promptOpen) {
+        // Send morphs into a red Stop that interrupts the running turn.
+        sendBtn.classList.add('stop');
+        sendBtn.disabled = !connected;
+        if (!stopArmed) sendBtn.textContent = 'Stop';
+      } else {
+        disarmStop();
+        sendBtn.classList.remove('stop');
+        sendBtn.textContent = 'Send';
+        sendBtn.disabled = !connected || promptOpen;
+      }
+    }
+
+    function disarmStop() {
+      stopArmed = false;
+      if (stopArmTimer) { clearTimeout(stopArmTimer); stopArmTimer = null; }
+      sendBtn.classList.remove('armed');
+      if (agentRunning) sendBtn.textContent = 'Stop';
+    }
+
+    function sendInterrupt() {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: 'interrupt' }));
+      }
+    }
+
+    // Stop needs a two-tap confirm (same pattern as the prompt card's cancel):
+    // first tap arms it, a second tap within 3s actually interrupts.
+    function onSendClick() {
+      if (agentRunning && activePromptId === null) {
+        if (stopArmed) { disarmStop(); sendInterrupt(); return; }
+        stopArmed = true;
+        sendBtn.classList.add('armed');
+        sendBtn.textContent = 'Tap to stop';
+        if (stopArmTimer) clearTimeout(stopArmTimer);
+        stopArmTimer = setTimeout(function () {
+          stopArmed = false;
+          sendBtn.classList.remove('armed');
+          if (agentRunning) sendBtn.textContent = 'Stop';
+          stopArmTimer = null;
+        }, 3000);
+        return;
+      }
+      sendMessage();
+    }
+
+    // Copy source text to the clipboard, flashing the button. Falls back to a
+    // hidden textarea + execCommand for non-secure (plain-http LAN) contexts where
+    // navigator.clipboard is unavailable.
+    function flashCopied(btn) {
+      if (!btn) return;
+      const prev = btn.textContent;
+      btn.textContent = 'Copied';
+      btn.classList.add('copied');
+      setTimeout(function () { btn.textContent = prev; btn.classList.remove('copied'); }, 1200);
+    }
+    function fallbackCopy(text, btn) {
+      try {
+        const ta = document.createElement('textarea');
+        ta.value = text;
+        ta.style.position = 'fixed';
+        ta.style.top = '0';
+        ta.style.opacity = '0';
+        document.body.appendChild(ta);
+        ta.focus(); ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+        flashCopied(btn);
+      } catch (e) {}
+    }
+    function copyText(text, btn) {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(function () { flashCopied(btn); },
+          function () { fallbackCopy(text, btn); });
+      } else {
+        fallbackCopy(text, btn);
+      }
+    }
+    // One delegated handler for every copy button (code-block headers live inside
+    // markdown HTML; bubble buttons are appended in JS). Resolve the source text
+    // from whichever container the button sits in.
+    chatLog.addEventListener('click', function (e) {
+      const btn = e.target && e.target.closest ? e.target.closest('.copy-btn') : null;
+      if (!btn) return;
+      const block = btn.closest('.code-block');
+      if (block) {
+        const code = block.querySelector('code');
+        copyText(code ? code.textContent : '', btn);
+        return;
+      }
+      const bub = btn.closest('.bubble');
+      if (bub) copyText(bub.__copyText != null ? bub.__copyText : bub.textContent, btn);
+    });
+
+    // Attach a copy button to a finished assistant bubble and stash its raw text
+    // (the pre-markdown source) so the delegated handler copies the original.
+    function attachBubbleCopy(el, text) {
+      el.__copyText = text;
+      const b = document.createElement('button');
+      b.className = 'copy-btn bubble-copy';
+      b.type = 'button';
+      b.setAttribute('aria-label', 'Copy message');
+      b.textContent = 'Copy';
+      el.appendChild(b);
+    }
+
+    // "✻ Thinking… (n lines)" collapsed-block summary.
+    function thinkingSummary(n) {
+      return '\\u273B Thinking\\u2026 (' + n + (n === 1 ? ' line' : ' lines') + ')';
+    }
+    function thinkingLineCount(text) {
+      return text ? text.split('\\n').length : 0;
+    }
+    // Build a collapsed thinking <details>. A live block keeps a spinner in the
+    // summary and stays open to further deltas; otherwise it's a finished, static one.
+    function makeThinkingEl(text, live) {
+      const d = document.createElement('details');
+      d.className = 'thinking-block';
+      const s = document.createElement('summary');
+      const lbl = document.createElement('span');
+      lbl.className = 'thinking-label';
+      lbl.textContent = thinkingSummary(thinkingLineCount(text));
+      s.appendChild(lbl);
+      if (live) {
+        const sp = document.createElement('span');
+        sp.className = 'thinking-spin spin';
+        s.appendChild(sp);
+      }
+      d.appendChild(s);
+      const body = document.createElement('div');
+      body.className = 'thinking-body';
+      body.textContent = text || '';
+      d.appendChild(body);
+      return d;
+    }
+    // Close out the live thinking block (drop its spinner) — called when the model
+    // moves on to text/tools, or the turn ends.
+    function finalizeThinking() {
+      if (currentThinking) {
+        const sp = currentThinking.querySelector('.thinking-spin');
+        if (sp) { sp.remove(); stopSpinIfIdle(); }
+        currentThinking = null;
+      }
+      thinkingText = '';
     }
 
     // Pull the human-readable text out of a tool result. Many tools (Read, Bash,
@@ -289,6 +506,23 @@ export function clientScript(wsUrl) {
       return d;
     }
 
+    // Dim HH:MM shown under a turn's last bubble (local time).
+    function fmtClock(ts) {
+      if (!ts) return '';
+      var d = new Date(ts);
+      var pad = function (n) { return (n < 10 ? '0' : '') + n; };
+      return pad(d.getHours()) + ':' + pad(d.getMinutes());
+    }
+    function addTurnTime(ts, roleClass) {
+      var clock = fmtClock(ts || Date.now());
+      if (!clock) return;
+      var el = document.createElement('div');
+      el.className = 'turn-time ' + roleClass;
+      el.textContent = clock;
+      chatLog.appendChild(el);
+      scrollBottom();
+    }
+
     // A muted, centered system note (e.g. "Context compacted").
     function addSystemLine(text) {
       const el = document.createElement('div');
@@ -303,13 +537,17 @@ export function clientScript(wsUrl) {
     // parts (text segments + tool calls), so the layout matches the terminal's
     // interleaving instead of one merged blob with tools dumped at the end.
     function renderTurn(t) {
-      if (t.error) { addBubble('error', t.text); return; }
-      if (t.role === 'system') { addSystemLine(t.text); return; }
-      if (t.role === 'user') { addBubble('user', t.text); return; }
+      if (t.error) { addBubble('error', t.text); addTurnTime(t.ts, 'assistant'); return; }
+      if (t.role === 'system') { addSystemLine(t.text); addTurnTime(t.ts, 'system'); return; }
+      if (t.role === 'user') { addBubble('user', t.text); addTurnTime(t.ts, 'user'); return; }
       for (const p of (t.parts || [])) {
         if (p.kind === 'text') { if (p.text) addBubble('assistant', p.text); }
+        else if (p.kind === 'thinking') {
+          if (p.text) { chatLog.appendChild(makeThinkingEl(p.text, false)); scrollBottom(); }
+        }
         else renderToolPart(p);
       }
+      addTurnTime(t.ts, 'assistant');
     }
 
     // Render the in-progress assistant turn from a snapshot, preserving order. The
@@ -335,6 +573,18 @@ export function clientScript(wsUrl) {
           } else if (p.text) {
             addBubble('assistant', p.text);
           }
+        } else if (p.kind === 'thinking') {
+          if (last && !p.done) {
+            // Reconnected mid-thinking: keep the block live so further deltas flow in.
+            currentThinking = makeThinkingEl(p.text || '', true);
+            thinkingText = p.text || '';
+            chatLog.appendChild(currentThinking);
+            startSpin();
+            scrollBottom();
+          } else if (p.text) {
+            chatLog.appendChild(makeThinkingEl(p.text, false));
+            scrollBottom();
+          }
         } else {
           renderToolPart(p);
         }
@@ -347,6 +597,37 @@ export function clientScript(wsUrl) {
       t.textContent = message;
       document.body.appendChild(t);
       setTimeout(function () { t.remove(); }, 4000);
+      recordNotif(message, level);
+    }
+
+    // Keep the last ~20 toasts (newest first) for the bell's history dropdown.
+    function recordNotif(message, level) {
+      notifHistory.unshift({message: message, level: level || 'info', ts: Date.now()});
+      if (notifHistory.length > 20) notifHistory.pop();
+      renderNotifList();
+    }
+    function renderNotifList() {
+      if (!notifHistory.length) {
+        notifList.innerHTML = '<div id="notif-empty">No notifications yet.</div>';
+        return;
+      }
+      var html = '';
+      for (var i = 0; i < notifHistory.length; i++) {
+        var n = notifHistory[i];
+        html += '<div class="notif-item ' + escHtml(n.level) + '">'
+          + '<span class="notif-dot"></span>'
+          + '<span class="notif-msg">' + escHtml(n.message) + '</span>'
+          + '<span class="notif-time">' + fmtClock(n.ts) + '</span></div>';
+      }
+      notifList.innerHTML = html;
+    }
+
+    let notifOpen = false;
+    function setNotifOpen(open) {
+      notifOpen = open;
+      notifPanel.classList.toggle('open', open);
+      notifPanel.setAttribute('aria-hidden', open ? 'false' : 'true');
+      if (open) { renderNotifList(); updateNotifToggle(); }
     }
 
     const bell = document.getElementById('bell');
@@ -363,6 +644,12 @@ export function clientScript(wsUrl) {
       var on = notifyEnabled();
       bell.textContent = on ? '\\u25C9' : '\\u25EF';
       bell.classList.toggle('on', on);
+      updateNotifToggle();
+    }
+    function updateNotifToggle() {
+      var on = notifyEnabled();
+      notifToggle.textContent = on ? 'On' : 'Enable';
+      notifToggle.classList.toggle('on', on);
     }
 
     // Why notifications can't be enabled here, or null if they can.
@@ -376,7 +663,17 @@ export function clientScript(wsUrl) {
       return null;
     }
 
-    bell.addEventListener('click', function () {
+    // The bell opens the notification dropdown (history + push toggle); the push
+    // enable/disable lives on the toggle inside it.
+    bell.addEventListener('click', function (e) {
+      e.stopPropagation();
+      setNotifOpen(!notifOpen);
+    });
+    document.addEventListener('click', function (e) {
+      if (notifOpen && !notifPanel.contains(e.target) && e.target !== bell) setNotifOpen(false);
+    });
+
+    function togglePush() {
       // Turning OFF always works regardless of environment.
       if (localStorage.getItem(NOTIFY_KEY) === '1') {
         localStorage.setItem(NOTIFY_KEY, '0'); updateBell(); return;
@@ -400,7 +697,8 @@ export function clientScript(wsUrl) {
           updateBell();
         });
       });
-    });
+    }
+    notifToggle.addEventListener('click', togglePush);
 
     // VAPID public key (base64url) -> Uint8Array for applicationServerKey.
     function urlB64ToUint8Array(base64) {
@@ -453,7 +751,7 @@ export function clientScript(wsUrl) {
       promptRec.style.display = 'none';
       activeRecommended2 = '';
       if (cancelArmTimer) { clearTimeout(cancelArmTimer); cancelArmTimer = null; }
-      setEnabled(true);
+      refreshComposer();
     }
 
     function makeBtn(label, cls, onClick) {
@@ -549,7 +847,7 @@ export function clientScript(wsUrl) {
         promptInput.focus();
       }
       promptCard.style.display = 'block';
-      setEnabled(false);
+      refreshComposer();
     }
 
     function handleMsg(msg) {
@@ -561,6 +859,7 @@ export function clientScript(wsUrl) {
           chatLog.innerHTML = '';
           closePrompt();
           hideThinking();
+          currentThinking = null; thinkingText = '';
           currentBubble = null; streamText = '';
           for (const k in toolCallMap) delete toolCallMap[k];
           // Per-turn try/catch: one malformed turn must never abort the rebuild
@@ -568,10 +867,14 @@ export function clientScript(wsUrl) {
           for (const t of (msg.turns || [])) { try { renderTurn(t); } catch (e) {} }
           if (msg.live) { try { renderLiveTurn(msg.live); } catch (e) {} }
           taskWidgetLines = (msg.taskWidget && msg.taskWidget.length) ? msg.taskWidget : null;
+          taskWidgetData = msg.taskWidgetData || null;
           renderWidgets();
+          setModelName(msg.model);
           if (msg.context) setContextBar(msg.context); else contextFill.style.width = '0%';
+          agentRunning = !!msg.agentRunning;
+          turnHadContent = !!(msg.live && msg.live.parts && msg.live.parts.length);
           if (msg.prompt) showPrompt(msg.prompt);
-          setEnabled(!msg.agentRunning && !msg.prompt);
+          refreshComposer();
           if (msg.agentRunning && !msg.live) showThinking();
           break;
         }
@@ -579,12 +882,37 @@ export function clientScript(wsUrl) {
           autoScroll = true;
           streamText = '';
           currentBubble = null;
-          setEnabled(false);
+          turnHadContent = false;
+          agentRunning = true;
+          setModelName(msg.model);
+          refreshComposer();
+          showThinking();
+          break;
+        case 'thinking_delta':
+          turnHadContent = true;
+          hideThinking(); // drop the spinner-only bubble
+          if (!currentThinking) {
+            currentThinking = makeThinkingEl('', true);
+            chatLog.appendChild(currentThinking);
+            thinkingText = '';
+            startSpin();
+          }
+          thinkingText += msg.delta;
+          currentThinking.querySelector('.thinking-body').textContent = thinkingText;
+          currentThinking.querySelector('.thinking-label').textContent =
+            thinkingSummary(thinkingLineCount(thinkingText));
+          scrollBottom();
+          break;
+        case 'thinking_end':
+          finalizeThinking();
+          // Model moves to text/tool next — show the spinner meanwhile.
           showThinking();
           break;
         case 'text_delta':
+          turnHadContent = true;
           if (!currentBubble) {
             hideThinking();
+            finalizeThinking();
             currentBubble = document.createElement('div');
             currentBubble.className = 'bubble assistant';
             const cursor = document.createElement('span');
@@ -604,7 +932,7 @@ export function clientScript(wsUrl) {
           if (currentBubble) {
             const c = currentBubble.querySelector('.cursor');
             if (c) c.remove();
-            if (streamText) setContent(currentBubble, streamText);
+            if (streamText) { setContent(currentBubble, streamText); attachBubbleCopy(currentBubble, streamText); }
             // Close this message's bubble so the next text segment (after a tool or
             // the next message) starts a fresh bubble — matching the terminal.
             currentBubble = null;
@@ -613,7 +941,9 @@ export function clientScript(wsUrl) {
           }
           break;
         case 'tool_start': {
+          turnHadContent = true;
           hideThinking();
+          finalizeThinking();
           const d = addToolCall(msg.toolName, msg.args, false);
           const sp = document.createElement('span');
           sp.className = 'tool-spin spin';
@@ -642,28 +972,39 @@ export function clientScript(wsUrl) {
         }
         case 'user_message':
           addBubble('user', msg.text);
+          addTurnTime(Date.now(), 'user');
           break;
         case 'system_note':
           addSystemLine(msg.text);
+          addTurnTime(Date.now(), 'system');
           break;
         case 'agent_error':
           hideThinking();
+          finalizeThinking();
           if (currentBubble) {
             const c = currentBubble.querySelector('.cursor');
             if (c) c.remove();
-            if (streamText) setContent(currentBubble, streamText);
+            if (streamText) { setContent(currentBubble, streamText); attachBubbleCopy(currentBubble, streamText); }
             currentBubble = null;
             streamText = '';
             stopSpinIfIdle();
           }
           addBubble('error', msg.message || 'Error');
-          setEnabled(true);
+          if (turnHadContent) addTurnTime(Date.now(), 'assistant');
+          turnHadContent = false;
+          agentRunning = false;
+          refreshComposer();
           break;
         case 'agent_end':
           hideThinking();
+          finalizeThinking();
           currentBubble = null;
           streamText = '';
-          setEnabled(true);
+          if (turnHadContent) addTurnTime(Date.now(), 'assistant');
+          turnHadContent = false;
+          agentRunning = false;
+          setModelName(msg.model);
+          refreshComposer();
           setContextBar(msg.contextUsage);
           break;
         case 'context':
@@ -678,6 +1019,7 @@ export function clientScript(wsUrl) {
           break;
         case 'widget':
           taskWidgetLines = (msg.lines && msg.lines.length) ? msg.lines : null;
+          taskWidgetData = msg.data || null;
           renderWidgets();
           break;
         case 'notify':
@@ -691,9 +1033,14 @@ export function clientScript(wsUrl) {
           // A new session started — wipe the previous session's transcript.
           chatLog.innerHTML = '';
           hideThinking();
+          finalizeThinking();
           currentBubble = null; streamText = '';
+          turnHadContent = false;
           closePrompt();
+          agentRunning = false;
+          refreshComposer();
           taskWidgetLines = null;
+          taskWidgetData = null;
           renderWidgets();
           contextFill.style.width = '0%';
           break;
@@ -712,11 +1059,12 @@ export function clientScript(wsUrl) {
       // The server records the message via addUserTurn and broadcasts a
       // user_message back to every client (us included), which renders the
       // bubble. Don't render it here too, or the sender sees it twice.
-      setEnabled(false);
-      showThinking();
+      // Mid-run the message steers the live turn (no state change here); when
+      // idle, optimistically show the spinner until agent_start lands.
+      if (!agentRunning) showThinking();
     }
 
-    sendBtn.addEventListener('click', sendMessage);
+    sendBtn.addEventListener('click', onSendClick);
     inputEl.addEventListener('keydown', (e) => {
       if (cmdActive.length > 0) {
         if (e.key === 'ArrowDown') { e.preventDefault(); cmdIndex = Math.min(cmdIndex + 1, cmdActive.length - 1); renderSuggestions(); return; }
@@ -746,7 +1094,8 @@ export function clientScript(wsUrl) {
         if (reconnectAnim) { clearInterval(reconnectAnim); reconnectAnim = null; }
         reconnectOverlay.classList.remove('visible');
         reconnectDelay = 1000;
-        setEnabled(true);
+        connected = true;
+        refreshComposer();
         // Self-heal on every (re)connect, not just page load: if the server
         // restarted it may have lost (or be rehydrating) our subscription, and
         // browsers can rotate it. Re-registering here covers reconnects the
@@ -760,7 +1109,8 @@ export function clientScript(wsUrl) {
       });
       sock.addEventListener('close', () => {
         if (ws !== sock) return;
-        setEnabled(false);
+        connected = false;
+        refreshComposer();
         reconnectOverlay.classList.add('visible');
         // Animate the same braille spinner used elsewhere, with a live countdown.
         const until = Date.now() + reconnectDelay;