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

package/dist/index.js

@@ -2,6 +2,7 @@
 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";
@@ -62,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>`;
@@ -286,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: {},
@@ -298,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 });
@@ -403,13 +410,94 @@ function ringColor(target, chat) {
   if (accent !== "") {
     return accent;
   }
-  const chatAccent = owner === null ? "" : resolveOn(owner, CHAT_ACCENT);
-  return chatAccent === "" ? PACKAGE_ACCENT : chatAccent;
+  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) {
+function resolveOn(chat, name, scheme) {
   const value = readToken(chat, name);
   const root = chat.shadowRoot;
   if (value === "" || root === null) {
@@ -417,6 +505,9 @@ function resolveOn(chat, name) {
   }
   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 "";
@@ -4396,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;
   }
@@ -4478,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("switch");
+    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) {
@@ -4685,7 +4810,8 @@ var ConversationHistory = class {
    * 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.
+   * the conversation changed. A restore that is stopped reports nothing, and
+   * neither does one given `null`, which draws the thread already reported.
    */
   async rehydrate(reason) {
     this.#generation += 1;
@@ -4740,7 +4866,9 @@ var ConversationHistory = class {
       if (checkpoint === null) {
         this.#noticeIfRunUnfinished(messages);
       }
-      this.#host.threadChanged(threadId, reason);
+      if (reason !== null) {
+        this.#host.threadChanged(threadId, reason);
+      }
       if (checkpoint !== null) {
         if (!this.#restoring(generation)) {
           this.#forgetStopped(store, threadId, checkpoint);
@@ -5380,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;
@@ -5462,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") {
@@ -5589,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");
@@ -5637,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) {
@@ -5682,12 +5810,14 @@ function boxAt(grip, axis, rect, x2, y2) {
 var CORNER = {
   collapseTo: "launcher",
   launcherDraggable: true,
+  panelMovable: true,
   resizeAxis: "both",
   startsCollapsed: true
 };
 var DOCKED = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "width",
   startsCollapsed: false
 };
@@ -5703,34 +5833,58 @@ var SURFACES = /* @__PURE__ */ new Map([
     {
       collapseTo: "launcher",
       launcherDraggable: false,
+      panelMovable: false,
       resizeAxis: "none",
       startsCollapsed: false
     }
   ],
   [
     "page",
-    { collapseTo: null, launcherDraggable: false, resizeAxis: "none", startsCollapsed: false }
+    {
+      collapseTo: null,
+      launcherDraggable: false,
+      panelMovable: false,
+      resizeAxis: "none",
+      startsCollapsed: false
+    }
   ],
   [
     "embedded",
-    { collapseTo: "header", launcherDraggable: false, resizeAxis: "both", startsCollapsed: false }
+    {
+      collapseTo: "header",
+      launcherDraggable: false,
+      panelMovable: false,
+      resizeAxis: "both",
+      startsCollapsed: false
+    }
   ]
 ]);
 var UNKNOWN = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   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";
+var DOCK_KEY = "ag-ui-chat:dock";
 function asPoint(value) {
   if (typeof value !== "object" || value === null) {
     return null;
@@ -5771,7 +5925,7 @@ var PanelPlacement = class {
    */
   enablePanelDrag(header) {
     enablePanelDrag(header, {
-      enabled: () => !this.#host.collapsed() && this.#launcherDraggable(),
+      enabled: () => !this.#host.collapsed() && this.#canDragPanel(),
       rect: () => this.#host.element.getBoundingClientRect(),
       apply: (box, from) => this.#movePanel(box, from),
       commit: (box, from) => this.#commitPanel(box, from)
@@ -5817,11 +5971,23 @@ var PanelPlacement = class {
    * 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.
+   *
+   * A docked panel the user dragged off its dock goes back to it as well, and
+   * the stored spot with it: there the position is part of the same resting
+   * state the host is asking for. A corner panel keeps a dragged position, as
+   * it always has.
    */
   resetSize() {
     this.#host.element.style.removeProperty(DRAG_WIDTH);
     this.#host.element.style.removeProperty(DRAG_HEIGHT);
     this.#host.clearPreference(SIZE_KEY);
+    if (this.#docked()) {
+      if (this.#dockPos !== null) {
+        this.#host.element.style.removeProperty("--ag-ui-inset");
+      }
+      this.#dockPos = null;
+      this.#storeDockPosition(null);
+    }
     this.syncResizeAnchor();
   }
   /**
@@ -5848,6 +6014,23 @@ var PanelPlacement = class {
    * from the launcher would move the panel the user just placed.
    */
   #panelPos = null;
+  /**
+   * Where the user dragged a docked panel, in viewport coordinates, or null
+   * while it stands on the bar or the anchor.
+   *
+   * Apart from the two corner positions above because it moves nothing else:
+   * a docked panel has no launcher to carry, and the corner it opens from is
+   * the dock's. Held as the user stated it and never as clamped, so a bar that
+   * grew, or a phone that took the panel full-bleed, gives the spot back
+   * unchanged once there is room for it again.
+   */
+  #dockPos = null;
+  /**
+   * The line a docked panel stays above, in viewport coordinates: the bar's
+   * top, or the anchor's. Infinite where neither is drawn. Measured by
+   * syncDock, which runs on every change either can make.
+   */
+  #dockTop = Number.POSITIVE_INFINITY;
   /**
    * The corner the panel opens away from, once this element is placing itself.
    * Null means the host's layout still decides, and the anchor is measured.
@@ -5876,7 +6059,7 @@ var PanelPlacement = class {
    * rather than collapsed to nothing.
    */
   #withinViewport(box) {
-    const viewport = this.#viewport();
+    const viewport = this.#docked() && this.#panelMovable() ? this.#dockRoom() : this.#viewport();
     const left = viewport.left + SCREEN_EDGE_MARGIN;
     const top = viewport.top + SCREEN_EDGE_MARGIN;
     const right = viewport.left + viewport.width - SCREEN_EDGE_MARGIN;
@@ -5905,10 +6088,15 @@ 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,
-      draggable: this.#launcherDraggable(),
+      movable: this.#panelMovable() && !fullBleed,
+      // Whether the page left moving on, which is not the same question as
+      // whether this panel moves: a docked sidebar's position is owned by its
+      // placement, and reporting that as the host having turned moving off is
+      // the sentence the move refusal would then get wrong.
+      draggable: this.#host.element.getAttribute("data-launcher-drag") !== "false" && (this.#surface().launcherDraggable || this.#docked()),
       fullBleed,
       box: {
         left: Math.round(box.left),
@@ -5926,7 +6114,7 @@ var PanelPlacement = class {
   }
   /** The move behind `AgUiChat.moveTo`, whose doc is the contract. */
   moveTo(corner, options = {}) {
-    if (!this.#launcherDraggable()) {
+    if (!this.#panelMovable()) {
       return false;
     }
     const restore = options.announce === true ? this.#captureGeometry() : null;
@@ -5936,11 +6124,22 @@ var PanelPlacement = class {
       return false;
     }
     const [edgeY, edgeX] = corner.split("-");
-    const nearX = viewport.left + EDGE_MARGIN;
-    const nearY = viewport.top + EDGE_MARGIN;
-    const left = edgeX === "left" ? nearX : Math.max(nearX, viewport.left + viewport.width - EDGE_MARGIN - box.width);
-    const top = edgeY === "top" ? nearY : Math.max(nearY, viewport.top + viewport.height - EDGE_MARGIN - box.height);
+    const docked = this.#docked();
+    const room = docked ? this.#dockRoom() : viewport;
+    const nearX = room.left + EDGE_MARGIN;
+    const nearY = room.top + EDGE_MARGIN;
+    const left = edgeX === "left" ? nearX : Math.max(nearX, room.left + room.width - EDGE_MARGIN - box.width);
+    const top = edgeY === "top" ? nearY : Math.max(nearY, room.top + room.height - EDGE_MARGIN - box.height);
     const host = { left, top, right: left + box.width, bottom: top + box.height };
+    if (docked) {
+      this.#dockPos = { left, top };
+      this.#writeDockInset(host);
+      this.#storeDockPosition(this.#dockPos);
+      if (restore !== null) {
+        this.#host.announceSurfaceChange(this.#host.strings().chatMoved, restore);
+      }
+      return true;
+    }
     const launcherWidth = this.#host.launcher.offsetWidth;
     const launcherHeight = this.#host.launcher.offsetHeight;
     this.#placePanelAndLauncher(host, {
@@ -5971,6 +6170,7 @@ var PanelPlacement = class {
     const corner = this.#host.element.getAttribute("data-expand-corner");
     const launcherPos = this.#launcherPos;
     const panelPos = this.#panelPos;
+    const dockPos = this.#dockPos;
     const expandCorner = this.#expandCorner;
     return () => {
       this.#restoreProperty("--ag-ui-inset", inset2);
@@ -5982,7 +6182,13 @@ var PanelPlacement = class {
       }
       this.#launcherPos = launcherPos;
       this.#panelPos = panelPos;
+      this.#dockPos = dockPos;
       this.#expandCorner = expandCorner;
+      if (this.#docked()) {
+        this.#storeDockPosition(dockPos);
+        this.syncResizeAnchor();
+        return;
+      }
       if (launcherPos === null) {
         this.#host.clearPreference(LAUNCHER_KEY);
       } else {
@@ -5999,7 +6205,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:
@@ -6099,13 +6305,145 @@ var PanelPlacement = class {
       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, until the
+   * user drags it somewhere else.
+   */
+  #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);
+    this.#dockTop = target === "bar" && height > 0 ? bar.getBoundingClientRect().top : target === "none" && anchor !== null ? anchor.getBoundingClientRect().top : Number.POSITIVE_INFINITY;
+    this.#placeDocked();
+    return height;
+  }
+  /**
+   * The part of the usable viewport a docked panel may stand in: all of it
+   * above the dock's line. The bar is what it minimises to, and the anchor is
+   * the host's own way back, so a dragged panel never covers either.
+   */
+  #dockRoom() {
+    const viewport = this.#viewport();
+    const bottom = Math.min(viewport.top + viewport.height, this.#dockTop);
+    return { ...viewport, height: Math.max(0, bottom - viewport.top) };
+  }
+  /**
+   * Put a docked panel back where the user dragged it, held inside its room.
+   *
+   * The inline inset comes off first, which is both how the panel's resting
+   * box is measured and what leaves a phone full-bleed: the small-viewport
+   * block reads the host's inset before its own, so a dragged spot written
+   * there would hold the panel off the screen's edges. The spot itself stays,
+   * for the next time there is room for it.
+   */
+  #placeDocked() {
+    if (!this.#docked() || !this.#panelMovable() || this.dragging()) {
+      return;
+    }
+    const at2 = this.#dockPos ?? this.#readDockPosition();
+    if (at2 === null) {
+      return;
+    }
+    this.#dockPos = at2;
+    this.#host.element.style.removeProperty("--ag-ui-inset");
+    const rest = this.#host.element.getBoundingClientRect();
+    if (coversViewport(rest, this.#viewport())) {
+      return;
+    }
+    this.syncResizeAnchor();
+    this.#writeDockInset(
+      clampPanel(
+        { left: at2.left, top: at2.top, right: at2.left + rest.width, bottom: at2.top + rest.height },
+        this.#dockRoom(),
+        SCREEN_EDGE_MARGIN
+      )
+    );
+  }
+  /** Write the inset that stands a docked panel at `box`. */
+  #writeDockInset(box) {
+    this.#host.element.style.setProperty(
+      "--ag-ui-inset",
+      insetFrom(this.#anchor, box, this.#screen())
+    );
+  }
+  /** Remember a docked panel's dragged spot, or forget it for null. */
+  #storeDockPosition(at2) {
+    if (at2 === null) {
+      this.#host.clearPreference(DOCK_KEY);
+      return;
+    }
+    this.#host.writePreference(DOCK_KEY, JSON.stringify({ left: at2.left, top: at2.top }));
+  }
+  /** The stored spot of a docked panel, or null for none or anything corrupt. */
+  #readDockPosition() {
+    const raw = this.#host.readPreference(DOCK_KEY);
+    if (raw === null) {
+      return null;
+    }
+    try {
+      return asPoint(JSON.parse(raw));
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Whether the header drag and moveTo may move the open panel: the
+   * placement's answer, unless the host turned moving off.
+   */
+  #panelMovable() {
+    return this.#host.element.getAttribute("data-launcher-drag") !== "false" && this.#surface().panelMovable;
+  }
+  /**
+   * Whether a header drag may start now. A docked panel on a phone is the
+   * screen, and a drag there would pull it off the edges it fills; a corner
+   * panel's header is left as it was.
+   */
+  #canDragPanel() {
+    if (!this.#panelMovable()) {
+      return false;
+    }
+    return !this.#docked() || !coversViewport(this.#host.element.getBoundingClientRect(), this.#viewport());
+  }
   /**
    * Whether this placement lets the launcher be dragged, read per interaction
    * because `placement` is a live attribute. `data-launcher-drag="false"` opts
    * 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.
@@ -6275,6 +6613,12 @@ var PanelPlacement = class {
    * other still names the old one would move the launcher for no reason.
    */
   #movePanel(box, from) {
+    if (this.#docked()) {
+      const held2 = clampPanel(box, this.#dockRoom(), SCREEN_EDGE_MARGIN);
+      this.#dockPos = { left: held2.left, top: held2.top };
+      this.#writeDockInset(held2);
+      return { held: held2, launcher: null };
+    }
     if (!this.#launcherDraggable()) {
       return { held: box, launcher: null };
     }
@@ -6314,6 +6658,10 @@ var PanelPlacement = class {
    */
   #commitPanel(box, from) {
     const { held, launcher } = this.#movePanel(box, from);
+    if (this.#docked()) {
+      this.#storeDockPosition({ left: held.left, top: held.top });
+      return;
+    }
     if (launcher === null) {
       return;
     }
@@ -6394,6 +6742,10 @@ var PanelPlacement = class {
    * unreachable -- it is the only way back to a collapsed conversation.
    */
   restoreLauncherPosition() {
+    if (this.#docked()) {
+      this.#placeDocked();
+      return;
+    }
     const stored = this.#readLauncherPosition();
     const launcher = this.#launcherPos ?? stored;
     if (launcher === null) {
@@ -6437,6 +6789,10 @@ var PanelPlacement = class {
    * the switch inline and pins a sidebar to wherever the floating launcher was.
    */
   releaseLauncherPosition() {
+    if (this.#dockPos !== null && !(this.#docked() && this.#panelMovable())) {
+      this.#dockPos = null;
+      this.#host.element.style.removeProperty("--ag-ui-inset");
+    }
     if (this.#launcherDraggable()) {
       return;
     }
@@ -6463,7 +6819,21 @@ var PanelPlacement = class {
    */
   #applyResize(grip, box) {
     box = this.#withinViewport(box);
+    if (this.#docked() && this.#dockPos === null) {
+      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 (this.#docked()) {
+      this.#dockPos = { left: box.left, top: box.top };
+    }
     if (grip.x !== this.#anchor.x && grip.y !== this.#anchor.y) {
       return box;
     }
@@ -6486,6 +6856,9 @@ var PanelPlacement = class {
     const held = this.#applyResize(grip, box);
     this.#persistSize({ width: held.right - held.left, height: held.bottom - held.top });
     this.#storeLauncherPosition();
+    if (this.#dockPos !== null) {
+      this.#storeDockPosition(this.#dockPos);
+    }
     this.syncResizeAnchor();
   }
   /**
@@ -8430,12 +8803,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
@@ -8463,6 +8842,338 @@ 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. A panel the user
+   dragged off its dock is written there inline, which is how the dragged spot
+   outranks every rule below, the anchor gap included; the element holds that
+   spot above the bar or the anchor itself, and drops it on a phone, where the
+   small-viewport block reads the same property first.
+
+   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
@@ -9085,6 +9796,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;
+  }
 }
 `;
 
