@aparte/core 0.22.0 → 0.24.0

package/dist/{dialog-triggers-3Rk7PuZa.js → dialog-triggers-BqXRdHWZ.js}

@@ -1,4 +1,4 @@
-import { unansweredTail, runStreamAgent } from "@aparte/engine";
+import { toolRefusal as toolRefusal$1, unansweredTail, runStreamAgent } from "@aparte/engine";
 import { A as APARTE_ICON_GLYPHS } from "./glyphs-C8z2oJUg.js";
 function contentToText(content) {
   if (typeof content === "string") return content;
@@ -18,6 +18,7 @@ var AparteErrorCode = /* @__PURE__ */ ((AparteErrorCode2) => {
   AparteErrorCode2["PROVIDER_ERROR"] = "PROVIDER_ERROR";
   AparteErrorCode2["PROVIDER_UNAVAILABLE"] = "PROVIDER_UNAVAILABLE";
   AparteErrorCode2["PROVIDER_POLICY"] = "PROVIDER_POLICY";
+  AparteErrorCode2["MAX_TURNS_EXCEEDED"] = "MAX_TURNS_EXCEEDED";
   AparteErrorCode2["UNKNOWN_ERROR"] = "UNKNOWN_ERROR";
   return AparteErrorCode2;
 })(AparteErrorCode || {});
@@ -98,7 +99,7 @@ const APARTE_DEFAULT_LOCALE = {
   elicitationNo: "No",
   elicitationAnswerLabel: "Your answer",
   approvalInstructionPlaceholder: "Or tell it what to do instead…",
-  approvalAsk: "Run {tool}?",
+  approvalAsk: "Allow {tool}?",
   approvalWaiting: "Waiting",
   scrollToBottom: "Scroll to bottom",
   suggestionsLabel: "Suggested prompts",
@@ -111,6 +112,18 @@ const APARTE_DEFAULT_LOCALE = {
   toolFailed: "Failed",
   toolInput: "Input",
   toolOutput: "Output",
+  toolRejectedSaid: "You said: “{instruction}”",
+  toolRefusedByPolicy: "Refused by policy",
+  toolNotRunAfterRefusal: "Not run: an earlier call was refused",
+  toolTimedOut: "Timed out",
+  toolUnavailable: "Not available here",
+  toolNoApprover: "No one could approve it",
+  toolTurnLimit: "Turn limit reached",
+  maxTurnsReached: "Stopped after {n} turns to avoid an endless loop.",
+  questionDeclined: "You declined to answer.",
+  artifactNotCreated: "Not created",
+  thoughtFor: "Thought for {duration}",
+  thought: "Thought",
   approvalOptionsLabel: "Your decision",
   approvalArgsLabel: "Arguments",
   actionUpload: "Attach file",
@@ -160,6 +173,8 @@ const APARTE_DEFAULT_LOCALE = {
   archiveConversation: "Archive",
   unarchiveConversation: "Unarchive",
   conversationActions: "Conversation actions",
+  conversationRunning: "Answering",
+  conversationWaiting: "Waiting for you",
   renameConversation: "Rename",
   conversationTitle: "Conversation title",
   pinConversation: "Pin",
@@ -1076,25 +1091,33 @@ function dispatchLifecycleEvent(target, name, detail, targetId) {
   const stamped = detail && typeof detail === "object" ? { targetId: id, ...detail } : detail;
   target.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail: stamped }));
 }
+const toolRefusal = toolRefusal$1;
 function createStreamAdapter(opts) {
   const { target, config, messageId, targetId } = opts;
   let parser = new AparteStreamParser({ blocks: config.getStreamBlocks() });
   let streaming = /* @__PURE__ */ new Set();
   let thinkingId = null;
   const toolSegments = /* @__PURE__ */ new Map();
-  const addedTools = /* @__PURE__ */ new Set();
   const settle = (toolCallId, update) => {
     const id = `tool-${toolCallId}`;
     target.updateSegment?.(id, toolSegments.has(id) ? update : { ...update, deferred: void 0 });
   };
   let thinkingContent = "";
   let thinkingCollapsed = false;
+  const settleThinking = (fold) => {
+    if (!thinkingId || thinkingCollapsed) return;
+    const chatConfig = typeof Element !== "undefined" && target instanceof Element ? resolveConfig(target) : config;
+    const keepOpen = !fold || chatConfig.getSegmentDefaults("thinking")?.collapsed === false;
+    target.updateSegment?.(thinkingId, keepOpen ? { isStreaming: false } : { collapsed: true, isStreaming: false });
+    thinkingCollapsed = true;
+  };
   return (e) => {
     switch (e.type) {
       case "run-start":
         target.updateMessage?.(messageId, { status: "streaming" });
         break;
       case "turn-start":
+        settleThinking(false);
         parser = new AparteStreamParser({ blocks: config.getStreamBlocks() });
         streaming = /* @__PURE__ */ new Set();
         thinkingId = null;
@@ -1107,7 +1130,8 @@ function createStreamAdapter(opts) {
           const seg = {
             id: `think-${uuid()}`,
             type: "thinking",
-            content: thinkingContent
+            content: thinkingContent,
+            isStreaming: true
           };
           thinkingId = seg.id;
           streaming.add(seg.id);
@@ -1118,12 +1142,7 @@ function createStreamAdapter(opts) {
         break;
       }
       case "text-delta": {
-        if (thinkingId && !thinkingCollapsed) {
-          const chatConfig = typeof Element !== "undefined" && target instanceof Element ? resolveConfig(target) : config;
-          const keepOpen = chatConfig.getSegmentDefaults("thinking")?.collapsed === false;
-          target.updateSegment?.(thinkingId, keepOpen ? { isStreaming: false } : { collapsed: true, isStreaming: false });
-          thinkingCollapsed = true;
-        }
+        settleThinking(true);
         const result = parser.parse(e.delta);
         for (const segment of result.segments) {
           if (!streaming.has(segment.id)) {
@@ -1153,6 +1172,7 @@ function createStreamAdapter(opts) {
         break;
       }
       case "tool-start": {
+        settleThinking(false);
         const toolSeg = {
           id: `tool-${e.toolCallId}`,
           type: "tool_call",
@@ -1161,17 +1181,8 @@ function createStreamAdapter(opts) {
         };
         toolSegments.set(toolSeg.id, toolSeg);
         const renderer = config.getToolRenderer(e.name);
-        if (renderer) {
-          injectToolRendererStyles(e.name, renderer);
-          const html = renderer.render(toolSeg);
-          if (html) {
-            target.addSegment?.(toolSeg);
-            addedTools.add(toolSeg.id);
-          }
-        } else {
-          target.addSegment?.(toolSeg);
-          addedTools.add(toolSeg.id);
-        }
+        if (renderer) injectToolRendererStyles(e.name, renderer);
+        target.addSegment?.(toolSeg);
         break;
       }
       case "tool-awaiting-approval":
@@ -1182,7 +1193,11 @@ function createStreamAdapter(opts) {
         settle(e.toolCallId, { status: "pending" });
         break;
       case "tool-rejected":
-        settle(e.toolCallId, { status: "rejected", result: e.reason });
+        settle(e.toolCallId, {
+          status: "rejected",
+          result: e.reason,
+          ...e.by ? { refusal: e.instruction ? { by: e.by, instruction: e.instruction } : { by: e.by } } : {}
+        });
         break;
       case "tool-resolved":
         settle(e.toolCallId, {
@@ -1192,7 +1207,7 @@ function createStreamAdapter(opts) {
         });
         break;
       case "tool-aborted":
-        settle(e.toolCallId, { status: "aborted" });
+        settle(e.toolCallId, e.cause ? { status: "aborted", abortCause: e.cause } : { status: "aborted" });
         break;
       case "tool-failed":
         settle(e.toolCallId, { status: "failed", result: e.error });
@@ -1202,11 +1217,14 @@ function createStreamAdapter(opts) {
           target.addSegment?.({
             id: `max-turns-${uuid()}`,
             type: "error",
-            content: `Stopped after ${e.limit} tool calls to prevent an infinite loop.`,
-            details: "MAX_TURNS_EXCEEDED"
+            // The CHAT's text, in its language — resolved from the target, as the
+            // reasoning default is: a client on the global config also answers a
+            // chat with its own.
+            content: (typeof Element !== "undefined" && target instanceof Element ? resolveConfig(target) : config).t("maxTurnsReached").replace("{n}", () => String(e.limit)),
+            code: AparteErrorCode.MAX_TURNS_EXCEEDED
           });
         } else if (e.toolCallId) {
-          settle(e.toolCallId, { status: "aborted" });
+          settle(e.toolCallId, { status: "aborted", abortCause: "turn-limit" });
         }
         break;
       case "run-aborted":
@@ -1217,15 +1235,7 @@ function createStreamAdapter(opts) {
         for (const p of e.pending) {
           const id = `tool-${p.toolCallId}`;
           const deferred = { reason: p.reason, ...typeof ticket === "string" ? { ticket } : {} };
-          if (addedTools.has(id) || !toolSegments.has(id)) {
-            target.updateSegment?.(id, { deferred });
-          } else {
-            const seg = toolSegments.get(id);
-            if (seg) {
-              target.addSegment?.({ ...seg, deferred });
-              addedTools.add(id);
-            }
-          }
+          target.updateSegment?.(id, { deferred });
         }
         target.updateMessage?.(messageId, { status: "completed" });
         if (e.usage) {
@@ -1494,7 +1504,8 @@ function createAparteAgentHandler(options) {
           // Reached only for a server `deny`: an `ask` is deferred to the page.
           approvalResolver: async (call) => ({
             approved: false,
-            reason: rule(call)?.reason?.trim() || "Tool execution was refused by the server policy."
+            reason: rule(call)?.reason?.trim() || "Tool execution was refused by the server policy.",
+            by: "policy"
           }),
           deferral: { outcomes },
           emitter,
@@ -1848,6 +1859,56 @@ function chatBoundaryOf(el2) {
   }
   return null;
 }
+class ToolTable {
+  exact = /* @__PURE__ */ new Map();
+  // Keyed by the pattern's spelling, so two RegExp instances of one pattern are one
+  // entry; a Map keeps first-insertion order, which is the order patterns are tried in.
+  patterns = /* @__PURE__ */ new Map();
+  any;
+  /** The value registered under exactly this matcher — not a resolution. */
+  get(match) {
+    if (match instanceof RegExp) return this.patterns.get(String(match))?.value;
+    return match === "*" ? this.any : this.exact.get(match);
+  }
+  set(match, value) {
+    if (match instanceof RegExp) {
+      const key = String(match);
+      const entry = this.patterns.get(key);
+      if (entry) entry.value = value;
+      else this.patterns.set(key, { re: match, value });
+    } else if (match === "*") {
+      this.any = value;
+    } else {
+      this.exact.set(match, value);
+    }
+  }
+  delete(match) {
+    if (match instanceof RegExp) this.patterns.delete(String(match));
+    else if (match === "*") this.any = void 0;
+    else this.exact.delete(match);
+  }
+  /** The value that applies to a tool named `name`, and how specifically it names it. */
+  resolve(name) {
+    if (typeof name !== "string") return void 0;
+    const own = this.exact.get(name);
+    if (own !== void 0) return { value: own, level: "exact" };
+    for (const { re, value } of this.patterns.values()) {
+      if (name.search(re) !== -1) return { value, level: "pattern" };
+    }
+    return this.any !== void 0 ? { value: this.any, level: "any" } : void 0;
+  }
+  /** Every value registered, whatever its matcher. */
+  values() {
+    const out = [...this.exact.values(), ...[...this.patterns.values()].map((p) => p.value)];
+    if (this.any !== void 0) out.push(this.any);
+    return out;
+  }
+  clear() {
+    this.exact.clear();
+    this.patterns.clear();
+    this.any = void 0;
+  }
+}
 const APARTE_DEFAULT_BUBBLE_ACTIONS = {
   copy: true,
   retry: false,
@@ -1867,6 +1928,7 @@ function renderingVersionOf(cfg) {
 function bumpRenderingVersion(cfg) {
   renderingVersions.set(cfg, renderingVersionOf(cfg) + 1);
 }
+const ELEMENT_SHAPING = ["hidden", "open", "details", "quiet"];
 function drawingOf(provider, name) {
   if (!provider || !(name in provider) || name in Object.prototype) return void 0;
   const fn = provider[name];
@@ -1975,9 +2037,9 @@ class AparteConfig {
   _elicitationQueue = /* @__PURE__ */ new Map();
   // Tool Registry
   _tools = /* @__PURE__ */ new Map();
-  _toolRenderers = /* @__PURE__ */ new Map();
-  _toolSummaries = /* @__PURE__ */ new Map();
-  _toolInputFormatters = /* @__PURE__ */ new Map();
+  // By exact name, pattern or '*' — see `tool-table.ts` for the one resolution rule.
+  _toolRenderers = new ToolTable();
+  _toolDisplays = new ToolTable();
   /** Tagged blocks the stream parser recognises in the prose — see {@link registerStreamBlock}. */
   _streamBlocks = /* @__PURE__ */ new Map();
   _segmentDefaults = /* @__PURE__ */ new Map();
@@ -2810,16 +2872,20 @@ class AparteConfig {
    * instead — see [Custom tool
    * renderer](https://apartejs.dev/guides/tools/#custom-tool-renderer).
    *
-   * @example
-   * // Hide the segment entirely (UI-only tool like ask_user)
-   * aparteGlobalConfig.registerToolRenderer('ask_user', { render: () => '' });
+   * The matcher is an exact name, a RegExp, or `'*'` — the same rule as
+   * {@link registerToolDisplay}: the exact name wins, then the first pattern registered,
+   * then `'*'`, which is one renderer for every tool without its own.
    *
    * @example
    * // Custom pill for a web-search tool
    * aparteGlobalConfig.registerToolRenderer('web_search', { render: (seg) => `<div class="aparte-tool-label">Searching...</div>` });
+   *
+   * @example
+   * // One look for every tool an MCP server brings
+   * aparteGlobalConfig.registerToolRenderer(/^mcp__/, { render: (seg) => myMcpCard(seg) });
    */
-  registerToolRenderer(toolName, renderer) {
-    this._toolRenderers.set(toolName, renderer);
+  registerToolRenderer(match, renderer) {
+    this._toolRenderers.set(match, renderer);
   }
   /**
    * Field defaults for a segment TYPE, filled in when a segment enters a message.
@@ -2859,13 +2925,93 @@ class AparteConfig {
   clearSegmentDefaults(type) {
     this._segmentDefaults.delete(type);
   }
-  /** Unregister a per-tool renderer */
-  unregisterToolRenderer(toolName) {
-    this._toolRenderers.delete(toolName);
+  /** Unregister the renderer registered under this matcher. */
+  unregisterToolRenderer(match) {
+    this._toolRenderers.delete(match);
   }
-  /** Get the renderer for a specific tool name. Returns undefined if none registered. */
+  /** The renderer that draws a tool named `toolName` — exact, pattern or `'*'` — or undefined. */
   getToolRenderer(toolName) {
-    return this._toolRenderers.get(toolName);
+    return this._toolRenderers.resolve(toolName)?.value;
+  }
+  /**
+   * Say how a tool's calls are shown: a label in place of its identifier, an icon, what
+   * the call targets, how its arguments read, whether its row is drawn at all, and
+   * whether it opens.
+   *
+   * The matcher is an exact name, a RegExp, or `'*'` — "every tool nothing more
+   * specific describes". One entry per matcher, and calls MERGE into it; the entry that
+   * applies to a tool is the exact name's, else the first pattern registered that
+   * matches, else `'*'`'s — whole, never a mix of two. Registering tells the chats on
+   * the page, so a label reaches rows already drawn.
+   *
+   * Core never makes a label up: without one the row shows the identifier, which is the
+   * app's wire format.
+   *
+   * @example
+   * aparteGlobalConfig.registerToolDisplay('web_search', {
+   *     label: 'Web search',
+   *     icon: 'search',
+   *     summary: (segment) => String(segment.toolCall.input['query'] ?? ''),
+   * });
+   *
+   * @example
+   * // A consumer chat: the reply is what matters; the calls stay in the history.
+   * aparteGlobalConfig.registerToolDisplay('*', { hidden: true });
+   *
+   * @example
+   * // The line, and no raw JSON behind it: nothing, or a detail of the app's own.
+   * aparteGlobalConfig.registerToolDisplay('read_file', { label: 'Reading a file', details: false });
+   * aparteGlobalConfig.registerToolDisplay('web_search', {
+   *     label: 'Searched the web',
+   *     details: (segment) => sourcesList(segment.result),
+   * });
+   */
+  registerToolDisplay(match, display) {
+    const before = this._toolDisplays.get(match);
+    const next = { ...before, ...display };
+    this._toolDisplays.set(match, next);
+    const shapes = ELEMENT_SHAPING.some((field) => before?.[field] !== next[field]) || before === void 0 && this._anotherShapes(next);
+    if (shapes) bumpRenderingVersion(this);
+    this._notify();
+  }
+  /** Forget the display registered under this matcher. */
+  unregisterToolDisplay(match) {
+    const before = this._toolDisplays.get(match);
+    this._toolDisplays.delete(match);
+    const shapes = ELEMENT_SHAPING.some((field) => before?.[field] !== void 0) || before !== void 0 && this._anotherShapes(before);
+    if (shapes) bumpRenderingVersion(this);
+    this._notify();
+  }
+  /** Whether an entry other than `own` sets a field that shapes a row. */
+  _anotherShapes(own) {
+    return this._toolDisplays.values().some((entry) => entry !== own && ELEMENT_SHAPING.some((field) => entry[field] !== void 0));
+  }
+  /** How a tool named `toolName` is shown — the entry that applies to it — or undefined. */
+  getToolDisplay(toolName) {
+    return this._toolDisplays.resolve(toolName)?.value;
+  }
+  /**
+   * Whether a tool's calls draw nothing: its display says `hidden`, and no renderer is
+   * registered for it MORE specifically. A `'*'` hide therefore leaves a tool with its
+   * own renderer drawn (a plugin's receipt), while a hide as specific as the renderer
+   * wins — the app said so for that tool. A hidden call stays in the message, in storage
+   * and in the model's history; only its row is empty.
+   */
+  isToolHidden(toolName) {
+    const display = this._toolDisplays.resolve(toolName);
+    if (!display?.value.hidden) return false;
+    const renderer = this._toolRenderers.resolve(toolName);
+    const rank = { exact: 2, pattern: 1, any: 0 };
+    return !renderer || rank[renderer.level] <= rank[display.level];
+  }
+  /** Drop one field of the entry under `match`, and the entry when nothing is left. */
+  _dropToolDisplayField(match, field) {
+    const entry = this._toolDisplays.get(match);
+    if (!entry || !(field in entry)) return;
+    const { [field]: _dropped, ...rest } = entry;
+    if (Object.keys(rest).length) this._toolDisplays.set(match, rest);
+    else this._toolDisplays.delete(match);
+    this._notify();
   }
   /**
    * Say what a call targets, in the default row, after the tool's name.
@@ -2882,42 +3028,46 @@ class AparteConfig {
    * on every config change — so registering one after a row is on screen shows up on
    * that row's next update.
    *
+   * The `summary` field of {@link registerToolDisplay}, on its own: same matcher, same
+   * entry.
+   *
    * @example
    * // read_file skills.json
    * aparteGlobalConfig.registerToolSummary('read_file', (segment) =>
    *     String(segment.toolCall.input['path'] ?? ''));
    */
-  registerToolSummary(toolName, summary) {
-    this._toolSummaries.set(toolName, summary);
+  registerToolSummary(match, summary) {
+    this.registerToolDisplay(match, { summary });
   }
-  /** Unregister a per-tool summary. */
-  unregisterToolSummary(toolName) {
-    this._toolSummaries.delete(toolName);
+  /** Drop the summary registered under this matcher; the rest of its display stays. */
+  unregisterToolSummary(match) {
+    this._dropToolDisplayField(match, "summary");
   }
-  /** Get the summary for a specific tool name. Returns undefined if none registered. */
+  /** The summary that applies to a tool named `toolName`, or undefined. */
   getToolSummary(toolName) {
-    return this._toolSummaries.get(toolName);
+    return this.getToolDisplay(toolName)?.summary;
   }
   /**
    * Show a tool's arguments as a person reads them, in the approval panel and in the
    * default tool row's disclosure — one formatter for both. Without one, both show the
-   * JSON the model sent.
+   * JSON the model sent. The `formatInput` field of {@link registerToolDisplay}, on its
+   * own: same matcher, same entry.
    *
    * @example
    * // Approve "write_file notes.md (2 KB)" rather than a JSON object.
    * aparteGlobalConfig.registerToolInputFormatter('write_file', (input) =>
    *     `${String(input['path'] ?? '')} (${Math.ceil(String(input['content'] ?? '').length / 1024)} KB)`);
    */
-  registerToolInputFormatter(toolName, formatter) {
-    this._toolInputFormatters.set(toolName, formatter);
+  registerToolInputFormatter(match, formatter) {
+    this.registerToolDisplay(match, { formatInput: formatter });
   }
-  /** Unregister a tool's input formatter. */
-  unregisterToolInputFormatter(toolName) {
-    this._toolInputFormatters.delete(toolName);
+  /** Drop the input formatter registered under this matcher; the rest of its display stays. */
+  unregisterToolInputFormatter(match) {
+    this._dropToolDisplayField(match, "formatInput");
   }
-  /** Get the input formatter for a tool name. Returns undefined if none registered. */
+  /** The input formatter that applies to a tool named `toolName`, or undefined. */
   getToolInputFormatter(toolName) {
-    return this._toolInputFormatters.get(toolName);
+    return this.getToolDisplay(toolName)?.formatInput;
   }
   /**
    * Teach the stream parser a tagged block: `<tag attr="…">…</tag>` in the model's
@@ -3128,8 +3278,7 @@ class AparteConfig {
     this._fetchedModels.clear();
     this._tools.clear();
     this._toolRenderers.clear();
-    this._toolSummaries.clear();
-    this._toolInputFormatters.clear();
+    this._toolDisplays.clear();
     this._streamBlocks.clear();
     this._modelConfig = {};
     this._requireModelSelection = false;
@@ -3262,9 +3411,36 @@ const textRenderer = {
   },
   getStyles: () => ``
 };
+function formatDuration(ms, tag) {
+  const total = Math.max(1, Math.round(ms / 1e3));
+  try {
+    const unit = (n, u) => new Intl.NumberFormat(tag, { style: "unit", unit: u, unitDisplay: "narrow" }).format(n);
+    if (total < 60) return unit(total, "second");
+    const minutes = Math.floor(total / 60);
+    const seconds = total % 60;
+    if (!seconds) return unit(minutes, "minute");
+    return new Intl.ListFormat(tag, { style: "narrow", type: "unit" }).format([unit(minutes, "minute"), unit(seconds, "second")]);
+  } catch {
+    return `${total}s`;
+  }
+}
 const THINKING_ANCHOR_SLACK = 24;
 function labelOf(segment) {
-  return segment.label && segment.label !== "Thinking" ? segment.label : contextConfig().t("thinking");
+  if (segment.label && segment.label !== "Thinking") return segment.label;
+  const cfg = contextConfig();
+  if (!isSegmentSettled(segment)) return cfg.t("thinking");
+  const show = segment.showDuration ?? cfg.getSegmentDefaults("thinking")?.["showDuration"] === true;
+  const ms = show ? segmentDuration(segment) : void 0;
+  if (ms === void 0) return cfg.t("thought");
+  return cfg.t("thoughtFor").replace("{duration}", () => formatDuration(ms, cfg.getLocale().tag || void 0));
+}
+const arriving = (segment) => segment.isStreaming === true;
+function setLabel(el2, segment) {
+  const text = labelOf(segment);
+  const label = el2.querySelector(".aparte-thinking-label");
+  if (label && label.textContent !== text) label.textContent = text;
+  label?.classList.toggle("aparte-shimmer", arriving(segment));
+  el2.querySelector(".aparte-thinking-content")?.setAttribute("aria-label", text);
 }
 const thinkingRenderer = {
   type: "thinking",
@@ -3296,18 +3472,14 @@ const thinkingRenderer = {
    * only part that is genuinely about reasoning rather than about disclosure.
    * `.aparte-thinking-label` stays too: `relabel` below queries it.
    */
-  render: (segment) => `<details class="aparte-segment aparte-segment-thinking aparte-accordion__item" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="aparte-accordion__header aparte-thinking-header"><span class="aparte-thinking-label">${escapeHtml(labelOf(segment))}</span><span class="aparte-accordion__icon">${contextConfig().getIcon("expand")}</span></summary><div class="aparte-accordion__panel aparte-thinking-content" role="region" tabindex="0" aria-label="${escapeAttr(labelOf(segment))}">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
+  render: (segment) => `<details class="aparte-segment aparte-segment-thinking aparte-accordion__item" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="aparte-accordion__header aparte-thinking-header"><span class="aparte-thinking-label${escapeAttr(arriving(segment) ? " aparte-shimmer" : "")}">${escapeHtml(labelOf(segment))}</span><span class="aparte-accordion__icon">${contextConfig().getIcon("expand")}</span></summary><div class="aparte-accordion__panel aparte-thinking-content" role="region" tabindex="0" aria-label="${escapeAttr(labelOf(segment))}">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
   /**
    * The default label is the only config-derived text here — and `segment.label`
    * still wins, exactly as in `render`, because that string is the app's.
    */
-  relabel: (el2, segment) => {
-    const text = labelOf(segment);
-    const label = el2.querySelector(".aparte-thinking-label");
-    if (label) label.textContent = text;
-    el2.querySelector(".aparte-thinking-content")?.setAttribute("aria-label", text);
-  },
+  relabel: (el2, segment) => setLabel(el2, segment),
   update: (el2, segment) => {
+    setLabel(el2, segment);
     const contentEl = el2.querySelector(".aparte-thinking-content");
     if (!contentEl) return;
     const wasAtBottom = contentEl.scrollHeight - contentEl.scrollTop - contentEl.clientHeight <= THINKING_ANCHOR_SLACK;
@@ -3352,6 +3524,35 @@ function copyText(text) {
     else reject(new Error("[aparte] Clipboard write failed"));
   });
 }
+const CONFIRM_MS = 1500;
+function nameButton(button, label) {
+  button.setAttribute("aria-label", label);
+  button.setAttribute("title", label);
+}
+function copyButtonMarkup(className) {
+  const label = escapeAttr(contextConfig().t("copy"));
+  const icon = contextConfig().getIcon("copy");
+  return `<button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm ${escapeAttr(className)}" data-action="copy" aria-label="${label}" title="${label}">${icon}</button>`;
+}
+function wireCopyButton(button, read) {
+  button.addEventListener("click", () => {
+    void copyText(read()).catch(() => {
+    });
+    button.innerHTML = contextConfig(button).getIcon("check");
+    nameButton(button, contextConfig(button).t("copied"));
+    button.dataset["copied"] = "1";
+    setTimeout(() => {
+      button.innerHTML = contextConfig(button).getIcon("copy");
+      nameButton(button, contextConfig(button).t("copy"));
+      delete button.dataset["copied"];
+    }, CONFIRM_MS);
+  });
+}
+function relabelCopyButton(button) {
+  if (button.dataset["copied"]) return;
+  nameButton(button, contextConfig().t("copy"));
+  button.innerHTML = contextConfig().getIcon("copy");
+}
 const HIGHLIGHT_DEBOUNCE_MS = 400;
 const MAX_THROTTLE_ENTRIES = 256;
 const _lastHighlightAt = /* @__PURE__ */ new Map();
@@ -3399,32 +3600,27 @@ function streamHighlight(element, paneSelector, content, lang, segId) {
   }).catch(() => {
   });
 }
-function nameButton(button, label) {
-  button.setAttribute("aria-label", label);
-  button.setAttribute("title", label);
-}
 const codeRenderer = {
   type: "code",
-  render: (segment) => `
+  render: (segment) => {
+    const copy = copyButtonMarkup("aparte-code-copy");
+    return `
         <div class="aparte-segment aparte-segment-code" data-segment-id="${escapeHtml(segment.id)}">
             <div class="aparte-code-header">
                 ${segment.filename ? `<span class="aparte-code-filename">${escapeHtml(segment.filename)}</span>` : `<span class="aparte-code-header-filler"></span>`}
                 <span class="aparte-code-language">${escapeHtml(segment.language || "")}</span>
-                <button type="button" class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-code-copy" data-action="copy" aria-label="${escapeAttr(contextConfig().t("copy"))}" title="${escapeAttr(contextConfig().t("copy"))}">
-                    ${contextConfig().getIcon("copy")}
-                </button>
+                ${copy}
             </div>
             <div class="aparte-code-content-wrapper">
                 <pre><code class="language-${escapeHtml(segment.language || "text")}">${escapeHtml(segment.content)}</code></pre>
             </div>
         </div>
-    `,
+    `;
+  },
   /** The copy button's icon and tooltip — nothing else here comes from config. */
   relabel: (element) => {
     const copyBtn = element.querySelector(".aparte-code-copy");
-    if (!copyBtn || copyBtn.dataset.copied) return;
-    nameButton(copyBtn, contextConfig().t("copy"));
-    copyBtn.innerHTML = contextConfig().getIcon("copy");
+    if (copyBtn) relabelCopyButton(copyBtn);
   },
   setup: (element, segment) => {
     const wrapper = element.querySelector(".aparte-code-content-wrapper");
@@ -3435,21 +3631,7 @@ const codeRenderer = {
       });
     }
     const copyBtn = element.querySelector(".aparte-code-copy");
-    if (copyBtn) {
-      copyBtn.addEventListener("click", () => {
-        const source = element.querySelector(".aparte-code-content-wrapper")?.textContent ?? "";
-        void copyText(source).catch(() => {
-        });
-        copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
-        nameButton(copyBtn, contextConfig(copyBtn).t("copied"));
-        copyBtn.dataset.copied = "1";
-        setTimeout(() => {
-          copyBtn.innerHTML = contextConfig(copyBtn).getIcon("copy");
-          nameButton(copyBtn, contextConfig(copyBtn).t("copy"));
-          delete copyBtn.dataset.copied;
-        }, 1500);
-      });
-    }
+    if (copyBtn) wireCopyButton(copyBtn, () => element.querySelector(".aparte-code-content-wrapper")?.textContent ?? "");
   },
   update: (element, segment) => {
     if (segment.isStreaming) {
@@ -3471,7 +3653,11 @@ const errorRenderer = {
   render: (segment) => {
     const custom = contextConfig().getErrorRenderer?.();
     if (custom) {
-      const out = custom({ message: segment.content, details: segment.details });
+      const out = custom({
+        message: segment.content,
+        ...segment.details !== void 0 ? { details: segment.details } : {},
+        ...segment.code !== void 0 ? { code: segment.code } : {}
+      });
       if (out instanceof HTMLElement) {
         out.setAttribute("data-segment-id", segment.id);
         return out;
@@ -3479,7 +3665,7 @@ const errorRenderer = {
       return out;
     }
     return `
-        <div class="aparte-segment aparte-alert aparte-alert--danger aparte-segment-error" data-segment-id="${escapeHtml(segment.id)}">
+        <div class="aparte-segment aparte-alert aparte-alert--danger aparte-segment-error" data-segment-id="${escapeHtml(segment.id)}"${segment.code ? ` data-error-code="${escapeAttr(segment.code)}"` : ""}>
             <span class="aparte-alert__icon">${contextConfig().getIcon("error") || "⚠"}</span>
             <div class="aparte-alert__body">
                 <div class="aparte-alert__title">${escapeHtml(contextConfig().t("error"))}</div>
@@ -3518,22 +3704,150 @@ function describeToolInput(input, format) {
     return "";
   }
 }
+function toolNameOf(segment, config) {
+  const identifier = segment.toolCall?.name ?? "tool";
+  const label = config.getToolDisplay(identifier)?.label;
+  if (label !== void 0) {
+    try {
+      const text = typeof label === "function" ? label(segment) : label;
+      if (typeof text === "string" && text.trim()) return { text: text.trim(), isLabel: true };
+    } catch {
+    }
+  }
+  return { text: identifier, isLabel: false };
+}
+function toolTargetOf(segment, config) {
+  const summary = config.getToolSummary(segment.toolCall?.name ?? "");
+  if (!summary) return "";
+  try {
+    const text = summary(segment);
+    return typeof text === "string" ? text.trim() : "";
+  } catch {
+    return "";
+  }
+}
 function describeInput(segment) {
   return describeToolInput(segment.toolCall?.input, contextConfig().getToolInputFormatter(segment.toolCall?.name ?? ""));
 }
 function stateBadge(segment) {
   const cfg = contextConfig();
   const status = segment.status ?? "pending";
-  const word = (key) => escapeHtml(cfg.t(key));
-  if (status === "awaiting-approval") return `${cfg.getIcon("pause")}${word("approvalWaiting")}`;
-  if (status === "pending") return word("toolRunning");
-  if (status === "resolved") return `${cfg.getIcon("check")}${word("toolCompleted")}`;
-  if (status === "rejected") return `${cfg.getIcon("close")}${word("toolRejected")}`;
-  if (status === "aborted") return `${cfg.getIcon("stop")}${word("toolStopped")}`;
-  if (status === "failed") return `${cfg.getIcon("close")}${word("toolFailed")}`;
+  const word = (text) => escapeHtml(text);
+  if (status === "awaiting-approval") return `${cfg.getIcon("pause")}${word(cfg.t("approvalWaiting"))}`;
+  if (status === "pending") return word(cfg.t("toolRunning"));
+  if (status === "resolved") return `${cfg.getIcon("check")}${word(cfg.t("toolCompleted"))}`;
+  if (status === "rejected") return `${cfg.getIcon("close")}${word(cfg.t("toolRejected"))}`;
+  if (status === "aborted") return `${cfg.getIcon("stop")}${word(cfg.t("toolStopped"))}`;
+  if (status === "failed") return `${cfg.getIcon("close")}${word(cfg.t("toolFailed"))}`;
   return "";
 }
-function setPart(element, part, text) {
+function noteOf(segment) {
+  const cfg = contextConfig();
+  if (segment.status === "rejected") {
+    const by = segment.refusal?.by;
+    if (by === "policy") return cfg.t("toolRefusedByPolicy");
+    if (by === "earlier-refusal") return cfg.t("toolNotRunAfterRefusal");
+    const said = segment.refusal?.instruction?.trim();
+    return said ? cfg.t("toolRejectedSaid").replace("{instruction}", () => said) : "";
+  }
+  if (segment.status === "aborted") {
+    switch (segment.abortCause) {
+      case "timeout":
+        return cfg.t("toolTimedOut");
+      case "no-handler":
+        return cfg.t("toolUnavailable");
+      case "no-resolver":
+        return cfg.t("toolNoApprover");
+      case "turn-limit":
+        return cfg.t("toolTurnLimit");
+      default:
+        return "";
+    }
+  }
+  return "";
+}
+function outcomeOf(segment) {
+  const text = displayText(segment.result ?? "");
+  if (!text) return null;
+  if (segment.status === "rejected" && segment.refusal) return null;
+  return { key: "toolOutput", text };
+}
+function behindOf(segment) {
+  const details = contextConfig().getToolDisplay(segment.toolCall?.name ?? "")?.details;
+  if (details === false) return { kind: "none" };
+  if (typeof details !== "function") return { kind: "parts" };
+  try {
+    const out = details(segment);
+    if (!out) return { kind: "none" };
+    return { kind: "body", body: typeof out === "string" ? contextConfig().sanitizeHtml(out) : out };
+  } catch {
+    return { kind: "none" };
+  }
+}
+const appDetailOf = (element) => element.querySelector(':scope > .aparte-tool-detail[data-details="app"]');
+function setBody(element, body) {
+  const detail = element.querySelector(".aparte-tool-detail");
+  if (!detail) return;
+  if (typeof body === "string") detail.innerHTML = body;
+  else detail.replaceChildren(body);
+  drawnBodies.set(detail, serialized(body));
+}
+const drawnBodies = /* @__PURE__ */ new WeakMap();
+const serialized = (body) => typeof body === "string" ? body : body.outerHTML;
+function relabelBody(detail, body) {
+  if (typeof body !== "string" && detail.contains(body)) {
+    drawnBodies.set(detail, body.outerHTML);
+    return;
+  }
+  const before = drawnBodies.get(detail);
+  const now = serialized(body);
+  if (before === now) return;
+  const next = document.createElement("div");
+  if (typeof body === "string") next.innerHTML = body;
+  else next.append(body);
+  const prev = document.createElement("div");
+  if (before !== void 0) prev.innerHTML = before;
+  if (before !== void 0 && sameShape(prev, next) && sameShape(prev, detail)) patchChanges(detail, prev, next);
+  else detail.replaceChildren(...Array.from(next.childNodes));
+  drawnBodies.set(detail, now);
+}
+function sameShape(a, b) {
+  if (a.childNodes.length !== b.childNodes.length) return false;
+  for (let i = 0; i < a.childNodes.length; i++) {
+    const x = a.childNodes[i];
+    const y = b.childNodes[i];
+    if (x.nodeType !== y.nodeType || x.nodeName !== y.nodeName || !sameShape(x, y)) return false;
+  }
+  return true;
+}
+function patchChanges(live, prev, next) {
+  for (let i = 0; i < live.childNodes.length; i++) {
+    const l = live.childNodes[i];
+    const p = prev.childNodes[i];
+    const n = next.childNodes[i];
+    if (l instanceof Element && p instanceof Element && n instanceof Element) {
+      for (const { name, value } of Array.from(n.attributes)) {
+        if (p.getAttribute(name) !== value) l.setAttribute(name, value);
+      }
+      for (const { name } of Array.from(p.attributes)) {
+        if (!n.hasAttribute(name)) l.removeAttribute(name);
+      }
+      patchChanges(l, p, n);
+    } else if (p.nodeValue !== n.nodeValue) {
+      l.nodeValue = n.nodeValue;
+    }
+  }
+}
+function setNote(element, segment) {
+  const el2 = element.querySelector(".aparte-tool-note");
+  if (!el2) return;
+  const text = noteOf(segment);
+  if (el2.textContent !== text) el2.textContent = text;
+  el2.toggleAttribute("hidden", !text);
+  if (text) el2.setAttribute("title", text);
+  else el2.removeAttribute("title");
+}
+function setPart(element, part, text, labelKey) {
   const existing = element.querySelector(`[data-part="${part}"]`);
   if (!text) {
     existing?.remove();
@@ -3542,6 +3856,10 @@ function setPart(element, part, text) {
   if (existing) {
     const code2 = existing.querySelector("code");
     if (code2 && code2.textContent !== text) code2.textContent = text;
+    const label2 = existing.querySelector(".aparte-tool-part-label");
+    const word = contextConfig().t(labelKey);
+    if (label2 && label2.textContent !== word) label2.textContent = word;
+    existing.querySelector(".aparte-tool-part-body")?.setAttribute("aria-label", word);
     return;
   }
   const detail = element.querySelector(".aparte-tool-detail");
@@ -3550,25 +3868,57 @@ function setPart(element, part, text) {
   const wrap = document.createElement("div");
   wrap.className = "aparte-tool-part";
   wrap.dataset["part"] = part;
+  const head = document.createElement("div");
+  head.className = "aparte-tool-part-head";
   const label = document.createElement("span");
   label.className = "aparte-tool-part-label";
-  label.textContent = cfg.t(part === "input" ? "toolInput" : "toolOutput");
+  label.textContent = cfg.t(labelKey);
+  const tpl = document.createElement("template");
+  tpl.innerHTML = copyButtonMarkup("aparte-tool-copy");
+  head.append(label, tpl.content);
   const body = document.createElement("div");
   body.className = "aparte-tool-part-body";
+  body.setAttribute("role", "region");
+  body.tabIndex = 0;
+  body.setAttribute("aria-label", label.textContent);
   const pre = document.createElement("pre");
   const code = document.createElement("code");
   code.textContent = text;
   pre.appendChild(code);
   body.appendChild(pre);
-  wrap.append(label, body);
+  wrap.append(head, body);
   if (part === "input") detail.prepend(wrap);
   else detail.appendChild(wrap);
+  wireParts(wrap);
+}
+function wireParts(root) {
+  for (const button of root.querySelectorAll(".aparte-tool-copy")) {
+    if (button.dataset["wired"]) continue;
+    button.dataset["wired"] = "1";
+    const part = button.closest(".aparte-tool-part");
+    wireCopyButton(button, () => part?.querySelector(".aparte-tool-part-body")?.textContent ?? "");
+  }
+}
+const JSON_PART_LIMIT = 2e5;
+function jsonStructureOf(text) {
+  const trimmed = text.trim();
+  if (trimmed.length > JSON_PART_LIMIT || !(trimmed.startsWith("{") || trimmed.startsWith("["))) return void 0;
+  try {
+    const value = JSON.parse(trimmed);
+    return value !== null && typeof value === "object" ? value : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function displayText(raw) {
+  const value = jsonStructureOf(raw);
+  return value === void 0 ? raw : JSON.stringify(value, null, 2);
 }
 function highlightParts(element) {
   const cfg = contextConfig();
   for (const body of element.querySelectorAll(".aparte-tool-part-body")) {
     const text = body.querySelector("code")?.textContent ?? "";
-    if (!text) continue;
+    if (!text || jsonStructureOf(text) === void 0) continue;
     void cfg.highlightCode(text, "json").then((html) => {
       if ((body.querySelector("code")?.textContent ?? "") !== text) return;
       body.innerHTML = html;
@@ -3577,14 +3927,7 @@ function highlightParts(element) {
   }
 }
 function toolTarget(segment) {
-  const summary = contextConfig().getToolSummary(segment.toolCall?.name ?? "");
-  if (!summary) return "";
-  try {
-    const text = summary(segment);
-    return typeof text === "string" ? text.trim() : "";
-  } catch {
-    return "";
-  }
+  return toolTargetOf(segment, contextConfig());
 }
 function setTarget(element, segment) {
   const el2 = element.querySelector(".aparte-tool-target");
@@ -3593,58 +3936,117 @@ function setTarget(element, segment) {
   if (el2.textContent !== text) el2.textContent = text;
   el2.toggleAttribute("hidden", !text);
 }
-function pillMarkup(segment, name, status) {
+function nameOf(segment) {
+  return toolNameOf(segment, contextConfig());
+}
+function iconOf(segment) {
+  const cfg = contextConfig();
+  const key = cfg.getToolDisplay(segment.toolCall?.name ?? "")?.icon;
+  return (key ? cfg.getIcon(key) : void 0) || cfg.getIcon("tool");
+}
+const isQuiet = (segment) => contextConfig().getToolDisplay(segment.toolCall?.name ?? "")?.quiet === true;
+function quietOf(segment) {
+  const status = segment.status ?? "pending";
+  const quiet = isQuiet(segment);
+  return {
+    shimmer: quiet && status === "pending",
+    spinner: !quiet && status === "pending",
+    stateHidden: quiet && (status === "pending" || status === "resolved")
+  };
+}
+function setQuiet(element, segment) {
+  const quiet = quietOf(segment);
+  element.toggleAttribute("data-quiet", isQuiet(segment));
+  element.querySelector(".aparte-tool-spinner")?.toggleAttribute("hidden", !quiet.spinner);
+  element.querySelector(".aparte-tool-name")?.classList.toggle("aparte-shimmer", quiet.shimmer);
+  element.querySelector(".aparte-tool-state")?.classList.toggle("aparte-sr-only", quiet.stateHidden);
+}
+function setName(element, segment) {
+  const el2 = element.querySelector(".aparte-tool-name");
+  if (!el2) return;
+  const { text, isLabel } = nameOf(segment);
+  if (el2.textContent !== text) el2.textContent = text;
+  el2.classList.toggle("aparte-tool-name--label", isLabel);
+}
+function pillMarkup(segment) {
   const badge = stateBadge(segment);
+  const icon = iconOf(segment);
   const target = toolTarget(segment);
+  const note = noteOf(segment);
+  const name = nameOf(segment);
+  const quiet = quietOf(segment);
   return `
                 <span class="aparte-tool-label">
-                    <span class="aparte-tool-icon">${contextConfig().getIcon("tool")}</span>
-                    <span class="aparte-tool-name">${escapeHtml(name)}</span>
+                    <span class="aparte-tool-icon">${icon}</span>
+                    <span class="aparte-tool-name${name.isLabel ? " aparte-tool-name--label" : ""}${quiet.shimmer ? " aparte-shimmer" : ""}">${escapeHtml(name.text)}</span>
                     <span class="aparte-tool-target"${target ? "" : " hidden"}>${escapeHtml(target)}</span>
                 </span>
-                <span class="aparte-spinner aparte-tool-spinner" aria-hidden="true"${status === "pending" ? "" : " hidden"}></span>
-                <span class="aparte-tool-state">${badge}</span>`;
+                <span class="aparte-spinner aparte-tool-spinner" aria-hidden="true"${quiet.spinner ? "" : " hidden"}></span>
+                <span class="aparte-tool-state${quiet.stateHidden ? " aparte-sr-only" : ""}">${badge}</span>
+                <span class="aparte-tool-note"${note ? ` title="${escapeAttr(note)}"` : " hidden"}>${escapeHtml(note)}</span>`;
+}
+function placeholderMarkup(segment) {
+  return `<div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(segment.status ?? "pending")}" data-tool-call-id="${escapeAttr(segment.toolCall?.id ?? "")}" data-tool-name="${escapeAttr(segment.toolCall?.name ?? "tool")}" hidden></div>`;
+}
+const isPlaceholder = (element) => element.hidden && element.classList.contains("aparte-segment-tool-call") && element.childElementCount === 0;
+function drawDefault(segment, behind) {
+  const name = segment.toolCall?.name ?? "tool";
+  const status = segment.status ?? "pending";
+  const toolCallId = segment.toolCall?.id ?? "";
+  const pill = pillMarkup(segment);
+  const quiet = isQuiet(segment) ? " data-quiet" : "";
+  const toggle = contextConfig().getIcon("expand");
+  const input = behind.kind === "parts" ? describeInput(segment) : "";
+  const outcome = behind.kind === "parts" ? outcomeOf(segment) : null;
+  if (behind.kind === "none" || behind.kind === "parts" && !input && !outcome) {
+    return `
+        <div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}><div class="aparte-tool-line">${pill}</div>
+        </div>
+    `;
+  }
+  const cfg = contextConfig();
+  const copy = copyButtonMarkup("aparte-tool-copy");
+  const open = segment.collapsed !== void 0 ? !segment.collapsed : cfg.getToolDisplay(name)?.open === true;
+  if (behind.kind === "body") {
+    const tpl = document.createElement("template");
+    tpl.innerHTML = `
+        <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}${open ? " open" : ""}>
+            <summary class="aparte-tool-summary"><span class="aparte-tool-toggle">${toggle}</span>${pill}</summary>
+            <div class="aparte-tool-detail" data-details="app"></div>
+        </details>`.trim();
+    const row = tpl.content.firstElementChild;
+    setBody(row, behind.body);
+    return row;
+  }
+  return `
+        <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}" data-tool-name="${escapeAttr(name)}"${quiet}${open ? " open" : ""}>
+            <summary class="aparte-tool-summary"><span class="aparte-tool-toggle">${toggle}</span>${pill}</summary>
+            <div class="aparte-tool-detail">
+                ${input ? `
+                <div class="aparte-tool-part" data-part="input">
+                    <div class="aparte-tool-part-head"><span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolInput"))}</span>${copy}</div>
+                    <div class="aparte-tool-part-body" role="region" tabindex="0" aria-label="${escapeAttr(cfg.t("toolInput"))}"><pre><code>${escapeHtml(input)}</code></pre></div>
+                </div>` : ""}
+                ${outcome ? `
+                <div class="aparte-tool-part" data-part="output">
+                    <div class="aparte-tool-part-head"><span class="aparte-tool-part-label">${escapeHtml(cfg.t(outcome.key))}</span>${copy}</div>
+                    <div class="aparte-tool-part-body" role="region" tabindex="0" aria-label="${escapeAttr(cfg.t(outcome.key))}"><pre><code>${escapeHtml(outcome.text)}</code></pre></div>
+                </div>` : ""}
+            </div>
+        </details>
+    `;
 }
 const toolCallRenderer = {
   type: "tool_call",
   render: (segment) => {
     const name = segment.toolCall?.name ?? "tool";
-    const status = segment.status ?? "pending";
-    const toolCallId = segment.toolCall?.id ?? "";
-    const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
+    if (contextConfig().isToolHidden(name)) return placeholderMarkup(segment);
+    const customRenderer = contextConfig().getToolRenderer(name);
     if (customRenderer) {
-      injectToolRendererStyles(segment.toolCall?.name ?? "", customRenderer);
-      const out = customRenderer.render(segment);
-      if (out) return out;
-    }
-    const pill = pillMarkup(segment, name, status);
-    const toggle = contextConfig().getIcon("expand");
-    const input = describeInput(segment);
-    const result = segment.result;
-    if (!input && !result) {
-      return `
-            <div class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}">${pill}
-            </div>
-        `;
+      injectToolRendererStyles(name, customRenderer);
+      return customRenderer.render(segment) || placeholderMarkup(segment);
     }
-    const cfg = contextConfig();
-    return `
-            <details class="aparte-segment aparte-segment-tool-call" data-segment-id="${escapeHtml(segment.id)}" data-status="${escapeAttr(status)}" data-tool-call-id="${escapeAttr(toolCallId)}">
-                <summary class="aparte-tool-summary"><span class="aparte-tool-toggle">${toggle}</span>${pill}</summary>
-                <div class="aparte-tool-detail">
-                    ${input ? `
-                    <div class="aparte-tool-part" data-part="input">
-                        <span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolInput"))}</span>
-                        <div class="aparte-tool-part-body"><pre><code>${escapeHtml(input)}</code></pre></div>
-                    </div>` : ""}
-                    ${result ? `
-                    <div class="aparte-tool-part" data-part="output">
-                        <span class="aparte-tool-part-label">${escapeHtml(cfg.t("toolOutput"))}</span>
-                        <div class="aparte-tool-part-body"><pre><code>${escapeHtml(result)}</code></pre></div>
-                    </div>` : ""}
-                </div>
-            </details>
-        `;
+    return drawDefault(segment, behindOf(segment));
   },
   /**
    * The pill's glyphs, and the label it wears while a person is deciding.
@@ -3657,6 +4059,7 @@ const toolCallRenderer = {
    * No child node is added or removed, per the relabel contract.
    */
   relabel: (element, segment) => {
+    if (isPlaceholder(element)) return;
     const cfg = contextConfig();
     const custom = cfg.getToolRenderer(segment.toolCall?.name);
     if (custom) {
@@ -3664,10 +4067,26 @@ const toolCallRenderer = {
       return;
     }
     const icon = element.querySelector(".aparte-tool-icon");
-    if (icon) icon.innerHTML = cfg.getIcon("tool");
+    if (icon) icon.innerHTML = iconOf(segment);
+    setName(element, segment);
     setTarget(element, segment);
+    setNote(element, segment);
+    const inputLabel = element.querySelector('[data-part="input"] .aparte-tool-part-label');
+    if (inputLabel) inputLabel.textContent = cfg.t("toolInput");
+    element.querySelector('[data-part="input"] .aparte-tool-part-body')?.setAttribute("aria-label", cfg.t("toolInput"));
+    const outcome = outcomeOf(segment);
+    const outputLabel = element.querySelector('[data-part="output"] .aparte-tool-part-label');
+    if (outputLabel && outcome) outputLabel.textContent = cfg.t(outcome.key);
+    if (outcome) element.querySelector('[data-part="output"] .aparte-tool-part-body')?.setAttribute("aria-label", cfg.t(outcome.key));
+    for (const button of element.querySelectorAll(".aparte-tool-copy")) relabelCopyButton(button);
+    const appDetail = appDetailOf(element);
+    if (appDetail) {
+      const behind = behindOf(segment);
+      if (behind.kind === "body") relabelBody(appDetail, behind.body);
+    }
     const statusEl = element.querySelector(".aparte-tool-state");
     if (statusEl) statusEl.innerHTML = stateBadge(segment);
+    setQuiet(element, segment);
   },
   /**
    * Patch in place. NEVER re-render, and never touch `open`.
@@ -3684,34 +4103,57 @@ const toolCallRenderer = {
    */
   update: (element, segment) => {
     const status = segment.status ?? "pending";
-    const input = describeInput(segment);
-    const wantsDetail = !!input || !!segment.result;
+    const hidden = contextConfig().isToolHidden(segment.toolCall?.name ?? "tool");
+    if (hidden && isPlaceholder(element)) {
+      element.setAttribute("data-status", status);
+      return;
+    }
     const custom = contextConfig().getToolRenderer(segment.toolCall?.name);
-    if (custom?.update) {
+    if (custom?.update && !hidden && !isPlaceholder(element)) {
       custom.update(element, segment);
       return;
     }
-    if (custom || wantsDetail !== (element.tagName === "DETAILS")) {
-      const out = toolCallRenderer.render(segment);
+    const rebuild = (out) => {
       const tpl = document.createElement("template");
       tpl.innerHTML = typeof out === "string" ? out.trim() : "";
       const rebuilt = typeof out === "string" ? tpl.content.firstElementChild : out;
       if (rebuilt) {
+        if (!rebuilt.hasAttribute("data-segment-id")) rebuilt.setAttribute("data-segment-id", segment.id);
         element.replaceWith(rebuilt);
         toolCallRenderer.setup?.(rebuilt, segment);
       }
+    };
+    if (custom || hidden || isPlaceholder(element)) {
+      rebuild(toolCallRenderer.render(segment));
+      return;
+    }
+    const behind = behindOf(segment);
+    const input = behind.kind === "parts" ? describeInput(segment) : "";
+    const outcome = behind.kind === "parts" ? outcomeOf(segment) : null;
+    const wantsDetail = behind.kind === "body" || !!input || !!outcome;
+    const holdsAppDetail = !!appDetailOf(element);
+    if (wantsDetail !== (element.tagName === "DETAILS") || wantsDetail && behind.kind === "body" !== holdsAppDetail) {
+      rebuild(drawDefault(segment, behind));
       return;
     }
     element.setAttribute("data-status", status);
     const badge = element.querySelector(".aparte-tool-state");
     if (badge) badge.innerHTML = stateBadge(segment);
-    element.querySelector(".aparte-tool-spinner")?.toggleAttribute("hidden", status !== "pending");
+    setQuiet(element, segment);
+    setName(element, segment);
     setTarget(element, segment);
-    setPart(element, "input", input);
-    setPart(element, "output", segment.result ?? "");
+    setNote(element, segment);
+    if (behind.kind === "body") {
+      setBody(element, behind.body);
+      return;
+    }
+    setPart(element, "input", input, "toolInput");
+    setPart(element, "output", outcome?.text ?? "", outcome?.key ?? "toolOutput");
     highlightParts(element);
   },
   setup: (element, segment) => {
+    if (isPlaceholder(element)) return;
+    wireParts(element);
     highlightParts(element);
     const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
     customRenderer?.setup?.(element, segment);
@@ -3784,11 +4226,16 @@ function injectRendererStyles(config = contextConfig()) {
   }
   if (added) styleElement.textContent = Array.from(injectedRendererStyles).join("\n");
 }
+const toolRendererSheetIds = /* @__PURE__ */ new WeakMap();
 function injectToolRendererStyles(toolName, renderer) {
   if (typeof document === "undefined") return;
   const css = renderer.getStyles?.();
   if (!css) return;
-  const id = `aparte-tool-renderer-${toolName}`;
+  let id = toolRendererSheetIds.get(renderer);
+  if (!id) {
+    id = `aparte-tool-renderer-${toolName}`;
+    toolRendererSheetIds.set(renderer, id);
+  }
   if (document.getElementById(id)) return;
   const el2 = document.createElement("style");
   el2.id = id;
@@ -4309,6 +4756,21 @@ function revokeAttachmentUrls(attachments) {
     if (attachment.url?.startsWith("blob:")) URL.revokeObjectURL(attachment.url);
   }
 }
+const known = /* @__PURE__ */ new Map();
+function rememberConversationStatus(id, status) {
+  if (status) known.set(id, status);
+  else known.delete(id);
+}
+function tellConversationStatus(id, status) {
+  rememberConversationStatus(id, status);
+  try {
+    window.dispatchEvent(new CustomEvent("aparte-conversation-status", { detail: { id, status } }));
+  } catch {
+  }
+}
+function conversationStatusOf(id) {
+  return known.get(id) ?? null;
+}
 const MAX_COMPACTION_SAVE_WAITS = 6;
 class AparteConversationController {
   _binding;
@@ -4317,6 +4779,10 @@ class AparteConversationController {
   _isStreaming = false;
   _isLoadingConversation = false;
   _ensureInFlight = null;
+  /** The conversation the turn in flight started in, and what the lists were told of it. */
+  _turn = null;
+  /** The reply the turn in flight writes into, from its `aparte-message-start`. */
+  _turnMessage = null;
   _onSendCapture = null;
   _onPathChanged = null;
   _onMessageStart = null;
@@ -4324,6 +4790,7 @@ class AparteConversationController {
   _onMessageError = null;
   _onMessageAborted = null;
   _onMessagePaused = null;
+  _onMessageResumed = null;
   _onSelectConversation = null;
   _onCompactDone = null;
   _unsubscribeManager = null;
@@ -4404,6 +4871,33 @@ class AparteConversationController {
       "[aparte] This chat resolves its own config, but the conversation manager was registered on aparteGlobalConfig — so nothing is being persisted. Pass the same config to init(): `init(adapter, myConfig)`, using the config you gave the chat."
     );
   }
+  /**
+   * Tell every conversation list on the page what the turn is doing, through
+   * `aparte-conversation-status` on `window` — the mirror of the list's
+   * `aparte-conversation-select`, which this controller hears. Always about the
+   * conversation the turn started in: the person may have opened another since. A turn
+   * that starts before its conversation exists (a first message) is told once it does.
+   */
+  _setTurn(status) {
+    if (!status) {
+      if (this._turn) tellConversationStatus(this._turn.id, null);
+      this._turn = null;
+      return;
+    }
+    const id = this._turn?.id ?? (status === "running" ? this._activeId ?? this._manager()?.activeId ?? null : null);
+    if (!id) return;
+    this._turn = { id, status };
+    tellConversationStatus(id, status);
+  }
+  /**
+   * Whether a lifecycle event is about the turn in flight. A turn a newer send replaced
+   * (a chip, a retry, an edit) says it stopped AFTER the new one started: its end must not
+   * end the new turn's state. An event without a message id is taken as this turn's.
+   */
+  _ofThisTurn(e) {
+    const id = e.detail?.messageId;
+    return !id || !this._turnMessage || id === this._turnMessage;
+  }
   /**
    * Attach event listeners to the binding host. Returns an unbind function.
    */
@@ -4434,29 +4928,42 @@ class AparteConversationController {
       }
     };
     host.addEventListener("aparte-path-changed", this._onPathChanged);
-    this._onMessageStart = () => {
+    this._onMessageStart = (e) => {
       this._isStreaming = true;
+      this._turnMessage = e.detail?.messageId ?? null;
+      this._setTurn("running");
     };
-    this._onMessageDone = () => {
+    const ended = (e) => {
+      if (!this._ofThisTurn(e)) return;
       this._isStreaming = false;
+      this._setTurn(null);
+      this._turnMessage = null;
+    };
+    this._onMessageDone = (e) => {
+      ended(e);
       queueMicrotask(() => this._persistActive());
     };
-    this._onMessageError = () => {
-      this._isStreaming = false;
+    this._onMessageError = (e) => {
+      ended(e);
       queueMicrotask(() => this._persistActive());
     };
-    this._onMessageAborted = () => {
-      this._isStreaming = false;
+    this._onMessageAborted = (e) => {
+      ended(e);
       queueMicrotask(() => this._persistActive());
     };
-    this._onMessagePaused = () => {
+    this._onMessagePaused = (e) => {
+      if (this._ofThisTurn(e)) this._setTurn("waiting");
       queueMicrotask(() => this._persistActive());
     };
+    this._onMessageResumed = (e) => {
+      if (this._ofThisTurn(e)) this._setTurn("running");
+    };
     host.addEventListener("aparte-message-start", this._onMessageStart);
     host.addEventListener("aparte-message-done", this._onMessageDone);
     host.addEventListener("aparte-message-error", this._onMessageError);
     host.addEventListener("aparte-message-aborted", this._onMessageAborted);
     host.addEventListener("aparte-message-paused", this._onMessagePaused);
+    host.addEventListener("aparte-message-resumed", this._onMessageResumed);
     this._onSelectConversation = (e) => {
       const evt = e;
       const targetId = evt.detail?.targetId;
@@ -4483,6 +4990,9 @@ class AparteConversationController {
     this._bound = false;
     this._subscribedTo = null;
     this._persistActive();
+    if (this._turn?.status === "running") this._setTurn(null);
+    this._turn = null;
+    this._turnMessage = null;
     this._stopHydrationRetry?.();
     this._stopHydrationRetry = null;
     const host = this._binding.host;
@@ -4514,6 +5024,10 @@ class AparteConversationController {
       host.removeEventListener("aparte-message-paused", this._onMessagePaused);
       this._onMessagePaused = null;
     }
+    if (this._onMessageResumed) {
+      host.removeEventListener("aparte-message-resumed", this._onMessageResumed);
+      this._onMessageResumed = null;
+    }
     if (this._onCompactDone && typeof window !== "undefined") {
       window.removeEventListener("aparte-compact-done", this._onCompactDone);
       this._onCompactDone = null;
@@ -4542,6 +5056,8 @@ class AparteConversationController {
     const isSwitch = id !== this._activeId;
     const manager = this._manager();
     if (isSwitch && this._isStreaming) {
+      if (this._turn?.status === "waiting") this._turn = null;
+      else this._setTurn(null);
       this._persistActive();
       try {
         window.dispatchEvent(new CustomEvent("aparte-abort", {
@@ -4723,6 +5239,7 @@ class AparteConversationController {
       }
       this._activeId = convId;
       this._options.onConversationCreated?.(convId);
+      if (this._isStreaming && !this._turn) this._setTurn("running");
     } else if (this._activeId !== null && this._activeId !== convId) {
       await manager.addMessage(convId, userMsg).catch(() => {
       });
@@ -6291,7 +6808,16 @@ class AparteClient {
        */
       message: () => {
         const loc = this._config.getLocale();
-        return (loc.approvalAsk ?? "Run {tool}?").replace("{tool}", () => event.name);
+        const chat = resolveConfig(target);
+        const call = {
+          id: `tool-${event.id}`,
+          type: "tool_call",
+          status: "awaiting-approval",
+          toolCall: { id: event.id, name: event.name, input: event.input }
+        };
+        const name = toolNameOf(call, chat).text;
+        const what = toolTargetOf(call, chat);
+        return (loc.approvalAsk ?? "Allow {tool}?").replace("{tool}", () => what ? `${name} ${what}` : name);
       },
       // A plain string, not a function: the arguments are the model's — its JSON, or
       // the tool's own formatter's reading of it — and do not change with the
@@ -6308,11 +6834,11 @@ class AparteClient {
       signal,
       target
     });
-    if (answer.action !== "accept") return { approved: false };
+    if (answer.action !== "accept") return { approved: false, by: "person" };
     const content = answer.content;
     const instruction = content?.instruction?.trim();
-    if (instruction) return { approved: false, instruction };
-    return { approved: content?.option === "allow" };
+    if (instruction) return { approved: false, instruction, by: "person" };
+    return content?.option === "allow" ? { approved: true } : { approved: false, by: "person" };
   }
   /**
    * Resolve the auth for a provider: `options.keyResolver` takes precedence,
@@ -6378,6 +6904,7 @@ class AparteClient {
       return;
     }
     dispatchLifecycleEvent(targetElement, "aparte-message-start", { messageId, role: "assistant" }, chatId);
+    if (opts?.resume) dispatchLifecycleEvent(targetElement, "aparte-message-paused", { messageId }, chatId);
     if (!opts?.resume && provider.id) {
       this._updateMessage(targetElement, messageId, {
         model: {
@@ -6390,6 +6917,7 @@ class AparteClient {
     const streamController = new AbortController();
     if (this._streamController !== streamController) this._streamController?.abort();
     this._streamController = streamController;
+    this._turnsInFlight.add(messageId);
     try {
       let result = opts?.resume ? { usage: void 0, suspended: opts.resume } : await this._streamLoop(targetElement, messageId, provider, baseRequest, authConfig, streamController);
       const maxResumes = this.options.maxTurns ?? 10;
@@ -6421,6 +6949,7 @@ class AparteClient {
         };
         const messages2 = this._resumeMessages(targetElement, messageId, baseRequest.messages);
         this._spendPause(targetElement, messageId);
+        dispatchLifecycleEvent(targetElement, "aparte-message-resumed", { messageId }, chatId);
         result = await this._streamLoop(
           targetElement,
           messageId,
@@ -6447,8 +6976,15 @@ class AparteClient {
       }
       const aparteError = AparteError.from(error, AparteErrorCode.UNKNOWN_ERROR);
       this._handleLifecycleError(targetElement, messageId, aparteError);
+    } finally {
+      this._turnsInFlight.delete(messageId);
     }
   }
+  /**
+   * Replies a turn is running into right now, a pause it waits on included: a second
+   * load of their conversation must not start them again (`resumeDeferred`).
+   */
+  _turnsInFlight = /* @__PURE__ */ new Set();
   /**
    * Handle aparte-retry — add a sibling branch to the assistant message and re-stream
    * using the same conversation history minus the retried reply.
@@ -7132,7 +7668,7 @@ ${content}
       const ruling = gatedElsewhere ? this._config.getApprovalPolicy()?.(call, this._config.getTools().find((t) => t.name === call.name)) ?? { verdict: "ask" } : this._config.ruleOnToolCall(call);
       if (ruling.verdict === "allow") return { approved: true };
       if (ruling.verdict === "deny") {
-        return { approved: false, reason: ruling.reason?.trim() || "Tool execution was refused by the approval policy." };
+        return { approved: false, reason: ruling.reason?.trim() || "Tool execution was refused by the approval policy.", by: "policy" };
       }
       return this._askForApproval(call, sig, targetElement);
     });
@@ -7150,7 +7686,7 @@ ${content}
     const resolver = this._approvalResolverFor(targetElement, true);
     const refuseTheRest = (after) => {
       for (const rest of pending.slice(after + 1)) {
-        outcomes[rest.toolCallId] = { kind: "decision", approved: false, reason: NOT_RUN_AFTER_A_REFUSAL };
+        outcomes[rest.toolCallId] = { kind: "decision", approved: false, reason: NOT_RUN_AFTER_A_REFUSAL, by: "earlier-refusal" };
       }
     };
     for (const [index, p] of pending.entries()) {
@@ -7320,7 +7856,7 @@ ${content}
     const last = [...messages].reverse().find((m) => m.role === "assistant");
     const open = (last?.segments ?? []).filter(isOpenDeferred);
     const ticket = open.find((s) => s.deferred?.ticket)?.deferred?.ticket;
-    if (!last || open.length === 0 || !ticket || this._resuming.has(last.id)) return false;
+    if (!last || open.length === 0 || !ticket || this._resuming.has(last.id) || this._turnsInFlight.has(last.id)) return false;
     const config = this._config.getModelConfig();
     const recorded = last.model && this._config.getAIProvider(last.model.providerId) ? last.model : void 0;
     const providerId = recorded?.providerId ?? config.defaultProvider;
@@ -7367,7 +7903,7 @@ ${content}
       id: `error-${uuid()}`,
       type: "error",
       content: error.message,
-      details: error.code
+      code: error.code
     };
     if (target.updateMessage) {
       const rendered = target.getMessage?.(messageId)?.segments ?? target.getMessages?.()?.find((m) => m.id === messageId)?.segments ?? [];
@@ -7753,6 +8289,7 @@ const APARTE_DEFAULT_UI_EVENTS = [
   "aparte-message-error",
   "aparte-message-aborted",
   "aparte-message-paused",
+  "aparte-message-resumed",
   "aparte-tool-approval-request"
 ];
 function applyElementProps(el2, props, transformValue = (value) => value) {
@@ -7864,24 +8401,28 @@ export {
   segmentDuration as a4,
   segmentTiming as a5,
   subscribeConfigChange as a6,
-  unregisterSegmentRenderer as a7,
-  uuid as a8,
-  eventOrigin as a9,
-  activeElementIn as aa,
-  gateGlide as ab,
-  renderingVersionOf as ac,
-  mergeSegmentUpdate as ad,
-  writeStreamedMarkdown as ae,
-  stampSegmentActivity as af,
-  stampSegmentOnInsert as ag,
-  stampSegmentOnUpdate as ah,
-  renumberSegments as ai,
-  openSegmentIds as aj,
-  isTerminalStatus as ak,
-  adoptMessageSegments as al,
-  APARTE_DERIVED_SEGMENTS as am,
-  chatBoundaryOf as an,
-  rootOf as ao,
+  toolRefusal as a7,
+  unregisterSegmentRenderer as a8,
+  uuid as a9,
+  eventOrigin as aa,
+  activeElementIn as ab,
+  gateGlide as ac,
+  renderingVersionOf as ad,
+  mergeSegmentUpdate as ae,
+  writeStreamedMarkdown as af,
+  stampSegmentActivity as ag,
+  stampSegmentOnInsert as ah,
+  stampSegmentOnUpdate as ai,
+  renumberSegments as aj,
+  openSegmentIds as ak,
+  isTerminalStatus as al,
+  adoptMessageSegments as am,
+  APARTE_DERIVED_SEGMENTS as an,
+  rememberConversationStatus as ao,
+  tellConversationStatus as ap,
+  conversationStatusOf as aq,
+  chatBoundaryOf as ar,
+  rootOf as as,
   APARTE_DEFAULT_BUBBLE_ACTIONS as b,
   APARTE_DEFAULT_HOST_HANDLERS as c,
   APARTE_DEFAULT_ICON_FALLBACKS as d,
@@ -7908,4 +8449,4 @@ export {
   collectRendererStyles as y,
   contentToText as z
 };
-//# sourceMappingURL=dialog-triggers-3Rk7PuZa.js.map
+//# sourceMappingURL=dialog-triggers-BqXRdHWZ.js.map