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

package/dist/index.js

@@ -2,10 +2,12 @@
 var ELEMENT_TAG = "ag-ui-chat";
 var SUBMIT_EVENT = "ag-ui-submit";
 var TOGGLE_EVENT = "ag-ui-toggle";
+var BAR_HEIGHT_EVENT = "ag-ui-bar-height";
 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";
@@ -61,6 +63,12 @@ var TOOL_DISPLAY = {
   COMPACT: "compact",
   FULL: "full"
 };
+var TOOL_GROUP_DISPLAY = {
+  INLINE: "inline",
+  MINIMAL: "minimal",
+  COMPACT: "compact",
+  FULL: "full"
+};
 var COMPACTION_ACTIVITY_TYPE = "compaction";
 var LOAD_CAPABILITY_TOOL = "load_capability";
 var ICON_SEND = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19.5V5m-6.5 6.5L12 5l6.5 6.5"/></svg>`;
@@ -276,7 +284,7 @@ function createChatSurfaceTools(surface) {
         if (!report.movable) {
           return {
             moved: false,
-            reason: report.fullBleed ? "the panel fills the screen, so there is nowhere to move it to" : report.draggable === false ? "this page has turned off moving the panel" : `the "${report.placement ?? ""}" placement owns the panel's position`,
+            reason: report.fullBleed ? "the panel fills the screen, so there is nowhere to move it to" : report.collapseTo === "bar" || report.collapseTo === "none" ? "the panel is docked: it rises from the page's bottom bar and stays there" : report.draggable === false ? "this page has turned off moving the panel" : `the "${report.placement ?? ""}" placement owns the panel's position`,
             suggestion: report.collapsible ? "minimise_chat" : null
           };
         }
@@ -285,7 +293,7 @@ function createChatSurfaceTools(surface) {
     },
     {
       name: "minimise_chat",
-      description: "Collapse your own panel to its launcher, so the user can see the whole page. The launcher stays visible and reopens it. Answers `minimised: false` when the placement has no collapsed state, which is the case for a full-page chat.",
+      description: "Collapse your own panel, so the user can see the whole page. The user reopens it from where it collapsed to (a launcher, a rail, a bottom bar or the page's own control). Answers `minimised: false` when the placement has no collapsed state, which is the case for a full-page chat.",
       parameters: {
         type: "object",
         properties: {},
@@ -297,7 +305,7 @@ function createChatSurfaceTools(surface) {
         if (!report.collapsible) {
           return {
             minimised: false,
-            reason: "this placement has no collapsed state, so there is no launcher to return to"
+            reason: "this placement has no collapsed state, so there is nothing to minimise to"
           };
         }
         surface.setCollapsed(true, { announce: true });
@@ -354,8 +362,163 @@ 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;
+  }
+  if (owner === null) {
+    return PACKAGE_ACCENT;
+  }
+  const chatAccent = resolveOn(owner, CHAT_ACCENT);
+  return chatAccent === "" ? PACKAGE_ACCENT : legible(owner, chatAccent, target);
+}
+var RING_CONTRAST = 3;
+var STEP = 0.1;
+function legible(chat, accent, target) {
+  const paint = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (paint === null) {
+    return accent;
+  }
+  const bytes = (color) => {
+    paint.clearRect(0, 0, 1, 1);
+    paint.fillStyle = "rgb(0 0 0 / 0)";
+    paint.fillStyle = color;
+    paint.fillRect(0, 0, 1, 1);
+    const [r2 = 0, g2 = 0, b2 = 0, a3 = 0] = paint.getImageData(0, 0, 1, 1).data;
+    return [r2, g2, b2, a3 / 255];
+  };
+  const surface = surfaceBehind(target, bytes);
+  const holds = (color) => contrast(over(color, surface), surface) >= RING_CONTRAST;
+  const own = [accent, resolveOn(chat, CHAT_ACCENT, "light"), resolveOn(chat, CHAT_ACCENT, "dark")];
+  const fit = own.find((candidate) => holds(bytes(candidate)));
+  if (fit !== void 0) {
+    return fit;
+  }
+  const from = over(bytes(accent), surface);
+  const black = [0, 0, 0, 1];
+  const white = [255, 255, 255, 1];
+  const toward = contrast(black, surface) > contrast(white, surface) ? black : white;
+  let step = 1;
+  while (!holds(mix(from, toward, step * STEP))) {
+    step += 1;
+  }
+  const [r, g, b] = mix(from, toward, step * STEP);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+function surfaceBehind(target, bytes) {
+  const layers = [];
+  for (let el2 = parentOf(target); el2 !== null; el2 = parentOf(el2)) {
+    const layer = bytes(window.getComputedStyle(el2).backgroundColor);
+    layers.push(layer);
+    if (layer[3] === 1) {
+      break;
+    }
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  probe.style.color = "Canvas";
+  document.documentElement.appendChild(probe);
+  let surface = bytes(window.getComputedStyle(probe).color);
+  probe.remove();
+  for (const layer of layers.reverse()) {
+    surface = over(layer, surface);
+  }
+  return surface;
+}
+function parentOf(el2) {
+  if (el2.parentElement !== null) {
+    return el2.parentElement;
+  }
+  const root = el2.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+function over(top, under) {
+  return mix(under, top, top[3]);
+}
+function mix(from, to, share) {
+  const channel = (index) => Math.round(from[index] + (to[index] - from[index]) * share);
+  return [channel(0), channel(1), channel(2), 1];
+}
+function luminance([r, g, b]) {
+  const linear = (channel) => {
+    const c = channel / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * linear(r) + 0.7152 * linear(g) + 0.0722 * linear(b);
+}
+function contrast(a3, b) {
+  const [la, lb] = [luminance(a3), luminance(b)];
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+function readToken(el2, name) {
+  return window.getComputedStyle(el2).getPropertyValue(name).trim();
+}
+function resolveOn(chat, name, scheme) {
+  const value = readToken(chat, name);
+  const root = chat.shadowRoot;
+  if (value === "" || root === null) {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  if (scheme !== void 0) {
+    probe.style.colorScheme = scheme;
+  }
+  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 +603,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 +667,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 +681,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 +701,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 +753,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 +763,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 +790,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 +813,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 +825,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 }));
@@ -4330,6 +4487,8 @@ var ConversationHistory = class {
    * Also what tells a pick refused for a load from one refused for a run.
    */
   #loading = null;
+  /** The thread switch under way and the promise that settles it, or `null`. */
+  #switching = null;
   constructor(host) {
     this.#host = host;
   }
@@ -4412,17 +4571,49 @@ var ConversationHistory = class {
     void this.#refreshCheckpoints();
     this.#host.checkpoints.open();
   }
-  /** Switch the active conversation to an existing thread and replay it. */
-  async switchThread(threadId) {
+  /**
+   * Switch the active conversation to an existing thread and replay it.
+   *
+   * A call for the thread a switch is already loading is handed that switch's
+   * own promise, so it settles when the thread is drawn rather than at once,
+   * before the replay.
+   *
+   * A store that rejects the load leaves the element on the thread it was on:
+   * the switch has already cleared the transcript, so it points back at the
+   * old thread and draws it again, saying nothing, and then rejects with the
+   * store's error. Left as it was, the element named a thread it was not
+   * showing and never reported it.
+   */
+  switchThread(threadId) {
     if (threadId === this.#threadId) {
-      return;
+      return this.#switching?.threadId === threadId ? this.#switching.done : Promise.resolve();
     }
+    const previous = this.#threadId;
+    const done = this.#switchTo(threadId, previous).finally(() => {
+      if (this.#switching === entry) {
+        this.#switching = null;
+      }
+    });
+    const entry = { threadId, done };
+    this.#switching = entry;
+    return done;
+  }
+  async #switchTo(threadId, previous) {
     this.#host.cancelRun();
     this.#host.resetState();
     this.#host.conversationStore().setActiveThread(threadId);
     this.#threadId = threadId;
     this.#host.setRunning(false);
-    await this.rehydrate();
+    try {
+      await this.rehydrate("switch");
+    } catch (error) {
+      if (this.#threadId === threadId) {
+        this.#threadId = previous;
+        this.#host.conversationStore().setActiveThread(previous);
+        await this.rehydrate(null).catch(() => void 0);
+      }
+      throw error;
+    }
   }
   /** Rename a thread, then reload the list that shows its title. */
   renameThread(threadId, title) {
@@ -4440,6 +4631,7 @@ var ConversationHistory = class {
       this.#host.resetState();
       this.adoptActiveThread();
       this.#host.setRunning(false);
+      this.#host.threadChanged(this.#threadId, "delete");
     }
     void this.refreshDrawer();
   }
@@ -4616,8 +4808,12 @@ 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, and
+   * neither does one given `null`, which draws the thread already reported.
    */
-  async rehydrate() {
+  async rehydrate(reason) {
     this.#generation += 1;
     const generation = this.#generation;
     const threadId = this.#threadId;
@@ -4667,11 +4863,19 @@ var ConversationHistory = class {
           }
         }
       }
+      if (checkpoint === null) {
+        this.#noticeIfRunUnfinished(messages);
+      }
+      if (reason !== null) {
+        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) {
@@ -5304,7 +5508,7 @@ function clampPanel(host, viewport, margin = EDGE_MARGIN) {
 
 // src/ui/placement/launcher_drag.ts
 var DRAG_THRESHOLD = 4;
-var STEP = 16;
+var STEP2 = 16;
 var COARSE_STEP = 64;
 function enableLauncherDrag(launcher, options) {
   let suppressClick = false;
@@ -5386,7 +5590,7 @@ function enableLauncherDrag(launcher, options) {
       if (!options.enabled()) {
         return;
       }
-      const step = event.shiftKey ? COARSE_STEP : STEP;
+      const step = event.shiftKey ? COARSE_STEP : STEP2;
       const rect = options.rect();
       let moved = null;
       if (event.key === "ArrowLeft") {
@@ -5513,7 +5717,7 @@ function onControl(event, handle) {
 // src/ui/placement/resize_handle.ts
 var MIN_WIDTH2 = 280;
 var MIN_HEIGHT2 = 240;
-var STEP2 = 16;
+var STEP3 = 16;
 var COARSE_STEP2 = 64;
 function createResizeHandle(grip, options) {
   const handle = document.createElement("div");
@@ -5561,7 +5765,7 @@ function createResizeHandle(grip, options) {
     if (axis === "none" || !movable(grip, axis)) {
       return;
     }
-    const step = event.shiftKey ? COARSE_STEP2 : STEP2;
+    const step = event.shiftKey ? COARSE_STEP2 : STEP3;
     const rect = options.rect();
     const delta = ARROWS[event.key];
     if (delta === void 0) {
@@ -5646,12 +5850,23 @@ var UNKNOWN = {
   resizeAxis: "both",
   startsCollapsed: false
 };
-function surfaceFor(placement) {
-  return SURFACES.get(placement) ?? UNKNOWN;
+function surfaceFor(placement, collapseTo = null) {
+  const surface = SURFACES.get(placement) ?? UNKNOWN;
+  if (collapseTo === "bar" && surface.collapseTo === "launcher") {
+    return { ...surface, collapseTo: "bar", launcherDraggable: false };
+  }
+  if (collapseTo === "none" && surface.collapseTo !== null) {
+    return { ...surface, collapseTo: "none", launcherDraggable: false };
+  }
+  return surface;
 }
 
 // src/ui/placement/panel_placement.ts
 var SIZE_KEY = "ag-ui-chat:size";
+var DRAG_WIDTH = "--_drag-width";
+var DRAG_HEIGHT = "--_drag-height";
+var DOCK_BOTTOM = "--_dock-bottom";
+var DOCK_RIGHT = "--_dock-right";
 var LAUNCHER_KEY = "ag-ui-chat:launcher";
 function asPoint(value) {
   if (typeof value !== "object" || value === null) {
@@ -5735,6 +5950,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
@@ -5816,6 +6042,7 @@ var PanelPlacement = class {
     const fullBleed = coversViewport(box, viewport);
     return {
       placement: this.#host.element.getAttribute("placement"),
+      collapseTo: this.#surface().collapseTo,
       collapsed: this.#host.collapsed(),
       collapsible: this.#host.collapsible(),
       movable: this.#launcherDraggable() && !fullBleed,
@@ -5910,7 +6137,7 @@ var PanelPlacement = class {
    * per interaction, because `placement` is a live attribute.
    */
   #resizeAxis() {
-    return surfaceFor(this.#host.element.getAttribute("placement")).resizeAxis;
+    return this.#surface().resizeAxis;
   }
   /**
    * Which edges the layout is holding still, by measuring rather than guessing:
@@ -5923,12 +6150,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 +6201,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 +6215,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,11 +6231,51 @@ 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);
+    }
+  }
+  /** The surface the live placement and collapse-to attributes describe. */
+  #surface() {
+    const element = this.#host.element;
+    return surfaceFor(element.getAttribute("placement"), element.getAttribute("collapse-to"));
+  }
+  /** Whether the panel rises from the bottom bar or the host's anchor. */
+  #docked() {
+    const target = this.#surface().collapseTo;
+    return target === "bar" || target === "none";
+  }
+  /**
+   * Write where a docked panel stands, and return the bar's height.
+   *
+   * Under the bar it is the strip's border box, which is 0 whenever the strip
+   * is not drawn (a phone with the panel open, where the panel is the screen).
+   * Under a host anchor it is the anchor's top and right, measured against the
+   * layout viewport a fixed element is placed in; an anchor of null leaves the
+   * panel in its placement's own corner. Every other surface carries neither
+   * property, so nothing stale is left behind by a live switch.
+   */
+  syncDock(bar, anchor) {
+    const element = this.#host.element;
+    const target = this.#surface().collapseTo;
+    const height = target === "bar" ? bar.offsetHeight : 0;
+    if (target === "bar") {
+      element.style.setProperty(DOCK_BOTTOM, `${height}px`);
+    } else if (target === "none" && anchor !== null) {
+      const rect = anchor.getBoundingClientRect();
+      const screen = this.#screen();
+      element.style.setProperty(DOCK_BOTTOM, `${Math.max(0, screen.height - rect.top)}px`);
+      element.style.setProperty(DOCK_RIGHT, `${Math.max(0, screen.width - rect.right)}px`);
+    } else {
+      element.style.removeProperty(DOCK_BOTTOM);
     }
+    if (target !== "none" || anchor === null) {
+      element.style.removeProperty(DOCK_RIGHT);
+    }
+    element.toggleAttribute("data-dock-anchored", target === "none" && anchor !== null);
+    return height;
   }
   /**
    * Whether this placement lets the launcher be dragged, read per interaction
@@ -6016,7 +6283,7 @@ var PanelPlacement = class {
    * a host out without giving up the launcher itself.
    */
   #launcherDraggable() {
-    return this.#host.element.getAttribute("data-launcher-drag") !== "false" && surfaceFor(this.#host.element.getAttribute("placement")).launcherDraggable;
+    return this.#host.element.getAttribute("data-launcher-drag") !== "false" && this.#surface().launcherDraggable;
   }
   /**
    * The viewport the launcher and the panel both have to fit inside.
@@ -6374,6 +6641,17 @@ var PanelPlacement = class {
    */
   #applyResize(grip, box) {
     box = this.#withinViewport(box);
+    if (this.#docked()) {
+      const now = this.#host.element.getBoundingClientRect();
+      box = {
+        left: grip.x === this.#anchor.x ? now.left : box.left,
+        right: grip.x === this.#anchor.x ? now.right : box.right,
+        top: grip.y === this.#anchor.y ? now.top : box.top,
+        bottom: grip.y === this.#anchor.y ? now.bottom : box.bottom
+      };
+      this.#applySize({ width: box.right - box.left, height: box.bottom - box.top });
+      return box;
+    }
     this.#applySize({ width: box.right - box.left, height: box.bottom - box.top });
     if (grip.x !== this.#anchor.x && grip.y !== this.#anchor.y) {
       return box;
@@ -6910,9 +7188,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 +7203,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 +7251,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 +7286,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 +7295,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.
    *
@@ -8332,12 +8619,18 @@ var COLLAPSE_STYLES = `
 :host([collapsed][placement="embedded"]) .messages-wrap,
 :host([collapsed][placement="embedded"]) .messages,
 :host([collapsed][placement="embedded"]) .input-row,
+:host([collapsed][placement="embedded"]) slot[name="above-composer"],
 :host([collapsed][placement="embedded"]) .skill-chips,
 :host([collapsed][placement="embedded"]) .skill-palette,
 :host([collapsed][placement="embedded"]) .skill-hint {
   display: none;
 }
 
+/* The above-composer slot is in the list above because it is the host's content
+   against the composer: a bare slot has no box of its own, so hiding the input
+   row alone left the slotted row showing under the header bar. Its sibling slot
+   below the composer is a footer and is left to the host. */
+
 /* The page placement has no collapsed state, so it offers no control for one.
    A dedicated route has no "away" to go to: shrinking it left a strip of
    application chrome fixed over a route that no longer had an owner, and this
@@ -8365,6 +8658,334 @@ var COLLAPSE_STYLES = `
   transform: none;
   visibility: visible;
 }
+
+/* \u2500\u2500 Bottom bar (collapse-to="bar") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   The round launcher drawn as a strip along the bottom edge: the title, the
+   unread badge and a running mark, with a history button beside it. The
+   wrapper draws no box anywhere else, so the launcher lays out against the
+   host as it always has; under the bar it is fixed to the bottom of the
+   viewport, outside the host's box, which sits where the panel opens.
+
+   Here rather than with the launcher because it restyles the launcher's
+   collapsed and pressed states, which this module follows in the cascade.
+   The strip stays drawn while the panel is open on a wide viewport, as the
+   way to minimise it; the phone block hides it then. */
+.dock-bar {
+  display: contents;
+}
+
+.bar-history {
+  display: none;
+}
+
+:host([data-collapsed-to="bar"]) .dock-bar {
+  position: fixed;
+  inset: auto var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 4px;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 4px 8px;
+  border-top: 1px solid var(--_border);
+  background: var(--_bg);
+  color: var(--_fg);
+  pointer-events: auto;
+}
+
+/* A left-hand chat keeps its side: its controls and its panel at the left end. */
+:host([data-collapsed-to="bar"][placement="bottom-left"]) .dock-bar {
+  justify-content: flex-start;
+}
+
+/* The launcher as the strip's title button. Its resting state hides it behind
+   an open panel; the bar keeps it on screen, so every part of that state is
+   restated, and the hover and press scales are cancelled at the weight of the
+   rules that set them. The title truncates rather than taking a fixed width,
+   leaving room beside it for whatever a later release adds to the row. */
+:host([data-collapsed-to="bar"]) .launcher {
+  position: static;
+  inset: auto;
+  flex: 0 1 auto;
+  justify-content: flex-start;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  height: auto;
+  min-height: 32px;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--_fg);
+  box-shadow: none;
+  touch-action: manipulation;
+  opacity: 1;
+  transform: none;
+  visibility: visible;
+}
+
+:host([data-collapsed-to="bar"]) .launcher:hover {
+  background: var(--_wash);
+}
+
+/* Bare at rest, like the history button beside it. The themes frame the
+   round launcher with a border or a shadow at the weight of the rule above
+   and later in the cascade, so the child combinator on the bar is there for
+   weight, not scope: the launcher is always the bar's direct child. */
+:host([data-collapsed-to="bar"]) .dock-bar > .launcher {
+  border: 0;
+  box-shadow: none;
+}
+
+:host([data-collapsed-to="bar"][collapsed]) .launcher:hover,
+:host([data-collapsed-to="bar"][collapsed]) .launcher:active {
+  transform: none;
+}
+
+:host([data-collapsed-to="bar"]) .launcher .icon-holder {
+  flex: none;
+  width: 18px;
+  height: 18px;
+}
+
+:host([data-collapsed-to="bar"]) .rail-label {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.9em;
+  font-weight: 600;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:host([data-collapsed-to="bar"]) .launcher-badge {
+  position: static;
+  flex: none;
+  box-shadow: none;
+}
+
+/* The running mark: the element already reflects a run as data-running, so
+   the bar shows one without a state of its own. */
+:host([data-collapsed-to="bar"][data-running]) .launcher::after {
+  content: "";
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--_accent);
+  animation: ag-ui-dock-running 1.2s ease-in-out infinite;
+}
+
+@keyframes ag-ui-dock-running {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([data-collapsed-to="bar"][data-running]) .launcher::after {
+    animation: none;
+  }
+}
+
+:host([data-collapsed-to="bar"]) .bar-history {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+:host([data-collapsed-to="bar"]) .bar-history:hover {
+  background: var(--_wash);
+  color: var(--_fg);
+}
+
+/* Both declare a display of their own, so each needs its own hidden rule. */
+:host([data-collapsed-to]) .dock-bar[hidden],
+:host([data-collapsed-to]) .bar-history[hidden] {
+  display: none;
+}
+
+/* History from the bar: the panel's own drawer, moved beside the bar while
+   the panel is away, drawn as a popover standing on the bar's end. There is
+   no backdrop; a press outside the bar closes it, as Escape does.
+
+   Its outer edge keeps the panel's gutter, so the popover and the panel line
+   up on the side they share. The bar is already inset by the host's reserved
+   edges, so the gutter alone is the whole offset from it, and the width cap
+   leaves the gutter free on both sides. A phone keeps a narrow margin
+   instead, in the block below: the panel there is the whole screen, so there
+   is no edge to line up with. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer {
+  inset: auto var(--_edge-gutter) calc(100% + 8px) auto;
+  width: min(320px, calc(var(--_viewport-width) - 2 * var(--_edge-gutter)));
+  height: min(440px, calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - 16px));
+  border-radius: var(--_panel-radius);
+  box-shadow: var(--_shadow);
+  overflow: hidden;
+}
+
+:host([data-collapsed-to="bar"][placement="bottom-left"]) .dock-bar > .drawer {
+  inset: auto auto calc(100% + 8px) var(--_edge-gutter);
+}
+
+@media (max-width: 600px) {
+  :host([data-collapsed-to="bar"]:not([data-small-viewport="off"])) .dock-bar > .drawer {
+    inset: auto 8px calc(100% + 8px) auto;
+    width: min(320px, calc(100vw - 16px));
+  }
+
+  :host([data-collapsed-to="bar"][placement="bottom-left"]:not([data-small-viewport="off"])) .dock-bar > .drawer {
+    inset: auto auto calc(100% + 8px) 8px;
+  }
+}
+
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer .drawer-backdrop {
+  display: none;
+}
+
+/* The popover closes in one step. The in-panel drawer slides its panel out
+   and holds the overlay's visibility until the slide ends; here the overlay
+   is the popover's own box, rounded and clipped, so the slide moved the list
+   inside a box that stayed put (read as a shrink) and the box went only once
+   the slide had finished. This outweighs the drawer's own hidden rule, so the
+   box hides at once, and whatever the list inside does is out of sight. The
+   way in needs no rule: the drawer is moved into the bar as it opens, and a
+   moved element starts no transition. Nothing is left for reduced motion. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer {
+  transition: none;
+}
+
+/* Border-box, so the list's own border sits inside the popover's clipped box
+   rather than 2px past its bottom edge. */
+:host([data-collapsed-to="bar"]) .dock-bar > .drawer .drawer-panel {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--_border);
+  border-radius: inherit;
+  box-shadow: none;
+}
+
+/* \u2500\u2500 The host's own bar (collapse-to="none") \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   Collapsed is hidden: no launcher, no rail, no header bar. The host's control
+   calls the public API, and the panel rises from its anchor (the dock module)
+   or from the placement's corner. Each placement's own collapsed rule is
+   overridden at its weight or above, later in the cascade. */
+:host([data-collapsed-to="none"][collapsed]) {
+  pointer-events: none;
+}
+
+:host([data-collapsed-to="none"][collapsed]) .launcher {
+  display: none;
+}
+
+:host([data-collapsed-to="none"][collapsed][placement="sidebar"]) {
+  width: 0;
+}
+
+:host([data-collapsed-to="none"][collapsed][placement="embedded"]) {
+  display: none;
+}
+`;
+
+// src/ui/placement/dock_styles.ts
+var DOCK_STYLES = `
+/* \u2500\u2500 Dock \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   A docked panel rises from the bar along the bottom edge, or from the host's
+   own control, instead of resting in a corner of its own. The element stamps
+   what it collapses to as data-collapsed-to, and writes where the dock is as
+   two private properties: --_dock-bottom, the bar's height or the distance
+   from the layout viewport's bottom to the anchor's top, and --_dock-right,
+   the anchor's distance from the right edge. Both are read with a 0px
+   fallback, so a panel measured before the bar has laid out stands where a
+   bar of no height would put it.
+
+   The cap follows the token block's rule: what the host left free less the
+   one gutter the anchored edge spends, so a panel grown to the cap runs from
+   just above the bar to the far edge. A host therefore needs no inset to keep
+   the panel off its bar; --ag-ui-inset still wins when set.
+
+   These blocks restate tokens and nothing else, and sit ahead of the phone
+   block at no more weight than it has, so on a phone the panel is the screen
+   as every other placement is there. The bar measures 0 while it is not drawn
+   (a phone with the panel open), which is what lets the side and full shapes
+   below fall back to the whole height without a phone rule of their own.
+
+   Each placement keeps its own side and shape; only the bottom edge moves. */
+:host([data-collapsed-to="bar"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto calc(var(--_edge-gutter) + var(--_viewport-inset-right))
+      calc(
+        var(--_edge-gutter) + var(--_viewport-inset-bottom) +
+          max(var(--_dock-bottom, 0px), var(--_keyboard-inset))
+      )
+      auto
+  );
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - var(--_edge-gutter)));
+}
+
+:host([data-collapsed-to="bar"][placement="bottom-left"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    auto auto
+      calc(
+        var(--_edge-gutter) + var(--_viewport-inset-bottom) +
+          max(var(--_dock-bottom, 0px), var(--_keyboard-inset))
+      )
+      calc(var(--_edge-gutter) + var(--_viewport-inset-left))
+  );
+}
+
+/* The column and the full-screen panel stop at the bar rather than covering
+   it, so the bar stays where the user minimises from. */
+:host([data-collapsed-to="bar"][placement="side"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-bottom) + var(--_dock-bottom, 0px)) auto
+  );
+  --_height: var(--ag-ui-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+}
+
+:host([data-collapsed-to="bar"][placement="full"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-bottom) + var(--_dock-bottom, 0px)) var(--_viewport-inset-left)
+  );
+  --_height: var(--ag-ui-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+  --_max-height: var(--ag-ui-max-height, calc(var(--_viewport-height) - var(--_dock-bottom, 0px)));
+}
+
+/* The host's own bar: the panel stands the anchor gap (8px unless the host
+   says otherwise) above the anchor and lines up with its right edge. Only
+   once the element found the anchor; until then, and when it never does, the
+   placement's own corner stands.
+
+   The cap spends the larger of the gap and the gutter. The gutter alone is
+   what this always spent, so the default is unchanged; but a host that opens
+   the gap past the gutter to clear a tall toolbar would otherwise push a
+   panel grown to the cap off the top of the window by the difference. */
+:host([data-collapsed-to="none"][data-dock-anchored]) {
+  --_inset: var(--ag-ui-inset, auto var(--_dock-right, 0px) calc(var(--_dock-bottom, 0px) + var(--_anchor-gap)) auto);
+  --_max-height: var(
+    --ag-ui-max-height,
+    calc(var(--_viewport-height) - var(--_dock-bottom, 0px) - max(var(--_edge-gutter), var(--_anchor-gap)))
+  );
+}
 `;
 
 // src/ui/placement/embedded_styles.ts
@@ -8373,8 +8994,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 +9253,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 +9469,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 +9568,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
@@ -8982,6 +9608,15 @@ var SMALL_VIEWPORT_STYLES = `
   :host([placement=""]:not([data-small-viewport="off"])) .resize-handle {
     display: none;
   }
+
+  /* The bottom bar shows only while collapsed. With the panel open the panel
+     is the screen, its header's minimise control is the way back, and a
+     second strip fixed to the bottom edge would sit under the keyboard while
+     the composer has focus. Hidden by display, so the bar measures 0 and the
+     host's padding goes with it. */
+  :host([data-collapsed-to="bar"]:not([collapsed]):not([data-small-viewport="off"])) .dock-bar {
+    display: none;
+  }
 }
 `;
 
@@ -9113,6 +9748,9 @@ var CARD_MODES = [
 ].join(", ");
 var GROUPED = `:host(:where(:not(${CARD_MODES})))`;
 var CARDS = `:host(:is(${CARD_MODES}))`;
+function inner(mode) {
+  return `:host(:where(:not(${CARD_MODES}))[data-tool-group-display="${mode}"]) .tool-group-list .tool-call`;
+}
 var TOOL_GROUP_STYLES = `
 /* \u2500\u2500 The folded tool-step group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    One quiet row per run of consecutive calls, the cards one click down as
@@ -9297,6 +9935,43 @@ ${GROUPED} .tool-group .tool-call-subagent {
   flex-basis: 100%;
 }
 
+/* The inner display mode: how an opened group draws its calls. The same
+   visibility rules the card modes apply to a flat card, so a call inside the
+   group shows the regions the flat card of that mode shows. The flat inline
+   mode's chrome rule is left out on purpose: a card in the group has already
+   lost its box and is laid out as a row of the list, and that rule's padding
+   and gap would undo the row. Selected from the host attribute, so changing it
+   restyles groups already on screen. */
+${inner("compact")}[data-expanded="false"] .tool-call-section {
+  display: none;
+}
+
+${inner("inline")} .tool-call-section--args {
+  display: none;
+}
+
+${inner("minimal")} .tool-call-toggle,
+${inner("minimal")} .tool-call-body {
+  display: none;
+}
+
+/* A call waiting on an approval shows its arguments in every inner mode, as it
+   does in every card mode, and for the same reason: the arguments are what
+   tell three gated calls of one tool apart. These come after the hides above,
+   which they tie with on weight. The arguments region only, never every
+   section, since the result region carries the hidden attribute until a
+   result exists and a display value here would override it. The arguments
+   region carries it too when the call has none, so it is excluded while
+   hidden rather than framed empty. */
+${inner("minimal")}[data-status="deferred"] .tool-call-body {
+  display: flex;
+}
+
+${inner("compact")}[data-status="deferred"] .tool-call-section--args:not([hidden]),
+${inner("inline")}[data-status="deferred"] .tool-call-section--args:not([hidden]) {
+  display: flex;
+}
+
 /* Grouping is decided as each card is built, so a card mode set afterwards
    finds groups already drawn. It flattens them: the group and its list stop
    generating boxes, the row and the repeat ordinals go, and every card lays
@@ -9600,9 +10275,11 @@ var TOOL_STEP_STYLES = `
 
 /* The arguments region only, never every section: the result region carries the
    hidden attribute until a result exists, and a display value here overrides it,
-   framing an empty RESULT heading under the question. */
-:host([data-tool-display="compact"]) .tool-call[data-status="deferred"] .tool-call-section--args,
-:host([data-tool-display="inline"]) .tool-call[data-status="deferred"] .tool-call-section--args {
+   framing an empty RESULT heading under the question. The arguments region is
+   hidden too when the call has none, and is left alone then, or it would frame
+   an empty ARGUMENTS heading. */
+:host([data-tool-display="compact"]) .tool-call[data-status="deferred"] .tool-call-section--args:not([hidden]),
+:host([data-tool-display="inline"]) .tool-call[data-status="deferred"] .tool-call-section--args:not([hidden]) {
   display: flex;
 }
 
@@ -9964,7 +10641,15 @@ var TOKEN_STYLES = `
   --_line-strong: var(--ag-ui-line-strong, color-mix(in oklch, var(--_fg) 20%, var(--_bg)));
   --_wash: var(--ag-ui-wash, color-mix(in oklch, var(--_fg) 4.5%, var(--_bg)));
   --_accent-ink: var(--ag-ui-accent-ink, color-mix(in oklch, var(--_accent) 82%, var(--_fg)));
-  --_ring: var(--ag-ui-ring, color-mix(in oklch, var(--_accent) 55%, transparent));
+  /* The focus ring is drawn on the panel, so it has to hold 3:1 against
+     --_bg whatever accent a host brings (WCAG 2.4.13). Two parts accent to
+     three parts ink does that at the worst case, an accent at the far end
+     from the ink (white on a light panel, black on a dark one): the ink
+     alone sits far above 3:1, and three fifths of it keeps the mix there
+     while the hue still reads as the accent. Half and half fell to 2.3:1
+     for black on the code theme. The accent over transparent, as before,
+     measured only the accent, and a light host accent fell to 1.6:1. */
+  --_ring: var(--ag-ui-ring, color-mix(in oklch, var(--_accent) 40%, var(--_fg)));
   /* The user's turn is the accent at a whisper. With Quiet's graphite accent
      that is a neutral wash; once a host sets a brand accent it becomes a tint
      of the brand, which is the one thing Soft does that Quiet keeps. */
@@ -10227,8 +10912,27 @@ 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);
+  /* A size the user dragged, written inline on the host by the placement
+     code, and read ahead of the host's tokens so the drag wins. There is no
+     public token behind it; it is declared initial here only so a chat that
+     was never dragged does not inherit one, from a dragged chat it is
+     slotted into or from any page rule naming it. The inline value still
+     beats this default. */
+  --_drag-width: initial;
+  --_drag-height: initial;
+  /* Where a docked panel stands, written inline the same way by the placement
+     code: the bottom bar's height, or the host anchor's distance from the
+     bottom and right edges. Read only by the dock rules, each with a 0px
+     fallback; declared initial so it never inherits either. */
+  --_dock-bottom: initial;
+  --_dock-right: initial;
+  /* The gap between a panel and the host's own button it rises from under
+     collapse-to="none". The button usually sits inside a taller toolbar, so a
+     host sets this to the button's distance from the toolbar's top plus the
+     clearance it wants, and the panel stands clear of the toolbar. */
+  --_anchor-gap: var(--ag-ui-anchor-gap, 8px);
+  --_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. */
@@ -10842,9 +11546,18 @@ var SCHEME_STYLES = `
    dark) and beside a theme name (soft dark). auto follows the operating
    system through color-scheme itself, with no media query to keep in step.
    code is a dark-only theme and has no light half. */
+/* Important, so a scheme word holds against a host rule that sets the
+   element's color-scheme (a page that follows its own dark mode). A rule
+   from outside the shadow tree beats every :host rule at normal weight, and
+   the theme toggle writes the word; without this its press changed nothing.
+   code stays last, so code light is still dark. */
+:host([theme~="light"]) {
+  color-scheme: light !important;
+}
+
 :host([theme~="dark"]),
 :host([theme~="code"]) {
-  color-scheme: dark;
+  color-scheme: dark !important;
 }
 
 :host([theme~="auto"]) {
@@ -11885,6 +12598,9 @@ var STYLES = [
   THEME_STYLES,
   PRESET_STYLES,
   PAGE_STYLES,
+  // Ahead of the phone block and no heavier than it: a docked panel is still
+  // full-bleed on a phone.
+  DOCK_STYLES,
   SMALL_VIEWPORT_STYLES,
   SIDEBAR_STYLES,
   LAUNCHER_STYLES,
@@ -12014,7 +12730,7 @@ function buildHeader(options) {
 
 // src/ui/shell/build_launcher.ts
 function buildLauncher(options) {
-  const { launcher, badge, railLabel } = options;
+  const { launcher, badge, railLabel, bar, barHistory } = options;
   launcher.className = "launcher";
   launcher.type = "button";
   launcher.setAttribute("part", "launcher");
@@ -12033,6 +12749,20 @@ function buildLauncher(options) {
     badge
   );
   launcher.addEventListener("click", options.onOpen, { signal: options.signal });
+  bar.className = "dock-bar";
+  bar.setAttribute("part", "bar");
+  barHistory.className = "bar-history";
+  barHistory.type = "button";
+  barHistory.setAttribute("part", "bar-history");
+  barHistory.title = options.strings.chatHistory;
+  barHistory.setAttribute("aria-label", options.strings.chatHistory);
+  const glyph = document.createElement("span");
+  glyph.className = "bar-history-glyph";
+  glyph.setAttribute("aria-hidden", "true");
+  glyph.textContent = "\u2630";
+  barHistory.replaceChildren(glyph);
+  barHistory.addEventListener("click", options.onHistory, { signal: options.signal });
+  bar.replaceChildren(launcher, barHistory);
 }
 
 // src/ui/shell/is_unread_badge_enabled.ts
@@ -12113,12 +12843,12 @@ ${listText(element, tag === "OL")}
 
 `;
   }
-  const inner = children(element);
+  const inner2 = children(element);
   return BLOCK_TAGS.has(tag) ? `
 
-${inner}
+${inner2}
 
-` : inner;
+` : inner2;
 }
 function children(element) {
   let joined = "";
@@ -16292,6 +17022,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 +18729,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 +18745,7 @@ var RunHandlers = class {
         if (attached()) {
           onSettled();
         }
-        this.#dispatchRunFinished(ledger);
+        this.#dispatchRunFinished(ledger, threadId);
       }
     };
   }
@@ -18162,7 +18898,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 +18909,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
       })
@@ -18473,6 +19209,14 @@ function withScheme(theme, scheme) {
   const names = theme.split(/\s+/).filter((word) => word !== "" && !SCHEME_WORDS.includes(word));
   return [...names, scheme].join(" ");
 }
+function findAnchor(root, selector) {
+  try {
+    const scope = root instanceof ShadowRoot ? root : document;
+    return scope.querySelector(selector) ?? document.querySelector(selector);
+  } catch {
+    return null;
+  }
+}
 var AgUiChat = class extends HTMLElement {
   /** Agent factory; override to inject a custom or fake agent (tests). */
   agentFactory = createHttpAgent;
@@ -18794,8 +19538,21 @@ var AgUiChat = class extends HTMLElement {
   #launcher;
   /** The launcher's unread badge; hidden at zero, and when the host opts out. */
   #badge;
-  /** The rail's vertical caption. Rendered only by the sidebar's edge rail. */
+  /** The rail's vertical caption. Rendered only by the sidebar's edge rail and the bottom bar. */
   #railLabel = document.createElement("span");
+  /**
+   * The bottom bar under collapse-to="bar": the launcher drawn as a strip, and
+   * the history button beside it. Outside the bar it draws no box of its own.
+   */
+  #dockBar = document.createElement("div");
+  /** The bottom bar's history button, which opens the drawer as a popover. */
+  #barHistory = document.createElement("button");
+  /** The bar height last reported, so the event fires on a change only. */
+  #barHeight = 0;
+  /** The element the panel rises from under collapse-to="none", set as a property. */
+  #anchor = null;
+  /** Whether a missing anchor has been reported; once per anchor given. */
+  #anchorWarned = false;
   // Answers that finished while the widget was collapsed. Expanding clears it.
   #unread = 0;
   /** Empty-state region at the top of the message list; hidden once anything renders. */
@@ -18856,6 +19613,7 @@ var AgUiChat = class extends HTMLElement {
    */
   #onViewportResize = () => {
     this.#placement.publishVisualViewport();
+    this.#syncDock();
     if (this.#placement.dragging()) {
       return;
     }
@@ -18867,6 +19625,8 @@ var AgUiChat = class extends HTMLElement {
   #voice;
   /** Whether the element is currently in the DOM; gates the connect-time warning. */
   #connected = false;
+  /** A {@link newChat} asked for before the element connected, to start at connect. */
+  #newChatOnConnect = false;
   /**
    * Aborted when the element leaves the document, and replaced when it comes
    * back.
@@ -18992,6 +19752,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 +19788,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.
@@ -19110,7 +19877,7 @@ var AgUiChat = class extends HTMLElement {
       root: this.#root,
       connected: () => this.#connected,
       collapsed: () => this.collapsed,
-      collapsible: () => surfaceFor(this.getAttribute("placement")).collapseTo !== null,
+      collapsible: () => this.#surface().collapseTo !== null,
       strings: () => this.#strings,
       readPreference: (base) => this.#storage.readPreference(base),
       writePreference: (base, value) => this.#storage.writePreference(base, value),
@@ -19186,7 +19953,7 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#drawer = new ThreadDrawer({
       onSelect: (threadId) => {
-        void this.#history.switchThread(threadId);
+        this.#history.switchThread(threadId).catch(() => void 0);
       },
       onNew: () => {
         this.newChat();
@@ -19270,7 +20037,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. */
@@ -19278,6 +20046,8 @@ var AgUiChat = class extends HTMLElement {
     return [
       "title-text",
       "placement",
+      "collapse-to",
+      "anchor",
       "credentials",
       "user-key",
       "user-name",
@@ -19293,12 +20063,25 @@ var AgUiChat = class extends HTMLElement {
       }
       return;
     }
-    if (name === "placement") {
+    if (name === "anchor") {
+      this.#anchorWarned = false;
+      this.#syncDock();
+      return;
+    }
+    if (name === "placement" || name === "collapse-to") {
       this.#placement.releaseOwnedAxes();
       this.#placement.releaseLauncherPosition();
-      if (surfaceFor(this.getAttribute("placement")).collapseTo === null && this.collapsed) {
+      if (this.#surface().collapseTo === null && this.collapsed) {
         this.setCollapsed(false);
       }
+      this.#stampCollapseTarget();
+      if (name === "collapse-to") {
+        this.#syncLauncher();
+        if (this.#surface().collapseTo !== "bar") {
+          this.#homeDrawer();
+        }
+      }
+      this.#syncDock();
       requestAnimationFrame(() => this.#placement.syncResizeAnchor());
       return;
     }
@@ -19555,6 +20338,26 @@ var AgUiChat = class extends HTMLElement {
   set toolDisplay(value) {
     this.setAttribute("data-tool-display", value);
   }
+  /**
+   * How an opened step group draws its calls, from the
+   * `data-tool-group-display` attribute (`full` / `compact` / `minimal` /
+   * `inline`). Defaults to `full`, for an absent attribute and for a value the
+   * element does not know, which is what a group drew before the attribute.
+   *
+   * Read only while `toolDisplay` is `grouped`: under a card mode the groups
+   * are flattened into that mode's cards. Applied by the shadow CSS from the
+   * attribute itself, so changing it restyles groups already on screen.
+   */
+  get toolGroupDisplay() {
+    const attr = this.getAttribute("data-tool-group-display");
+    if (attr === TOOL_GROUP_DISPLAY.INLINE || attr === TOOL_GROUP_DISPLAY.MINIMAL || attr === TOOL_GROUP_DISPLAY.COMPACT) {
+      return attr;
+    }
+    return TOOL_GROUP_DISPLAY.FULL;
+  }
+  set toolGroupDisplay(value) {
+    this.setAttribute("data-tool-group-display", value);
+  }
   /**
    * The host's own constructed stylesheets, adopted after the built-in one.
    *
@@ -19583,6 +20386,7 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#connectedBefore = true;
     this.#storage.claim();
+    this.#chatRegistration.join();
     this.#placement.restoreSize();
     requestAnimationFrame(() => {
       this.#placement.restoreLauncherPosition();
@@ -19599,10 +20403,24 @@ var AgUiChat = class extends HTMLElement {
     this.#render();
     this.#drawer.setStrings(this.#strings);
     this.#checkpoints.setStrings(this.#strings);
-    if (surfaceFor(this.getAttribute("placement")).collapseTo !== null && this.#startsCollapsed()) {
+    if (this.#surface().collapseTo !== null && this.#startsCollapsed()) {
       this.setAttribute("collapsed", "");
     }
     this.#syncLauncher();
+    this.#stampCollapseTarget();
+    const dockObserver = new ResizeObserver(() => this.#syncDock());
+    dockObserver.observe(this.#dockBar);
+    this.#connection.signal.addEventListener("abort", () => dockObserver.disconnect());
+    this.#syncDock();
+    if (this.#surface().collapseTo === "none") {
+      this.dispatchEvent(
+        new CustomEvent(TOGGLE_EVENT, {
+          detail: { collapsed: this.collapsed },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
     this.#skills.init();
     const held = this.#principalKey;
     const changed = held !== null && held !== this.userKey;
@@ -19620,11 +20438,15 @@ 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();
     }
     this.#connected = true;
+    if (this.#newChatOnConnect) {
+      this.#newChatOnConnect = false;
+      this.newChat();
+    }
   }
   /**
    * The catalog requests the element issues on startup: the tool labels
@@ -19673,7 +20495,7 @@ var AgUiChat = class extends HTMLElement {
     await Promise.all([
       this.#tools.fetchCatalog(),
       this.#skills.fetch(),
-      this.#history.rehydrate()
+      this.#history.rehydrate("restore")
     ]);
   }
   /**
@@ -19689,6 +20511,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();
@@ -19756,15 +20579,15 @@ var AgUiChat = class extends HTMLElement {
     this.#threadStore = null;
     const url = this.getAttribute("data-threads-url");
     if (url !== null) {
-      const inner = this.conversationStore;
+      const inner2 = this.conversationStore;
       const remote = new RemoteConversationStore(
         url,
         () => this.#headersFor(url),
-        inner,
+        inner2,
         () => this.#requestCredentials(),
         this.getAttribute("data-threads-cache") !== "false"
       );
-      this.#threadStore = { remote, inner };
+      this.#threadStore = { remote, inner: inner2 };
       this.conversationStore = remote;
     }
   }
@@ -19803,7 +20626,7 @@ var AgUiChat = class extends HTMLElement {
    * its own chrome.
    */
   setCollapsed(collapsed, options = {}) {
-    if (collapsed && surfaceFor(this.getAttribute("placement")).collapseTo === null) {
+    if (collapsed && this.#surface().collapseTo === null) {
       return;
     }
     if (options.announce === true && collapsed && !this.collapsed) {
@@ -19815,8 +20638,10 @@ var AgUiChat = class extends HTMLElement {
     if (collapsed) {
       this.setAttribute("collapsed", "");
     } else {
+      this.#homeDrawer();
       this.removeAttribute("collapsed");
     }
+    this.#syncDock();
     writeStoredItem(this.#storage.key(COLLAPSED_KEY), collapsed ? "1" : "0");
     this.#setUnread(0);
     this.dispatchEvent(
@@ -19836,6 +20661,114 @@ 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;
+  }
+  /**
+   * The height of the bottom bar in CSS px, and 0 when none is drawn: under
+   * any collapse-to but "bar", and on a phone while the panel is open, where
+   * the panel is the screen. The bar is fixed over the page, so a host pads
+   * its own page by this much; {@link BAR_HEIGHT_EVENT} says when it changes.
+   */
+  get barHeight() {
+    return this.#barHeight;
+  }
+  /**
+   * The element the panel rises from under collapse-to="none", right-aligned
+   * to it: typically the host's own button in its own bar. Takes precedence
+   * over the anchor attribute, which names one by selector. One that resolves
+   * to nothing leaves the panel in its placement's own corner, with a console
+   * warning.
+   */
+  get anchor() {
+    return this.#anchor;
+  }
+  set anchor(value) {
+    this.#anchor = value;
+    this.#anchorWarned = false;
+    this.#syncDock();
+  }
+  /** The surface the live placement and collapse-to attributes describe. */
+  #surface() {
+    return surfaceFor(this.getAttribute("placement"), this.getAttribute("collapse-to"));
+  }
+  /**
+   * Stamp what the panel collapses to as data-collapsed-to, which is what the
+   * stylesheet draws the bar and the hidden state from. Resolved here rather
+   * than in CSS, because "bar" over a sidebar is its rail and "none" over a
+   * page is no collapse at all, and the stylesheet would have to restate that
+   * table.
+   */
+  #stampCollapseTarget() {
+    const target = this.#surface().collapseTo;
+    if (target === null) {
+      this.removeAttribute("data-collapsed-to");
+    } else {
+      this.setAttribute("data-collapsed-to", target);
+    }
+  }
+  /** Re-measure the bar or the anchor, and tell the host when the bar's height changed. */
+  #syncDock() {
+    if (!this.isConnected) {
+      return;
+    }
+    const height = this.#placement.syncDock(this.#dockBar, this.#resolveAnchor());
+    if (height === this.#barHeight) {
+      return;
+    }
+    this.#barHeight = height;
+    this.dispatchEvent(
+      new CustomEvent(BAR_HEIGHT_EVENT, {
+        detail: { height },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * The anchor in force under collapse-to="none": the property, else the
+   * attribute's selector, looked up in the root this element lives in and
+   * then the document, so a chat inside a framework's shadow root can name a
+   * button beside it. Null under any other collapse-to, with nothing given,
+   * or when what was given is not in the document -- reported once per anchor.
+   */
+  #resolveAnchor() {
+    if (this.#surface().collapseTo !== "none") {
+      return null;
+    }
+    const selector = this.getAttribute("anchor") ?? "";
+    if (this.#anchor === null && selector === "") {
+      return null;
+    }
+    const found = this.#anchor ?? findAnchor(this.getRootNode(), selector);
+    if (found?.isConnected === true) {
+      return found;
+    }
+    if (!this.#anchorWarned) {
+      this.#anchorWarned = true;
+      console.warn(
+        `<ag-ui-chat>: the anchor ${this.#anchor === null ? `"${selector}"` : "element"} is not in the document, so the panel opens from its placement's own corner.`
+      );
+    }
+    return null;
+  }
   /**
    * Whether to mount collapsed.
    *
@@ -19858,7 +20791,7 @@ var AgUiChat = class extends HTMLElement {
     if (stored !== null) {
       return stored === "1";
     }
-    return surfaceFor(this.getAttribute("placement")).startsCollapsed && !this.hasAttribute("data-start-open");
+    return this.#surface().startsCollapsed && !this.hasAttribute("data-start-open");
   }
   /**
    * Describe the panel to whoever is asking -- in practice the agent, through
@@ -19886,6 +20819,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);
@@ -19894,12 +20834,13 @@ var AgUiChat = class extends HTMLElement {
    * Flip the scheme word of the `theme` attribute between `light` and `dark`
    * and persist the choice per tab. Bound to the optional built-in header theme
    * toggle (`data-theme-toggle`). The theme name and any host words are kept:
-   * `soft` becomes `soft dark`, and `soft dark` becomes `soft light`. Any
-   * scheme but `dark` (including `auto`) flips to `dark` first.
+   * `soft` becomes `soft dark`, and `soft dark` becomes `soft light`. With no
+   * scheme word (`auto`, or a host rule setting `color-scheme` on the element),
+   * it flips away from the scheme the panel is drawn in.
    */
   toggleTheme() {
     const theme = this.getAttribute("theme") ?? "";
-    const scheme = theme.split(/\s+/).includes("dark") ? "light" : "dark";
+    const scheme = this.#drawnScheme() === "dark" ? "light" : "dark";
     this.setAttribute("theme", withScheme(theme, scheme));
     this.#storage.writePreference(THEME_KEY, scheme);
     this.#syncThemeGlyph();
@@ -19955,7 +20896,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();
   }
   /**
@@ -19979,9 +20920,36 @@ var AgUiChat = class extends HTMLElement {
     this.conversationStore = store;
     this.#wireThreadStore();
   }
+  /**
+   * The scheme the panel is drawn in, which the toggle flips and its glyph
+   * offers the way out of. A scheme word decides it, since the scheme rules
+   * hold against a host's. Without one the panel follows whatever sets its
+   * color-scheme: a host rule on the element, auto's "light dark", or the
+   * light default. Both schemes allowed means the system picks. Read before
+   * the shadow styles apply too (the glyph is drawn first), when the computed
+   * value carries only a host rule, so auto is answered from its word.
+   */
+  #drawnScheme() {
+    const words = (this.getAttribute("theme") ?? "").split(/\s+/);
+    if (words.includes("dark")) {
+      return "dark";
+    }
+    if (words.includes("light")) {
+      return "light";
+    }
+    const declared = getComputedStyle(this).colorScheme.split(/\s+/);
+    const dark = declared.includes("dark");
+    if (dark !== declared.includes("light")) {
+      return dark ? "dark" : "light";
+    }
+    if (dark || words.includes("auto")) {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+    return "light";
+  }
   /** Reflect the current theme on the toggle: show the destination's glyph. */
   #syncThemeGlyph() {
-    const dark = (this.getAttribute("theme") ?? "").split(/\s+/).includes("dark");
+    const dark = this.#drawnScheme() === "dark";
     this.#themeToggle.replaceChildren(
       iconElement("theme", "theme-icon", dark ? ICON_SUN : ICON_MOON, null)
     );
@@ -19996,8 +20964,25 @@ var AgUiChat = class extends HTMLElement {
    * {@link toggleCollapsed} and {@link toggleTheme}.
    */
   openThreads() {
+    if (this.collapsed && this.#surface().collapseTo === "bar") {
+      this.#dockBar.append(this.#drawer.element);
+    } else {
+      this.#homeDrawer();
+    }
     this.#history.openThreads();
   }
+  /**
+   * Put the drawer back in the panel, where every surface but the bar's
+   * popover draws it. A popover still open is closed first: the list was
+   * opened over the bar, and carried into the panel it would cover the
+   * conversation the user asked to see.
+   */
+  #homeDrawer() {
+    if (this.#drawer.element.parentNode === this.#dockBar) {
+      this.#drawer.close();
+      this.#chat.insertBefore(this.#drawer.element, this.#checkpoints.element);
+    }
+  }
   /**
    * Open the checkpoints panel (the `::part(checkpoints-button)` route).
    *
@@ -20016,6 +21001,37 @@ 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 second call for the thread already loading settles with that load.
+   * If the store rejects the load, the element stays on the thread it was on,
+   * fires nothing, and the promise rejects with the store's error.
+   * **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.
+   */
+  switchThread(threadId) {
+    if (!this.#connected) {
+      return Promise.resolve();
+    }
+    return 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
@@ -20042,12 +21058,17 @@ var AgUiChat = class extends HTMLElement {
    * one. The page is not scrolled to bring the composer into view.
    */
   newChat() {
+    if (!this.#connected) {
+      this.#newChatOnConnect = true;
+      return;
+    }
     this.#cancelRun();
     this.#history.reapUnsent();
     this.#resetState();
     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 +21261,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 +21275,7 @@ var AgUiChat = class extends HTMLElement {
       this.#composerHint,
       this.#queuedRow,
       this.#attachSlot,
+      aboveComposer,
       inputRow,
       footer,
       this.#drawer.element,
@@ -20275,19 +21299,45 @@ var AgUiChat = class extends HTMLElement {
       launcher: this.#launcher,
       badge: this.#badge,
       railLabel: this.#railLabel,
+      bar: this.#dockBar,
+      barHistory: this.#barHistory,
       titleText,
       iconUrl: readLauncherIconUrl(this),
       strings: this.#strings,
       signal,
-      onOpen: () => this.setCollapsed(false)
+      // The bar stays on screen with the panel open, as the way to minimise
+      // it, so its strip toggles; everywhere else the launcher is only drawn
+      // while collapsed and only ever opens.
+      onOpen: () => this.setCollapsed(this.#surface().collapseTo === "bar" && !this.collapsed),
+      // The bar's history button toggles: the popover has no backdrop, and a
+      // press on the bar is not a press outside it, so this is how the button
+      // that opened the list closes it again. openThreads() stays open-only.
+      onHistory: () => {
+        if (this.#drawer.isOpen()) {
+          this.#drawer.close();
+        } else {
+          this.openThreads();
+        }
+      }
     });
+    document.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (this.#drawer.element.parentNode === this.#dockBar && this.#drawer.isOpen()) {
+          if (!event.composedPath().includes(this.#dockBar)) {
+            this.#drawer.close();
+          }
+        }
+      },
+      { signal }
+    );
     this.#placement.enableLauncherDrag(signal);
     this.#placement.mountResizeGrips(this.#chat);
     this.#builtInSheet = adoptStyles(this.#root, this.#extraStyles);
     const probe = this.#placement.probe;
     probe.className = "viewport-probe";
     probe.setAttribute("aria-hidden", "true");
-    this.#root.replaceChildren(probe, this.#announcer.region, this.#chat, this.#launcher);
+    this.#root.replaceChildren(probe, this.#announcer.region, this.#chat, this.#dockBar);
   }
   /**
    * Reflect the collapsed state and the unread count on the launcher.
@@ -20301,7 +21351,7 @@ var AgUiChat = class extends HTMLElement {
     const unread = this.#unread;
     this.#badge.textContent = unread > 9 ? "9+" : String(unread);
     this.#badge.hidden = unread === 0 || !isUnreadBadgeEnabled(this);
-    const label = this.#badge.hidden ? this.#strings.expand : fillUiString(this.#strings.expandUnread, { count: unread });
+    const label = !this.collapsed && this.#surface().collapseTo === "bar" ? this.#strings.collapse : this.#badge.hidden ? this.#strings.expand : fillUiString(this.#strings.expandUnread, { count: unread });
     this.#launcher.setAttribute("aria-label", label);
     this.#launcher.title = label;
   }
@@ -20419,6 +21469,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 +21501,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 +21790,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,11 +21984,12 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.46.0";
+var VERSION = "0.48.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
   AgUiClient,
+  BAR_HEIGHT_EVENT,
   CHART_ACTIVITY_TYPE,
   CHART_TOOL_NAME,
   CHAT_CORNERS,
@@ -20951,9 +22018,11 @@ export {
   SUBMIT_EVENT,
   SUGGESTIONS_ACTIVITY_TYPE,
   SessionStorageStore,
+  THREAD_EVENT,
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
+  TOOL_GROUP_DISPLAY,
   TOOL_OUTCOME,
   ToolCallCard,
   UNREAD_EVENT,