@aparte/core 0.12.0 → 0.13.0

package/dist/{is-awaiting-reply-CxWRISBC.js → is-awaiting-reply-DrO_oR32.js}

@@ -1,3 +1,4 @@
+import { A as APARTE_ICON_GLYPHS } from "./glyphs-QXfbL3n_.js";
 function contentToText(content) {
   if (typeof content === "string") return content;
   return content.filter((p) => p.type === "text").map((p) => p.text).join("");
@@ -35,29 +36,7 @@ class AparteError extends Error {
     return new AparteError(message, defaultCode, void 0, error, status);
   }
 }
-const APARTE_DEFAULT_ICON_FALLBACKS = {
-  copy: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`,
-  check: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`,
-  send: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>`,
-  loading: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="aparte-icon-spin"><circle cx="12" cy="12" r="10" stroke-opacity="0.25"/><path d="M12 2a10 10 0 0 1 10 10"/></svg>`,
-  error: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`,
-  expand: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`,
-  collapse: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"/></svg>`,
-  terminal: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>`,
-  paperclip: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>`,
-  image: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`,
-  file: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>`,
-  scrollDown: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>`,
-  retry: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>`,
-  edit: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`,
-  thumbUp: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>`,
-  thumbDown: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/></svg>`,
-  prevBranch: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>`,
-  nextBranch: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>`,
-  tool: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>`,
-  close: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`,
-  stop: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><rect x="2" y="2" width="12" height="12" rx="2"/></svg>`
-};
+const APARTE_DEFAULT_ICON_FALLBACKS = APARTE_ICON_GLYPHS;
 const APARTE_DEFAULT_LOCALE = {
   inputPlaceholder: "Type a message...",
   sendButton: "Send",
@@ -122,6 +101,14 @@ const APARTE_DEFAULT_LOCALE = {
   unarchiveConversation: "Unarchive conversation",
   direction: "ltr"
 };
+const APARTE_DEFAULT_SKELETON_FALLBACKS = {
+  message: '<div class="aparte-skeleton-fallback">Loading...</div>',
+  code: '<div class="aparte-skeleton-fallback aparte-skeleton-fallback--code">Loading code...</div>',
+  thinking: '<div class="aparte-skeleton-fallback aparte-skeleton-fallback--tight">Thinking...</div>',
+  input: '<div class="aparte-skeleton-fallback aparte-skeleton-fallback--snug">...</div>',
+  list: '<div class="aparte-skeleton-fallback">Loading items...</div>',
+  text: '<div class="aparte-skeleton-fallback aparte-skeleton-fallback--tight">...</div>'
+};
 function isFormatAdapter(p) {
   return typeof p.buildRequest === "function" && typeof p.parseStream === "function" && typeof p.defaultEndpoint === "string" && (typeof p.authHeaders === "function" || typeof p.authQuery === "function");
 }
@@ -959,6 +946,7 @@ const SAFE_STYLE_PROPS = /* @__PURE__ */ new Set([
   "white-space"
 ]);
 function isSafeCustomProperty(prop) {
+  if (prop.includes("\\")) return false;
   return prop.startsWith("--") && !prop.startsWith("--aparte-");
 }
 function scrubStyle(value) {
@@ -1873,6 +1861,24 @@ class AparteConfig {
   getTools() {
     return Array.from(this._tools.values()).map((e) => e.tool);
   }
+  /**
+   * The registered tools' own `systemPrompt`s, joined, or `null` if none set one.
+   *
+   * `AparteTool.systemPrompt` has always been documented as "injected automatically when
+   * this tool is registered", on the type and in the tools guide — and nothing read it.
+   * A field that is documented and dead is worse than one that does not exist: a caller
+   * writes it, sees the tool work (the model has the schema either way), and never learns
+   * that the sentence explaining WHEN to reach for it was dropped. `@aparte/plugin-ask-user`
+   * sets one, so a shipped plugin was losing its instructions.
+   *
+   * Registration order, blank line between, because two tools' instructions are two
+   * paragraphs and not one run-on sentence. The app's own template stays a separate
+   * message — see `resolveSystemPrompt`, which is about the app and not about the tools.
+   */
+  resolveToolSystemPrompts() {
+    const prompts = Array.from(this._tools.values()).map((entry) => entry.tool.systemPrompt?.trim()).filter((prompt) => Boolean(prompt));
+    return prompts.length ? prompts.join("\n\n") : null;
+  }
   /** Get the handler for a tool by name */
   getToolHandler(name) {
     return this._tools.get(name)?.handler;
@@ -2122,16 +2128,15 @@ class AparteConfig {
   _defaultHighlightRenderer(code) {
     return `<pre><code>${escapeHtml(code)}</code></pre>`;
   }
+  /**
+   * ONE owner. This used to hold a second, hand-written copy of
+   * `APARTE_DEFAULT_SKELETON_FALLBACKS`, and the two had already drifted — `message`
+   * said "Loading message…" here and "Loading…" there, `text` the reverse. A duplicate
+   * that disagrees with its original is worse than either: whichever one you read, you
+   * cannot tell which one ships.
+   */
   _defaultSkeletonRenderer(type) {
-    const fallbacks = {
-      message: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading message...</div>',
-      code: '<div class="aparte-skeleton-fallback" style="padding:16px;background:#1e293b;color:#64748b;border-radius:8px;">Loading code...</div>',
-      text: '<div class="aparte-skeleton-fallback" style="padding:8px;color:#9ca3af;">Loading...</div>',
-      thinking: '<div class="aparte-skeleton-fallback" style="padding:8px;color:#9ca3af;">Thinking...</div>',
-      input: '<div class="aparte-skeleton-fallback" style="padding:12px;color:#9ca3af;">...</div>',
-      list: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading items...</div>'
-    };
-    return fallbacks[type] || fallbacks.text;
+    return APARTE_DEFAULT_SKELETON_FALLBACKS[type] ?? APARTE_DEFAULT_SKELETON_FALLBACKS.text;
   }
 }
 const GLOBAL_CONFIG_KEY = Symbol.for("aparte.globalConfig.1");
@@ -2195,14 +2200,6 @@ function subscribeConfigChange(el2, handler) {
   window.addEventListener(APARTE_CONFIG_CHANGE, listener);
   return () => window.removeEventListener(APARTE_CONFIG_CHANGE, listener);
 }
-const APARTE_DEFAULT_SKELETON_FALLBACKS = {
-  message: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading...</div>',
-  code: '<div class="aparte-skeleton-fallback" style="padding:16px;background:#1e293b;color:#64748b;border-radius:8px;">Loading code...</div>',
-  thinking: '<div class="aparte-skeleton-fallback" style="padding:8px;color:#9ca3af;">Thinking...</div>',
-  input: '<div class="aparte-skeleton-fallback" style="padding:12px;color:#9ca3af;">...</div>',
-  list: '<div class="aparte-skeleton-fallback" style="padding:16px;color:#9ca3af;">Loading items...</div>',
-  text: '<div class="aparte-skeleton-fallback" style="padding:8px;color:#9ca3af;">...</div>'
-};
 function writeStreamedMarkdown(host, contentEl, content, streaming) {
   if (streaming) {
     if (host._aparteSmd === void 0) {
@@ -2275,7 +2272,21 @@ const thinkingRenderer = {
    * new class of risk. With no Markdown provider registered it degrades to the
    * zero-dependency default (escape + `<br>`), which is what it used to be.
    */
-  render: (segment) => `<details class="aparte-segment aparte-segment-thinking" data-segment-id="${escapeHtml(segment.id)}" ${segment.collapsed === false ? "open" : ""}><summary class="aparte-thinking-header"><span class="aparte-thinking-label">${escapeHtml(segment.label || contextConfig().t("thinking"))}</span><span class="aparte-thinking-toggle"></span></summary><div class="aparte-thinking-content">${contextConfig().renderMarkdown(segment.content)}</div></details>`,
+  /*
+   * WEARS THE ACCORDION RECIPE. A reasoning block is a disclosure — `<details>`, a
+   * `<summary>` you press, a panel, a chevron that turns — which is exactly what
+   * `surface/accordion.css` already draws, and this renderer used to draw a second
+   * time under four classes of its own. Two costs, both visible: it looked unrelated
+   * to every other disclosure in the library, and its chevron was the CHARACTER `▼`,
+   * a fourth way to draw a chevron here and the only one that is not a glyph — so it
+   * could not take `--aparte-icon-size`, could not be replaced through the icon
+   * provider, and rendered in whatever the platform font felt like.
+   *
+   * What stays thinking's own is the left rail and the quieter tone, which is the
+   * 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(segment.label || contextConfig().t("thinking"))}</span>${contextConfig().getIcon("expand")}</summary><div class="aparte-accordion__panel aparte-thinking-content">${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.
@@ -2349,7 +2360,7 @@ const codeRenderer = {
             <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 class="aparte-code-copy" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}">
+                <button class="aparte-btn aparte-btn--icon aparte-btn--sm aparte-code-copy" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}">
                     ${contextConfig().getIcon("copy")}
                 </button>
             </div>
@@ -2418,7 +2429,7 @@ const errorRenderer = {
       return out;
     }
     return `
-        <div class="aparte-segment 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)}">
             <div class="aparte-error-icon-wrapper">
                 ${contextConfig().getIcon("error") || "⚠"}
             </div>
@@ -2517,7 +2528,7 @@ function pillMarkup(segment, name, status) {
                     <span class="aparte-tool-icon">${contextConfig().getIcon("tool")}</span>
                     <span class="aparte-tool-name">${escapeHtml(name)}</span>
                 </span>
-                <span class="aparte-tool-spinner" aria-hidden="true"${status === "pending" ? "" : " hidden"}></span>
+                <span class="aparte-spinner aparte-tool-spinner" aria-hidden="true"${status === "pending" ? "" : " hidden"}></span>
                 <span class="aparte-tool-state">${badge}</span>`;
 }
 const toolCallRenderer = {
@@ -2532,6 +2543,7 @@ const toolCallRenderer = {
       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) {
@@ -2543,7 +2555,7 @@ const toolCallRenderer = {
     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"></span>${pill}</summary>
+                <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">
@@ -2618,7 +2630,7 @@ const toolCallRenderer = {
     const customRenderer = contextConfig().getToolRenderer(segment.toolCall?.name);
     customRenderer?.setup?.(element, segment);
   },
-  // CSS lives in styles/aparte.css — see its "Segment renderers" section for why a
+  // CSS lives in styles/segment/ — see that folder for why a
   // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
   // has no other way onto the page.
   getStyles: () => ""
@@ -2629,9 +2641,9 @@ const pipelineWaitingRenderer = {
   render: (segment) => {
     return `
         <div class="aparte-segment aparte-segment-pipeline-waiting" data-segment-id="${escapeHtml(segment.id)}" aria-label="${escapeAttr(waitingLabel())}" role="status">
-            <span class="aparte-pw-dot"></span>
-            <span class="aparte-pw-dot"></span>
-            <span class="aparte-pw-dot"></span>
+            <span class="aparte-dot aparte-pw-dot"></span>
+            <span class="aparte-dot aparte-pw-dot"></span>
+            <span class="aparte-dot aparte-pw-dot"></span>
         </div>`;
   },
   update: () => {
@@ -2656,7 +2668,7 @@ const pipelineWaitingRenderer = {
     });
     observer.observe(parent, { childList: true });
   },
-  // CSS lives in styles/aparte.css — see its "Segment renderers" section for why a
+  // CSS lives in styles/segment/ — see that folder for why a
   // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
   // has no other way onto the page.
   getStyles: () => ""
@@ -2862,7 +2874,7 @@ function renderBinaryFileArtifact(segment, kind) {
   if (cached && !isStreaming) {
     const previewBody = cached.previewHtml ? contextConfig().sanitizeHtml(cached.previewHtml) : `<div class="aparte-art-file__preview-empty">Preview not available for ${escapeHtml(kind)} yet</div>`;
     return `
-            <div class="aparte-segment aparte-segment-artifact-file"
+            <div class="aparte-segment aparte-card aparte-segment-artifact-file"
                  data-segment-id="${escapeHtml(segment.id)}"
                  data-artifact-type="${escapeHtml(kind)}"
                  data-state="ready">
@@ -2873,7 +2885,7 @@ function renderBinaryFileArtifact(segment, kind) {
                         <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(formatBytes(cached.bytes))} · ${escapeHtml(kind.toUpperCase())}</div>
                     </div>
                     <div class="aparte-art-file__actions">
-                        ${canRedownload ? `<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">${downloadLabel}</button>` : ""}
+                        ${canRedownload ? `<button type="button" class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">${downloadLabel}</button>` : ""}
                     </div>
                 </div>
                 <div class="aparte-art-file__body">
@@ -2888,7 +2900,7 @@ function renderBinaryFileArtifact(segment, kind) {
   const cleanContent = stripCodeFences(segment.content || "");
   const subText = isStreaming ? contextConfig().t("generating") : contextConfig().t("rebuildingPreview");
   return `
-        <div class="aparte-segment aparte-segment-artifact-file"
+        <div class="aparte-segment aparte-card aparte-segment-artifact-file"
              data-segment-id="${escapeHtml(segment.id)}"
              data-artifact-type="${escapeHtml(kind)}"
              data-state="${isStreaming ? "streaming" : "compiling"}">
@@ -2899,7 +2911,7 @@ function renderBinaryFileArtifact(segment, kind) {
                     <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(subText)}</div>
                 </div>
                 <div class="aparte-art-file__actions">
-                    ${canRedownload ? `<button type="button" class="aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>${downloadLabel}</button>` : ""}
+                    ${canRedownload ? `<button type="button" class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>${downloadLabel}</button>` : ""}
                 </div>
             </div>
             <div class="aparte-art-file__body">
@@ -3057,7 +3069,7 @@ function showSandboxError(element, phase, errorMsg) {
     body.innerHTML = `
             <div class="aparte-art-file__error">
                 <div class="aparte-art-file__error-title">${escapeHtml(contextConfig().t("sandboxError"))}</div>
-                <div class="aparte-art-file__error-msg">${escapeHtml(short)}</div>
+                <div class="aparte-output aparte-art-file__error-msg">${escapeHtml(short)}</div>
                 <div class="aparte-art-file__error-hint">${escapeHtml(contextConfig().t("sandboxErrorHint"))}</div>
             </div>
         `;
@@ -3082,8 +3094,9 @@ const artifactRenderer = {
     const codeLabel = cfg.t("code");
     const isBinary = BINARY_FILE_KINDS.has(kind);
     const cleanContent = stripCodeFences(segment.content || "");
+    const cardId = escapeAttr(segment.id);
     return `
-            <div class="aparte-segment aparte-segment-artifact-card"
+            <div class="aparte-segment aparte-card aparte-segment-artifact-card"
                  data-segment-id="${escapeHtml(segment.id)}"
                  data-artifact-type="${escapeHtml(kind)}"
                  data-streaming="${isStreaming ? "true" : "false"}"
@@ -3092,31 +3105,31 @@ const artifactRenderer = {
                  data-binary="${isBinary ? "true" : "false"}">
                 <header class="aparte-art-card__header">
                     <div class="aparte-art-card__title-block">
-                        <span class="aparte-art-card__kind" data-kind="${escapeHtml(kind)}">${escapeHtml(displayLang)}</span>
+                        <span class="aparte-badge aparte-badge--outline aparte-art-card__kind" data-kind="${escapeHtml(kind)}">${escapeHtml(displayLang)}</span>
                         <span class="aparte-art-card__title">${escapeHtml(title)}</span>
-                        ${isStreaming ? '<span class="aparte-art-card__pulse" aria-label="Streaming"></span>' : ""}
+                        ${isStreaming ? `<span class="aparte-dot aparte-art-card__pulse" role="img" aria-label="${escapeAttr(cfg.t("generating"))}"></span>` : ""}
                     </div>
                     <div class="aparte-art-card__actions">
-                        <button type="button" class="aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="${escapeAttr(contextConfig().t("copy"))}">
+                        <button type="button" class="aparte-btn aparte-btn--icon aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="${escapeAttr(contextConfig().t("copy"))}">
                             ${contextConfig().getIcon("copy")}
                         </button>
-                        <button type="button" class="aparte-art-card__btn" data-action="download" title="${escapeAttr(downloadLabel)}" aria-label="${escapeAttr(downloadLabel)}" ${isStreaming ? "disabled" : ""}>
-                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v9m0 0l-3-3m3 3l3-3M2 13h12"/></svg>
+                        <button type="button" class="aparte-btn aparte-btn--icon aparte-art-card__btn" data-action="download" title="${escapeAttr(downloadLabel)}" aria-label="${escapeAttr(downloadLabel)}" ${isStreaming ? "disabled" : ""}>
+                            ${contextConfig().getIcon("download")}
                         </button>
                     </div>
                 </header>
-                <nav class="aparte-art-card__tabs" role="tablist">
-                    <button type="button" role="tab" data-tab-target="code" aria-selected="true">${escapeHtml(codeLabel)}</button>
-                    ${previewable ? `<button type="button" role="tab" data-tab-target="preview" aria-selected="false" ${isStreaming ? "disabled" : ""}>${escapeHtml(previewLabel)}</button>` : ""}
+                <nav class="aparte-tabs aparte-tabs--underline aparte-art-card__tabs" role="tablist">
+                    <button type="button" class="aparte-tabs__tab" role="tab" id="aparte-art-${cardId}-tab-code" aria-controls="aparte-art-${cardId}-pane-code" aria-selected="true" tabindex="0" data-tab-target="code">${escapeHtml(codeLabel)}</button>
+                    ${previewable ? `<button type="button" class="aparte-tabs__tab" role="tab" id="aparte-art-${cardId}-tab-preview" aria-controls="aparte-art-${cardId}-pane-preview" aria-selected="false" tabindex="-1" data-tab-target="preview" ${isStreaming ? "disabled" : ""}>${escapeHtml(previewLabel)}</button>` : ""}
                 </nav>
                 <div class="aparte-art-card__body">
-                    <div class="aparte-art-card__pane" data-pane="code">
+                    <div class="aparte-art-card__pane" role="tabpanel" id="aparte-art-${cardId}-pane-code" aria-labelledby="aparte-art-${cardId}-tab-code" tabindex="0" data-pane="code">
                         <div class="aparte-code-content-wrapper">
                             <pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>
                         </div>
                     </div>
                     ${previewable ? `
-                        <div class="aparte-art-card__pane" data-pane="preview">
+                        <div class="aparte-art-card__pane" role="tabpanel" id="aparte-art-${cardId}-pane-preview" aria-labelledby="aparte-art-${cardId}-tab-preview" tabindex="0" data-pane="preview">
                             <div class="aparte-art-card__pending">${escapeHtml(cfg.t("previewPending"))}</div>
                         </div>
                     ` : ""}
@@ -3171,17 +3184,38 @@ const artifactRenderer = {
       }).catch(() => {
       });
     }
-    element.querySelectorAll("[data-tab-target]").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        const target = btn.getAttribute("data-tab-target");
-        if (!target) return;
-        if (target === "preview") mountPreviewFrame(element, segment);
-        element.setAttribute("data-tab", target);
-        element.querySelectorAll("[data-tab-target]").forEach((b) => {
-          b.setAttribute("aria-selected", b === btn ? "true" : "false");
-        });
+    const tabs = [...element.querySelectorAll("[data-tab-target]")];
+    const select = (btn, focus) => {
+      const target = btn.getAttribute("data-tab-target");
+      if (!target || btn.disabled) return;
+      if (target === "preview") mountPreviewFrame(element, segment);
+      element.setAttribute("data-tab", target);
+      for (const b of tabs) {
+        const on = b === btn;
+        b.setAttribute("aria-selected", on ? "true" : "false");
+        b.tabIndex = on ? 0 : -1;
+      }
+      if (focus) btn.focus();
+    };
+    for (const [i, btn] of tabs.entries()) {
+      btn.addEventListener("click", () => select(btn, false));
+      btn.addEventListener("keydown", (e) => {
+        const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+        let next = -1;
+        if (step) next = (i + step + tabs.length) % tabs.length;
+        else if (e.key === "Home") next = 0;
+        else if (e.key === "End") next = tabs.length - 1;
+        if (next < 0) return;
+        e.preventDefault();
+        for (let n = 0; n < tabs.length; n++) {
+          const candidate = tabs[(next + n * (step || 1) + tabs.length) % tabs.length];
+          if (candidate && !candidate.disabled) {
+            select(candidate, true);
+            return;
+          }
+        }
       });
-    });
+    }
     const copyBtn = element.querySelector('[data-action="copy"]');
     if (copyBtn) {
       copyBtn.addEventListener("click", () => {
@@ -3266,7 +3300,7 @@ const artifactRenderer = {
       });
     }
   },
-  // CSS lives in styles/aparte.css — see its "Segment renderers" section for why a
+  // CSS lives in styles/segment/ — see that folder for why a
   // built-in's rules belong there. `getStyles` stays for a CONSUMER's renderer, which
   // has no other way onto the page.
   getStyles: () => ""
@@ -4120,6 +4154,7 @@ class AparteConversationController {
 function cssEscape(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
+const MAX_SIBLING_RETRIES = 6;
 class AparteChatHost {
   binding;
   options;
@@ -4129,6 +4164,8 @@ class AparteChatHost {
   _renderedIds = /* @__PURE__ */ new Set();
   /** Sibling info from the last path-change, applied after the next render. */
   _pendingSiblings;
+  /** How many render passes the sibling write has waited for — see `_applyPendingSiblings`. */
+  _siblingRetries = 0;
   /** Abort handle for an in-flight {@link streamTokens} loop. */
   _streamAbort;
   /** Segment chunks written to the bubble, awaiting one coalesced state sync. */
@@ -4630,17 +4667,48 @@ class AparteChatHost {
       }
     }
   }
+  /**
+   * Write the branch counts onto their bubbles — and RESCHEDULE for the ones that are
+   * not on the page yet, instead of dropping them.
+   *
+   * This used to `continue` past a missing bubble and then clear `_pendingSiblings`
+   * unconditionally, which lost the fork for good. That is the "1 / 1" defect: the
+   * bubble kept its default of one sibling, the picker hid itself, and the other version
+   * became unreachable for the life of the page.
+   *
+   * It needed a framework that renders LATE, which is every framework here. React's
+   * `afterRender` is `requestAnimationFrame(() => cb())` — a bet that the next paint
+   * lands after React's commit, and it does not always; the repo has lost that same bet
+   * before (`25f356b`, "a bet on rAF phase"). The fix is here rather than in the
+   * wrapper's rAF call, because ANY binding whose `afterRender` can precede its commit
+   * hits this, and one fix at the host covers all four.
+   *
+   * Bounded, because a sibling can legitimately never arrive — a message that left the
+   * path has no bubble and never will, and an unbounded retry would hold a callback for
+   * the page's lifetime. Six passes is far more than the one tick the race needs.
+   */
   _applyPendingSiblings() {
     if (!this._pendingSiblings) return;
     const msgs = this.binding.getMessages();
+    const unresolved = [];
     for (const sib of this._pendingSiblings) {
       if (sib.count <= 1) continue;
       const bubble = this._bubbleById(sib.id);
-      if (!bubble) continue;
+      if (!bubble) {
+        unresolved.push(sib);
+        continue;
+      }
       const message = msgs.find((m) => m.id === sib.id);
       if (message) populateBubbleFromMessage(bubble, message, sib);
     }
     this._pendingSiblings = void 0;
+    if (unresolved.length && this._siblingRetries < MAX_SIBLING_RETRIES) {
+      this._siblingRetries += 1;
+      this._pendingSiblings = unresolved;
+      this.binding.afterRender(() => this._applyPendingSiblings());
+      return;
+    }
+    this._siblingRetries = 0;
   }
   // ── internals ──────────────────────────────────────────────────────────
   /** Orphan-stream guard: a stream is in flight but the last msg isn't it. */
@@ -5234,6 +5302,7 @@ function readableToAsyncIterable(stream, signal) {
     }
   };
 }
+let steppedPanelSeq = 0;
 let _relabels = null;
 function onRelabel(fn) {
   _relabels?.push(fn);
@@ -5244,6 +5313,18 @@ function el$1(tag, className, text) {
   if (text != null) node.textContent = text;
   return node;
 }
+function optionBody(label, description) {
+  const body = el$1("span", "aparte-elic-option-body");
+  body.appendChild(el$1("span", "aparte-elic-option-title", label));
+  if (description) body.appendChild(el$1("span", "aparte-elic-option-desc", description));
+  return body;
+}
+function commandOption(label, description, recommended) {
+  const button = el$1("button", "aparte-btn aparte-btn--block aparte-btn--surface aparte-elic-option aparte-elic-option--command" + (recommended ? " aparte-elic-option--recommended" : ""));
+  button.type = "button";
+  button.appendChild(optionBody(label, description));
+  return button;
+}
 function fieldHeader(parent, field, skipTitle) {
   let titleId;
   if (field.title && field.title.trim() !== skipTitle?.trim()) {
@@ -5256,61 +5337,87 @@ function fieldHeader(parent, field, skipTitle) {
   return titleId;
 }
 function labelGroup(list, opts) {
-  list.setAttribute("role", opts.multiple ? "group" : "radiogroup");
+  list.setAttribute("role", opts.multiple || opts.commands ? "group" : "radiogroup");
   if (opts.titleId) list.setAttribute("aria-labelledby", opts.titleId);
   else if (opts.fallbackLabel) list.setAttribute("aria-label", opts.fallbackLabel);
 }
-function buildEnumField(field, onChange, fallbackLabel) {
+function buildEnumField(field, onChange, fallbackLabel, settle) {
   const wrap = el$1("div", "aparte-elic-field aparte-elic-enum");
   const titleId = fieldHeader(wrap, field, fallbackLabel);
   const list = el$1("div", "aparte-elic-options");
-  labelGroup(list, { multiple: field.multiple, titleId, fallbackLabel });
   const name = `elic-${uuid()}`;
   const type = field.multiple ? "checkbox" : "radio";
+  const controlRecipe = type === "checkbox" ? "aparte-checkbox" : "aparte-radio";
   const allowOther = field.allowOther ?? contextConfig().getElicitationOptions().allowOther;
   const defaults = new Set(Array.isArray(field.default) ? field.default : field.default != null ? [field.default] : []);
+  const settling = settle != null && !field.multiple && defaults.size === 0;
+  labelGroup(list, { multiple: field.multiple, commands: settling, titleId, fallbackLabel });
   const buildOption = (value, label, description, recommended) => {
-    const row = el$1("label", "aparte-elic-option" + (recommended ? " aparte-elic-option--recommended" : ""));
-    const control = el$1("input", "aparte-elic-control");
+    if (settling) {
+      const button = commandOption(label, description, recommended);
+      button.addEventListener("click", () => settle?.(value));
+      return button;
+    }
+    const row = el$1("label", "aparte-field-choice aparte-elic-option" + (recommended ? " aparte-elic-option--recommended" : ""));
+    const control = el$1("input", controlRecipe + " aparte-elic-control");
     control.type = type;
     control.name = name;
     control.value = value;
     if (defaults.has(value)) control.checked = true;
-    const body = el$1("span", "aparte-elic-option-body");
-    body.appendChild(el$1("span", "aparte-elic-option-title", label));
-    if (description) body.appendChild(el$1("span", "aparte-elic-option-desc", description));
-    row.append(control, body);
+    row.append(control, optionBody(label, description));
     return row;
   };
   for (const opt of field.options) {
     list.appendChild(buildOption(opt.value, opt.label ?? opt.value, opt.description, opt.recommended));
   }
   let otherText = null;
+  let otherOpen = false;
   if (allowOther) {
-    const row = el$1("label", "aparte-elic-option aparte-elic-option--other");
-    const control = el$1("input", "aparte-elic-control");
-    control.type = type;
-    control.name = name;
-    control.value = "__other__";
-    const body = el$1("span", "aparte-elic-option-body");
     const t = contextConfig();
-    const otherTitle = el$1("span", "aparte-elic-option-title", t.t("elicitationOther"));
-    body.appendChild(otherTitle);
-    otherText = el$1("input", "aparte-elic-other-input");
+    otherText = el$1("input", "aparte-field aparte-elic-other-input");
     otherText.type = "text";
     otherText.placeholder = t.t("elicitationOtherPlaceholder");
     otherText.style.display = "none";
     otherText.setAttribute("aria-label", t.t("elicitationOtherLabel"));
     const otherInput = otherText;
-    onRelabel(() => {
-      const now = contextConfig();
-      otherTitle.textContent = now.t("elicitationOther");
-      otherInput.placeholder = now.t("elicitationOtherPlaceholder");
-      otherInput.setAttribute("aria-label", now.t("elicitationOtherLabel"));
-    });
-    body.appendChild(otherText);
-    row.append(control, body);
-    list.appendChild(row);
+    if (settling) {
+      const button = commandOption(t.t("elicitationOther"));
+      button.classList.add("aparte-elic-option--other");
+      button.setAttribute("aria-expanded", "false");
+      button.addEventListener("click", () => {
+        otherOpen = true;
+        button.setAttribute("aria-expanded", "true");
+        otherInput.style.display = "";
+        otherInput.focus();
+        onChange();
+      });
+      const otherTitle = button.querySelector(".aparte-elic-option-title");
+      onRelabel(() => {
+        const now = contextConfig();
+        otherTitle.textContent = now.t("elicitationOther");
+        otherInput.placeholder = now.t("elicitationOtherPlaceholder");
+        otherInput.setAttribute("aria-label", now.t("elicitationOtherLabel"));
+      });
+      list.append(button, otherInput);
+    } else {
+      const row = el$1("label", "aparte-field-choice aparte-elic-option aparte-elic-option--other");
+      const control = el$1("input", controlRecipe + " aparte-elic-control");
+      control.type = type;
+      control.name = name;
+      control.value = "__other__";
+      const body = el$1("span", "aparte-elic-option-body");
+      const otherTitle = el$1("span", "aparte-elic-option-title", t.t("elicitationOther"));
+      body.appendChild(otherTitle);
+      onRelabel(() => {
+        const now = contextConfig();
+        otherTitle.textContent = now.t("elicitationOther");
+        otherInput.placeholder = now.t("elicitationOtherPlaceholder");
+        otherInput.setAttribute("aria-label", now.t("elicitationOtherLabel"));
+      });
+      body.appendChild(otherText);
+      row.append(control, body);
+      list.appendChild(row);
+    }
   }
   wrap.appendChild(list);
   const controls = () => Array.from(list.querySelectorAll(".aparte-elic-control"));
@@ -5324,8 +5431,18 @@ function buildEnumField(field, onChange, fallbackLabel) {
     onChange();
   });
   otherText?.addEventListener("input", onChange);
+  const typedOther = () => otherText?.value.trim() ?? "";
+  if (settling) {
+    return {
+      el: wrap,
+      getValue: () => typedOther(),
+      isComplete: () => otherOpen && typedOther() !== "",
+      focus: () => list.querySelector(".aparte-elic-option--command")?.focus(),
+      offersSubmit: () => otherOpen
+    };
+  }
   const getValue = () => {
-    const otherVal = other()?.checked && otherText?.value.trim() ? otherText.value.trim() : "";
+    const otherVal = other()?.checked && typedOther() ? typedOther() : "";
     if (field.multiple) {
       const vals = controls().filter((c) => c.checked && c.value !== "__other__").map((c) => c.value);
       if (otherVal) vals.push(otherVal);
@@ -5345,15 +5462,42 @@ function buildEnumField(field, onChange, fallbackLabel) {
     focus: () => controls()[0]?.focus()
   };
 }
-function buildBooleanField(field, onChange, fallbackLabel) {
+function buildBooleanField(field, onChange, fallbackLabel, settle) {
   const wrap = el$1("div", "aparte-elic-field aparte-elic-boolean");
   const titleId = fieldHeader(wrap, field, fallbackLabel);
   const list = el$1("div", "aparte-elic-options");
-  labelGroup(list, { titleId, fallbackLabel });
   const name = `elic-${uuid()}`;
+  const settling = settle != null && field.default == null;
+  labelGroup(list, { commands: settling, titleId, fallbackLabel });
+  if (settling) {
+    const t2 = contextConfig();
+    const mkCommand = (val, label, defaulted) => {
+      const button = commandOption(label);
+      button.addEventListener("click", () => settle?.(val));
+      if (defaulted) {
+        const title = button.querySelector(".aparte-elic-option-title");
+        onRelabel(() => {
+          title.textContent = contextConfig().t(defaulted);
+        });
+      }
+      list.appendChild(button);
+    };
+    mkCommand(true, field.trueLabel ?? t2.t("elicitationYes"), field.trueLabel ? void 0 : "elicitationYes");
+    mkCommand(false, field.falseLabel ?? t2.t("elicitationNo"), field.falseLabel ? void 0 : "elicitationNo");
+    wrap.appendChild(list);
+    return {
+      el: wrap,
+      // Never read: the click settles, so nothing downstream asks this shape for
+      // a value. `false` rather than a throw keeps the field total.
+      getValue: () => false,
+      isComplete: () => false,
+      focus: () => list.querySelector(".aparte-elic-option--command")?.focus(),
+      offersSubmit: () => false
+    };
+  }
   const mk = (val, label, defaulted) => {
-    const row = el$1("label", "aparte-elic-option");
-    const control = el$1("input", "aparte-elic-control");
+    const row = el$1("label", "aparte-field-choice aparte-elic-option");
+    const control = el$1("input", "aparte-radio aparte-elic-control");
     control.type = "radio";
     control.name = name;
     control.value = val;
@@ -5383,7 +5527,7 @@ function buildBooleanField(field, onChange, fallbackLabel) {
 function buildStringField(field, onChange, fallbackLabel) {
   const wrap = el$1("div", "aparte-elic-field aparte-elic-string");
   fieldHeader(wrap, field, fallbackLabel);
-  const input = field.multiline ? el$1("textarea", "aparte-elic-text") : el$1("input", "aparte-elic-text");
+  const input = field.multiline ? el$1("textarea", "aparte-field aparte-field--textarea aparte-elic-text") : el$1("input", "aparte-field aparte-elic-text");
   if (!field.multiline) input.type = "text";
   if (field.placeholder) input.setAttribute("placeholder", field.placeholder);
   if (field.default) input.value = field.default;
@@ -5411,7 +5555,7 @@ function buildStringField(field, onChange, fallbackLabel) {
     focus: () => input.focus()
   };
 }
-function buildField(field, onChange, fallbackLabel, key) {
+function buildField(field, onChange, fallbackLabel, key, settle) {
   const custom = contextConfig().getElicitationFieldRenderer()?.(field, { key, notifyChange: onChange });
   if (custom) {
     return {
@@ -5423,9 +5567,10 @@ function buildField(field, onChange, fallbackLabel, key) {
   }
   switch (field.type) {
     case "enum":
-      return buildEnumField(field, onChange, fallbackLabel);
+      return buildEnumField(field, onChange, fallbackLabel, settle);
     case "boolean":
-      return buildBooleanField(field, onChange, fallbackLabel);
+      return buildBooleanField(field, onChange, fallbackLabel, settle);
+    // No `settle`: text is written, not chosen, so it always needs a commit.
     case "string":
       return buildStringField(field, onChange, fallbackLabel);
   }
@@ -5447,6 +5592,16 @@ function buildPanel(message, schema, onChange) {
   const panel = el$1("div", "aparte-elic-panel");
   const asked = typeof message === "function" ? message() : message;
   if (asked) panel.appendChild(el$1("p", "aparte-elic-message", asked));
+  let settleCb = null;
+  let settled = false;
+  const settle = (content) => {
+    if (settled) return;
+    settled = true;
+    settleCb?.(content);
+  };
+  const onSettle = (cb) => {
+    settleCb = cb;
+  };
   const body = el$1("div", "aparte-elic-body");
   panel.appendChild(body);
   const dismiss = el$1("div", "aparte-elic-dismiss");
@@ -5487,15 +5642,20 @@ function buildPanel(message, schema, onChange) {
       mode: () => "submit",
       canProceed: isComplete,
       proceed: () => {
-      }
+      },
+      // A form never settles from inside: its questions are collected and
+      // submitted together, and answering the last one on the click would be
+      // WCAG's F36 word for word. Registered so the shape is total; never fired.
+      onSettle
     };
     if (fields.length < 2 || cfg.getElicitationOptions().layout !== "stepped") return api;
     panel.classList.add("aparte-elic-panel--stepped");
     let current = 0;
-    const steps = el$1("div", "aparte-elic-steps");
+    const scope = `aparte-elic-${++steppedPanelSeq}`;
+    const steps = el$1("div", "aparte-tabs aparte-tabs--underline aparte-elic-steps");
     steps.setAttribute("role", "tablist");
     const chips = fields.map((f, i) => {
-      const chip = el$1("button", "aparte-elic-step");
+      const chip = el$1("button", "aparte-tabs__tab aparte-elic-step");
       chip.type = "button";
       chip.setAttribute("role", "tab");
       chip.textContent = f.header?.trim() || String(i + 1);
@@ -5503,6 +5663,22 @@ function buildPanel(message, schema, onChange) {
         show(i);
         f.field.focus();
       });
+      chip.id = `${scope}-tab-${i}`;
+      f.field.el.id = `${scope}-panel-${i}`;
+      f.field.el.setAttribute("role", "tabpanel");
+      f.field.el.setAttribute("aria-labelledby", chip.id);
+      chip.setAttribute("aria-controls", f.field.el.id);
+      chip.addEventListener("keydown", (e) => {
+        const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+        let next = -1;
+        if (step) next = (i + step + fields.length) % fields.length;
+        else if (e.key === "Home") next = 0;
+        else if (e.key === "End") next = fields.length - 1;
+        if (next < 0) return;
+        e.preventDefault();
+        show(next);
+        chips[next]?.focus();
+      });
       steps.appendChild(chip);
       return chip;
     });
@@ -5510,6 +5686,7 @@ function buildPanel(message, schema, onChange) {
     syncNav = () => {
       chips.forEach((chip, i) => {
         chip.setAttribute("aria-selected", String(i === current));
+        chip.tabIndex = i === current ? 0 : -1;
         chip.toggleAttribute("data-answered", fields[i].field.isComplete());
       });
     };
@@ -5530,7 +5707,7 @@ function buildPanel(message, schema, onChange) {
       }
     };
   }
-  const field = buildField(schema, onChange, asked);
+  const field = buildField(schema, onChange, asked, void 0, settle);
   body.appendChild(field.el);
   return {
     el: panel,
@@ -5538,10 +5715,11 @@ function buildPanel(message, schema, onChange) {
     getContent: () => field.getValue(),
     isComplete: () => field.isComplete(),
     focus: () => field.focus(),
-    mode: () => "submit",
+    mode: () => field.offersSubmit?.() ?? true ? "submit" : "none",
     canProceed: () => field.isComplete(),
     proceed: () => {
-    }
+    },
+    onSettle
   };
 }
 function el(tag, className, text) {
@@ -5571,7 +5749,8 @@ function buildApprovalPanel(message, options, onChange) {
   const labelled = [];
   const textOf = (option) => typeof option.label === "function" ? option.label() : option.label;
   for (const option of options) {
-    const button = el("button", `aparte-approval-option aparte-approval-option--${option.tone ?? "affirm"}`);
+    const tone = option.tone ?? "affirm";
+    const button = el("button", `aparte-btn aparte-btn--block aparte-btn--surface aparte-approval-option aparte-approval-option--${tone}`);
     button.type = "button";
     button.textContent = textOf(option);
     button.addEventListener("click", () => fire({ option: option.value }));
@@ -5675,6 +5854,27 @@ class AparteClient {
     }
     this._setupListeners();
   }
+  /**
+   * What every fresh user action does before it starts a turn.
+   *
+   * Clearing the abort flag has to happen at the START of the action rather than inside
+   * `_streamTurn`, which runs after the auth and file-reading awaits — a reset there
+   * erased an abort that arrived while the user was still waiting for a large attachment
+   * to be read.
+   *
+   * Cancelling the previous turn's tool controllers used to happen only on `aparte-send`.
+   * Retry and edit reset the flag and left them running, so a tool handler from the turn
+   * being superseded stayed alive — with its timeout still counting — while its reply was
+   * already off the active path. A cold audit found the asymmetry; three callers, one
+   * rule, no third copy to fall out of step.
+   */
+  _beginUserTurn() {
+    this._isAborted = false;
+    for (const controller of this._activeToolControllers) {
+      controller.abort();
+    }
+    this._activeToolControllers.clear();
+  }
   /**
    * Sets up the event listeners.
    * This is called once in the constructor.
@@ -5685,11 +5885,7 @@ class AparteClient {
       const event = e;
       if (event.type !== "aparte-send") return;
       if (!this._isForThisInstance(event)) return;
-      this._isAborted = false;
-      for (const controller of this._activeToolControllers) {
-        controller.abort();
-      }
-      this._activeToolControllers.clear();
+      this._beginUserTurn();
       void this._handleSend(event);
     };
   }
@@ -6039,7 +6235,7 @@ ${summary}`,
   }
   async _handleRetry(event) {
     const { messageId, targetId } = event.detail ?? {};
-    this._isAborted = false;
+    this._beginUserTurn();
     if (!messageId) return;
     const targetElement = this._resolveTarget(targetId);
     if (!targetElement) {
@@ -6066,9 +6262,7 @@ ${summary}`,
     if (!provider) return;
     const authConfig = await this._resolveAuth(providerId);
     const chatMessages = this._messagesToChatMessages(historyMessages);
-    const systemMessages = [];
-    const userSystemPrompt = this._config.resolveSystemPrompt();
-    if (userSystemPrompt) systemMessages.push({ role: "system", content: userSystemPrompt });
+    const systemMessages = this._systemMessages();
     await this._streamTurn(
       targetElement,
       newMessageId,
@@ -6079,13 +6273,30 @@ ${summary}`,
       { temperature: 0.4 }
     );
   }
+  /**
+   * The system messages a turn opens with: the app's own template, then the registered
+   * tools' `systemPrompt`s.
+   *
+   * A helper rather than three copies. The two lines it replaces were written out at each
+   * of the three turn entry points (send, retry, edit), which is exactly how the tool half
+   * would have been added to two of them and forgotten in the third — the same shape as
+   * the abort-flag asymmetry `_beginUserTurn` exists to prevent.
+   */
+  _systemMessages() {
+    const messages = [];
+    const appPrompt = this._config.resolveSystemPrompt();
+    if (appPrompt) messages.push({ role: "system", content: appPrompt });
+    const toolPrompts = this._config.resolveToolSystemPrompts();
+    if (toolPrompts) messages.push({ role: "system", content: toolPrompts });
+    return messages;
+  }
   /**
    * Handle aparte-edit — update the user message in place, truncate all subsequent
    * messages, then re-stream a fresh assistant response.
    */
   async _handleEdit(event) {
     const { messageId, content: newContent, targetId } = event.detail ?? {};
-    this._isAborted = false;
+    this._beginUserTurn();
     if (!messageId || newContent === void 0) return;
     const targetElement = this._resolveTarget(targetId);
     if (!targetElement) {
@@ -6105,9 +6316,7 @@ ${summary}`,
     }
     const historyMessages = editIdx >= 0 ? allMessages.slice(0, editIdx + 1) : allMessages;
     const chatMessages = this._messagesToChatMessages(historyMessages);
-    const systemMessages = [];
-    const userSystemPrompt = this._config.resolveSystemPrompt();
-    if (userSystemPrompt) systemMessages.push({ role: "system", content: userSystemPrompt });
+    const systemMessages = this._systemMessages();
     const config = this._config.getModelConfig();
     const providerId = config.defaultProvider;
     if (!providerId) return;
@@ -6276,11 +6485,7 @@ ${summary}`,
    * Build the initial messages array, prepending system prompts and conversation history.
    */
   _buildMessages(userContent, target, parts) {
-    const messages = [];
-    const userSystemPrompt = this._config.resolveSystemPrompt();
-    if (userSystemPrompt) {
-      messages.push({ role: "system", content: userSystemPrompt });
-    }
+    const messages = this._systemMessages();
     const historyOption = this.options.history ?? "viewport";
     const viewportMessages = target?.getMessages?.() ?? [];
     if (historyOption === "viewport") {
@@ -6736,6 +6941,21 @@ ${content}
           ...wholeParser.parse(response).segments,
           ...wholeParser.finalize()
         ];
+        const stringHint = baseRequest._meta?.artifactHint;
+        if (stringHint) {
+          const codeIdx = parsed.findIndex((s) => s.type === "code");
+          if (codeIdx !== -1) {
+            const codeSeg = parsed[codeIdx];
+            parsed[codeIdx] = {
+              id: codeSeg.id,
+              type: "artifact",
+              mimeType: stringHint.mimeType,
+              artifactType: stringHint.kind,
+              title: codeSeg.filename ?? stringHint.kind,
+              content: codeSeg.content
+            };
+          }
+        }
         if (parsed.length > 0) {
           for (const segment of parsed) targetElement.addSegment?.(segment);
           this._updateMessage(targetElement, messageId, { status: "completed" });
@@ -7072,7 +7292,7 @@ ${content}
       details: error.code
     };
     if (target.updateMessage) {
-      const rendered = target.getMessages?.()?.find((m) => m.id === messageId)?.segments ?? [];
+      const rendered = target.getMessage?.(messageId)?.segments ?? target.getMessages?.()?.find((m) => m.id === messageId)?.segments ?? [];
       target.updateMessage(messageId, {
         status: "error",
         segments: [...rendered, errorSegment]
@@ -7429,13 +7649,14 @@ export {
   unregisterSegmentRenderer as a5,
   uuid as a6,
   mergeSegmentUpdate as a7,
-  stampSegmentActivity as a8,
-  stampSegmentOnInsert as a9,
-  stampSegmentOnUpdate as aa,
-  renumberSegments as ab,
-  openSegmentIds as ac,
-  isTerminalStatus as ad,
-  adoptMessageSegments as ae,
+  writeStreamedMarkdown as a8,
+  stampSegmentActivity as a9,
+  stampSegmentOnInsert as aa,
+  stampSegmentOnUpdate as ab,
+  renumberSegments as ac,
+  openSegmentIds as ad,
+  isTerminalStatus as ae,
+  adoptMessageSegments as af,
   APARTE_DEFAULT_BUBBLE_ACTIONS as b,
   APARTE_DEFAULT_HOST_HANDLERS as c,
   APARTE_DEFAULT_ICON_FALLBACKS as d,
@@ -7462,4 +7683,4 @@ export {
   buildElicitationPanel as y,
   collectRendererStyles as z
 };
-//# sourceMappingURL=is-awaiting-reply-CxWRISBC.js.map
+//# sourceMappingURL=is-awaiting-reply-DrO_oR32.js.map