@mjasnikovs/pi-task 0.17.21 → 0.17.22

package/dist/remote/history.d.ts

@@ -11,6 +11,8 @@ export interface ToolPart {
     isError: boolean;
     /** false while the tool is still running (result not in yet). */
     done: boolean;
+    /** Wall-clock duration once finished, shown dimly in the tool summary. */
+    elapsedMs?: number;
 }
 export type Part = TextPart | ToolPart;
 export interface Turn {

package/dist/remote/session-state.d.ts

@@ -24,6 +24,9 @@ interface SessionState {
     taskWidget: string[] | null;
     prompt: PromptMessage | null;
     context: ContextUsage | null;
+    /** tool start timestamps (ms), keyed by toolCallId — kept off the serialized
+     *  parts so it never reaches the client; used only to compute elapsedMs. */
+    toolStarts: Record<string, number>;
     /** Broadcast sink — swapped in tests via _setSink. */
     sink: (msg: unknown) => void;
 }

package/dist/remote/session-state.js

@@ -20,6 +20,7 @@ function fresh() {
         taskWidget: null,
         prompt: null,
         context: null,
+        toolStarts: {},
         sink: wsBroadcast
     };
 }
@@ -76,6 +77,7 @@ export function startTool(toolCallId, toolName, args) {
         isError: false,
         done: false
     });
