@aparte/core 0.13.0 → 0.14.0

package/dist/index.js

@@ -1,5 +1,6 @@
-import { $ as resolveConfig, a4 as subscribeConfigChange, a1 as runWithConfig, p as AparteElicitationAbortError, x as buildApprovalPanel, y as buildElicitationPanel, K as escapeAttr, F as cssEscape, a7 as mergeSegmentUpdate, L as escapeHtml, a8 as writeStreamedMarkdown, O as getSegmentRenderer, P as installDefaultRenderersOnce, s as AparteMessageRepository, a9 as stampSegmentActivity, aa as stampSegmentOnInsert, ab as stampSegmentOnUpdate, ac as renumberSegments, ad as openSegmentIds, ae as isTerminalStatus, af as adoptMessageSegments, Q as isAwaitingReply, W as populateBubbleFromMessage, a6 as uuid, a0 as revokeAttachmentUrls } from "./is-awaiting-reply-DrO_oR32.js";
-import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, q, r, t, u, v, w, z, B, C, D, E, G, H, I, J, M, N, R, S, T, U, V, X, Y, Z, _, a2, a3, a5 } from "./is-awaiting-reply-DrO_oR32.js";
+import { Z as resolveConfig, a2 as subscribeConfigChange, $ as runWithConfig, o as AparteElicitationAbortError, w as buildApprovalPanel, x as buildElicitationPanel, I as escapeAttr, E as cssEscape, a5 as mergeSegmentUpdate, J as escapeHtml, a6 as writeStreamedMarkdown, M as getSegmentRenderer, N as installDefaultRenderersOnce, r as AparteMessageRepository, a7 as stampSegmentActivity, a8 as stampSegmentOnInsert, a9 as stampSegmentOnUpdate, aa as renumberSegments, ab as openSegmentIds, ac as isTerminalStatus, ad as adoptMessageSegments, O as isAwaitingReply, U as populateBubbleFromMessage, a4 as uuid, _ as revokeAttachmentUrls } from "./is-awaiting-reply-BZ_iJ3s3.js";
+import { A, a, b, c, d, e, f, g, h, i, j, k, l, m, n, p, q, s, t, u, v, y, z, B, C, D, F, G, H, K, L, P, Q, R, S, T, V, W, X, Y, a0, a1, a3 } from "./is-awaiting-reply-BZ_iJ3s3.js";
+import { deriveArtifactKind } from "@aparte/engine";
 class AparteOption extends HTMLElement {
   static get observedAttributes() {
     return ["value", "disabled", "selected", "data-status"];
@@ -286,7 +287,13 @@ class AparteSelect extends HTMLElement {
     trigger.setAttribute("aria-label", this.getAttribute("aria-label") || placeholder);
     const labelSpan = document.createElement("span");
     labelSpan.className = "aparte-select-label";
-    labelSpan.textContent = placeholder;
+    const labelText = document.createElement("span");
+    labelText.className = "aparte-select-label-text";
+    labelText.textContent = placeholder;
+    const sizer = document.createElement("span");
+    sizer.className = "aparte-select-label-sizer";
+    sizer.setAttribute("aria-hidden", "true");
+    labelSpan.append(labelText, sizer);
     const chevronSpan = document.createElement("span");
     chevronSpan.className = "aparte-select-chevron";
     chevronSpan.innerHTML = resolveConfig(this).getIcon("expand");
@@ -329,6 +336,7 @@ class AparteSelect extends HTMLElement {
   _setupMutationObserver() {
     this._observer = new MutationObserver(() => {
       this._updateDropdownContent();
+      this._updateTriggerLabel();
       this._restoreActive();
     });
     this._observer.observe(this, { childList: true, subtree: true });
@@ -458,7 +466,7 @@ class AparteSelect extends HTMLElement {
   /** Highlight the option at `index` (clamped) and point aria-activedescendant at it. */
   _setActive(index) {
     const all = this.querySelectorAll("aparte-option");
-    all.forEach((o2) => o2.removeAttribute("data-active"));
+    all.forEach((o) => o.removeAttribute("data-active"));
     const opts = this._visibleOptions();
     if (opts.length === 0) {
       this._activeIndex = -1;
@@ -477,7 +485,7 @@ class AparteSelect extends HTMLElement {
   _clearActive() {
     this._activeIndex = -1;
     this._trigger?.removeAttribute("aria-activedescendant");
-    this.querySelectorAll("aparte-option").forEach((o2) => o2.removeAttribute("data-active"));
+    this.querySelectorAll("aparte-option").forEach((o) => o.removeAttribute("data-active"));
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Actions
@@ -498,7 +506,7 @@ class AparteSelect extends HTMLElement {
     this._updatePosition();
     this._searchInput?.focus();
     const opts = this._visibleOptions();
-    const selectedIdx = opts.findIndex((o2) => o2.getAttribute("value") === this._value);
+    const selectedIdx = opts.findIndex((o) => o.getAttribute("value") === this._value);
     this._setActive(selectedIdx >= 0 ? selectedIdx : 0);
     this.dispatchEvent(new CustomEvent("aparte-select-open", { bubbles: true }));
   }
@@ -551,10 +559,23 @@ class AparteSelect extends HTMLElement {
     this._trigger?.focus();
   }
   _updateTriggerLabel() {
-    const labelEl = this._trigger?.querySelector(".aparte-select-label");
-    if (labelEl) {
-      const selectedLabel = this._getSelectedLabel();
-      labelEl.textContent = selectedLabel || this.getAttribute("placeholder") || "Select...";
+    const placeholder = this.getAttribute("placeholder") || "Select...";
+    const labelText = this._trigger?.querySelector(".aparte-select-label-text");
+    if (labelText) {
+      const next = this._getSelectedLabel() || placeholder;
+      if (labelText.textContent !== next) labelText.textContent = next;
+    }
+    const sizer = this._trigger?.querySelector(".aparte-select-label-sizer");
+    if (sizer) {
+      const labels = [placeholder, ...Array.from(this.querySelectorAll("aparte-option"), (o) => o.textContent?.trim() || "")];
+      const current = Array.from(sizer.children, (s2) => s2.textContent ?? "");
+      if (labels.length !== current.length || labels.some((l2, i2) => l2 !== current[i2])) {
+        sizer.replaceChildren(...labels.map((text) => {
+          const span = document.createElement("span");
+          span.textContent = text;
+          return span;
+        }));
+      }
     }
     const options = this.querySelectorAll("aparte-option");
     options.forEach((opt) => {
@@ -731,11 +752,17 @@ class AparteElicitation extends HTMLElement {
     return new Promise((resolve, reject) => {
       let done = false;
       const slot = {};
+      const focusedBefore = document.activeElement;
       const close = () => {
         if (done) return false;
         done = true;
         this._pending = null;
+        const active = document.activeElement;
+        const focusWasInPanel = active instanceof Node && composer.contains(active);
         composer.hidePanel(slot.token);
+        if (focusWasInPanel && focusedBefore instanceof HTMLElement && focusedBefore.isConnected) {
+          focusedBefore.focus();
+        }
         return true;
       };
       const settle = (result) => {
@@ -827,12 +854,12 @@ class AparteElicitation extends HTMLElement {
    * resolves `undefined` on three wrappers out of four.
    */
   _pendingTargetId() {
-    let el = this._pending?.composer ?? null;
-    while (el) {
-      const tag = el.tagName?.toLowerCase();
-      const isHost = tag === "aparte-chat" || tag === "aparte-chat-component" || el.hasAttribute?.("data-aparte-chat");
-      if (isHost && el.id) return el.id;
-      el = el.parentElement;
+    let el2 = this._pending?.composer ?? null;
+    while (el2) {
+      const tag = el2.tagName?.toLowerCase();
+      const isHost = tag === "aparte-chat" || el2.hasAttribute?.("data-aparte-chat");
+      if (isHost && el2.id) return el2.id;
+      el2 = el2.parentElement;
     }
     return void 0;
   }
@@ -858,7 +885,7 @@ class AparteElicitation extends HTMLElement {
       const composer = node.querySelector("aparte-composer");
       if (composer && typeof composer.showPanel === "function") return composer;
       const tag = node.tagName?.toLowerCase();
-      const isChatBoundary = tag === "aparte-chat" || tag === "aparte-chat-component" || node.hasAttribute?.("data-aparte-chat");
+      const isChatBoundary = tag === "aparte-chat" || node.hasAttribute?.("data-aparte-chat");
       if (isChatBoundary) break;
       node = node.parentElement;
     }
@@ -996,10 +1023,10 @@ function warnMissingRenderer(type) {
 function unrenderedSegment(segment) {
   const fallback = typeof segment.fallback === "string" && segment.fallback.trim() ? segment.fallback : null;
   if (!fallback) warnMissingRenderer(segment.type);
-  const el = document.createElement("div");
-  el.className = fallback ? "aparte-segment aparte-segment-fallback" : "aparte-segment aparte-segment-unknown";
-  el.textContent = fallback ?? `[Unknown segment type: ${segment.type}]`;
-  return el;
+  const el2 = document.createElement("div");
+  el2.className = fallback ? "aparte-segment aparte-segment-fallback" : "aparte-segment aparte-segment-unknown";
+  el2.textContent = fallback ?? `[Unknown segment type: ${segment.type}]`;
+  return el2;
 }
 function resolveSegmentRenderer(type, config) {
   const renderer = getSegmentRenderer(type, config);
@@ -1037,7 +1064,7 @@ class AparteChatBubble extends HTMLElement {
   /** The live inline editor (the composer's contenteditable primitive), present only while `_editing`. */
   _editInput = null;
   static get observedAttributes() {
-    return ["role", "data-role", "content", "timestamp", "message-id", "streaming", "name"];
+    return ["data-role", "content", "timestamp", "message-id", "streaming", "name"];
   }
   constructor() {
     super();
@@ -1077,11 +1104,11 @@ class AparteChatBubble extends HTMLElement {
     for (const segment of this._segments) {
       const renderer = resolveSegmentRenderer(segment.type, this._cfg);
       if (!renderer?.relabel) continue;
-      const el = this._segmentsEl.querySelector(
+      const el2 = this._segmentsEl.querySelector(
         `:scope > [data-segment-id="${cssEscape(segment.id)}"]`
       );
-      if (!el) continue;
-      runWithConfig(this._cfg, () => renderer.relabel(el, segment));
+      if (!el2) continue;
+      runWithConfig(this._cfg, () => renderer.relabel(el2, segment));
     }
   }
   /**
@@ -1128,9 +1155,7 @@ class AparteChatBubble extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
     switch (name) {
-      case "role":
       case "data-role":
-        if (newValue === "article") return;
         if (newValue === "user" || newValue === "assistant") {
           this._role = newValue;
           this._updateRole();
@@ -1196,7 +1221,7 @@ class AparteChatBubble extends HTMLElement {
   }
   /** Update a specific segment */
   updateSegment(segmentId, updates) {
-    const index = this._segments.findIndex((s) => s.id === segmentId);
+    const index = this._segments.findIndex((s2) => s2.id === segmentId);
     if (index !== -1) {
       const updated = mergeSegmentUpdate(this._segments[index], updates);
       this._segments[index] = updated;
@@ -1205,7 +1230,7 @@ class AparteChatBubble extends HTMLElement {
   }
   /** Append content to a segment */
   appendToSegment(segmentId, content) {
-    const segment = this._segments.find((s) => s.id === segmentId);
+    const segment = this._segments.find((s2) => s2.id === segmentId);
     if (segment && "content" in segment) {
       segment.content += content;
       this._applySegmentUpdate(segmentId, segment, { content: segment.content });
@@ -1231,18 +1256,19 @@ class AparteChatBubble extends HTMLElement {
    * the human-in-the-loop control.
    */
   removeSegment(segmentId) {
-    const index = this._segments.findIndex((s) => s.id === segmentId);
+    const index = this._segments.findIndex((s2) => s2.id === segmentId);
     if (index !== -1) {
       this._segments.splice(index, 1);
     }
-    const el = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
-    el?.remove();
+    const el2 = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
+    el2?.remove();
     this._updateWaiting();
   }
   /** Set attachments (chips shown above message content, user role only) */
   setAttachments(attachments) {
     this._attachments = attachments;
     this._updateAttachments();
+    this._updateWaiting();
   }
   /**
    * Set token usage + timing for this message (assistant only).
@@ -1294,6 +1320,7 @@ class AparteChatBubble extends HTMLElement {
     if ("attachments" in updates) {
       this._attachments = updates.attachments ?? [];
       this._updateAttachments();
+      this._updateWaiting();
     }
   }
   // ─────────────────────────────────────────────────────────────────────────
@@ -1306,10 +1333,10 @@ class AparteChatBubble extends HTMLElement {
     }
     const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (renderer) {
-      const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
-      if (el) {
-        this._segmentsEl.appendChild(el);
-        runWithConfig(this._cfg, () => renderer.setup?.(el, segment));
+      const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+      if (el2) {
+        this._segmentsEl.appendChild(el2);
+        runWithConfig(this._cfg, () => renderer.setup?.(el2, segment));
       }
     } else {
       this._segmentsEl.appendChild(unrenderedSegment(segment));
@@ -1318,27 +1345,27 @@ class AparteChatBubble extends HTMLElement {
     this._reflectError();
   }
   _applySegmentUpdate(segmentId, segment, updates) {
-    const el = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
-    if (!el) {
+    const el2 = this._segmentsEl?.querySelector(`:scope > [data-segment-id="${cssEscape(segmentId)}"]`);
+    if (!el2) {
       this._renderSegments();
       return;
     }
     const renderer = resolveSegmentRenderer(segment.type, this._cfg);
     if (!renderer) return;
     if (renderer.update) {
-      runWithConfig(this._cfg, () => renderer.update(el, segment));
+      runWithConfig(this._cfg, () => renderer.update(el2, segment));
     } else {
       const newEl = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
       if (newEl) {
-        el.replaceWith(newEl);
+        el2.replaceWith(newEl);
         runWithConfig(this._cfg, () => renderer.setup?.(newEl, segment));
       }
     }
     if ("collapsed" in updates) {
       if (updates.collapsed) {
-        el.removeAttribute("open");
+        el2.removeAttribute("open");
       } else {
-        el.setAttribute("open", "");
+        el2.setAttribute("open", "");
       }
     }
   }
@@ -1354,8 +1381,7 @@ class AparteChatBubble extends HTMLElement {
   }
   _render() {
     const dataRole = this.getAttribute("data-role");
-    const legacyRole = this.getAttribute("role");
-    const role = dataRole && dataRole !== "article" ? dataRole : legacyRole && legacyRole !== "article" ? legacyRole : "assistant";
+    const role = dataRole === "user" || dataRole === "assistant" ? dataRole : "assistant";
     this._role = role;
     if (this.getAttribute("role") !== "article") {
       this.setAttribute("role", "article");
@@ -1414,6 +1440,7 @@ class AparteChatBubble extends HTMLElement {
     this._actionBarEl = this.querySelector(".aparte-action-bar");
     this._branchPickerEl = this.querySelector(".aparte-branch-picker");
     this._footerEl = this.querySelector(".aparte-footer");
+    this._transcriptBusy = !!this.closest("aparte-chat-viewport")?.hasAttribute("data-busy");
     this._updateActionBar();
     this._renderAvatar();
     if (this._streaming) this._updateStreaming(true);
@@ -1434,12 +1461,16 @@ class AparteChatBubble extends HTMLElement {
     const waiting = this._streaming && this._role !== "user" && empty;
     const box = this.querySelector(".aparte-message-content");
     if (box) box.hidden = empty && !waiting;
-    const el = this.querySelector(".aparte-waiting");
-    if (!el) return;
-    el.hidden = !waiting;
+    const message = this.querySelector(".aparte-message");
+    if (message) {
+      message.toggleAttribute("data-empty", empty && !this._streaming && this._attachments.length === 0);
+    }
+    const el2 = this.querySelector(".aparte-waiting");
+    if (!el2) return;
+    el2.hidden = !waiting;
     if (!waiting) return;
     const label = this._cfg.getLocale().typing;
-    const sr = el.querySelector(".aparte-sr-only");
+    const sr = el2.querySelector(".aparte-sr-only");
     if (sr && sr.textContent !== label) sr.textContent = label;
   }
   /**
@@ -1541,10 +1572,10 @@ class AparteChatBubble extends HTMLElement {
     for (const segment of this._segments) {
       const renderer = resolveSegmentRenderer(segment.type, this._cfg);
       if (renderer) {
-        const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
-        if (el) {
-          this._segmentsEl.appendChild(el);
-          runWithConfig(this._cfg, () => renderer.setup?.(el, segment));
+        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => renderer.render(segment)));
+        if (el2) {
+          this._segmentsEl.appendChild(el2);
+          runWithConfig(this._cfg, () => renderer.setup?.(el2, segment));
         }
       } else {
         this._segmentsEl.appendChild(unrenderedSegment(segment));
@@ -1565,7 +1596,7 @@ class AparteChatBubble extends HTMLElement {
   _reflectError() {
     const message = this.querySelector(".aparte-message");
     if (!message) return;
-    const hasError = this._segments.some((s) => s.type === "error");
+    const hasError = this._segments.some((s2) => s2.type === "error");
     if (hasError) message.setAttribute("data-error", "");
     else message.removeAttribute("data-error");
   }
@@ -1600,18 +1631,18 @@ class AparteChatBubble extends HTMLElement {
     const customAttachment = this._cfg.getAttachmentRenderer?.();
     if (customAttachment) {
       this._attachmentsEl.replaceChildren();
-      for (const a4 of this._attachments) {
-        const el = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a4)));
-        if (el) this._attachmentsEl.appendChild(el);
+      for (const a2 of this._attachments) {
+        const el2 = segmentRenderResultToElement(runWithConfig(this._cfg, () => customAttachment(a2)));
+        if (el2) this._attachmentsEl.appendChild(el2);
       }
       return;
     }
-    this._attachmentsEl.innerHTML = this._attachments.map((a4) => {
-      const name = escapeHtml(a4.name);
-      if (a4.type.startsWith("image/")) {
-        return `<div class="aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeHtml(a4.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
+    this._attachmentsEl.innerHTML = this._attachments.map((a2) => {
+      const name = escapeHtml(a2.name);
+      if (a2.type.startsWith("image/")) {
+        return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--image" title="${name}"><img class="aparte-thumb__img" src="${escapeHtml(a2.url)}" alt="${name}" loading="lazy" /><span class="aparte-thumb__name">${name}</span></div>`;
       }
-      return `<div class="aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._fileExt(a4.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
+      return `<div class="aparte-thumbnail aparte-thumb aparte-thumb--file" title="${name}"><span class="aparte-thumb__ext">${escapeHtml(this._fileExt(a2.name))}</span><span class="aparte-thumb__name">${name}</span></div>`;
     }).join("");
     if (!this._cfg.getHostHandlers().attachmentPreview) return;
     this._attachmentsEl.querySelectorAll(".aparte-thumb--image").forEach((tile) => {
@@ -1676,6 +1707,25 @@ class AparteChatBubble extends HTMLElement {
       detail
     }));
   };
+  /**
+   * Whether a reply is streaming somewhere in this bubble's transcript. Set by the
+   * viewport (`data-busy` on it, pushed here), read once on connect for a bubble
+   * mounted while the flag was already up. While busy, the branch arrows and the
+   * retry/edit actions are disabled — the transcript is read-only except for Stop.
+   */
+  _transcriptBusy = false;
+  setTranscriptBusy(busy) {
+    if (this._transcriptBusy === busy) return;
+    this._transcriptBusy = busy;
+    this._applyTranscriptBusy();
+    this._updateBranchPicker();
+  }
+  _applyTranscriptBusy() {
+    if (!this._actionBarEl) return;
+    for (const btn of this._actionBarEl.querySelectorAll('[data-action="retry"], [data-action="edit"]')) {
+      btn.disabled = this._transcriptBusy;
+    }
+  }
   _updateBranchPicker() {
     if (!this._branchPickerEl) return;
     if (this._siblingCount <= 1 || this._role !== "assistant") {
@@ -1703,8 +1753,8 @@ class AparteChatBubble extends HTMLElement {
     }
     const prevBtn = this._branchPickerEl.querySelector(".aparte-branch-prev");
     const nextBtn = this._branchPickerEl.querySelector(".aparte-branch-next");
-    if (prevBtn) prevBtn.disabled = this._siblingIndex === 0;
-    if (nextBtn) nextBtn.disabled = this._siblingIndex === this._siblingCount - 1;
+    if (prevBtn) prevBtn.disabled = this._transcriptBusy || this._siblingIndex === 0;
+    if (nextBtn) nextBtn.disabled = this._transcriptBusy || this._siblingIndex === this._siblingCount - 1;
   }
   // ─────────────────────────────────────────────────────────────────────────
   // Action Bar
@@ -1721,14 +1771,14 @@ class AparteChatBubble extends HTMLElement {
     const buttons = [];
     if (this._role === "user") {
       if (config.user) {
-        for (const a4 of config.user) buttons.push(this._actionButtonHtml(a4, icons, locale));
+        for (const a2 of config.user) buttons.push(this._actionButtonHtml(a2, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.edit) buttons.push(this._actionButtonHtml("edit", icons, locale));
       }
     } else if (this._role === "assistant") {
       if (config.assistant) {
-        for (const a4 of config.assistant) buttons.push(this._actionButtonHtml(a4, icons, locale));
+        for (const a2 of config.assistant) buttons.push(this._actionButtonHtml(a2, icons, locale));
       } else {
         if (config.copy) buttons.push(this._actionButtonHtml("copy", icons, locale));
         if (config.retry) buttons.push(this._actionButtonHtml("retry", icons, locale));
@@ -1741,6 +1791,7 @@ class AparteChatBubble extends HTMLElement {
     }
     this._actionBarEl.innerHTML = buttons.join("");
     this._appendCustomActions(icons);
+    this._applyTranscriptBusy();
     this._actionBarEl.querySelectorAll(".aparte-action-btn").forEach((btn) => {
       btn.addEventListener("click", (e2) => this._handleActionClick(e2));
     });
@@ -1759,20 +1810,21 @@ class AparteChatBubble extends HTMLElement {
     const barEmpty = !this._actionBarEl || this._actionBarEl.hidden;
     const pickerHidden = !this._branchPickerEl || this._branchPickerEl.hidden;
     this._footerEl.hidden = barEmpty && pickerHidden;
+    this.querySelector(".aparte-message")?.toggleAttribute("data-branches", !pickerHidden);
   }
   /** Append the registered custom action buttons for this bubble's role. */
   _appendCustomActions(icons) {
     if (!this._actionBarEl) return;
-    for (const a4 of this._cfg.getActions("bubble")) {
-      const roles = a4.bubble?.roles ?? ["user", "assistant"];
+    for (const a2 of this._cfg.getActions("bubble")) {
+      const roles = a2.bubble?.roles ?? ["user", "assistant"];
       if (!roles.includes(this._role)) continue;
       const btn = document.createElement("button");
       btn.className = "aparte-btn aparte-btn--icon aparte-action-btn aparte-action-custom";
-      btn.dataset["action"] = `custom:${a4.id}`;
-      btn.setAttribute("aria-label", a4.label);
-      btn.setAttribute("title", a4.label);
-      const fromProvider = icons[a4.icon];
-      btn.innerHTML = a4.icon.startsWith("<") ? a4.icon : typeof fromProvider === "function" ? fromProvider() : a4.iconFallback ?? "";
+      btn.dataset["action"] = `custom:${a2.id}`;
+      btn.setAttribute("aria-label", a2.label);
+      btn.setAttribute("title", a2.label);
+      const fromProvider = icons[a2.icon];
+      btn.innerHTML = a2.icon.startsWith("<") ? a2.icon : typeof fromProvider === "function" ? fromProvider() : a2.iconFallback ?? "";
       this._actionBarEl.appendChild(btn);
     }
   }
@@ -1843,7 +1895,7 @@ class AparteChatBubble extends HTMLElement {
     }
     switch (action) {
       case "copy": {
-        const text = this._content || this._segments.map((s) => s.content ?? "").join("\n");
+        const text = this._content || this._segments.filter((s2) => s2.type !== "thinking").map((s2) => s2.content ?? "").join("\n");
         const icons = this._cfg.getIconProvider();
         const locale = this._cfg.getLocale();
         navigator.clipboard.writeText(text).then(() => {
@@ -1977,12 +2029,12 @@ class AparteChatBubble extends HTMLElement {
     }
   }
   _resolveTargetId() {
-    let el = this.parentElement;
-    while (el) {
-      const tag = el.tagName?.toLowerCase();
-      const isHost = tag === "aparte-chat" || tag === "aparte-chat-component" || el.hasAttribute?.("data-aparte-chat");
-      if (isHost && el.id) return el.id;
-      el = el.parentElement;
+    let el2 = this.parentElement;
+    while (el2) {
+      const tag = el2.tagName?.toLowerCase();
+      const isHost = tag === "aparte-chat" || el2.hasAttribute?.("data-aparte-chat");
+      if (isHost && el2.id) return el2.id;
+      el2 = el2.parentElement;
     }
     return void 0;
   }
@@ -2152,6 +2204,19 @@ class AparteChatViewport extends HTMLElement {
   _layoutTransitionMs = 0;
   _repo = new AparteMessageRepository();
   _isAutoScrollEnabled = true;
+  /** The last scroll position we saw, so growth can be told from a gesture. */
+  _lastScrollTop = 0;
+  /** The scroll height at the last scroll event: how much it moved since bounds what churn can do. */
+  _lastScrollHeight = 0;
+  /** When this component last moved `scrollTop` itself — see `_handleScroll`. "Never" is
+   *  -Infinity rather than 0: `performance.now()` can be under a second old. */
+  _ownScrollAt = Number.NEGATIVE_INFINITY;
+  /** When the reader last touched the transcript (wheel, touch, pointer, key). */
+  _readerInputAt = Number.NEGATIVE_INFINITY;
+  /** A decrease inside this window after our own scroll, with no gesture, is the browser's. */
+  _ownScrollWindowMs = 1e3;
+  /** The keys that scroll a focused scroll container — the only keydowns that are a gesture. */
+  _scrollKeys = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "]);
   _scrollThreshold = 50;
   /** When true, the next _autoScroll() call uses smooth instead of instant, then resets. */
   _smoothScrollOnce = false;
@@ -2162,8 +2227,6 @@ class AparteChatViewport extends HTMLElement {
    * snapshot stay intact; only the oldest rendered bubbles are dropped from view.
    */
   _maxRenderedBubbles = 1e3;
-  /** One-time guard for the deprecated `maxMessages` warning. */
-  _warnedMaxMessagesDeprecation = false;
   _resizeObserver = null;
   _mutationObserver = null;
   _boundResetHandler = null;
@@ -2174,7 +2237,7 @@ class AparteChatViewport extends HTMLElement {
    */
   _frameworkManagedDOM = false;
   static get observedAttributes() {
-    return ["scroll-threshold", "max-rendered-bubbles", "max-messages"];
+    return ["scroll-threshold", "max-rendered-bubbles"];
   }
   constructor() {
     super();
@@ -2198,6 +2261,7 @@ class AparteChatViewport extends HTMLElement {
     const detail = e2.detail;
     if (detail?.config && detail.config !== resolveConfig(this)) return;
     this._applyDirection();
+    this._scrollBtn?.setAttribute("aria-label", resolveConfig(this).t("scrollToBottom"));
   };
   /** Mirror `locale.direction` onto the scroll container. */
   _applyDirection() {
@@ -2225,11 +2289,6 @@ class AparteChatViewport extends HTMLElement {
         this._maxRenderedBubbles = parseInt(newValue || "1000", 10);
         this._pruneRenderedBubbles();
         break;
-      case "max-messages":
-        this._warnMaxMessagesDeprecated();
-        this._maxRenderedBubbles = parseInt(newValue || "1000", 10);
-        this._pruneRenderedBubbles();
-        break;
     }
   }
   /**
@@ -2243,11 +2302,6 @@ class AparteChatViewport extends HTMLElement {
       this._maxRenderedBubbles = config.maxRenderedBubbles;
       this._pruneRenderedBubbles();
     }
-    if (config.maxMessages !== void 0) {
-      this._warnMaxMessagesDeprecated();
-      this._maxRenderedBubbles = config.maxMessages;
-      this._pruneRenderedBubbles();
-    }
     if (config.layoutTransitionMs !== void 0) {
       this._layoutTransitionMs = config.layoutTransitionMs;
     }
@@ -2281,7 +2335,7 @@ class AparteChatViewport extends HTMLElement {
     if (!message.segments) {
       message.segments = [];
     }
-    const index = message.segments.findIndex((s) => s.id === segmentId);
+    const index = message.segments.findIndex((s2) => s2.id === segmentId);
     const segment = index === -1 ? void 0 : message.segments[index];
     if (segment && "content" in segment) {
       message.segments[index] = {
@@ -2323,6 +2377,24 @@ class AparteChatViewport extends HTMLElement {
     }
     return null;
   }
+  /**
+   * While a reply streams, the transcript is read-only except for Stop.
+   *
+   * The streaming message's own footer was already hidden; every OTHER message kept
+   * its branch picker and its retry/edit buttons live. Swapping a branch mid-stream
+   * re-rendered the active path under the reply being written, and a retry cut that
+   * reply off to start another — both seen on the landing page. The state that
+   * decides it is the whole transcript's, so it lives on the viewport (`data-busy`)
+   * and is pushed to the bubbles it holds; a bubble mounted later, under a
+   * framework's DOM, reads the attribute itself when it connects.
+   */
+  _syncBusy() {
+    const busy = this._streamingMessageId() !== null;
+    this.toggleAttribute("data-busy", busy);
+    for (const bubble of this.querySelectorAll("aparte-chat-bubble")) {
+      bubble.setTranscriptBusy?.(busy);
+    }
+  }
   addSegment(messageIdOrSegment, maybeSegment) {
     const messageId = typeof messageIdOrSegment === "string" ? messageIdOrSegment : this._activeMessageId();
     const segment = typeof messageIdOrSegment === "string" ? maybeSegment : messageIdOrSegment;
@@ -2343,15 +2415,15 @@ class AparteChatViewport extends HTMLElement {
     this._notifyBubble(messageId, "addSegment", stamped);
     this._autoScroll();
   }
-  updateSegment(a4, b2, c2) {
+  updateSegment(a2, b2, c2) {
     const clientForm = c2 === void 0 && typeof b2 === "object";
-    const messageId = clientForm ? this._activeMessageId() : a4;
-    const segmentId = clientForm ? a4 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a2;
+    const segmentId = clientForm ? a2 : b2;
     const updates = clientForm ? b2 : c2;
     if (!messageId) return;
     const message = this._repo.getMessageById(messageId);
     if (!message?.segments) return;
-    const segmentIndex = message.segments.findIndex((s) => s.id === segmentId);
+    const segmentIndex = message.segments.findIndex((s2) => s2.id === segmentId);
     if (segmentIndex !== -1) {
       const current = message.segments[segmentIndex];
       const stamped = stampSegmentOnUpdate(current, updates);
@@ -2359,14 +2431,14 @@ class AparteChatViewport extends HTMLElement {
       this._notifyBubble(messageId, "updateSegment", { segmentId, updates: stamped });
     }
   }
-  removeSegment(a4, b2) {
+  removeSegment(a2, b2) {
     const clientForm = b2 === void 0;
-    const messageId = clientForm ? this._activeMessageId() : a4;
-    const segmentId = clientForm ? a4 : b2;
+    const messageId = clientForm ? this._activeMessageId() : a2;
+    const segmentId = clientForm ? a2 : b2;
     if (!messageId || !segmentId) return;
     const message = this._repo.getMessageById(messageId);
     if (message?.segments) {
-      const idx = message.segments.findIndex((s) => s.id === segmentId);
+      const idx = message.segments.findIndex((s2) => s2.id === segmentId);
       if (idx !== -1) {
         message.segments.splice(idx, 1);
         renumberSegments(message.segments);
@@ -2412,6 +2484,7 @@ class AparteChatViewport extends HTMLElement {
       message.status = "completed";
       this._settleSegments(messageId, message);
       this._notifyBubble(messageId, "complete", { status: "completed" });
+      this._syncBusy();
       this._recalculateSpacer();
     }
   }
@@ -2443,6 +2516,7 @@ class AparteChatViewport extends HTMLElement {
       if (isTerminalStatus(updates.status)) this._settleSegments(messageId, message);
     }
     this._notifyBubble(messageId, "update", updates);
+    if (updates.status) this._syncBusy();
     this._autoScroll();
   }
   /**
@@ -2457,6 +2531,7 @@ class AparteChatViewport extends HTMLElement {
   addMessage(message) {
     this._repo.addOrUpdateMessage(this._repo.headId, adoptMessageSegments({ ...message }));
     this._pruneRenderedBubbles();
+    this._syncBusy();
     this._autoScroll();
   }
   /**
@@ -2479,13 +2554,14 @@ class AparteChatViewport extends HTMLElement {
       },
       []
     ) } : { ...message };
+    if (!options?.historical && isAwaitingReply(message)) stored.isStreaming = true;
     this._repo.addOrUpdateMessage(this._repo.headId, stored);
     if (!this._frameworkManagedDOM) {
       const wrapper = this.querySelector(".aparte-messages-wrapper");
       if (wrapper) {
         const bubble = document.createElement("aparte-chat-bubble");
         bubble.setAttribute("message-id", message.id);
-        bubble.setAttribute("role", message.role);
+        bubble.setAttribute("data-role", message.role);
         if (message.timestamp) bubble.setAttribute("timestamp", String(message.timestamp));
         if (message.content) bubble.setAttribute("content", message.content);
         if (isAwaitingReply(message)) {
@@ -2500,10 +2576,13 @@ class AparteChatViewport extends HTMLElement {
       }
     }
     this._pruneRenderedBubbles();
+    this._syncBusy();
     this._recalculateSpacer();
     if (message.role === "user") {
       this._isAutoScrollEnabled = true;
-      requestAnimationFrame(() => this._smoothScrollToBottom());
+      requestAnimationFrame(() => {
+        if (this._isAutoScrollEnabled) this._smoothScrollToBottom();
+      });
     } else {
       this._autoScroll();
     }
@@ -2562,7 +2641,9 @@ class AparteChatViewport extends HTMLElement {
     const meta = this._repo.getMessage(existingId);
     if (!meta) return null;
     const parentId = meta.message.role === "user" ? existingId : meta.parentId;
-    this._repo.addOrUpdateMessage(parentId, { ...newMessage });
+    const stored = { ...newMessage };
+    if (isAwaitingReply(newMessage)) stored.isStreaming = true;
+    this._repo.addOrUpdateMessage(parentId, stored);
     this._repo.switchToBranch(newMessage.id);
     this._reRenderActivePath();
     return newMessage.id;
@@ -2572,6 +2653,7 @@ class AparteChatViewport extends HTMLElement {
    * Triggers a full re-render of the active path.
    */
   navigateBranch(messageId, direction) {
+    if (this._streamingMessageId() !== null) return;
     const siblings = this._repo.getBranches(messageId);
     const currentIdx = siblings.indexOf(messageId);
     if (currentIdx === -1) return;
@@ -2676,6 +2758,7 @@ class AparteChatViewport extends HTMLElement {
       }
     }
     this._repo.clear();
+    this._syncBusy();
     if (!this._frameworkManagedDOM) {
       const wrapper = this.querySelector(".aparte-messages-wrapper");
       if (wrapper) {
@@ -2825,7 +2908,7 @@ class AparteChatViewport extends HTMLElement {
       const sibInfo = siblingsInfo[i2];
       const bubble = document.createElement("aparte-chat-bubble");
       bubble.setAttribute("message-id", message.id);
-      bubble.setAttribute("role", message.role);
+      bubble.setAttribute("data-role", message.role);
       if (message.timestamp) bubble.setAttribute("timestamp", String(message.timestamp));
       if (isAwaitingReply(message)) {
         bubble.setAttribute("streaming", "");
@@ -2834,6 +2917,7 @@ class AparteChatViewport extends HTMLElement {
       populateBubbleFromMessage(bubble, message, sibInfo);
     }
     this._dispatchPathChanged(activeMessages, siblingsInfo);
+    this._syncBusy();
     this._recalculateSpacer();
   }
   _dispatchPathChanged(messages, siblings) {
@@ -2848,9 +2932,13 @@ class AparteChatViewport extends HTMLElement {
     if (this._isAutoScrollEnabled) {
       if (this._smoothScrollOnce) {
         this._smoothScrollOnce = false;
-        requestAnimationFrame(() => this._smoothScrollToBottom());
+        requestAnimationFrame(() => {
+          if (this._isAutoScrollEnabled) this._smoothScrollToBottom();
+        });
       } else {
-        requestAnimationFrame(() => this._scrollToBottom());
+        requestAnimationFrame(() => {
+          if (this._isAutoScrollEnabled) this._scrollToBottom();
+        });
       }
     }
     this._pruneRenderedBubbles();
@@ -2895,7 +2983,7 @@ class AparteChatViewport extends HTMLElement {
       this._scrollBtn = document.createElement("button");
       this._scrollBtn.className = "aparte-btn aparte-btn--surface aparte-btn--circle aparte-btn--lg aparte-scroll-btn aparte-scroll-btn--hidden";
       this._scrollBtn.setAttribute("type", "button");
-      this._scrollBtn.setAttribute("aria-label", "Scroll to bottom");
+      this._scrollBtn.setAttribute("aria-label", resolveConfig(this).t("scrollToBottom"));
       const scrollIcon = resolveConfig(this).getIcon("scrollDown");
       this._scrollBtn.innerHTML = scrollIcon;
       this.appendChild(this._scrollBtn);
@@ -2928,7 +3016,7 @@ class AparteChatViewport extends HTMLElement {
     const scrollBtn = document.createElement("button");
     scrollBtn.className = "aparte-btn aparte-btn--surface aparte-btn--circle aparte-btn--lg aparte-scroll-btn aparte-scroll-btn--hidden";
     scrollBtn.setAttribute("type", "button");
-    scrollBtn.setAttribute("aria-label", "Scroll to bottom");
+    scrollBtn.setAttribute("aria-label", resolveConfig(this).t("scrollToBottom"));
     const scrollIcon = resolveConfig(this).getIcon("scrollDown");
     scrollBtn.innerHTML = scrollIcon;
     this.appendChild(scrollBtn);
@@ -2973,6 +3061,27 @@ class AparteChatViewport extends HTMLElement {
     this._smoothScrollToBottom();
     this._updateScrollButton();
   };
+  /**
+   * Only the inputs that can SCROLL count as the reader's hand: a wheel notch, a
+   * touch, a navigation key, a press in the scrollbar's gutter. A press on a control
+   * inside the transcript — a branch arrow, a copy button — is not a scroll gesture,
+   * and counting it disarmed the follow through the swap it triggered (react-webkit,
+   * 1 run in 6: the rebuild's height churn moved scrollTop within the second after
+   * the click, and the click made that look like the reader's).
+   */
+  _noteReaderInput = (e2) => {
+    if (e2.type === "keydown" && !this._scrollKeys.has(e2.key)) return;
+    if (e2.type === "pointerdown") {
+      const container = this._container;
+      if (!container) return;
+      const { clientX } = e2;
+      const rect = container.getBoundingClientRect();
+      const rtl = getComputedStyle(container).direction === "rtl";
+      const inGutter = rtl ? clientX <= rect.right - container.clientWidth : clientX >= rect.left + container.clientWidth;
+      if (!inGutter) return;
+    }
+    this._readerInputAt = performance.now();
+  };
   _onBranchNavigate = (e2) => {
     const evt = e2;
     evt.stopPropagation();
@@ -2980,6 +3089,9 @@ class AparteChatViewport extends HTMLElement {
   };
   _setupEventListeners() {
     this._container?.addEventListener("scroll", this._handleScroll, { passive: true });
+    for (const type of ["wheel", "touchmove", "pointerdown", "keydown"]) {
+      this._container?.addEventListener(type, this._noteReaderInput, { passive: true });
+    }
     this._scrollBtn?.addEventListener("click", this._onScrollBtnClick);
     this.addEventListener("aparte-branch-navigate", this._onBranchNavigate);
   }
@@ -2989,6 +3101,7 @@ class AparteChatViewport extends HTMLElement {
         this._scrollToBottom();
       }
       this._recalculateSpacer();
+      this._updateScrollButton();
     });
     const wrapper = this.querySelector(".aparte-messages-wrapper");
     if (this._container) {
@@ -3001,7 +3114,9 @@ class AparteChatViewport extends HTMLElement {
     this._mutationObserver = new MutationObserver(() => {
       if (this._frameworkManagedDOM) this._keepScrollButtonLast();
       if (this._isAutoScrollEnabled) {
-        requestAnimationFrame(() => this._scrollToBottom());
+        requestAnimationFrame(() => {
+          if (this._isAutoScrollEnabled) this._scrollToBottom();
+        });
       }
       this._scheduleSpacerUpdate();
     });
@@ -3021,11 +3136,25 @@ class AparteChatViewport extends HTMLElement {
   }
   _handleScroll() {
     if (!this._container) return;
-    this._isAutoScrollEnabled = this._isAtBottom();
+    const top = this._container.scrollTop;
+    const height = this._container.scrollHeight;
+    const drop = this._lastScrollTop - top;
+    const churn = Math.abs(height - this._lastScrollHeight);
+    const now = performance.now();
+    const settlingOurs = drop <= churn + 2 && now - this._ownScrollAt < this._ownScrollWindowMs && now - this._readerInputAt >= this._ownScrollWindowMs;
+    const readerWentUp = drop > 1 && !settlingOurs;
+    this._lastScrollTop = top;
+    this._lastScrollHeight = height;
+    if (this._isAtBottom()) {
+      this._isAutoScrollEnabled = true;
+    } else if (readerWentUp) {
+      this._isAutoScrollEnabled = false;
+    }
     this._updateScrollButton();
   }
   _scrollToBottom() {
     if (!this._container) return;
+    this._ownScrollAt = performance.now();
     this._container.scrollTop = this._container.scrollHeight;
     this._settleAtBottom(4);
   }
@@ -3059,12 +3188,14 @@ class AparteChatViewport extends HTMLElement {
       if (!this._container || !this._isAutoScrollEnabled) return;
       const max = this._container.scrollHeight - this._container.clientHeight;
       if (max - this._container.scrollTop <= 1) return;
+      this._ownScrollAt = performance.now();
       this._container.scrollTop = max;
       this._settleAtBottom(framesLeft - 1);
     });
   }
   _smoothScrollToBottom() {
     if (!this._container) return;
+    this._ownScrollAt = performance.now();
     if (typeof this._container.scrollTo === "function" && !this._prefersReducedMotion()) {
       this._container.scrollTo({ top: this._container.scrollHeight, behavior: "smooth" });
     } else {
@@ -3083,7 +3214,7 @@ class AparteChatViewport extends HTMLElement {
    * fold"). Mirroring the flag made the button lie whenever the two diverged —
    * `navigateBranch` deliberately disarms auto-follow, so swapping a branch while
    * already at the bottom of a scrollable transcript left the button offering to
-   * scroll nowhere (reported from bonaparte, React). Re-derived on scroll, on the
+   * scroll nowhere (reported from a React consumer). Re-derived on scroll, on the
    * post-mutation frame and after a path swap, so it converges to the truth
    * whatever a framework's render timing does in between.
    */
@@ -3110,7 +3241,7 @@ class AparteChatViewport extends HTMLElement {
       this._setSpacerHeight(0);
       return;
     }
-    const lastUserBubble = [...allBubbles].reverse().find((b2) => b2.getAttribute("role") === "user");
+    const lastUserBubble = [...allBubbles].reverse().find((b2) => b2.getAttribute("data-role") === "user");
     if (!lastUserBubble) {
       this._setSpacerHeight(0);
       return;
@@ -3169,15 +3300,11 @@ class AparteChatViewport extends HTMLElement {
       bubbles[i2]?.remove();
     }
   }
-  _warnMaxMessagesDeprecated() {
-    if (this._warnedMaxMessagesDeprecation) return;
-    this._warnedMaxMessagesDeprecation = true;
-    console.warn(
-      "[Aparte] `maxMessages` / `max-messages` on aparte-chat-viewport is deprecated: it used to silently evict messages from the conversation model. It now only caps rendered bubbles in the DOM — use `maxRenderedBubbles` / `max-rendered-bubbles`. For actual history retention, configure it on your AparteConversationManager instead."
-    );
-  }
   _cleanup() {
     this._container?.removeEventListener("scroll", this._handleScroll);
+    for (const type of ["wheel", "touchmove", "pointerdown", "keydown"]) {
+      this._container?.removeEventListener(type, this._noteReaderInput);
+    }
     this._scrollBtn?.removeEventListener("click", this._onScrollBtnClick);
     this.removeEventListener("aparte-branch-navigate", this._onBranchNavigate);
     this._resizeObserver?.disconnect();
@@ -3282,6 +3409,7 @@ class AparteComposer extends HTMLElement {
     window.addEventListener("aparte-message-error", this._onMessageDone);
     window.addEventListener("aparte-message-aborted", this._onMessageDone);
     window.addEventListener("aparte-config-change", this._onConfigChangeEvent);
+    queueMicrotask(() => this._warnIfUnattached());
     this._evaluateModelGate();
     this._applyDirection();
   }
@@ -3297,6 +3425,11 @@ class AparteComposer extends HTMLElement {
     if (name === "disabled") {
       this._emit("disabled-change", { disabled: value !== null });
     }
+    if (name === "placeholder") {
+      for (const input of this.querySelectorAll("aparte-composer-input")) {
+        input.syncPlaceholder?.();
+      }
+    }
   }
   // ── Public API ─────────────────────────────────────────────────────────
   get value() {
@@ -3414,10 +3547,13 @@ class AparteComposer extends HTMLElement {
    */
   showPanel(panel, options) {
     this._evictPanel();
+    const host = this.querySelector("[data-aparte-panel-host]");
     const inputEl = this.querySelector("aparte-composer-input");
     this.setAttribute("data-panel-active", "");
     panel.dataset["apartePanel"] = "true";
-    if (inputEl) {
+    if (host) {
+      host.appendChild(panel);
+    } else if (inputEl) {
       inputEl.insertAdjacentElement("afterend", panel);
     } else {
       this.appendChild(panel);
@@ -3627,15 +3763,26 @@ class AparteComposer extends HTMLElement {
    * for the reason written there — Angular's wrapper root IS `<aparte-chat>`, the
    * other three render a `[data-aparte-chat]` div.
    */
+  /**
+   * A signal, not a guard: on a page with several chats, a composer attached to none
+   * answers to every chat's lifecycle events (see `_ownTargetId`), and the symptom —
+   * one chat's Stop evicting another's open question — is nowhere near its cause.
+   * Said once, at the console, where the developer is.
+   */
+  _warnIfUnattached() {
+    if (!this.isConnected || this._ownTargetId()) return;
+    if (document.querySelectorAll("aparte-chat, [data-aparte-chat]").length < 2) return;
+    console.warn(`[aparte-composer] this composer belongs to no chat while the page has several: give it target="<chat id>" or place it under a chat host with an id, or it will answer to every chat's events.`);
+  }
   _ownTargetId() {
     const attr = this.targetId;
     if (attr) return attr;
-    let el = this.parentElement;
-    while (el) {
-      const tag = el.tagName?.toLowerCase();
-      const isHost = tag === "aparte-chat" || tag === "aparte-chat-component" || el.hasAttribute?.("data-aparte-chat");
-      if (isHost && el.id) return el.id;
-      el = el.parentElement;
+    let el2 = this.parentElement;
+    while (el2) {
+      const tag = el2.tagName?.toLowerCase();
+      const isHost = tag === "aparte-chat" || el2.hasAttribute?.("data-aparte-chat");
+      if (isHost && el2.id) return el2.id;
+      el2 = el2.parentElement;
     }
     return void 0;
   }
@@ -3723,6 +3870,14 @@ class AparteComposerInput extends HTMLElement {
     this._adjustHeight();
     this._getRoot()?.setValue("");
   }
+  /**
+   * Re-read the placeholder fallback chain. Called by the composer when ITS
+   * `placeholder` changes — this element observes only its own attribute, and the
+   * composer's is one of the three sources it falls back to.
+   */
+  syncPlaceholder() {
+    this._updatePlaceholder();
+  }
   /** Focus the inner contenteditable rather than the host element. */
   focus() {
     this._editor?.focus();
@@ -3760,7 +3915,7 @@ class AparteComposerInput extends HTMLElement {
             role="textbox"
             aria-multiline="true"
             aria-label="${placeholder}"
-            tabindex="0"
+            tabindex="${escapeAttr(String(disabled ? -1 : 0))}"
             aria-disabled="${disabled}"
             data-placeholder="${placeholder}"
         ></div>`;
@@ -3785,11 +3940,6 @@ class AparteComposerInput extends HTMLElement {
         else this.setValue(value);
       })
     );
-    this._unsubscribes.push(
-      root._on("streaming-change", ({ streaming }) => {
-        this._updateDisabled(streaming || root.disabled);
-      })
-    );
   }
   _handleInput() {
     this._adjustHeight();
@@ -3809,6 +3959,7 @@ class AparteComposerInput extends HTMLElement {
       e2.preventDefault();
       const root = this._getRoot();
       if (root) {
+        if (root.streaming) return;
         root.submit();
       } else {
         this.dispatchEvent(new CustomEvent("aparte-composer-submit", { bubbles: true }));
@@ -3866,9 +4017,9 @@ class AparteComposerInput extends HTMLElement {
   }
   _updatePlaceholder() {
     if (this._editor) {
-      const p = this._getPlaceholder();
-      this._editor.setAttribute("data-placeholder", p);
-      this._editor.setAttribute("aria-label", p);
+      const p2 = this._getPlaceholder();
+      this._editor.setAttribute("data-placeholder", p2);
+      this._editor.setAttribute("aria-label", p2);
     }
   }
   _updatePlaceholderVisibility() {
@@ -3877,6 +4028,8 @@ class AparteComposerInput extends HTMLElement {
     if (!this._editor) return;
     this._editor.setAttribute("contenteditable", String(!disabled));
     this._editor.setAttribute("aria-disabled", String(disabled));
+    this._editor.setAttribute("tabindex", disabled ? "-1" : "0");
+    if (disabled && this.ownerDocument?.activeElement === this._editor) this._editor.blur();
   }
   /** Escape a value before it lands in a double-quoted HTML attribute. */
 }
@@ -4231,9 +4384,8 @@ class AparteComposerAddAttachment extends HTMLElement {
    * Re-read the label and the icon on the button that already exists.
    *
    * Deliberately not a re-render: `_render()` returns early once the button is
-   * there, and its `disabled` computation ignores `root.streaming` while the
-   * streaming listener sets `disabled` directly — so rebuilding would silently
-   * re-enable the attach button mid-turn, and drop focus if the user were on it.
+   * there, and rebuilding it would drop focus if the user were on it — a locale or
+   * icon change is not a reason to lose the keyboard.
    * The native file input and the drag listeners live outside this element
    * (on `document.body` and on the composer root), so they are untouched either way.
    */
@@ -4270,7 +4422,7 @@ class AparteComposerAddAttachment extends HTMLElement {
     );
     this._unsubscribes.push(
       root._on("streaming-change", ({ streaming }) => {
-        if (this._button) this._button.disabled = streaming || root.disabled;
+        if (this._button) this._button.disabled = root.disabled;
       })
     );
   }
@@ -4579,10 +4731,10 @@ class AparteConversationList extends HTMLElement {
   /** Update active class without full re-render (perf optimisation). */
   _updateActiveState() {
     const items = this.querySelectorAll("[data-conv-id]");
-    items.forEach((el) => {
-      const isActive = el.dataset["convId"] === this._activeId;
-      el.classList.toggle("aparte-conv-item--active", isActive);
-      el.setAttribute("aria-current", isActive ? "page" : "false");
+    items.forEach((el2) => {
+      const isActive = el2.dataset["convId"] === this._activeId;
+      el2.classList.toggle("aparte-conv-item--active", isActive);
+      el2.setAttribute("aria-current", isActive ? "page" : "false");
     });
   }
   // ─── Helpers ──────────────────────────────────────────────────────────
@@ -4591,6 +4743,279 @@ class AparteConversationList extends HTMLElement {
   }
 }
 if (!customElements.get("aparte-conversation-list")) customElements.define("aparte-conversation-list", AparteConversationList);
+const isSuggestion = (value) => typeof value === "string" || typeof value === "object" && value !== null && typeof value.label === "string";
+const labelOf = (s2) => typeof s2 === "string" ? s2 : s2.label;
+const promptOf = (s2) => typeof s2 === "string" ? s2 : s2.prompt ?? s2.label;
+class AparteSuggestions extends HTMLElement {
+  static get observedAttributes() {
+    return ["suggestions", "target"];
+  }
+  _suggestions = [];
+  _composer = null;
+  _onSend = () => {
+    if (this.hasAttribute("empty-only")) this.hidden = true;
+  };
+  _onConfigChange = () => {
+    const row = this.querySelector(".aparte-suggestions");
+    if (row) row.setAttribute("aria-label", this._groupLabel());
+  };
+  /** The starters. Setting it re-renders; the `suggestions` attribute is the JSON form. */
+  get suggestions() {
+    return this._suggestions;
+  }
+  set suggestions(value) {
+    this._suggestions = Array.isArray(value) ? value.filter(isSuggestion) : [];
+    if (this.isConnected) this._render();
+  }
+  connectedCallback() {
+    if (this.hasAttribute("suggestions")) this._readAttribute();
+    this._render();
+    this._watchComposer();
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+  }
+  disconnectedCallback() {
+    this._composer?.removeEventListener("aparte-send", this._onSend);
+    this._composer = null;
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
+  }
+  attributeChangedCallback(name) {
+    if (!this.isConnected) return;
+    if (name === "suggestions") {
+      this._readAttribute();
+      this._render();
+    } else if (name === "target") {
+      this._watchComposer();
+    }
+  }
+  _groupLabel() {
+    return resolveConfig(this).t("suggestionsLabel") || "Suggested prompts";
+  }
+  _parsed = null;
+  /**
+   * Parse the `suggestions` attribute once per value. The attribute callback and
+   * `connectedCallback` both arrive for a parsed element, in an order the parser
+   * decides; without this, an invalid value warned twice.
+   */
+  _readAttribute() {
+    const raw = this.getAttribute("suggestions");
+    if (raw === null || raw === this._parsed) return;
+    this._parsed = raw;
+    try {
+      const parsed = JSON.parse(raw);
+      this._suggestions = Array.isArray(parsed) ? parsed.filter(isSuggestion) : [];
+    } catch {
+      console.warn('[aparte-suggestions] `suggestions` is not a JSON array. Use ["…"] or [{"label": "…", "prompt": "…"}].');
+      this._suggestions = [];
+    }
+  }
+  /**
+   * The composer the click goes through, resolved the way the composer's own parts
+   * resolve it — by ancestry first. Outside a composer, `target` names the chat and the
+   * composer serving it is either inside that chat or points at it; the first composer
+   * on the page is the last resort, so the one-chat page needs no attribute at all.
+   */
+  _resolveComposer() {
+    const nearest = this.closest("aparte-composer");
+    if (nearest) return nearest;
+    const target = this.getAttribute("target");
+    if (target) {
+      const scope = document.getElementById(target);
+      const inside = scope?.querySelector("aparte-composer");
+      if (inside) return inside;
+      for (const composer of document.querySelectorAll("aparte-composer[target]")) {
+        if (composer.getAttribute("target") === target) return composer;
+      }
+    }
+    return document.querySelector("aparte-composer");
+  }
+  _watchComposer() {
+    this._composer?.removeEventListener("aparte-send", this._onSend);
+    this._composer = this._resolveComposer();
+    this._composer?.addEventListener("aparte-send", this._onSend);
+  }
+  _render() {
+    this.replaceChildren();
+    if (this._suggestions.length === 0) {
+      this.setAttribute("data-empty", "");
+      return;
+    }
+    this.removeAttribute("data-empty");
+    const row = document.createElement("div");
+    row.className = "aparte-suggestions";
+    row.setAttribute("role", "group");
+    row.setAttribute("aria-label", this._groupLabel());
+    for (const suggestion of this._suggestions) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "aparte-btn aparte-btn--surface aparte-btn--pill aparte-suggestion";
+      button.textContent = labelOf(suggestion);
+      const prompt = promptOf(suggestion);
+      if (prompt !== button.textContent) button.title = prompt;
+      button.addEventListener("click", () => this._activate(suggestion));
+      row.appendChild(button);
+    }
+    this.appendChild(row);
+  }
+  _activate(suggestion) {
+    const detail = { label: labelOf(suggestion), prompt: promptOf(suggestion) };
+    const proceed = this.dispatchEvent(new CustomEvent("aparte-suggestion", {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: true
+    }));
+    if (!proceed) return;
+    const composer = this._composer ?? this._resolveComposer();
+    if (!composer) {
+      console.warn("[aparte-suggestions] no <aparte-composer> to send through — put the element inside one, or point `target` at the chat it serves.");
+      return;
+    }
+    if (composer !== this._composer) this._watchComposer();
+    composer.setValue(detail.prompt);
+    if (this.getAttribute("mode") === "fill") composer.focus();
+    else composer.submit();
+  }
+}
+if (!customElements.get("aparte-suggestions")) {
+  customElements.define("aparte-suggestions", AparteSuggestions);
+}
+const fraction = (raw, fallback) => {
+  const n2 = Number(raw);
+  return raw !== null && Number.isFinite(n2) && n2 > 0 && n2 <= 1 ? n2 : fallback;
+};
+const el = (tag, className) => {
+  const node = document.createElement(tag);
+  node.className = className;
+  return node;
+};
+class AparteContext extends HTMLElement {
+  static get observedAttributes() {
+    return ["window", "warn", "danger", "target"];
+  }
+  _used = null;
+  _level = null;
+  _compactRequested = false;
+  _onDone = (e2) => {
+    const detail = e2.detail;
+    if (!detail?.usage || !this._isMine(detail.targetId)) return;
+    const { usage } = detail;
+    this._used = usage.totalTokens ?? usage.inputTokens + usage.outputTokens;
+    this._render();
+  };
+  /**
+   * After a real compaction the context is smaller by an amount nobody has measured
+   * yet — the next turn's usage will say. Until then the gauge shows nothing rather
+   * than a number it knows to be wrong. (`aparte-compact-done` names no chat: on a
+   * multi-chat page every gauge resets, and each is right again one turn later.)
+   */
+  _onCompacted = (e2) => {
+    const detail = e2.detail;
+    if (detail?.skipped) return;
+    this._used = null;
+    this._compactRequested = false;
+    this._render();
+  };
+  _onRerender = () => this._render();
+  /** Tokens the last turn reported, or `null` before the first turn. */
+  get used() {
+    return this._used;
+  }
+  /** The window in force — the attribute, else the current model's. */
+  get window() {
+    return this._window();
+  }
+  /** The current level, or `null` while nothing is shown. */
+  get level() {
+    return this._level;
+  }
+  connectedCallback() {
+    window.addEventListener("aparte-message-done", this._onDone);
+    window.addEventListener("aparte-compact-done", this._onCompacted);
+    window.addEventListener("aparte-config-change", this._onRerender);
+    this._render();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("aparte-message-done", this._onDone);
+    window.removeEventListener("aparte-compact-done", this._onCompacted);
+    window.removeEventListener("aparte-config-change", this._onRerender);
+  }
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+  _window() {
+    const attr = Number(this.getAttribute("window"));
+    if (this.hasAttribute("window") && Number.isFinite(attr) && attr > 0) return attr;
+    const model = resolveConfig(this).getCurrentModel();
+    return model?.contextWindow && model.contextWindow > 0 ? model.contextWindow : null;
+  }
+  /** The chat this gauge watches: `target`, else the chat host above it — the composer's rule. */
+  _ownTargetId() {
+    const attr = this.getAttribute("target");
+    if (attr) return attr;
+    let node = this.parentElement;
+    while (node) {
+      const isHost = node.tagName.toLowerCase() === "aparte-chat" || node.hasAttribute("data-aparte-chat");
+      if (isHost && node.id) return node.id;
+      node = node.parentElement;
+    }
+    return void 0;
+  }
+  _isMine(targetId) {
+    const own = this._ownTargetId();
+    return !targetId || !own || targetId === own;
+  }
+  _render() {
+    const capacity = this._window();
+    if (capacity === null || this._used === null) {
+      this.setAttribute("data-empty", "");
+      this.removeAttribute("data-level");
+      this.replaceChildren();
+      this._level = null;
+      return;
+    }
+    this.removeAttribute("data-empty");
+    const used = this._used;
+    const ratio = Math.min(1, used / capacity);
+    const warn = fraction(this.getAttribute("warn"), 0.75);
+    const danger = fraction(this.getAttribute("danger"), 0.9);
+    const level = ratio >= danger ? "danger" : ratio >= warn ? "warn" : "ok";
+    this.setAttribute("data-level", level);
+    let bar = this.querySelector(".aparte-progress");
+    let text = this.querySelector(".aparte-context__text");
+    if (!bar || !text) {
+      const root = el("div", "aparte-context");
+      bar = el("div", "aparte-progress");
+      bar.setAttribute("role", "meter");
+      bar.appendChild(el("div", "aparte-progress__bar"));
+      text = el("span", "aparte-context__text");
+      root.append(bar, text);
+      this.replaceChildren(root);
+    }
+    const format = new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 1 });
+    const reading = `${format.format(used)} / ${format.format(capacity)}`;
+    const label = resolveConfig(this).t("contextLabel") || "Context window";
+    bar.style.setProperty("--aparte-progress-value", String(Math.round(ratio * 100)));
+    bar.setAttribute("aria-valuemin", "0");
+    bar.setAttribute("aria-valuemax", String(capacity));
+    bar.setAttribute("aria-valuenow", String(used));
+    bar.setAttribute("aria-label", `${label}: ${reading}`);
+    text.textContent = reading;
+    if (level !== this._level) {
+      this._level = level;
+      const targetId = this._ownTargetId();
+      const detail = { level, used, window: capacity, ratio, targetId };
+      this.dispatchEvent(new CustomEvent("aparte-context-threshold", { detail, bubbles: true, composed: true }));
+      if (level === "danger" && this.hasAttribute("auto-compact") && !this._compactRequested) {
+        this._compactRequested = true;
+        window.dispatchEvent(new CustomEvent("aparte-compact", { detail: { targetId } }));
+      }
+      if (level !== "danger") this._compactRequested = false;
+    }
+  }
+}
+if (!customElements.get("aparte-context")) {
+  customElements.define("aparte-context", AparteContext);
+}
 function registerAllComponents() {
   const _chat = customElements.get("aparte-chat");
   const _viewport = customElements.get("aparte-chat-viewport");
@@ -4607,16 +5032,15 @@ export {
   c as APARTE_DEFAULT_HOST_HANDLERS,
   d as APARTE_DEFAULT_ICON_FALLBACKS,
   e as APARTE_DEFAULT_LOCALE,
-  f as APARTE_DEFAULT_SKELETON_FALLBACKS,
-  g as APARTE_DEFAULT_UI_EVENTS,
-  h as APARTE_HOST_ATTR,
-  i as AparteBackendTransport,
+  f as APARTE_DEFAULT_UI_EVENTS,
+  g as APARTE_HOST_ATTR,
+  h as AparteBackendTransport,
   AparteChat,
   AparteChatBubble,
-  j as AparteChatHost,
+  i as AparteChatHost,
   AparteChatStatus,
   AparteChatViewport,
-  k as AparteClient,
+  j as AparteClient,
   AparteComposer,
   AparteComposerAction,
   AparteComposerAddAttachment,
@@ -4625,62 +5049,64 @@ export {
   AparteComposerInput,
   AparteComposerSend,
   AparteComposerToolbar,
-  l as AparteConfig,
-  m as AparteConversationController,
+  k as AparteConfig,
+  AparteContext,
+  l as AparteConversationController,
   AparteConversationList,
-  n as AparteConversationManager,
-  o as AparteDirectTransport,
+  m as AparteConversationManager,
+  n as AparteDirectTransport,
   AparteElicitation,
   AparteElicitationAbortError,
-  q as AparteError,
-  r as AparteErrorCode,
+  p as AparteError,
+  q as AparteErrorCode,
   AparteIcon,
   AparteMessageRepository,
   AparteOptgroup,
   AparteOption,
   AparteProgressSpinner,
   AparteSelect,
-  t as AparteStreamParser,
-  u as aparteGlobalConfig,
-  v as applyElementProps,
-  w as attachConfig,
+  s as AparteStreamParser,
+  AparteSuggestions,
+  t as aparteGlobalConfig,
+  u as applyElementProps,
+  v as attachConfig,
   buildApprovalPanel,
   buildElicitationPanel,
-  z as collectRendererStyles,
-  B as contentToText,
-  C as contextConfig,
-  D as createAparteChatHandler,
-  E as createStreamAdapter,
+  y as collectRendererStyles,
+  z as contentToText,
+  B as contextConfig,
+  C as createAparteChatHandler,
+  D as createStreamAdapter,
   cssEscape,
-  G as declineDefaultRenderers,
-  H as defaultSanitizer,
-  I as deriveArtifactKind,
-  J as detachConfig,
+  F as declineDefaultRenderers,
+  G as defaultSanitizer,
+  deriveArtifactKind,
+  H as detachConfig,
   escapeAttr,
   escapeHtml,
-  M as filesToAttachments,
-  N as getAllRenderers,
+  K as filesToAttachments,
+  L as getAllRenderers,
   getSegmentRenderer,
   installDefaultRenderersOnce,
   isAwaitingReply,
-  R as isFormatAdapter,
-  S as isSafeUrl,
-  T as isSegmentSettled,
-  U as parseAparteEventStream,
-  V as parseMarkdownToSegments,
+  P as isFormatAdapter,
+  Q as isSafeUrl,
+  R as isSegmentSettled,
+  S as parseAparteEventStream,
+  T as parseMarkdownToSegments,
   populateBubbleFromMessage,
-  X as readableToAsyncIterable,
+  V as readableToAsyncIterable,
   registerAllComponents,
-  Y as registerDefaultRenderers,
-  Z as registerSegmentRenderer,
-  _ as requestUserInput,
+  W as registerDefaultRenderers,
+  X as registerSegmentRenderer,
+  Y as requestUserInput,
   resolveConfig,
   revokeAttachmentUrls,
   runWithConfig,
-  a2 as segmentDuration,
-  a3 as segmentTiming,
+  a0 as segmentDuration,
+  a1 as segmentTiming,
   subscribeConfigChange,
-  a5 as unregisterSegmentRenderer,
+  a3 as unregisterSegmentRenderer,
   uuid
 };
 //# sourceMappingURL=index.js.map