@mjasnikovs/pi-task 0.17.21 → 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,125 +104,33 @@ 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;
     let reconnectTimer = null;
     let ws = null;
 
-    const BT = String.fromCharCode(96);
-    const JS_LANGS = new Set(['js','jsx','mjs','cjs','javascript','ts','tsx','typescript']);
-    const JS_KW = new Set(['break','case','catch','class','const','continue','debugger',
-      'default','delete','do','else','export','extends','finally','for','from','function',
-      'if','import','in','instanceof','let','new','of','return','static','super','switch',
-      'this','throw','try','typeof','var','void','while','with','yield','async','await',
-      'type','interface','enum','implements','abstract','as','declare','namespace',
-      'readonly','undefined','null','true','false','override','satisfies']);
-
-    function escHtml(s) {
-      return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-    }
-
-    function syntaxHighlight(code, lang) {
-      if (!JS_LANGS.has((lang || '').toLowerCase())) return escHtml(code);
-      let r = '', i = 0;
-      while (i < code.length) {
-        const ch = code[i];
-        // Template literal
-        if (ch === BT) {
-          let j = i + 1;
-          while (j < code.length) {
-            if (code[j] === '\\\\') { j += 2; continue; }
-            if (code[j] === BT) { j++; break; }
-            j++;
-          }
-          r += '<span class="hl-str">' + escHtml(code.slice(i, j)) + '</span>';
-          i = j; continue;
-        }
-        // Single / double quoted string
-        if (ch === '"' || ch === "'") {
-          let j = i + 1;
-          while (j < code.length) {
-            if (code[j] === '\\\\') { j += 2; continue; }
-            if (code[j] === ch || code[j] === '\\n') break;
-            j++;
-          }
-          if (code[j] === ch) j++;
-          r += '<span class="hl-str">' + escHtml(code.slice(i, j)) + '</span>';
-          i = j; continue;
-        }
-        // Line comment
-        if (ch === '/' && code[i + 1] === '/') {
-          let j = i + 2;
-          while (j < code.length && code[j] !== '\\n') j++;
-          r += '<span class="hl-cmt">' + escHtml(code.slice(i, j)) + '</span>';
-          i = j; continue;
-        }
-        // Block comment
-        if (ch === '/' && code[i + 1] === '*') {
-          let j = i + 2;
-          while (j < code.length && !(code[j] === '*' && code[j + 1] === '/')) j++;
-          j += 2;
-          r += '<span class="hl-cmt">' + escHtml(code.slice(i, j)) + '</span>';
-          i = j; continue;
-        }
-        // Number
-        if (ch >= '0' && ch <= '9') {
-          let j = i;
-          if (code[i] === '0' && /[xXoObB]/.test(code[i + 1] || '')) {
-            j += 2; while (j < code.length && /[0-9a-fA-F_]/.test(code[j])) j++;
-          } else {
-            while (j < code.length && (code[j] >= '0' && code[j] <= '9' || code[j] === '_')) j++;
-            if (code[j] === '.') { j++; while (j < code.length && code[j] >= '0' && code[j] <= '9') j++; }
-            if (code[j] === 'e' || code[j] === 'E') {
-              j++; if (code[j] === '+' || code[j] === '-') j++;
-              while (j < code.length && code[j] >= '0' && code[j] <= '9') j++;
-            }
-            if (code[j] === 'n') j++;
-          }
-          r += '<span class="hl-num">' + escHtml(code.slice(i, j)) + '</span>';
-          i = j; continue;
-        }
-        // Identifier / keyword / function call
-        if (/[a-zA-Z_$]/.test(ch)) {
-          let j = i;
-          while (j < code.length && /[a-zA-Z0-9_$]/.test(code[j])) j++;
-          const word = code.slice(i, j);
-          if (JS_KW.has(word)) {
-            r += '<span class="hl-kw">' + word + '</span>';
-          } else if (code[j] === '(') {
-            r += '<span class="hl-fn">' + escHtml(word) + '</span>';
-          } else {
-            r += escHtml(word);
-          }
-          i = j; continue;
-        }
-        r += escHtml(ch); i++;
-      }
-      return r;
-    }
-
+    // Render assistant text as markdown (headers, lists, tables, emphasis, links)
+    // with fenced code blocks syntax-highlighted. renderMarkdown/syntaxHighlight are
+    // the pure functions from ui-render.ts / ui-highlight.ts, concatenated into this
+    // same <script> ahead of clientScript. innerHTML is safe because renderMarkdown
+    // escapes every span of literal text and only emits a fixed set of known tags.
     function setContent(el, text) {
-      el.innerHTML = '';
-      const BT3 = BT + BT + BT;
-      const re = new RegExp(BT3 + '([^\\n' + BT + ']*)\\n([\\s\\S]*?)' + BT3, 'g');
-      let last = 0, m;
-      while ((m = re.exec(text)) !== null) {
-        if (m.index > last) el.appendChild(document.createTextNode(text.slice(last, m.index)));
-        const lang = m[1].trim();
-        const code = m[2];
-        const wrap = document.createElement('div');
-        wrap.className = 'code-block';
-        if (lang) { const lb = document.createElement('div'); lb.className = 'code-lang'; lb.textContent = lang; wrap.appendChild(lb); }
-        const pre = document.createElement('pre');
-        const codeEl = document.createElement('code');
-        codeEl.innerHTML = syntaxHighlight(code, lang);
-        pre.appendChild(codeEl);
-        wrap.appendChild(pre);
-        el.appendChild(wrap);
-        last = m.index + m[0].length;
-      }
-      if (last < text.length) el.appendChild(document.createTextNode(text.slice(last)));
+      el.classList.add('md');
+      el.innerHTML = renderMarkdown(text);
     }
 
     const COMMANDS = [
@@ -247,7 +209,10 @@ export function clientScript(wsUrl) {
     function addBubble(role, text) {
       const el = document.createElement('div');
       el.className = 'bubble ' + role;
-      setContent(el, text);
+      // 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); attachBubbleCopy(el, text); }
+      else el.textContent = text;
       chatLog.appendChild(el);
       scrollBottom();
       return el;
@@ -293,24 +258,204 @@ export function clientScript(wsUrl) {
       stopSpinIfIdle();
     }
 
-    function addToolCall(toolName, argsStr, isError) {
-      // argsStr can be undefined (no args / JSON.stringify(undefined)); don't let
-      // that render as the literal "name: undefined" in the collapsed summary.
-      const label = (toolName + (argsStr ? ': ' + argsStr : '')).slice(0, 64);
+    // A finished/running tool card. args is the RAW args (object or JSON string) —
+    // toolSummary/toolBadge/toolDiffHtml (ui-tools.ts) turn it into a readable
+    // one-line summary, a +N −M badge, and (for edit/write) an expandable line diff.
+    function addToolCall(toolName, args, isError) {
       const d = document.createElement('details');
       d.className = 'tool-call' + (isError ? ' error' : '');
       const s = document.createElement('summary');
-      s.textContent = label;
+      const label = document.createElement('span');
+      label.className = 'tool-label';
+      label.textContent = toolSummary(toolName, args);
+      s.title = label.textContent;
+      s.appendChild(label);
+      const badge = toolBadge(toolName, args);
+      if (badge && (badge.added || badge.removed)) {
+        const b = document.createElement('span');
+        b.className = 'tool-badge';
+        b.textContent = '+' + badge.added + ' \\u2212' + badge.removed;
+        s.appendChild(b);
+      }
       d.appendChild(s);
+      const diffHtml = toolDiffHtml(toolName, args);
+      if (diffHtml) {
+        const dv = document.createElement('div');
+        dv.className = 'tool-diff';
+        dv.innerHTML = diffHtml;
+        d.appendChild(dv);
+      }
       chatLog.appendChild(d);
       scrollBottom();
       return d;
     }
 
-    function setEnabled(on) {
-      const allow = on && activePromptId === null;
-      inputEl.disabled = !allow;
-      sendBtn.disabled = !allow;
+    // Dim "· 1.2s" appended to a finished tool summary.
+    function appendElapsed(d, elapsedMs) {
+      const txt = fmtElapsed(elapsedMs);
+      if (!txt) return;
+      const s = d.querySelector('summary');
+      if (!s || s.querySelector('.tool-elapsed')) return;
+      const e = document.createElement('span');
+      e.className = 'tool-elapsed';
+      e.textContent = '\\u00B7 ' + txt;
+      s.appendChild(e);
+    }
+
+    // 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,
@@ -345,9 +490,9 @@ export function clientScript(wsUrl) {
 
     // Render one tool part from the ordered parts list (running or finished).
     function renderToolPart(p) {
-      const argsStr = typeof p.args === 'string' ? p.args : JSON.stringify(p.args);
-      const d = addToolCall(p.toolName, argsStr, p.isError);
+      const d = addToolCall(p.toolName, p.args, p.isError);
       if (p.done) {
+        appendElapsed(d, p.elapsedMs);
         const pre = document.createElement('pre');
         pre.textContent = toolResultText(p.result);
         d.appendChild(pre);
@@ -361,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');
@@ -375,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
@@ -407,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);
         }
@@ -419,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');
@@ -435,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.
@@ -448,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;
@@ -472,7 +697,8 @@ export function clientScript(wsUrl) {
           updateBell();
         });
       });
-    });
+    }
+    notifToggle.addEventListener('click', togglePush);
 
     // VAPID public key (base64url) -> Uint8Array for applicationServerKey.
     function urlB64ToUint8Array(base64) {
@@ -525,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) {
@@ -604,8 +830,9 @@ export function clientScript(wsUrl) {
       activeRecommended = msg.recommended || '';
       activeRecommended2 = msg.recommended2 || '';
       if (msg.recommended) {
-        // Mode A: recommendation(s) present.
-        promptRecText.textContent = msg.recommended;
+        // Mode A: recommendation(s) present. Render markdown in the panel so a
+        // recommendation with code/emphasis reads the same as an assistant bubble.
+        setContent(promptRecText, msg.recommended);
         showRecommendation();
       } else {
         // Mode B: no recommendation — the user must type an answer (or skip).
@@ -620,7 +847,7 @@ export function clientScript(wsUrl) {
         promptInput.focus();
       }
       promptCard.style.display = 'block';
-      setEnabled(false);
+      refreshComposer();
     }
 
     function handleMsg(msg) {
@@ -632,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
@@ -639,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;
         }
@@ -650,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');
@@ -675,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;
@@ -684,9 +941,10 @@ export function clientScript(wsUrl) {
           }
           break;
         case 'tool_start': {
+          turnHadContent = true;
           hideThinking();
-          const argsStr = typeof msg.args === 'string' ? msg.args : JSON.stringify(msg.args);
-          const d = addToolCall(msg.toolName, argsStr, false);
+          finalizeThinking();
+          const d = addToolCall(msg.toolName, msg.args, false);
           const sp = document.createElement('span');
           sp.className = 'tool-spin spin';
           d.querySelector('summary').appendChild(sp);
@@ -700,6 +958,7 @@ export function clientScript(wsUrl) {
             const sp = d.querySelector('.tool-spin');
             if (sp) { sp.remove(); stopSpinIfIdle(); }
             if (msg.isError) d.classList.add('error');
+            appendElapsed(d, msg.elapsedMs);
             const pre = document.createElement('pre');
             pre.textContent = toolResultText(msg.result);
             d.appendChild(pre);
@@ -713,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':
@@ -749,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':
@@ -762,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;
@@ -783,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; }
@@ -817,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
@@ -831,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;