+    s.toolStarts[toolCallId] = Date.now();
     s.sink({ type: 'tool_start', toolCallId, toolName, args });
 }
 export function updateTool(toolCallId, partialResult) {
@@ -85,10 +87,18 @@ export function endTool(toolCallId, toolName, result, isError) {
     const s = getState();
     const live = ensureLive(s);
     const part = live.parts.find((p) => p.kind === 'tool' && p.toolCallId === toolCallId);
+    const startedAt = s.toolStarts[toolCallId];
+    let elapsedMs;
+    if (startedAt != null) {
+        elapsedMs = Date.now() - startedAt;
+        delete s.toolStarts[toolCallId];
+    }
     if (part) {
         part.result = result;
         part.isError = isError;
         part.done = true;
+        if (elapsedMs != null)
+            part.elapsedMs = elapsedMs;
     }
     else {
         // tool_end without a matching start (shouldn't happen) — append a done tool.
@@ -102,7 +112,7 @@ export function endTool(toolCallId, toolName, result, isError) {
             done: true
         });
     }
-    s.sink({ type: 'tool_end', toolCallId, toolName, result, isError });
+    s.sink({ type: 'tool_end', toolCallId, toolName, result, isError, elapsedMs });
 }
 export function agentEnd(context) {
     const s = getState();

package/dist/remote/ui-highlight.d.ts

@@ -0,0 +1,2 @@
+/** Emitted client JS (top-level function declarations + language tables). */
+export declare function highlightModule(): string;

package/dist/remote/ui-highlight.js

@@ -0,0 +1,119 @@
+// Generalized single-pass syntax highlighter, shipped as a JS string and
+// concatenated into the page by ui.ts. It grew out of the client's original
+// JS-only tokenizer: the string/comment/number/identifier logic is now shared and
+// parameterized by a per-language config (keyword set + comment markers + string
+// flavors). Unknown languages fall back to escaped plain text (unchanged).
+//
+// Depends on escHtml (ui-render.ts) — both land in the same <script>.
+/** Emitted client JS (top-level function declarations + language tables). */
+export function highlightModule() {
+    return `    var HL_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 public private protected get set').split(' '));
+    var HL_PY_KW = new Set(('def return if elif else for while in not and or import from as class try except finally '
+      + 'raise with lambda yield pass break continue global nonlocal assert del None True False async await is print self').split(' '));
+    var HL_SH_KW = new Set(('if then else elif fi for while do done case esac in function return echo export local read '
+      + 'cd set unset source alias exit test').split(' '));
+    var HL_SQL_KW = new Set(('select from where insert into values update set delete create table drop alter add column '
+      + 'join left right inner outer full on group by order having limit offset union and or not null is as distinct '
+      + 'count sum avg min max primary key foreign references index unique default int integer text varchar char boolean '
+      + 'timestamp date time serial begin commit rollback').split(' '));
+    var HL_GO_KW = new Set(('func package import var const type struct interface map chan go defer return if else for range '
+      + 'switch case default break continue select nil true false make new append len cap string int int64 float64 bool byte rune error').split(' '));
+    var HL_RUST_KW = new Set(('fn let mut const static struct enum impl trait pub use mod match if else for while loop return '
+      + 'break continue self Self super crate as where move ref dyn async await unsafe true false None Some Ok Err String Vec Option Result Box').split(' '));
+    var HL_YAML_KW = new Set('true false null yes no on off'.split(' '));
+    var HL_JSON_KW = new Set('true false null'.split(' '));
+
+    var HL_LANGS = {
+      js:     {kw: HL_JS_KW,   line: '//', block: ['/*', '*/'], tmpl: true},
+      ts:     {kw: HL_JS_KW,   line: '//', block: ['/*', '*/'], tmpl: true},
+      python: {kw: HL_PY_KW,   line: '#',  block: null,         triple: true},
+      sh:     {kw: HL_SH_KW,   line: '#',  block: null},
+      sql:    {kw: HL_SQL_KW,  line: '--', block: ['/*', '*/'], ci: true},
+      go:     {kw: HL_GO_KW,   line: '//', block: ['/*', '*/'], tmpl: true},
+      rust:   {kw: HL_RUST_KW, line: '//', block: ['/*', '*/']},
+      yaml:   {kw: HL_YAML_KW, line: '#',  block: null},
+      json:   {kw: HL_JSON_KW, line: null, block: null},
+      css:    {kw: null,       line: null, block: ['/*', '*/']}
+    };
+    var HL_ALIAS = {javascript: 'js', jsx: 'js', mjs: 'js', cjs: 'js', node: 'js', typescript: 'ts', tsx: 'ts',
+      py: 'python', python3: 'python', bash: 'sh', shell: 'sh', shellscript: 'sh', zsh: 'sh', console: 'sh',
+      yml: 'yaml', rs: 'rust', golang: 'go', htm: 'html', xml: 'html', svg: 'html', scss: 'css'};
+
+    function hlSpan(cls, text) { return '<span class="' + cls + '">' + escHtml(text) + '</span>'; }
+
+    function tokenize(code, cfg) {
+      var BT = String.fromCharCode(96);
+      var r = '', i = 0, n = code.length;
+      while (i < n) {
+        var ch = code[i];
+        if (cfg.block && code.startsWith(cfg.block[0], i)) {
+          var end = code.indexOf(cfg.block[1], i + cfg.block[0].length);
+          var je = end < 0 ? n : end + cfg.block[1].length;
+          r += hlSpan('hl-cmt', code.slice(i, je)); i = je; continue;
+        }
+        if (cfg.line && code.startsWith(cfg.line, i)) {
+          var jl = i; while (jl < n && code[jl] !== '\\n') jl++;
+          r += hlSpan('hl-cmt', code.slice(i, jl)); i = jl; continue;
+        }
+        if (ch === '"' || ch === "'" || (cfg.tmpl && ch === BT)) {
+          if (cfg.triple && code[i + 1] === ch && code[i + 2] === ch) {
+            var close = code.indexOf(ch + ch + ch, i + 3);
+            var jt = close < 0 ? n : close + 3;
+            r += hlSpan('hl-str', code.slice(i, jt)); i = jt; continue;
+          }
+          var js = i + 1;
+          while (js < n) { if (code[js] === '\\\\') { js += 2; continue; } if (code[js] === ch || code[js] === '\\n') break; js++; }
+          if (code[js] === ch) js++;
+          r += hlSpan('hl-str', code.slice(i, js)); i = js; continue;
+        }
+        if (ch >= '0' && ch <= '9') {
+          var jn = i;
+          if (code[i] === '0' && /[xXoObB]/.test(code[i + 1] || '')) {
+            jn += 2; while (jn < n && /[0-9a-fA-F_]/.test(code[jn])) jn++;
+          } else {
+            while (jn < n && ((code[jn] >= '0' && code[jn] <= '9') || code[jn] === '_')) jn++;
+            if (code[jn] === '.') { jn++; while (jn < n && code[jn] >= '0' && code[jn] <= '9') jn++; }
+            if (code[jn] === 'e' || code[jn] === 'E') { jn++; if (code[jn] === '+' || code[jn] === '-') jn++; while (jn < n && code[jn] >= '0' && code[jn] <= '9') jn++; }
+            if (code[jn] === 'n') jn++;
+          }
+          r += hlSpan('hl-num', code.slice(i, jn)); i = jn; continue;
+        }
+        if (/[a-zA-Z_$]/.test(ch)) {
+          var jw = i; while (jw < n && /[a-zA-Z0-9_$]/.test(code[jw])) jw++;
+          var word = code.slice(i, jw);
+          var kwHit = cfg.kw && (cfg.kw.has(word) || (cfg.ci && cfg.kw.has(word.toLowerCase())));
+          if (kwHit) r += hlSpan('hl-kw', word);
+          else if (code[jw] === '(') r += hlSpan('hl-fn', word);
+          else r += escHtml(word);
+          i = jw; continue;
+        }
+        r += escHtml(ch); i++;
+      }
+      return r;
+    }
+
+    // Markup languages don't fit the identifier tokenizer; highlight tag names and
+    // attribute names off the already-escaped text.
+    function highlightMarkup(code) {
+      var e = escHtml(code);
+      // Attribute names first (before any spans exist), then tag names — otherwise
+      // the attribute pass would re-match the class="" inside the spans it inserted.
+      e = e.replace(/([a-zA-Z-]+)=("|&quot;)/g, function (_, a, q) { return '<span class="hl-fn">' + a + '</span>=' + q; });
+      e = e.replace(/(&lt;\\/?)([a-zA-Z][\\w-]*)/g, function (_, p, t) { return p + '<span class="hl-kw">' + t + '</span>'; });
+      return e;
+    }
+
+    function syntaxHighlight(code, lang) {
+      code = String(code == null ? '' : code);
+      lang = (lang || '').toLowerCase();
+      lang = HL_ALIAS[lang] || lang;
+      if (lang === 'html') return highlightMarkup(code);
+      var cfg = HL_LANGS[lang];
+      if (!cfg) return escHtml(code);
+      return tokenize(code, cfg);
+    }
+`;
+}

package/dist/remote/ui-render.d.ts

@@ -0,0 +1,2 @@
+/** Emitted client JS (top-level function declarations). */
+export declare function renderModule(): string;

package/dist/remote/ui-render.js

@@ -0,0 +1,169 @@
+// Pure string→HTML render helpers, shipped to the browser as a JS string and
+// concatenated into the page by ui.ts BEFORE clientScript. Splitting these out
+// of the 900-line client template gives them a testability seam: each emitted
+// function is `new Function`-eval'd in a unit test and asserted on its return
+// value, with no DOM needed. (The shipped fence bug survived because the client
+// JS was never executed by any test — only string-matched.)
+//
+// Exposes (as top-level fn declarations in the page's single <script>):
+//   escHtml(s)           — HTML-escape & < >
+//   parseBlocks(text)    — line-based fence scanner (text vs code segments)
+//   renderInline(s)      — inline markdown (bold/italic/strike/code/links)
+//   renderMarkdown(text) — full block-level markdown → HTML string
+// renderMarkdown calls syntaxHighlight (ui-highlight.ts); both land in the same
+// <script>, so declaration order across the concatenated modules doesn't matter.
+/** Emitted client JS (top-level function declarations). */
+export function renderModule() {
+    return `    function escHtml(s) {
+      return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    }
+
+    // Split text into ordered {type:'text'|'code', ...} blocks by scanning lines
+    // for a fenced code marker at line start. This replaces a RegExp that was built
+    // from a string where '[\\\\s\\\\S]' collapsed to '[sS]', so it matched nothing
+    // and every code block rendered as raw text. A line scanner also tolerates an
+    // unclosed trailing fence, which the regex never could.
+    function parseBlocks(text) {
+      var FENCE = String.fromCharCode(96, 96, 96);
+      var lines = String(text == null ? '' : text).split('\\n');
+      var blocks = [];
+      var textBuf = [];
+      function flushText() {
+        if (textBuf.length) { blocks.push({type: 'text', content: textBuf.join('\\n')}); textBuf = []; }
+      }
+      var i = 0;
+      while (i < lines.length) {
+        var line = lines[i];
+        if (line.slice(0, 3) === FENCE) {
+          flushText();
+          var lang = line.slice(3).trim();
+          var codeLines = [];
+          i++;
+          while (i < lines.length && lines[i].trim() !== FENCE) { codeLines.push(lines[i]); i++; }
+          if (i < lines.length) i++; // consume the closing fence; tolerate EOF (unclosed)
+          blocks.push({type: 'code', lang: lang, content: codeLines.join('\\n')});
+        } else {
+          textBuf.push(line);
+          i++;
+        }
+      }
+      flushText();
+      return blocks;
+    }
+
+    // Inline formatting on ONE line's worth of text. Code spans are extracted first
+    // (and protected with a NUL placeholder) so emphasis inside them is left alone.
+    function renderInline(s) {
+      s = escHtml(String(s == null ? '' : s));
+      var BT = String.fromCharCode(96);
+      var codes = [];
+      var codeRe = new RegExp(BT + '([^' + BT + ']+)' + BT, 'g');
+      s = s.replace(codeRe, function (_, c) { codes.push(c); return '\\u0000' + (codes.length - 1) + '\\u0000'; });
+      s = s.replace(/\\[([^\\]]+)\\]\\(([^)\\s]+)\\)/g, function (_, t, u) {
+        var safe = /^(https?:|mailto:)/i.test(u) ? u : '#';
+        return '<a href="' + safe + '" target="_blank" rel="noopener">' + t + '</a>';
+      });
+      s = s.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>');
+      s = s.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+      s = s.replace(/\\*([^*]+)\\*/g, '<em>$1</em>');
+      s = s.replace(/~~([^~]+)~~/g, '<del>$1</del>');
+      s = s.replace(/\\u0000(\\d+)\\u0000/g, function (_, n) { return '<code class="md-code">' + codes[n] + '</code>'; });
+      return s;
+    }
+
+    // A line that begins a block-level construct — used to stop paragraph grouping.
+    function mdIsSpecial(l) {
+      return /^(#{1,6})\\s+/.test(l)
+        || /^\\s*>\\s?/.test(l)
+        || /^\\s*([-*+]|\\d+\\.)\\s+/.test(l)
+        || /^\\s*([-*_])\\s*(\\1\\s*){2,}$/.test(l);
+    }
+
+    function mdParseList(lines, i) {
+      var ordered = /^\\s*\\d+\\.\\s+/.test(lines[i]);
+      var tag = ordered ? 'ol' : 'ul';
+      var items = '';
+      while (i < lines.length && /^\\s*([-*+]|\\d+\\.)\\s+/.test(lines[i])) {
+        var content = lines[i].replace(/^\\s*([-*+]|\\d+\\.)\\s+/, '');
+        var task = /^\\[([ xX])\\]\\s+(.*)$/.exec(content);
+        if (task) {
+          var checked = task[1].toLowerCase() === 'x';
+          items += '<li class="md-task"><span class="md-check">' + (checked ? '\\u2611' : '\\u2610') + '</span> ' + renderInline(task[2]) + '</li>';
+        } else {
+          items += '<li>' + renderInline(content) + '</li>';
+        }
+        i++;
+      }
+      return {html: '<' + tag + ' class="md-list">' + items + '</' + tag + '>', next: i};
+    }
+
+    function mdParseTable(lines, i) {
+      function cells(l) {
+        var s = l.trim().replace(/^\\|/, '').replace(/\\|$/, '');
+        return s.split('|').map(function (c) { return c.trim(); });
+      }
+      var head = cells(lines[i]);
+      i += 2; // skip the header row and the |---| separator
+      var body = '';
+      while (i < lines.length && /\\|/.test(lines[i]) && lines[i].trim() !== '') {
+        var row = cells(lines[i]);
+        var tds = '';
+        for (var c = 0; c < row.length; c++) tds += '<td>' + renderInline(row[c]) + '</td>';
+        body += '<tr>' + tds + '</tr>';
+        i++;
+      }
+      var ths = '';
+      for (var c2 = 0; c2 < head.length; c2++) ths += '<th>' + renderInline(head[c2]) + '</th>';
+      return {html: '<table class="md-table"><thead><tr>' + ths + '</tr></thead><tbody>' + body + '</tbody></table>', next: i};
+    }
+
+    // Block-level markdown for one text segment (no fences — those are split off by
+    // renderMarkdown first). Headers, hr, blockquotes, tables, lists, paragraphs.
+    function renderProse(src) {
+      var lines = String(src == null ? '' : src).split('\\n');
+      var html = '';
+      var i = 0;
+      while (i < lines.length) {
+        var line = lines[i];
+        if (line.trim() === '') { i++; continue; }
+        var h = /^(#{1,6})\\s+(.*)$/.exec(line);
+        if (h) { var lvl = h[1].length; html += '<h' + lvl + ' class="md-h md-h' + lvl + '">' + renderInline(h[2]) + '</h' + lvl + '>'; i++; continue; }
+        if (/^\\s*([-*_])\\s*(\\1\\s*){2,}$/.test(line)) { html += '<hr class="md-hr">'; i++; continue; }
+        if (/^\\s*>\\s?/.test(line)) {
+          var q = [];
+          while (i < lines.length && /^\\s*>\\s?/.test(lines[i])) { q.push(lines[i].replace(/^\\s*>\\s?/, '')); i++; }
+          html += '<blockquote class="md-quote">' + renderProse(q.join('\\n')) + '</blockquote>';
+          continue;
+        }
+        if (/\\|/.test(line) && i + 1 < lines.length && /^\\s*\\|?[\\s:|-]*-[\\s:|-]*\\|?\\s*$/.test(lines[i + 1])) {
+          var t = mdParseTable(lines, i); html += t.html; i = t.next; continue;
+        }
+        if (/^\\s*([-*+]|\\d+\\.)\\s+/.test(line)) {
+          var lst = mdParseList(lines, i); html += lst.html; i = lst.next; continue;
+        }
+        var para = [];
+        while (i < lines.length && lines[i].trim() !== '' && !mdIsSpecial(lines[i])) { para.push(lines[i]); i++; }
+        var inner = [];
+        for (var p = 0; p < para.length; p++) inner.push(renderInline(para[p]));
+        html += '<p class="md-p">' + inner.join('<br>') + '</p>';
+      }
+      return html;
+    }
+
+    function renderMarkdown(text) {
+      var blocks = parseBlocks(text);
+      var out = '';
+      for (var k = 0; k < blocks.length; k++) {
+        var b = blocks[k];
+        if (b.type === 'code') {
+          out += '<div class="code-block">'
+            + (b.lang ? '<div class="code-lang">' + escHtml(b.lang) + '</div>' : '')
+            + '<pre><code>' + syntaxHighlight(b.content, b.lang) + '</code></pre></div>';
+        } else {
+          out += renderProse(b.content);
+        }
+      }
+      return out;
+    }
+`;
+}

package/dist/remote/ui-script.js

@@ -56,119 +56,14 @@ export function clientScript(wsUrl) {
     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 +142,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);
+      else el.textContent = text;
       chatLog.appendChild(el);
       scrollBottom();
       return el;
@@ -293,20 +191,50 @@ 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;
     }
 