@@ -9216,6 +9936,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
@@ -9356,7 +10079,8 @@ ${GROUPED} .tool-group[data-open="false"] .tool-group-list {
 
 /* A card inside the group is one line of the list: icon, name, and its
    Details control at the end, with the arguments and result opening under
-   the whole row. */
+   the whole row. Its ink is the second ink in every theme, unless the host
+   set the tool token, which then reaches the grouped calls too. */
 ${GROUPED} .tool-group .tool-call {
   max-width: 100%;
   align-self: stretch;
@@ -9367,7 +10091,7 @@ ${GROUPED} .tool-group .tool-call {
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--_ink-2);
+  color: var(--_tool-fg-set, var(--_ink-2));
   font-family: inherit;
   font-size: var(--_text-sm);
 }
@@ -9400,6 +10124,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
@@ -9703,9 +10464,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;
 }
 
@@ -10067,7 +10830,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. */
@@ -10080,6 +10851,23 @@ var TOKEN_STYLES = `
   --_tool-fg: var(--ag-ui-tool-fg, var(--_ink-2));
   --_header-bg: var(--ag-ui-header-bg, var(--_bg));
   --_header-fg: var(--ag-ui-header-fg, var(--_fg));
+  /* Switches: a public token read with no fallback, named for it with -set.
+     With the token unset the switch computes to the guaranteed-invalid value,
+     so a rule that reads it with a fallback gets the fallback; that is how a
+     rule tells a token the host set from the theme's default for it. The
+     default theme's header buttons follow the header text only once a host
+     sets it, and a step group's calls follow the tool token only once a host
+     sets it (classic defaults --_tool-fg to the accent, which a group never
+     drew). */
+  --_header-fg-set: var(--ag-ui-header-fg);
+  --_tool-fg-set: var(--ag-ui-tool-fg);
+  /* The header buttons' hover square, by default, once the header text is
+     set. Here it is the text at about a fifth, which every browser can mix;
+     where relative colour syntax is supported (see the block at the end) it
+     is the text's opposite instead. It reads the switch, so it is unset with
+     it, and the square below falls to the panel's hover shade. */
+  --_header-btn-hover-auto: color-mix(in srgb, var(--_header-fg-set) 18%, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_border: var(--ag-ui-border, var(--_line));
   --_radius: var(--ag-ui-radius, 12px);
   /* The panel's own frame, which is the one corner a placement can put against
@@ -10330,6 +11118,25 @@ 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);
+  /* 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
@@ -10433,6 +11240,19 @@ var TOKEN_STYLES = `
     --_on-accent: var(--ag-ui-on-accent, #ffffff);
   }
 }
