@artooi/ag-ui-web-component 0.47.0 → 0.48.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>`;
@@ -277,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
           };
         }
@@ -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) {
@@ -5722,14 +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) {
@@ -5905,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,
@@ -5999,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:
@@ -6099,13 +6237,53 @@ 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. */
+  #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
    * 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.
@@ -6463,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;
@@ -8430,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
@@ -8463,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
@@ -9085,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;
+  }
 }
 `;
 
@@ -9216,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
@@ -9400,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
@@ -9703,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;
 }
 
@@ -10067,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. */
@@ -10330,6 +10912,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
@@ -10945,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"]) {
@@ -11988,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,
@@ -12117,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");
@@ -12136,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
@@ -12216,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 = "";
@@ -18582,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;
@@ -18903,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. */
@@ -18965,6 +19613,7 @@ var AgUiChat = class extends HTMLElement {
    */
   #onViewportResize = () => {
     this.#placement.publishVisualViewport();
+    this.#syncDock();
     if (this.#placement.dragging()) {
       return;
     }
@@ -18976,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.
@@ -19226,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),
@@ -19302,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();
@@ -19395,6 +20046,8 @@ var AgUiChat = class extends HTMLElement {
     return [
       "title-text",
       "placement",
+      "collapse-to",
+      "anchor",
       "credentials",
       "user-key",
       "user-name",
@@ -19410,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;
     }
@@ -19672,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.
    *
@@ -19717,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;
@@ -19743,6 +20443,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 +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;
     }
   }
@@ -19922,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) {
@@ -19934,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(
@@ -19975,6 +20681,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 +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
@@ -20040,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();
@@ -20125,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)
     );
@@ -20142,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).
    *
@@ -20167,16 +21006,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 +21058,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 +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.
@@ -20479,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;
   }
@@ -21112,11 +21984,12 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.47.0";
+var VERSION = "0.48.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
   AgUiClient,
+  BAR_HEIGHT_EVENT,
   CHART_ACTIVITY_TYPE,
   CHART_TOOL_NAME,
   CHAT_CORNERS,
@@ -21149,6 +22022,7 @@ export {
   TOGGLE_EVENT,
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
+  TOOL_GROUP_DISPLAY,
   TOOL_OUTCOME,
   ToolCallCard,
   UNREAD_EVENT,