+    // 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);
+    }
+
     function setEnabled(on) {
       const allow = on && activePromptId === null;
       inputEl.disabled = !allow;
@@ -345,9 +273,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);
@@ -604,8 +532,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).
@@ -685,8 +614,7 @@ export function clientScript(wsUrl) {
           break;
         case 'tool_start': {
           hideThinking();
-          const argsStr = typeof msg.args === 'string' ? msg.args : JSON.stringify(msg.args);
-          const d = addToolCall(msg.toolName, argsStr, false);
+          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 +628,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);

package/dist/remote/ui-styles.d.ts

@@ -1 +1 @@
-export declare const STYLES = "    :root {\n      --base: #1e1e2e; --mantle: #181825; --crust: #11111b;\n      --surface0: #313244; --surface1: #45475a; --surface2: #585b70;\n      --text: #cdd6f4; --subtext1: #a6adc8; --subtext0: #7f849c;\n      --mauve: #cba6f7; --blue: #89b4fa; --green: #a6e3a1; --red: #f38ba8;\n      --yellow: #f9e2af; --peach: #fab387; --teal: #94e2d5;\n    }\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: var(--base); color: var(--text);\n      font-family: ui-monospace, monospace;\n      /* --app-h is set from window.innerHeight (see setAppHeight) so the column\n         height is a stable pixel value across an orientation change. 100dvh is a\n         fallback for first paint / no-JS: iOS Safari interpolates dvh during the\n         rotation animation, which makes the whole flex column resize repeatedly\n         (\"spazzing out\") \u2014 a fixed px height does not. */\n      height: var(--app-h, 100dvh);\n      display: flex; flex-direction: column; overflow: hidden;\n      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)\n               0px env(safe-area-inset-left, 0px);\n    }\n    #context-bar { height: 4px; background: var(--surface0); flex-shrink: 0; }\n    #context-bar-fill { height: 100%; background: var(--mauve); width: 0%; transition: width 0.4s ease; }\n    #header {\n      background: var(--mantle); padding: 8px 16px;\n      display: flex; justify-content: space-between; align-items: center;\n      font-size: 13px; flex-shrink: 0; border-bottom: 1px solid var(--surface0);\n    }\n    #header .title { font-weight: bold; color: var(--mauve); letter-spacing: 0.05em;\n      position: relative; animation: glitch 5s steps(1) infinite; }\n    @keyframes glitch {\n      0%, 88%, 100% { text-shadow: none; transform: translate(0, 0); }\n      90% { text-shadow: -1px 0 var(--red), 1px 0 var(--teal); transform: translate(1px, -1px); }\n      92% { text-shadow: 1px 0 var(--red), -1px 0 var(--blue); transform: translate(-1px, 1px); }\n      94% { text-shadow: -1px 0 var(--blue), 1px 0 var(--red); transform: translate(1px, 0); }\n      96% { text-shadow: 1px 0 var(--teal), -1px 0 var(--red); transform: translate(-1px, 0); }\n    }\n    @media (prefers-reduced-motion: reduce) { #header .title { animation: none; } }\n    #header .hgroup { display: flex; align-items: center; gap: 10px; }\n    #bell {\n      background: none; border: none; color: var(--subtext1); cursor: pointer;\n      font-size: 15px; line-height: 1; padding: 2px; font-family: inherit;\n    }\n    #bell:hover { color: var(--text); }\n    #bell.on { color: var(--mauve); }\n    #chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; }\n    #chat-log {\n      flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px;\n      display: flex; flex-direction: column; gap: 8px;\n    }\n    /* Floating jump-to-latest button \u2014 only shown when scrolled away from the\n       bottom (toggled via .visible from the scroll handler). */\n    #scroll-bottom {\n      display: none; position: absolute; bottom: 16px; right: 16px; z-index: 40;\n      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;\n      background: var(--surface1); color: var(--text); border: 1px solid var(--surface2);\n      font-family: inherit; font-size: 18px; line-height: 1; padding: 0;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n    }\n    #scroll-bottom:hover { background: var(--surface2); color: var(--mauve); }\n    #scroll-bottom.visible { display: block; }\n    #chat-log::-webkit-scrollbar { width: 6px; }\n    #chat-log::-webkit-scrollbar-track { background: transparent; }\n    #chat-log::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }\n    .bubble {\n      max-width: 82%; padding: 8px 12px; border-radius: 8px;\n      line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 13px;\n    }\n    .bubble.user { background: var(--surface1); color: var(--text); align-self: flex-end; }\n    .bubble.assistant { background: var(--surface0); color: var(--text); align-self: flex-start; }\n    .bubble.error {\n      background: var(--crust); color: var(--red); align-self: stretch;\n      max-width: 100%; border: 1px solid var(--red); font-size: 12px;\n    }\n    /* Persistent inline system note (e.g. context compaction) \u2014 a muted centered\n       divider, distinct from chat bubbles. */\n    .sysnote {\n      align-self: center; color: var(--subtext0); font-size: 11px;\n      font-family: ui-monospace, monospace; letter-spacing: 0.5px;\n      padding: 2px 10px; opacity: 0.85;\n    }\n    .bubble.thinking {\n      display: flex; gap: 5px; align-items: center; padding: 10px 14px;\n    }\n    .bubble.thinking .spinner {\n      color: var(--mauve); font-size: 15px; line-height: 1;\n      font-family: ui-monospace, monospace;\n    }\n    .tool-call {\n      background: var(--crust); border-radius: 6px; align-self: flex-start;\n      max-width: 90%; font-size: 12px; border: 1px solid var(--surface0);\n    }\n    .tool-call summary {\n      padding: 6px 10px; color: var(--subtext1); cursor: pointer;\n      user-select: none; list-style: none;\n      overflow-wrap: anywhere; word-break: break-word;\n    }\n    .tool-call summary::-webkit-details-marker { display: none; }\n    .tool-call summary::before { content: \"\u25B6  \"; }\n    .tool-call[open] > summary::before { content: \"\u25BC  \"; }\n    .tool-call.error > summary { color: var(--red); }\n    .tool-call pre {\n      padding: 8px 12px; overflow-y: auto;\n      color: var(--subtext1); font-size: 11px; max-height: 280px;\n      border-top: 1px solid var(--surface0);\n      white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;\n    }\n    .tool-spin { color: var(--mauve); margin-left: 6px; font-family: ui-monospace, monospace; font-size: 13px; }\n    .code-block {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 6px; overflow: hidden; margin: 4px 0;\n      align-self: stretch; max-width: 100%; font-size: 12px;\n    }\n    .code-lang {\n      background: var(--surface0); color: var(--subtext0);\n      font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em;\n    }\n    .code-block code {\n      display: block; padding: 10px 12px; overflow-x: auto;\n      color: var(--text); white-space: pre; line-height: 1.55;\n    }\n    .hl-kw  { color: var(--mauve); }\n    .hl-str { color: var(--green); }\n    .hl-cmt { color: var(--subtext0); font-style: italic; }\n    .hl-num { color: var(--blue); }\n    .hl-fn  { color: var(--yellow); }\n    #input-bar {\n      background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));\n      display: flex; gap: 8px; flex-shrink: 0;\n      border-top: 1px solid var(--surface0);\n      position: relative;\n    }\n    #cmd-suggestions {\n      display: none; position: absolute; bottom: 100%; left: 16px; right: 16px;\n      background: var(--mantle); border: 1px solid var(--surface1);\n      border-bottom: none; border-radius: 8px 8px 0 0;\n      overflow: hidden; z-index: 10;\n    }\n    .cmd-item {\n      display: flex; align-items: baseline; gap: 10px;\n      padding: 7px 12px; cursor: pointer; font-size: 12px;\n      border-bottom: 1px solid var(--surface0);\n    }\n    .cmd-item:last-child { border-bottom: none; }\n    .cmd-item:hover, .cmd-item.active { background: var(--surface0); }\n    .cmd-item .cmd-name { color: var(--blue); font-weight: bold; flex-shrink: 0; }\n    .cmd-item .cmd-desc { color: var(--subtext0); }\n    #input {\n      flex: 1; background: var(--surface0); color: var(--text);\n      border: none; border-radius: 6px; padding: 8px 12px;\n      font-family: inherit; font-size: 13px; resize: none;\n      outline: none; line-height: 1.5; min-height: 36px; max-height: 120px;\n    }\n    #input::placeholder { color: var(--subtext0); }\n    #input:focus { box-shadow: 0 0 0 1px var(--mauve); }\n    #send {\n      background: var(--blue); color: var(--crust); border: none;\n      border-radius: 6px; padding: 8px 16px; font-weight: bold;\n      cursor: pointer; font-size: 13px; font-family: inherit;\n      white-space: nowrap; align-self: flex-end;\n    }\n    #send:disabled, #input:disabled { opacity: 0.45; cursor: not-allowed; }\n    #reconnect-overlay {\n      display: none; position: fixed; inset: 0;\n      background: rgba(30,30,46,0.88); color: var(--subtext1);\n      justify-content: center; align-items: center;\n      font-size: 13px; z-index: 100; letter-spacing: 0.03em;\n    }\n    #reconnect-overlay.visible { display: flex; }\n    /* Trailing stream indicator: the same braille spinner as the thinking bubble,\n       inline at the end of the streaming text (not a green blinking block). */\n    .cursor {\n      color: var(--mauve); margin-left: 2px;\n      font-family: ui-monospace, monospace;\n    }\n    #status-panel { padding: 6px 12px; border-bottom: 1px solid var(--surface1);\n      color: var(--subtext1); white-space: pre-wrap; font-size: 13px; display: none; }\n    #prompt-card { position: fixed; left: 0; right: 0; bottom: 0; background: var(--mantle);\n      border-top: 2px solid var(--mauve); padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));\n      display: none; z-index: 50; max-height: 80dvh; overflow-y: auto; }\n    #prompt-card .q-label { color: var(--mauve); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }\n    #prompt-card .q { color: var(--text); margin-bottom: 12px; white-space: pre-wrap;\n      font-size: 15px; line-height: 1.5; }\n    #prompt-card .rec-panel { background: var(--surface0); border-left: 3px solid var(--green);\n      border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }\n    #prompt-card .rec-label { color: var(--green); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }\n    #prompt-card .rec-text { color: var(--text); font-size: 15px; line-height: 1.5;\n      white-space: pre-wrap; overflow-wrap: anywhere; }\n    #prompt-card textarea { width: 100%; background: var(--surface0); color: var(--text);\n      border: 1px solid var(--surface2); border-radius: 6px; padding: 10px; font-size: 15px;\n      font-family: inherit; line-height: 1.5; resize: vertical; margin-bottom: 4px; }\n    #prompt-card .row { display: flex; gap: 8px; margin-top: 12px; align-items: stretch;\n      flex-wrap: wrap; }\n    /* Recommendation answers can be long sentences, so stack them as a readable list. */\n    #prompt-card .row.stacked { flex-direction: column; align-items: stretch; }\n    #prompt-card .row.stacked button { flex: none; text-align: left; }\n    #prompt-card .row.stacked button.cancel { align-self: center; text-align: center; }\n    #prompt-card button { padding: 11px 16px; border-radius: 8px; border: none; cursor: pointer;\n      font-family: inherit; font-size: 14px; font-weight: 600; transition: filter .15s ease; }\n    #prompt-card button:hover { filter: brightness(1.08); }\n    #prompt-card button.primary { background: var(--green); color: var(--crust);\n      font-weight: 700; flex: 1; min-width: 160px; }\n    #prompt-card button.secondary { background: var(--surface1); color: var(--text);\n      flex: 1; min-width: 160px; }\n    #prompt-card button.cancel { margin-left: auto; align-self: center; background: transparent;\n      color: var(--subtext0); font-size: 12px; font-weight: 500; padding: 8px 10px; }\n    #prompt-card button.cancel:hover { color: var(--red); filter: none; }\n    #prompt-card button.cancel.armed { background: var(--red); color: var(--crust); font-weight: 700; }\n    .toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px);\n      right: calc(env(safe-area-inset-right, 0px) + 12px); max-width: calc(100vw - 24px);\n      padding: 8px 12px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-word;\n      background: var(--surface1); color: var(--text); z-index: 60; }\n    .toast.warning { background: var(--peach); color: var(--crust); }\n    .toast.error { background: var(--red); color: var(--crust); }\n    #viewer { position: fixed; inset: 24px; background: var(--mantle); border: 1px solid var(--surface2);\n      border-radius: 8px; padding: 16px; overflow: auto; white-space: pre-wrap;\n      overflow-wrap: anywhere; word-break: break-word; display: none; z-index: 70; }\n    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }";
+export declare const STYLES = "    :root {\n      --base: #1e1e2e; --mantle: #181825; --crust: #11111b;\n      --surface0: #313244; --surface1: #45475a; --surface2: #585b70;\n      --text: #cdd6f4; --subtext1: #a6adc8; --subtext0: #7f849c;\n      --mauve: #cba6f7; --blue: #89b4fa; --green: #a6e3a1; --red: #f38ba8;\n      --yellow: #f9e2af; --peach: #fab387; --teal: #94e2d5;\n    }\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n    body {\n      background: var(--base); color: var(--text);\n      font-family: ui-monospace, monospace;\n      /* --app-h is set from window.innerHeight (see setAppHeight) so the column\n         height is a stable pixel value across an orientation change. 100dvh is a\n         fallback for first paint / no-JS: iOS Safari interpolates dvh during the\n         rotation animation, which makes the whole flex column resize repeatedly\n         (\"spazzing out\") \u2014 a fixed px height does not. */\n      height: var(--app-h, 100dvh);\n      display: flex; flex-direction: column; overflow: hidden;\n      padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)\n               0px env(safe-area-inset-left, 0px);\n    }\n    #context-bar { height: 4px; background: var(--surface0); flex-shrink: 0; }\n    #context-bar-fill { height: 100%; background: var(--mauve); width: 0%; transition: width 0.4s ease; }\n    #header {\n      background: var(--mantle); padding: 8px 16px;\n      display: flex; justify-content: space-between; align-items: center;\n      font-size: 13px; flex-shrink: 0; border-bottom: 1px solid var(--surface0);\n    }\n    #header .title { font-weight: bold; color: var(--mauve); letter-spacing: 0.05em;\n      position: relative; animation: glitch 5s steps(1) infinite; }\n    @keyframes glitch {\n      0%, 88%, 100% { text-shadow: none; transform: translate(0, 0); }\n      90% { text-shadow: -1px 0 var(--red), 1px 0 var(--teal); transform: translate(1px, -1px); }\n      92% { text-shadow: 1px 0 var(--red), -1px 0 var(--blue); transform: translate(-1px, 1px); }\n      94% { text-shadow: -1px 0 var(--blue), 1px 0 var(--red); transform: translate(1px, 0); }\n      96% { text-shadow: 1px 0 var(--teal), -1px 0 var(--red); transform: translate(-1px, 0); }\n    }\n    @media (prefers-reduced-motion: reduce) { #header .title { animation: none; } }\n    #header .hgroup { display: flex; align-items: center; gap: 10px; }\n    #bell {\n      background: none; border: none; color: var(--subtext1); cursor: pointer;\n      font-size: 15px; line-height: 1; padding: 2px; font-family: inherit;\n    }\n    #bell:hover { color: var(--text); }\n    #bell.on { color: var(--mauve); }\n    #chat-wrap { position: relative; flex: 1; min-height: 0; display: flex; }\n    #chat-log {\n      flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px;\n      display: flex; flex-direction: column; gap: 8px;\n    }\n    /* Floating jump-to-latest button \u2014 only shown when scrolled away from the\n       bottom (toggled via .visible from the scroll handler). */\n    #scroll-bottom {\n      display: none; position: absolute; bottom: 16px; right: 16px; z-index: 40;\n      width: 36px; height: 36px; border-radius: 50%; cursor: pointer;\n      background: var(--surface1); color: var(--text); border: 1px solid var(--surface2);\n      font-family: inherit; font-size: 18px; line-height: 1; padding: 0;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n    }\n    #scroll-bottom:hover { background: var(--surface2); color: var(--mauve); }\n    #scroll-bottom.visible { display: block; }\n    #chat-log::-webkit-scrollbar { width: 6px; }\n    #chat-log::-webkit-scrollbar-track { background: transparent; }\n    #chat-log::-webkit-scrollbar-thumb { background: var(--surface2); border-radius: 3px; }\n    .bubble {\n      max-width: 82%; padding: 8px 12px; border-radius: 8px;\n      line-height: 1.6; white-space: pre-wrap; word-break: break-word; font-size: 13px;\n    }\n    .bubble.user { background: var(--surface1); color: var(--text); align-self: flex-end; }\n    .bubble.assistant { background: var(--surface0); color: var(--text); align-self: flex-start; }\n    .bubble.error {\n      background: var(--crust); color: var(--red); align-self: stretch;\n      max-width: 100%; border: 1px solid var(--red); font-size: 12px;\n    }\n    /* Persistent inline system note (e.g. context compaction) \u2014 a muted centered\n       divider, distinct from chat bubbles. */\n    .sysnote {\n      align-self: center; color: var(--subtext0); font-size: 11px;\n      font-family: ui-monospace, monospace; letter-spacing: 0.5px;\n      padding: 2px 10px; opacity: 0.85;\n    }\n    .bubble.thinking {\n      display: flex; gap: 5px; align-items: center; padding: 10px 14px;\n    }\n    .bubble.thinking .spinner {\n      color: var(--mauve); font-size: 15px; line-height: 1;\n      font-family: ui-monospace, monospace;\n    }\n    .tool-call {\n      background: var(--crust); border-radius: 6px; align-self: flex-start;\n      max-width: 90%; font-size: 12px; border: 1px solid var(--surface0);\n    }\n    .tool-call summary {\n      padding: 6px 10px; color: var(--subtext1); cursor: pointer;\n      user-select: none; list-style: none;\n      display: flex; align-items: center; gap: 8px;\n    }\n    .tool-call summary::-webkit-details-marker { display: none; }\n    .tool-call summary::before { content: \"\u25B6\"; flex-shrink: 0; font-size: 9px; color: var(--subtext0); }\n    .tool-call[open] > summary::before { content: \"\u25BC\"; }\n    .tool-call.error > summary { color: var(--red); }\n    /* The summary is a single line: the label ellipsizes (full text in the title\n       tooltip / on expand), badges and timing stay pinned to the right. */\n    .tool-label {\n      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n      font-family: ui-monospace, monospace;\n    }\n    .tool-badge { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }\n    .tool-elapsed { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }\n    .tool-call pre {\n      padding: 8px 12px; overflow-y: auto;\n      color: var(--subtext1); font-size: 11px; max-height: 280px;\n      border-top: 1px solid var(--surface0);\n      white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;\n    }\n    .tool-spin { color: var(--mauve); flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 13px; }\n    /* Line diff for edit/write tools (tints derived from --green/--red). */\n    .tool-diff { border-top: 1px solid var(--surface0); overflow-x: auto; }\n    .diff { font-family: ui-monospace, monospace; font-size: 11px; padding: 4px 0; }\n    .diff-line { white-space: pre; padding: 0 10px; }\n    .diff-sign { display: inline-block; width: 1ch; margin-right: 8px; color: var(--subtext0); }\n    .diff-add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }\n    .diff-del { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }\n    .diff-ctx { color: var(--subtext1); }\n    .code-block {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 6px; overflow: hidden; margin: 4px 0;\n      align-self: stretch; max-width: 100%; font-size: 12px;\n    }\n    .code-lang {\n      background: var(--surface0); color: var(--subtext0);\n      font-size: 10px; padding: 3px 10px; letter-spacing: 0.05em;\n    }\n    .code-block code {\n      display: block; padding: 10px 12px; overflow-x: auto;\n      color: var(--text); white-space: pre; line-height: 1.55;\n    }\n    .hl-kw  { color: var(--mauve); }\n    .hl-str { color: var(--green); }\n    .hl-cmt { color: var(--subtext0); font-style: italic; }\n    .hl-num { color: var(--blue); }\n    .hl-fn  { color: var(--yellow); }\n    /* Hand-rolled markdown, applied only to assistant bubbles + the recommendation\n       panel (both get the .md class from setContent). Block elements lay themselves\n       out, so switch off the container's pre-wrap for these. */\n    .md { white-space: normal; }\n    .md > :first-child { margin-top: 0; }\n    .md > :last-child { margin-bottom: 0; }\n    .md .md-h { color: var(--mauve); font-weight: 700; line-height: 1.3; margin: 10px 0 4px; }\n    .md .md-h1 { font-size: 1.35em; }\n    .md .md-h2 { font-size: 1.2em; }\n    .md .md-h3 { font-size: 1.08em; }\n    .md .md-h4, .md .md-h5, .md .md-h6 { font-size: 1em; }\n    .md .md-p { margin: 6px 0; }\n    .md .md-list { margin: 6px 0; padding-left: 22px; }\n    .md .md-list li { margin: 2px 0; }\n    .md .md-task { list-style: none; margin-left: -22px; }\n    .md .md-check { color: var(--green); }\n    .md .md-quote { border-left: 3px solid var(--surface2); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--subtext1); }\n    .md .md-hr { border: none; border-top: 1px solid var(--surface1); margin: 10px 0; }\n    .md a { color: var(--blue); text-decoration: underline; }\n    .md strong { color: var(--text); font-weight: 700; }\n    .md em { font-style: italic; }\n    .md del { color: var(--subtext0); }\n    .md .md-code {\n      background: var(--crust); border: 1px solid var(--surface0);\n      border-radius: 4px; padding: 1px 4px; font-size: 0.92em;\n    }\n    .md .md-table { border-collapse: collapse; margin: 8px 0; font-size: 0.95em; display: block; overflow-x: auto; }\n    .md .md-table th, .md .md-table td { border: 1px solid var(--surface1); padding: 4px 8px; text-align: left; }\n    .md .md-table th { background: var(--surface0); color: var(--subtext1); }\n    #input-bar {\n      background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));\n      display: flex; gap: 8px; flex-shrink: 0;\n      border-top: 1px solid var(--surface0);\n      position: relative;\n    }\n    #cmd-suggestions {\n      display: none; position: absolute; bottom: 100%; left: 16px; right: 16px;\n      background: var(--mantle); border: 1px solid var(--surface1);\n      border-bottom: none; border-radius: 8px 8px 0 0;\n      overflow: hidden; z-index: 10;\n    }\n    .cmd-item {\n      display: flex; align-items: baseline; gap: 10px;\n      padding: 7px 12px; cursor: pointer; font-size: 12px;\n      border-bottom: 1px solid var(--surface0);\n    }\n    .cmd-item:last-child { border-bottom: none; }\n    .cmd-item:hover, .cmd-item.active { background: var(--surface0); }\n    .cmd-item .cmd-name { color: var(--blue); font-weight: bold; flex-shrink: 0; }\n    .cmd-item .cmd-desc { color: var(--subtext0); }\n    #input {\n      flex: 1; background: var(--surface0); color: var(--text);\n      border: none; border-radius: 6px; padding: 8px 12px;\n      font-family: inherit; font-size: 13px; resize: none;\n      outline: none; line-height: 1.5; min-height: 36px; max-height: 120px;\n    }\n    #input::placeholder { color: var(--subtext0); }\n    #input:focus { box-shadow: 0 0 0 1px var(--mauve); }\n    #send {\n      background: var(--blue); color: var(--crust); border: none;\n      border-radius: 6px; padding: 8px 16px; font-weight: bold;\n      cursor: pointer; font-size: 13px; font-family: inherit;\n      white-space: nowrap; align-self: flex-end;\n    }\n    #send:disabled, #input:disabled { opacity: 0.45; cursor: not-allowed; }\n    #reconnect-overlay {\n      display: none; position: fixed; inset: 0;\n      background: rgba(30,30,46,0.88); color: var(--subtext1);\n      justify-content: center; align-items: center;\n      font-size: 13px; z-index: 100; letter-spacing: 0.03em;\n    }\n    #reconnect-overlay.visible { display: flex; }\n    /* Trailing stream indicator: the same braille spinner as the thinking bubble,\n       inline at the end of the streaming text (not a green blinking block). */\n    .cursor {\n      color: var(--mauve); margin-left: 2px;\n      font-family: ui-monospace, monospace;\n    }\n    #status-panel { padding: 6px 12px; border-bottom: 1px solid var(--surface1);\n      color: var(--subtext1); white-space: pre-wrap; font-size: 13px; display: none; }\n    #prompt-card { position: fixed; left: 0; right: 0; bottom: 0; background: var(--mantle);\n      border-top: 2px solid var(--mauve); padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));\n      display: none; z-index: 50; max-height: 80dvh; overflow-y: auto; }\n    #prompt-card .q-label { color: var(--mauve); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }\n    #prompt-card .q { color: var(--text); margin-bottom: 12px; white-space: pre-wrap;\n      font-size: 15px; line-height: 1.5; }\n    #prompt-card .rec-panel { background: var(--surface0); border-left: 3px solid var(--green);\n      border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; }\n    #prompt-card .rec-label { color: var(--green); font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }\n    #prompt-card .rec-text { color: var(--text); font-size: 15px; line-height: 1.5;\n      white-space: pre-wrap; overflow-wrap: anywhere; }\n    #prompt-card textarea { width: 100%; background: var(--surface0); color: var(--text);\n      border: 1px solid var(--surface2); border-radius: 6px; padding: 10px; font-size: 15px;\n      font-family: inherit; line-height: 1.5; resize: vertical; margin-bottom: 4px; }\n    #prompt-card .row { display: flex; gap: 8px; margin-top: 12px; align-items: stretch;\n      flex-wrap: wrap; }\n    /* Recommendation answers can be long sentences, so stack them as a readable list. */\n    #prompt-card .row.stacked { flex-direction: column; align-items: stretch; }\n    #prompt-card .row.stacked button { flex: none; text-align: left; }\n    #prompt-card .row.stacked button.cancel { align-self: center; text-align: center; }\n    #prompt-card button { padding: 11px 16px; border-radius: 8px; border: none; cursor: pointer;\n      font-family: inherit; font-size: 14px; font-weight: 600; transition: filter .15s ease; }\n    #prompt-card button:hover { filter: brightness(1.08); }\n    #prompt-card button.primary { background: var(--green); color: var(--crust);\n      font-weight: 700; flex: 1; min-width: 160px; }\n    #prompt-card button.secondary { background: var(--surface1); color: var(--text);\n      flex: 1; min-width: 160px; }\n    #prompt-card button.cancel { margin-left: auto; align-self: center; background: transparent;\n      color: var(--subtext0); font-size: 12px; font-weight: 500; padding: 8px 10px; }\n    #prompt-card button.cancel:hover { color: var(--red); filter: none; }\n    #prompt-card button.cancel.armed { background: var(--red); color: var(--crust); font-weight: 700; }\n    .toast { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px);\n      right: calc(env(safe-area-inset-right, 0px) + 12px); max-width: calc(100vw - 24px);\n      padding: 8px 12px; border-radius: 6px; overflow-wrap: anywhere; word-break: break-word;\n      background: var(--surface1); color: var(--text); z-index: 60; }\n    .toast.warning { background: var(--peach); color: var(--crust); }\n    .toast.error { background: var(--red); color: var(--crust); }\n    #viewer { position: fixed; inset: 24px; background: var(--mantle); border: 1px solid var(--surface2);\n      border-radius: 8px; padding: 16px; overflow: auto; white-space: pre-wrap;\n      overflow-wrap: anywhere; word-break: break-word; display: none; z-index: 70; }\n    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }\n    /* Desktop: center the transcript/status/input in a readable column instead of\n       hugging the left edge. The scrollbar stays at the true window edge; only the\n       content is inset. Mobile (below 960px) is unchanged. */\n    @media (min-width: 960px) {\n      #chat-log { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }\n      #status-panel { padding-left: calc((100% - 920px) / 2 + 12px); padding-right: calc((100% - 920px) / 2 + 12px); }\n      #input-bar { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }\n      #cmd-suggestions { left: calc((100% - 920px) / 2 + 16px); right: calc((100% - 920px) / 2 + 16px); }\n    }";

package/dist/remote/ui-styles.js

@@ -93,19 +93,35 @@ export const STYLES = `    :root {
     .tool-call summary {
       padding: 6px 10px; color: var(--subtext1); cursor: pointer;
       user-select: none; list-style: none;
-      overflow-wrap: anywhere; word-break: break-word;
+      display: flex; align-items: center; gap: 8px;
     }
     .tool-call summary::-webkit-details-marker { display: none; }
-    .tool-call summary::before { content: "▶  "; }
-    .tool-call[open] > summary::before { content: "▼  "; }
+    .tool-call summary::before { content: "▶"; flex-shrink: 0; font-size: 9px; color: var(--subtext0); }
+    .tool-call[open] > summary::before { content: "▼"; }
     .tool-call.error > summary { color: var(--red); }
+    /* The summary is a single line: the label ellipsizes (full text in the title
+       tooltip / on expand), badges and timing stay pinned to the right. */
+    .tool-label {
+      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+      font-family: ui-monospace, monospace;
+    }
+    .tool-badge { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }
+    .tool-elapsed { flex-shrink: 0; color: var(--subtext0); font-size: 11px; }
     .tool-call pre {
       padding: 8px 12px; overflow-y: auto;
       color: var(--subtext1); font-size: 11px; max-height: 280px;
       border-top: 1px solid var(--surface0);
       white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
     }
-    .tool-spin { color: var(--mauve); margin-left: 6px; font-family: ui-monospace, monospace; font-size: 13px; }
+    .tool-spin { color: var(--mauve); flex-shrink: 0; font-family: ui-monospace, monospace; font-size: 13px; }
+    /* Line diff for edit/write tools (tints derived from --green/--red). */
+    .tool-diff { border-top: 1px solid var(--surface0); overflow-x: auto; }
+    .diff { font-family: ui-monospace, monospace; font-size: 11px; padding: 4px 0; }
+    .diff-line { white-space: pre; padding: 0 10px; }
+    .diff-sign { display: inline-block; width: 1ch; margin-right: 8px; color: var(--subtext0); }
+    .diff-add { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
+    .diff-del { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
+    .diff-ctx { color: var(--subtext1); }
     .code-block {
       background: var(--crust); border: 1px solid var(--surface0);
       border-radius: 6px; overflow: hidden; margin: 4px 0;
@@ -124,6 +140,35 @@ export const STYLES = `    :root {
     .hl-cmt { color: var(--subtext0); font-style: italic; }
     .hl-num { color: var(--blue); }
     .hl-fn  { color: var(--yellow); }
+    /* Hand-rolled markdown, applied only to assistant bubbles + the recommendation
+       panel (both get the .md class from setContent). Block elements lay themselves
+       out, so switch off the container's pre-wrap for these. */
+    .md { white-space: normal; }
+    .md > :first-child { margin-top: 0; }
+    .md > :last-child { margin-bottom: 0; }
+    .md .md-h { color: var(--mauve); font-weight: 700; line-height: 1.3; margin: 10px 0 4px; }
+    .md .md-h1 { font-size: 1.35em; }
+    .md .md-h2 { font-size: 1.2em; }
+    .md .md-h3 { font-size: 1.08em; }
+    .md .md-h4, .md .md-h5, .md .md-h6 { font-size: 1em; }
+    .md .md-p { margin: 6px 0; }
+    .md .md-list { margin: 6px 0; padding-left: 22px; }
+    .md .md-list li { margin: 2px 0; }
+    .md .md-task { list-style: none; margin-left: -22px; }
+    .md .md-check { color: var(--green); }
+    .md .md-quote { border-left: 3px solid var(--surface2); margin: 6px 0; padding: 2px 0 2px 10px; color: var(--subtext1); }
+    .md .md-hr { border: none; border-top: 1px solid var(--surface1); margin: 10px 0; }
+    .md a { color: var(--blue); text-decoration: underline; }
+    .md strong { color: var(--text); font-weight: 700; }
+    .md em { font-style: italic; }
+    .md del { color: var(--subtext0); }
+    .md .md-code {
+      background: var(--crust); border: 1px solid var(--surface0);
+      border-radius: 4px; padding: 1px 4px; font-size: 0.92em;
+    }
+    .md .md-table { border-collapse: collapse; margin: 8px 0; font-size: 0.95em; display: block; overflow-x: auto; }
+    .md .md-table th, .md .md-table td { border: 1px solid var(--surface1); padding: 4px 8px; text-align: left; }
+    .md .md-table th { background: var(--surface0); color: var(--subtext1); }
     #input-bar {
       background: var(--mantle); padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
       display: flex; gap: 8px; flex-shrink: 0;
@@ -217,4 +262,13 @@ export const STYLES = `    :root {
     #viewer { position: fixed; inset: 24px; background: var(--mantle); border: 1px solid var(--surface2);
       border-radius: 8px; padding: 16px; overflow: auto; white-space: pre-wrap;
       overflow-wrap: anywhere; word-break: break-word; display: none; z-index: 70; }
-    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }`;
+    #viewer .close { position: absolute; top: 8px; right: 12px; cursor: pointer; color: var(--subtext0); }
+    /* Desktop: center the transcript/status/input in a readable column instead of
+       hugging the left edge. The scrollbar stays at the true window edge; only the
+       content is inset. Mobile (below 960px) is unchanged. */
+    @media (min-width: 960px) {
+      #chat-log { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }
+      #status-panel { padding-left: calc((100% - 920px) / 2 + 12px); padding-right: calc((100% - 920px) / 2 + 12px); }
+      #input-bar { padding-left: calc((100% - 920px) / 2); padding-right: calc((100% - 920px) / 2); }
+      #cmd-suggestions { left: calc((100% - 920px) / 2 + 16px); right: calc((100% - 920px) / 2 + 16px); }
+    }`;

package/dist/remote/ui-tools.d.ts

@@ -0,0 +1,2 @@
+/** Emitted client JS (top-level function declarations). */
+export declare function toolsModule(): string;

package/dist/remote/ui-tools.js

@@ -0,0 +1,113 @@
+// Tool-call presentation helpers, shipped as a JS string and concatenated into
+// the page by ui.ts. Turns raw {toolName, args} into a readable one-line summary,
+// a +N −M diff badge, and an expandable line-diff body for edit/write tools —
+// replacing the old "name + JSON.stringify(args) hard-sliced at 64 chars".
+//
+// Depends on escHtml (ui-render.ts) — both land in the same <script>.
+/** Emitted client JS (top-level function declarations). */
+export function toolsModule() {
+    return `    // args arrives as an object (live tool_start / snapshot part) or a JSON string.
+    function toolArgs(args) {
+      if (args && typeof args === 'object') return args;
+      if (typeof args === 'string') { try { return JSON.parse(args); } catch (e) { return null; } }
+      return null;
+    }
+
+    // A readable one-line summary. Falls back to the old name+JSON form (but with NO
+    // hard 64-char slice — the summary line ellipsizes via CSS, full text on hover).
+    function toolSummary(toolName, args) {
+      var name = (toolName || '').toLowerCase();
+      var a = toolArgs(args);
+      function s(v) { return v == null ? '' : String(v); }
+      if (a) {
+        var path = a.path != null ? a.path : a.file_path;
+        if (name.indexOf('bash') >= 0 && a.command != null) return '$ ' + s(a.command);
+        if (name === 'read' && path != null) return 'read ' + s(path);
+        if ((name === 'edit' || name === 'multiedit' || name === 'write' || name === 'str_replace') && path != null) return s(path);
+        if (name === 'grep' || name === 'find' || name === 'glob' || name === 'search') {
+          var pat = a.pattern != null ? a.pattern : (a.query != null ? a.query : a.glob);
+          var loc = a.path != null ? a.path : a.glob;
+          return name + ' ' + s(pat) + (loc && loc !== pat ? '  ' + s(loc) : '');
+        }
+      }
+      var argStr = typeof args === 'string' ? args : (args === undefined ? '' : JSON.stringify(args));
+      return toolName + (argStr ? ': ' + argStr : '');
+    }
+
+    // Line diff via LCS. Bounded: a huge pair falls back to "all removed / all added"
+    // rather than allocating an O(m*n) table that could hang the tab.
+    function lcsDiff(oldText, newText) {
+      // Treat '' / null as ZERO lines (not one empty line) so a new-file write shows
+      // as all-added with no phantom "removed blank line".
+      var a = (oldText == null || oldText === '') ? [] : String(oldText).split('\\n');
+      var b = (newText == null || newText === '') ? [] : String(newText).split('\\n');
+      var m = a.length, n = b.length;
+      var rows = [];
+      if (m * n > 250000) {
+        for (var x = 0; x < m; x++) rows.push({t: '-', s: a[x]});
+        for (var y = 0; y < n; y++) rows.push({t: '+', s: b[y]});
+        return rows;
+      }
+      var dp = [];
+      for (var i = 0; i <= m; i++) dp.push(new Array(n + 1).fill(0));
+      for (var i2 = m - 1; i2 >= 0; i2--)
+        for (var j2 = n - 1; j2 >= 0; j2--)
+          dp[i2][j2] = a[i2] === b[j2] ? dp[i2 + 1][j2 + 1] + 1 : Math.max(dp[i2 + 1][j2], dp[i2][j2 + 1]);
+      var i = 0, j = 0;
+      while (i < m && j < n) {
+        if (a[i] === b[j]) { rows.push({t: ' ', s: a[i]}); i++; j++; }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) { rows.push({t: '-', s: a[i]}); i++; }
+        else { rows.push({t: '+', s: b[j]}); j++; }
+      }
+      while (i < m) { rows.push({t: '-', s: a[i++]}); }
+      while (j < n) { rows.push({t: '+', s: b[j++]}); }
+      return rows;
+    }
+
+    function diffStats(oldText, newText) {
+      var rows = lcsDiff(oldText, newText), add = 0, rem = 0;
+      for (var k = 0; k < rows.length; k++) { if (rows[k].t === '+') add++; else if (rows[k].t === '-') rem++; }
+      return {added: add, removed: rem};
+    }
+
+    function renderDiff(oldText, newText) {
+      var rows = lcsDiff(oldText, newText);
+      var html = '<div class="diff">';
+      for (var k = 0; k < rows.length; k++) {
+        var r = rows[k];
+        var cls = r.t === '+' ? 'diff-add' : (r.t === '-' ? 'diff-del' : 'diff-ctx');
+        html += '<div class="diff-line ' + cls + '"><span class="diff-sign">' + (r.t === ' ' ? ' ' : r.t) + '</span>' + escHtml(r.s) + '</div>';
+      }
+      return html + '</div>';
+    }
+
+    // The old/new text for an edit/write tool's diff, or null if not a diffable tool.
+    function toolDiffPair(toolName, args) {
+      var name = (toolName || '').toLowerCase();
+      var a = toolArgs(args);
+      if (!a) return null;
+      if (name === 'edit' || name === 'multiedit' || name === 'str_replace') {
+        if (a.old_string != null || a.new_string != null) return {old: a.old_string, neu: a.new_string};
+      }
+      if (name === 'write' && a.content != null) return {old: '', neu: a.content};
+      return null;
+    }
+
+    function toolBadge(toolName, args) {
+      var pair = toolDiffPair(toolName, args);
+      return pair ? diffStats(pair.old, pair.neu) : null;
+    }
+
+    function toolDiffHtml(toolName, args) {
+      var pair = toolDiffPair(toolName, args);
+      return pair ? renderDiff(pair.old, pair.neu) : null;
+    }
+
+    function fmtElapsed(ms) {
+      if (ms == null || isNaN(ms)) return '';
+      if (ms < 1000) return Math.round(ms) + 'ms';
+      var sec = ms / 1000;
+      return (sec < 10 ? sec.toFixed(1) : Math.round(sec)) + 's';
+    }
+`;
+}

package/dist/remote/ui.js

@@ -1,5 +1,8 @@
 import { STYLES } from './ui-styles.js';
 import { clientScript } from './ui-script.js';
+import { renderModule } from './ui-render.js';
+import { highlightModule } from './ui-highlight.js';
+import { toolsModule } from './ui-tools.js';
 export function html(wsUrl) {
     const iconSvg = encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">`
         + `<rect width="180" height="180" rx="38" fill="#1e1e2e"/>`
@@ -61,6 +64,9 @@ ${STYLES}
   </div>
   <div id="viewer"><span class="close" id="viewer-close">&#x2715;</span><div id="viewer-body"></div></div>
   <script>
+${renderModule()}
+${highlightModule()}
+${toolsModule()}
 ${clientScript(wsUrl)}
   </script>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mjasnikovs/pi-task",
-    "version": "0.17.21",
+    "version": "0.17.22",
     "description": "Deterministic task planning and spec-orchestration for local models — crash-safe /task pipelines with verify/enforce gates, a real-time remote web view, and web/docs/fetch/worker subagent tools.",
     "type": "module",
     "main": "./dist/index.js",