@artooi/ag-ui-web-component 0.46.0 → 0.47.0

package/dist/index.js

@@ -6,6 +6,7 @@ var UNREAD_EVENT = "ag-ui-unread";
 var STATE_EVENT = "ag-ui-state";
 var ATTACHMENT_EVENT = "ag-ui-attachments";
 var RUN_FINISHED_EVENT = "ag-ui-run-finished";
+var THREAD_EVENT = "ag-ui-thread";
 var CUSTOM_AGENT_EVENT = "ag-ui-custom";
 var INVALIDATE_EVENT = "ag-ui-invalidate";
 var FEEDBACK_EVENT = "ag-ui-feedback";
@@ -354,8 +355,79 @@ var ClientToolRegistry = class {
   }
 };
 
+// src/core/chat_registry.ts
+var CONNECTED_CHATS = /* @__PURE__ */ new Set();
+var ChatRegistration = class {
+  #chat;
+  constructor(chat) {
+    this.#chat = chat;
+  }
+  /**
+   * Join, as the most recently connected chat. An element moved in the DOM
+   * left on disconnect before it reconnected, so it rejoins at the end and no
+   * entry needs removing first.
+   */
+  join() {
+    CONNECTED_CHATS.add(this.#chat);
+  }
+  /** Leave. The previous chat, if one is still connected, becomes the latest. */
+  leave() {
+    CONNECTED_CHATS.delete(this.#chat);
+  }
+  /** The most recently connected chat still in the document, or `null`. */
+  static latest() {
+    let latest = null;
+    for (const chat of CONNECTED_CHATS) {
+      latest = chat;
+    }
+    return latest;
+  }
+};
+
+// src/dom/ring_color.ts
+var RING_TOKEN = "--ag-ui-highlight-ring-color";
+var ACCENT_TOKEN = "--ag-ui-accent";
+var CHAT_ACCENT = "--_accent";
+var PACKAGE_ACCENT = "#4f46e5";
+function ringColor(target, chat) {
+  const onTarget = readToken(target, RING_TOKEN);
+  if (onTarget !== "") {
+    return onTarget;
+  }
+  const owner = chat ?? ChatRegistration.latest();
+  const onChat = owner === null ? "" : resolveOn(owner, RING_TOKEN);
+  if (onChat !== "") {
+    return onChat;
+  }
+  const accent = readToken(target, ACCENT_TOKEN);
+  if (accent !== "") {
+    return accent;
+  }
+  const chatAccent = owner === null ? "" : resolveOn(owner, CHAT_ACCENT);
+  return chatAccent === "" ? PACKAGE_ACCENT : chatAccent;
+}
+function readToken(el2, name) {
+  return window.getComputedStyle(el2).getPropertyValue(name).trim();
+}
+function resolveOn(chat, name) {
+  const value = readToken(chat, name);
+  const root = chat.shadowRoot;
+  if (value === "" || root === null) {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  probe.style.color = value;
+  if (probe.style.color === "") {
+    return "";
+  }
+  root.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved;
+}
+
 // src/dom/highlight_overlay.ts
-var ACCENT = "#4f46e5";
 function tokenOn(target, name, fallback) {
   const value = window.getComputedStyle(target).getPropertyValue(name).trim();
   return value === "" ? fallback : value;
@@ -440,7 +512,7 @@ function safeColor(value) {
   return CSS.supports("color", value) ? value : null;
 }
 function ringPaint(target, options) {
-  const color = safeColor(options.color) ?? tokenOn(target, "--ag-ui-accent", ACCENT);
+  const color = safeColor(options.color) ?? ringColor(target, options.chat);
   if (options.gradient !== true) {
     return `border-color: ${color}`;
   }
@@ -504,9 +576,6 @@ function setNativeChecked(el2, checked) {
 }
 
 // src/dom/animations.ts
-var ACCENT2 = "#4f46e5";
-var ACCENT_HALO = "rgba(79, 70, 229, 0.4)";
-var ACCENT_PROPERTY = "--ag-ui-accent";
 function delay(ms) {
   return new Promise((resolve) => {
     setTimeout(resolve, ms);
@@ -521,12 +590,8 @@ function motionDelay(ms) {
   }
   return delay(ms);
 }
-function accentColor(el2, fallback) {
-  const themed = window.getComputedStyle(el2).getPropertyValue(ACCENT_PROPERTY).trim();
-  return themed === "" ? fallback : themed;
-}
-function ringShadow(el2) {
-  return `0 0 0 3px ${accentColor(el2, ACCENT_HALO)}`;
+function ringShadow(el2, chat) {
+  return `0 0 0 3px color-mix(in srgb, ${ringColor(el2, chat)} 40%, transparent)`;
 }
 async function typeInto(el2, value, options = {}) {
   const charDelayMs = options.charDelayMs ?? 35;
@@ -545,7 +610,7 @@ async function highlightThenClick(el2, options = {}) {
   const highlightMs = options.highlightMs ?? 280;
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
-  el2.style.outline = `2px solid ${accentColor(el2, ACCENT2)}`;
+  el2.style.outline = `2px solid ${ringColor(el2, options.chat)}`;
   el2.style.outlineOffset = "2px";
   await delay(highlightMs);
   el2.style.outline = previousOutline;
@@ -597,7 +662,8 @@ async function flashRing(el2, options, focusByDefault) {
       scrim: options.scrim === true,
       gradient: options.gradient === true,
       ...options.color === void 0 ? {} : { color: options.color },
-      ...options.ringPadding === void 0 ? {} : { padding: options.ringPadding }
+      ...options.ringPadding === void 0 ? {} : { padding: options.ringPadding },
+      ...options.chat === void 0 ? {} : { chat: options.chat }
     });
     await delay(flashMs);
     dismiss();
@@ -606,7 +672,7 @@ async function flashRing(el2, options, focusByDefault) {
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
   const previousTransition = el2.style.transition;
-  const color = options.color ?? accentColor(el2, ACCENT2);
+  const color = options.color ?? ringColor(el2, options.chat);
   el2.style.outline = `3px solid ${color}`;
   el2.style.outlineOffset = "2px";
   const fadeMs = prefersReducedMotion() ? 0 : Math.round(flashMs * FLASH_FADE_RATIO);
@@ -633,7 +699,7 @@ async function pressThenClick(el2, options = {}) {
   const previousShadow = el2.style.boxShadow;
   el2.style.transition = "transform 80ms ease";
   el2.style.transform = "scale(0.96)";
-  el2.style.boxShadow = ringShadow(el2);
+  el2.style.boxShadow = ringShadow(el2, options.chat);
   await motionDelay(pressMs);
   el2.style.transform = previousTransform;
   el2.style.transition = previousTransition;
@@ -656,7 +722,7 @@ async function selectOption(el2, value, options = {}) {
   const highlightMs = options.highlightMs ?? 220;
   const previousOutline = el2.style.outline;
   const previousOffset = el2.style.outlineOffset;
-  el2.style.outline = `2px solid ${accentColor(el2, ACCENT2)}`;
+  el2.style.outline = `2px solid ${ringColor(el2, options.chat)}`;
   el2.style.outlineOffset = "2px";
   await motionDelay(highlightMs);
   setNativeValue(el2, option.value);
@@ -668,7 +734,7 @@ async function selectOption(el2, value, options = {}) {
 async function toggleControl(el2, checked, options = {}) {
   const flashMs = options.flashMs ?? 200;
   const previousShadow = el2.style.boxShadow;
-  el2.style.boxShadow = ringShadow(el2);
+  el2.style.boxShadow = ringShadow(el2, options.chat);
   await motionDelay(flashMs);
   setNativeChecked(el2, checked);
   el2.dispatchEvent(new Event("input", { bubbles: true }));
@@ -4422,7 +4488,7 @@ var ConversationHistory = class {
     this.#host.conversationStore().setActiveThread(threadId);
     this.#threadId = threadId;
     this.#host.setRunning(false);
-    await this.rehydrate();
+    await this.rehydrate("switch");
   }
   /** Rename a thread, then reload the list that shows its title. */
   renameThread(threadId, title) {
@@ -4440,6 +4506,7 @@ var ConversationHistory = class {
       this.#host.resetState();
       this.adoptActiveThread();
       this.#host.setRunning(false);
+      this.#host.threadChanged(this.#threadId, "delete");
     }
     void this.refreshDrawer();
   }
@@ -4616,8 +4683,11 @@ var ConversationHistory = class {
    * for the run it would have resumed -- unless what replaced it is a restore
    * of the same conversation, still current, which answers for that run
    * instead; see `#forgetStopped`.
+   *
+   * `reason` is what the thread event this restore ends with reports as why
+   * the conversation changed. A restore that is stopped reports nothing.
    */
-  async rehydrate() {
+  async rehydrate(reason) {
     this.#generation += 1;
     const generation = this.#generation;
     const threadId = this.#threadId;
@@ -4667,11 +4737,17 @@ var ConversationHistory = class {
           }
         }
       }
+      if (checkpoint === null) {
+        this.#noticeIfRunUnfinished(messages);
+      }
+      this.#host.threadChanged(threadId, reason);
       if (checkpoint !== null) {
+        if (!this.#restoring(generation)) {
+          this.#forgetStopped(store, threadId, checkpoint);
+          return;
+        }
         await this.#resumeFrom(checkpoint, generation);
-        return;
       }
-      this.#noticeIfRunUnfinished(messages);
     } finally {
       hold.release();
       if (this.#loading === waiting) {
@@ -5652,6 +5728,8 @@ function surfaceFor(placement) {
 
 // src/ui/placement/panel_placement.ts
 var SIZE_KEY = "ag-ui-chat:size";
+var DRAG_WIDTH = "--_drag-width";
+var DRAG_HEIGHT = "--_drag-height";
 var LAUNCHER_KEY = "ag-ui-chat:launcher";
 function asPoint(value) {
   if (typeof value !== "object" || value === null) {
@@ -5735,6 +5813,17 @@ var PanelPlacement = class {
   restoreSize() {
     this.#applySize(this.#readSize());
   }
+  /**
+   * Drop the dragged size and its stored copy, so the placement's own size and
+   * the host's tokens apply again. For a host entering a sized state of its
+   * own, which a user's drag would otherwise outrank.
+   */
+  resetSize() {
+    this.#host.element.style.removeProperty(DRAG_WIDTH);
+    this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    this.#host.clearPreference(SIZE_KEY);
+    this.syncResizeAnchor();
+  }
   /**
    * A zero-sized box carrying the host's viewport insets as padding, so they
    * can be read back as used pixel lengths. See the `.viewport-probe` rule for
@@ -5923,12 +6012,12 @@ var PanelPlacement = class {
    */
   #measureAnchor() {
     const before = this.#host.element.getBoundingClientRect();
-    const width = this.#host.element.style.getPropertyValue("--ag-ui-width");
-    const height = this.#host.element.style.getPropertyValue("--ag-ui-height");
+    const width = this.#host.element.style.getPropertyValue(DRAG_WIDTH);
+    const height = this.#host.element.style.getPropertyValue(DRAG_HEIGHT);
     const shrunk = this.#probeAnchor(before, -1);
     const grown = shrunk.x === null || shrunk.y === null ? this.#probeAnchor(before, 1) : shrunk;
-    this.#restoreProperty("--ag-ui-width", width);
-    this.#restoreProperty("--ag-ui-height", height);
+    this.#restoreProperty(DRAG_WIDTH, width);
+    this.#restoreProperty(DRAG_HEIGHT, height);
     return {
       // Neither direction moved it: the axis cannot be resized at all, so the
       // floating default is the best answer available and is the one the
@@ -5974,7 +6063,7 @@ var PanelPlacement = class {
   /**
    * Write a dragged size onto the host, on the axes this placement leaves free.
    *
-   * Writing the custom property rather than inline `width` / `height` does not
+   * Writing a custom property rather than inline `width` / `height` does not
    * by itself leave placement in charge: an inline custom property still
    * outranks a `:host([placement=…])` rule setting the same property, so a
    * height dragged while floating would cap a docked sidebar asking for
@@ -5988,10 +6077,10 @@ var PanelPlacement = class {
       return;
     }
     if (size.width !== void 0) {
-      this.#host.element.style.setProperty("--ag-ui-width", `${size.width}px`);
+      this.#host.element.style.setProperty(DRAG_WIDTH, `${size.width}px`);
     }
     if (size.height !== void 0 && axis === "both") {
-      this.#host.element.style.setProperty("--ag-ui-height", `${size.height}px`);
+      this.#host.element.style.setProperty(DRAG_HEIGHT, `${size.height}px`);
     }
   }
   /**
@@ -6004,10 +6093,10 @@ var PanelPlacement = class {
   releaseOwnedAxes() {
     const axis = this.#resizeAxis();
     if (axis !== "both") {
-      this.#host.element.style.removeProperty("--ag-ui-height");
+      this.#host.element.style.removeProperty(DRAG_HEIGHT);
     }
     if (axis === "none") {
-      this.#host.element.style.removeProperty("--ag-ui-width");
+      this.#host.element.style.removeProperty(DRAG_WIDTH);
     }
   }
   /**
@@ -6910,9 +6999,7 @@ var ToolCallCard = class {
     this.#formatPayload = options.formatPayload ?? null;
     this.element = document.createElement("div");
     this.element.className = "tool-call";
-    this.element.setAttribute("part", "tool-card");
     this.element.setAttribute("data-tool-name", name);
-    this.element.setAttribute("data-status", TOOL_CALL_STATUS.PENDING);
     this.element.setAttribute("data-expanded", "false");
     const head = document.createElement("div");
     head.className = "tool-call-head";
@@ -6927,8 +7014,7 @@ var ToolCallCard = class {
     label.textContent = summary ?? name;
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
-    this.#status.setAttribute("part", "tool-card-status");
-    this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
+    this.#setStatus(TOOL_CALL_STATUS.PENDING);
     this.#decision = document.createElement("span");
     this.#decision.className = "tool-call-decision";
     this.#decision.setAttribute("part", "tool-card-decision");
@@ -6976,8 +7062,7 @@ var ToolCallCard = class {
     if (this.#settled) {
       return;
     }
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
   }
   /**
    * Say whether a prompt is open on this call, a question it asked or a
@@ -7012,8 +7097,7 @@ var ToolCallCard = class {
       return;
     }
     this.#settled = true;
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
     this.#resultLabel.textContent = resultLabels(this.#strings)[status];
     this.#renderPayload(
       this.#resultBody,
@@ -7022,6 +7106,20 @@ var ToolCallCard = class {
     );
     this.#resultSection.hidden = false;
   }
+  /**
+   * Write the status everywhere it is read from, in one place so they cannot
+   * disagree: `data-status` for the shadow CSS, the pill's text, and the part
+   * lists. `::part()` takes no attribute selector, so the card and its pill also
+   * name the status as a part (`tool-card-error`, `tool-card-status-error`), the
+   * modifier convention a run notice uses, and a host styles failures alone.
+   * Setting the whole list replaces the previous modifier.
+   */
+  #setStatus(status) {
+    this.element.setAttribute("data-status", status);
+    this.element.setAttribute("part", `tool-card tool-card-${status}`);
+    this.#status.setAttribute("part", `tool-card-status tool-card-status-${status}`);
+    this.#status.textContent = statusLabels(this.#strings)[status];
+  }
   /**
    * Fill one body region, offering it to the host formatter first.
    *
@@ -8373,8 +8471,8 @@ var EMBEDDED_STYLES = `
    the widget lives in the host's own layout (fixes overlay/z-index clashes). */
 :host([placement="embedded"]) {
   --_position: var(--ag-ui-position, static);
-  --_width: var(--ag-ui-width, 100%);
-  --_height: var(--ag-ui-height, 100%);
+  --_width: var(--_drag-width, var(--ag-ui-width, 100%));
+  --_height: var(--_drag-height, var(--ag-ui-height, 100%));
   --_max-width: var(--ag-ui-max-width, 100%);
   --_max-height: var(--ag-ui-max-height, 100%);
   --_shadow: var(--ag-ui-shadow, none);
@@ -8632,7 +8730,7 @@ var PRESET_STYLES = `
 
 :host([placement="side"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);
@@ -8848,7 +8946,7 @@ var SIDEBAR_STYLES = `
    host-managed push instead. */
 :host([placement="sidebar"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);
@@ -8947,6 +9045,11 @@ var SMALL_VIEWPORT_STYLES = `
    fine-pointered and small, and conflating the two gets both wrong. What the
    pointer decides is which controls make sense, further down.
 
+   The size the user dragged is deliberately not read here. The desktop
+   placements read it before the host token, and this block restates the sizes
+   without it, so a persisted or freshly dragged size cannot change the shape
+   of a phone, and a window narrowed after a drag goes full-bleed.
+
    Two placements are left alone. "page" is already this shape. "embedded" sits
    in a box the host sized and placed, and taking that over would break the app
    shell it was embedded into -- the host is the only party that knows whether
@@ -10227,8 +10330,8 @@ var TOKEN_STYLES = `
      grid/flex layout) to embed it in the page flow instead of floating. */
   --_position: var(--ag-ui-position, fixed);
   --_z-index: var(--ag-ui-z-index, 2147483000);
-  --_width: var(--ag-ui-width, 380px);
-  --_height: var(--ag-ui-height, 560px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 380px));
+  --_height: var(--_drag-height, var(--ag-ui-height, 560px));
   /* The gutter a resting floating panel keeps between itself and the edge of
      the box the host left free. One number, because the inset below spends it
      and the cap beneath has to know it was spent. */
@@ -16292,6 +16395,7 @@ var ToolStepGroup = class {
       state = "error";
     }
     this.element.setAttribute("data-state", state);
+    this.element.setAttribute("part", `tool-group tool-group-${state}`);
     this.element.setAttribute("data-count", String(total));
     const only = total === 1 ? steps[0] : void 0;
     if (only !== void 0) {
@@ -17998,8 +18102,13 @@ var RunHandlers = class {
    * A handler table for one AG-UI client. Every table built for the current
    * conversation draws into the same transcript and shares its bookkeeping, so
    * a continuation run reports into the interaction the user is looking at.
+   *
+   * `threadId` is the thread the client was built for, named on the
+   * run-finished detail. Taken here rather than read when the run settles,
+   * because a stopped run settles after the reset that stopped it, when the
+   * thread on screen is already the next one.
    */
-  forClient() {
+  forClient(threadId) {
     const ledger = this.#ledger;
     const attached = () => ledger === this.#ledger;
     const { onSettled, ...drawing } = this.#tableFor(ledger);
@@ -18009,7 +18118,7 @@ var RunHandlers = class {
         if (attached()) {
           onSettled();
         }
-        this.#dispatchRunFinished(ledger);
+        this.#dispatchRunFinished(ledger, threadId);
       }
     };
   }
@@ -18162,7 +18271,7 @@ var RunHandlers = class {
    * server is a fact about the run, and a name can appear on both sides across a
    * conversation.
    */
-  #dispatchRunFinished(ledger) {
+  #dispatchRunFinished(ledger, threadId) {
     const tools = ledger.tools.map(({ id, name }) => ({
       name,
       side: ledger.serverSettled.has(id) ? "server" : "client"
@@ -18173,7 +18282,7 @@ var RunHandlers = class {
     ledger.invalidated.clear();
     this.#host.element.dispatchEvent(
       new CustomEvent(RUN_FINISHED_EVENT, {
-        detail: { tools, invalidated },
+        detail: { threadId, tools, invalidated },
         bubbles: true,
         composed: true
       })
@@ -18992,6 +19101,11 @@ var AgUiChat = class extends HTMLElement {
    * then a host's {@link sendMessage} waits for it rather than refusing.
    */
   #restoreHold = null;
+  /**
+   * The thread the latest {@link THREAD_EVENT} reported, which the next one
+   * names as the thread it replaced; `null` before the first.
+   */
+  #shownThread = null;
   /** The decision a run is suspended on, which a Stop abandons. */
   #decision = new PendingDecision();
   /**
@@ -19023,6 +19137,8 @@ var AgUiChat = class extends HTMLElement {
     allowImages: () => this.allowImages,
     follow: () => this.#transcript.follow()
   });
+  // This chat's place among the connected ones, which a free highlight ring reads.
+  #chatRegistration = new ChatRegistration(this);
   /**
    * Which storage keys are this element's: the namespace it claims, the keys
    * its layout preferences live under, and the built-in store scoped to them.
@@ -19270,7 +19386,8 @@ var AgUiChat = class extends HTMLElement {
       },
       cancelRun: () => this.#cancelRun(),
       resetState: () => this.#resetState(),
-      setRunning: (running) => this.#setRunning(running)
+      setRunning: (running) => this.#setRunning(running),
+      threadChanged: (threadId, reason) => this.#dispatchThread(threadId, reason)
     });
   }
   /** Attributes the element reacts to after it has been connected. */
@@ -19583,6 +19700,7 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#connectedBefore = true;
     this.#storage.claim();
+    this.#chatRegistration.join();
     this.#placement.restoreSize();
     requestAnimationFrame(() => {
       this.#placement.restoreLauncherPosition();
@@ -19620,7 +19738,7 @@ var AgUiChat = class extends HTMLElement {
     this.#voice.wire();
     this.#history.adoptActiveThread();
     queueMicrotask(() => this.#startup());
-    void this.#history.rehydrate();
+    void this.#history.rehydrate(changed && held !== "" ? "rescope" : "restore");
     if (changed) {
       void this.#history.refreshDrawer();
     }
@@ -19673,7 +19791,7 @@ var AgUiChat = class extends HTMLElement {
     await Promise.all([
       this.#tools.fetchCatalog(),
       this.#skills.fetch(),
-      this.#history.rehydrate()
+      this.#history.rehydrate("restore")
     ]);
   }
   /**
@@ -19689,6 +19807,7 @@ var AgUiChat = class extends HTMLElement {
     window.visualViewport?.removeEventListener("resize", this.#onViewportResize);
     window.visualViewport?.removeEventListener("scroll", this.#onViewportResize);
     this.#storage.release();
+    this.#chatRegistration.leave();
     this.#cancelRun();
     this.#excerpts.detachPageOffer();
     this.#attachments.tray?.dispose();
@@ -19836,6 +19955,26 @@ var AgUiChat = class extends HTMLElement {
   get unread() {
     return this.#unread;
   }
+  /**
+   * The thread on screen; `null` before the element first connects.
+   *
+   * Only reads. `conversationStore.threadId()` mints and stores a thread when
+   * the store points at none, so a host asking which conversation is showing
+   * could start one; this never does. {@link THREAD_EVENT} says when it changes.
+   */
+  get threadId() {
+    const threadId = this.#history.threadId;
+    return threadId === "" ? null : threadId;
+  }
+  /**
+   * Whether an interaction is in flight: the composer's own state, the one that
+   * shows Stop. It spans every tool round, a retry and a checkpoint
+   * continuation as well as a send, which {@link SUBMIT_EVENT} alone does not.
+   * Reflected as `data-running` on the element, for a host's CSS.
+   */
+  get running() {
+    return this.#running;
+  }
   /**
    * Whether to mount collapsed.
    *
@@ -19886,6 +20025,13 @@ var AgUiChat = class extends HTMLElement {
   moveTo(corner, options = {}) {
     return this.#placement.moveTo(corner, options);
   }
+  /**
+   * Drop a size the user dragged, and its stored copy, so the placement's
+   * default and the host's `--ag-ui-width` / `--ag-ui-height` apply again.
+   */
+  resetSize() {
+    this.#placement.resetSize();
+  }
   /** Flip the collapsed state. Bound to the built-in header toggle. */
   toggleCollapsed() {
     this.setCollapsed(!this.collapsed);
@@ -19955,7 +20101,7 @@ var AgUiChat = class extends HTMLElement {
     this.#voice.dispose();
     this.#voice.wire();
     this.#history.adoptActiveThread();
-    void this.#history.rehydrate();
+    void this.#history.rehydrate("rescope");
     void this.#history.refreshDrawer();
   }
   /**
@@ -20016,6 +20162,34 @@ var AgUiChat = class extends HTMLElement {
   closeCheckpoints() {
     this.#checkpoints.close();
   }
+  /**
+   * Put a stored thread on screen, as picking it in the conversation list does,
+   * for a host that lists conversations in its own chrome.
+   *
+   * Resolves once the thread has been replayed, when {@link THREAD_EVENT} has
+   * fired. **A run in flight is cancelled**, as the list and {@link newChat} do;
+   * a host that would rather wait reads {@link running} first. The thread
+   * already on screen is left alone, and so is everything before the element
+   * connects, since until then it has no store to read the thread from.
+   */
+  async switchThread(threadId) {
+    if (!this.#connected) {
+      return;
+    }
+    await this.#history.switchThread(threadId);
+  }
+  /**
+   * Delete a stored thread, as the conversation list's delete does. Deleting the
+   * thread on screen cancels its run and puts a fresh thread in its place, and
+   * {@link THREAD_EVENT} reports it; deleting another leaves the screen alone.
+   * Does nothing before the element connects.
+   */
+  deleteThread(threadId) {
+    if (!this.#connected) {
+      return;
+    }
+    this.#history.deleteThread(threadId);
+  }
   /**
    * Open the checkpoints panel, or close it if it is already open — what the
    * built-in ⭯ button does, because a control that opens a panel is read as the
@@ -20048,6 +20222,7 @@ var AgUiChat = class extends HTMLElement {
     this.#history.startThread();
     this.#setRunning(false);
     this.#setUnread(0);
+    this.#dispatchThread(this.#history.threadId, "new");
     if (!this.collapsed) {
       this.#input.focus({ preventScroll: true });
     }
@@ -20240,6 +20415,8 @@ var AgUiChat = class extends HTMLElement {
       },
       onFilesPicked: () => this.#attachments.onFilesPicked()
     });
+    const aboveComposer = document.createElement("slot");
+    aboveComposer.name = "above-composer";
     const footer = document.createElement("slot");
     footer.name = "footer";
     this.#messagesWrap.className = "messages-wrap";
@@ -20252,6 +20429,7 @@ var AgUiChat = class extends HTMLElement {
       this.#composerHint,
       this.#queuedRow,
       this.#attachSlot,
+      aboveComposer,
       inputRow,
       footer,
       this.#drawer.element,
@@ -20419,6 +20597,21 @@ var AgUiChat = class extends HTMLElement {
     this.#sending = null;
     this.#history.stopContinuation();
   }
+  /**
+   * Say the conversation on screen changed: {@link THREAD_EVENT}.
+   *
+   * The thread it replaced is the one last reported, rather than the one the
+   * element last pointed at: a switch superseded before it replayed never drew
+   * its thread, so naming it as the previous one left a host's own list
+   * marking a thread that was never shown and still marking the one that was.
+   */
+  #dispatchThread(threadId, reason) {
+    const detail = { threadId, previousThreadId: this.#shownThread, reason };
+    this.#shownThread = threadId;
+    this.dispatchEvent(
+      new CustomEvent(THREAD_EVENT, { detail, bubbles: true, composed: true })
+    );
+  }
   /**
    * Swap the composer button between Send (idle) and Stop (running).
    *
@@ -20436,6 +20629,7 @@ var AgUiChat = class extends HTMLElement {
     this.#send.title = label;
     this.#send.setAttribute("aria-label", label);
     this.#send.dataset["state"] = running ? "running" : "idle";
+    this.toggleAttribute("data-running", running);
     if (settled) {
       this.#flushQueued();
     }
@@ -20724,7 +20918,7 @@ var AgUiChat = class extends HTMLElement {
     });
     return new AgUiClient({
       agent,
-      handlers: this.#runHandlers.forClient(),
+      handlers: this.#runHandlers.forClient(threadId),
       getTools: () => this.#tools.advertise(),
       getContext: () => this.#dispatch.buildContext(),
       executeTool: (call) => this.#dispatch.execute(call),
@@ -20918,7 +21112,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.46.0";
+var VERSION = "0.47.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -20951,6 +21145,7 @@ export {
   SUBMIT_EVENT,
   SUGGESTIONS_ACTIVITY_TYPE,
   SessionStorageStore,
+  THREAD_EVENT,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,