+
+/* The header buttons' default hover square as the header text's opposite,
+   so white text gets a darker square and dark text a lighter one. A square
+   mixed from the text itself moves the ground toward the glyph: white on a
+   mid-blue header fell from 5.1:1 to 3.75:1 under the pointer. Moving away
+   from it can only raise what the host's own pair reads. Gated on this
+   exact expression, so a browser that cannot compute it keeps the square
+   mixed from the text rather than losing the square altogether. */
+@supports (color: rgb(from red calc(255 - r) calc(255 - g) calc(255 - b))) {
+  :host {
+    --_header-btn-hover-auto: color-mix(in srgb, rgb(from var(--_header-fg-set) calc(255 - r) calc(255 - g) calc(255 - b)) 18%, transparent);
+  }
+}
 `;
 
 // src/ui/themes/classic_styles.ts
@@ -10847,14 +11667,30 @@ ${THEME_HOST.quiet} .header-title {
   letter-spacing: -0.01em;
 }
 
+/* The buttons sit back in the third ink on the panel. Once the host sets the
+   header text they draw in it instead, since the header behind them is then
+   the host's colour (see the switches in the token defaults). So does their
+   rest opacity: the frame's 0.85 lets the header through the glyph, which
+   took white on a mid-blue header from 5.1:1 to 4.2:1. With the header text
+   set, the opacity below reads a colour, which no opacity can be, so it is
+   invalid at computed-value time and falls to the initial 1; unset, it reads
+   the fallback, the frame's own 0.85. */
 ${THEME_HOST.quiet} .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
+  opacity: var(--_header-fg-set, 0.85);
   border-radius: 8px;
 }
 
+/* The hover square is the host's own when it set one; otherwise it is mixed
+   from the header text when the host set that, so it reads on any header the
+   host painted; otherwise it is the panel shade.
+   The glyph takes the header text, which is the full ink when that is unset.
+   The opacity restates the frame's hover value, which the rest rule above
+   outweighs. */
 ${THEME_HOST.quiet} .header-btn:hover {
-  color: var(--_fg);
-  background: var(--_hover);
+  color: var(--_header-fg);
+  opacity: 1;
+  background: var(--_header-btn-hover);
 }
 
 ${THEME_HOST.quiet} .message--user {
@@ -10945,9 +11781,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"]) {
@@ -11988,6 +12833,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,
@@ -12117,7 +12965,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");
@@ -12136,6 +12984,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
@@ -12216,12 +13078,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 = "";
@@ -18582,6 +19444,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;
@@ -18903,8 +19773,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. */
@@ -18965,6 +19848,7 @@ var AgUiChat = class extends HTMLElement {
    */
   #onViewportResize = () => {
     this.#placement.publishVisualViewport();
+    this.#syncDock();
     if (this.#placement.dragging()) {
       return;
     }
@@ -18976,6 +19860,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.
@@ -19226,7 +20112,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),
@@ -19302,7 +20188,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();
@@ -19395,6 +20281,8 @@ var AgUiChat = class extends HTMLElement {
     return [
       "title-text",
       "placement",
+      "collapse-to",
+      "anchor",
       "credentials",
       "user-key",
       "user-name",
@@ -19410,12 +20298,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;
     }
@@ -19672,6 +20573,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.
    *
@@ -19717,10 +20638,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;
@@ -19743,6 +20678,10 @@ var AgUiChat = class extends HTMLElement {
       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
@@ -19875,15 +20814,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;
     }
   }
@@ -19922,7 +20861,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) {
@@ -19934,8 +20873,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(
@@ -19975,6 +20916,94 @@ var AgUiChat = class extends HTMLElement {
   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.
    *
@@ -19997,7 +21026,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
@@ -20006,7 +21035,9 @@ var AgUiChat = class extends HTMLElement {
    * `movable` folds two separate reasons into the one answer a caller needs:
    * a placement that places itself owns its position, and a panel that fills
    * the screen has nowhere to go. Reporting them apart would make every caller
-   * re-derive the same conjunction.
+   * re-derive the same conjunction. A corner panel docked under
+   * `collapse-to="bar"` or `"none"` is movable on a wide viewport, like the
+   * corner panel it is.
    */
   describeSurface() {
     return this.#placement.describeSurface();
@@ -20020,7 +21051,8 @@ var AgUiChat = class extends HTMLElement {
    * the corner it opens from is re-picked, and switching placement hands
    * everything back. What it must not do is claim a move it did not make --
    * hence the boolean, and hence {@link describeSurface} existing so a caller
-   * can ask first.
+   * can ask first. A docked panel moves too, within the room above its bar or
+   * anchor, and remembers the spot as a header drag would.
    */
   moveTo(corner, options = {}) {
     return this.#placement.moveTo(corner, options);
@@ -20028,6 +21060,9 @@ var AgUiChat = class extends HTMLElement {
   /**
    * 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.
+   * Under `collapse-to="bar"` or `"none"` it also returns a panel the user
+   * dragged off its dock to the dock, and forgets the stored spot; a corner
+   * panel keeps a dragged position.
    */
   resetSize() {
     this.#placement.resetSize();
@@ -20040,12 +21075,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();
@@ -20125,9 +21161,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)
     );
@@ -20142,8 +21205,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).
    *
@@ -20167,16 +21247,19 @@ var AgUiChat = class extends HTMLElement {
    * 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;
+   * 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.
    */
-  async switchThread(threadId) {
+  switchThread(threadId) {
     if (!this.#connected) {
-      return;
+      return Promise.resolve();
     }
-    await this.#history.switchThread(threadId);
+    return this.#history.switchThread(threadId);
   }
   /**
    * Delete a stored thread, as the conversation list's delete does. Deleting the
@@ -20216,6 +21299,10 @@ 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();
@@ -20453,19 +21540,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.
@@ -20479,7 +21592,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;
   }
@@ -21112,11 +22225,12 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.47.0";
+var VERSION = "0.49.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
   AgUiClient,
+  BAR_HEIGHT_EVENT,
   CHART_ACTIVITY_TYPE,
   CHART_TOOL_NAME,
   CHAT_CORNERS,
@@ -21149,6 +22263,7 @@ export {
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
+  TOOL_GROUP_DISPLAY,
   TOOL_OUTCOME,
   ToolCallCard,
   UNREAD_EVENT,