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

package/src/ui/placement/panel_placement.ts

@@ -22,11 +22,31 @@ import {
   type ResizeGrip,
   type ResizeSize,
 } from "./resize_handle.js";
-import { surfaceFor } from "./surface_for.js";
+import { type Surface, surfaceFor } from "./surface_for.js";
 
 /** Per-tab persistence key for a dragged panel size. */
 const SIZE_KEY = "ag-ui-chat:size";
 
+/**
+ * The private properties a dragged size lives in. They are not the public
+ * `--ag-ui-width` / `--ag-ui-height` tokens, which belong to the host: an
+ * inline write there outranked every host rule and was read back by the
+ * small-viewport block, so a size dragged in a wide window leaked into the
+ * phone shape. The placement rules read these before the host token; the
+ * small-viewport block does not read them at all.
+ */
+const DRAG_WIDTH = "--_drag-width";
+const DRAG_HEIGHT = "--_drag-height";
+/**
+ * How far above the bottom of the layout viewport a docked panel stands, and
+ * how far in from its right edge: the bar's height, or the host anchor's top
+ * and right. Private and written inline, like the dragged size, and read only
+ * by the dock rules; never an inline --_inset, which would outrank the phone
+ * block and keep a docked panel off full-bleed on a phone.
+ */
+const DOCK_BOTTOM = "--_dock-bottom";
+const DOCK_RIGHT = "--_dock-right";
+
 /** Per-tab persistence key for a dragged launcher position. */
 const LAUNCHER_KEY = "ag-ui-chat:launcher";
 
@@ -189,6 +209,20 @@ export class PanelPlacement {
     this.#applySize(this.#readSize());
   }
 
+  /**
+   * Drop the dragged size and its stored copy, so the placement's own size and
+   * the host's tokens apply again. For a host entering a sized state of its
+   * own, which a user's drag would otherwise outrank.
+   */
+  resetSize(): void {
+    this.#host.element.style.removeProperty(DRAG_WIDTH);
+    this.#host.element.style.removeProperty(DRAG_HEIGHT);
+    this.#host.clearPreference(SIZE_KEY);
+    // The anchor was measured against the dragged box; the resting one may
+    // pin different edges.
+    this.syncResizeAnchor();
+  }
+
   /**
    * A zero-sized box carrying the host's viewport insets as padding, so they
    * can be read back as used pixel lengths. See the `.viewport-probe` rule for
@@ -284,6 +318,7 @@ export class PanelPlacement {
     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,
@@ -400,7 +435,7 @@ export class PanelPlacement {
    * per interaction, because `placement` is a live attribute.
    */
   #resizeAxis(): ResizeAxis {
-    return surfaceFor(this.#host.element.getAttribute("placement")).resizeAxis;
+    return this.#surface().resizeAxis;
   }
 
   /**
@@ -414,8 +449,8 @@ export class PanelPlacement {
    */
   #measureAnchor(): ResizeAnchor {
     const before = this.#host.element.getBoundingClientRect();
-    const width = this.#host.element.style.getPropertyValue("--ag-ui-width");
-    const height = this.#host.element.style.getPropertyValue("--ag-ui-height");
+    const width = this.#host.element.style.getPropertyValue(DRAG_WIDTH);
+    const height = this.#host.element.style.getPropertyValue(DRAG_HEIGHT);
     // Shrink first. Growing is the obvious probe and cannot answer the question
     // at a size already resting against max-width or max-height: the box does
     // not change, no edge moves, and every clamped axis then reads as pinned on
@@ -431,8 +466,8 @@ export class PanelPlacement {
     const grown = shrunk.x === null || shrunk.y === null ? this.#probeAnchor(before, 1) : shrunk;
     // Restore exactly what was there, including "nothing" — leaving a probe
     // value behind would pin a panel that had been sizing itself.
-    this.#restoreProperty("--ag-ui-width", width);
-    this.#restoreProperty("--ag-ui-height", height);
+    this.#restoreProperty(DRAG_WIDTH, width);
+    this.#restoreProperty(DRAG_HEIGHT, height);
     return {
       // Neither direction moved it: the axis cannot be resized at all, so the
       // floating default is the best answer available and is the one the
@@ -497,7 +532,7 @@ export class PanelPlacement {
   /**
    * Write a dragged size onto the host, on the axes this placement leaves free.
    *
-   * Writing the custom property rather than inline `width` / `height` does not
+   * Writing a custom property rather than inline `width` / `height` does not
    * by itself leave placement in charge: an inline custom property still
    * outranks a `:host([placement=…])` rule setting the same property, so a
    * height dragged while floating would cap a docked sidebar asking for
@@ -518,10 +553,10 @@ export class PanelPlacement {
     // symmetry nobody has asked for. The limit that matters, staying inside
     // what the host left free, is enforced above.
     if (size.width !== undefined) {
-      this.#host.element.style.setProperty("--ag-ui-width", `${size.width}px`);
+      this.#host.element.style.setProperty(DRAG_WIDTH, `${size.width}px`);
     }
     if (size.height !== undefined && axis === "both") {
-      this.#host.element.style.setProperty("--ag-ui-height", `${size.height}px`);
+      this.#host.element.style.setProperty(DRAG_HEIGHT, `${size.height}px`);
     }
   }
 
@@ -535,11 +570,54 @@ export class PanelPlacement {
   releaseOwnedAxes(): void {
     const axis = this.#resizeAxis();
     if (axis !== "both") {
-      this.#host.element.style.removeProperty("--ag-ui-height");
+      this.#host.element.style.removeProperty(DRAG_HEIGHT);
     }
     if (axis === "none") {
-      this.#host.element.style.removeProperty("--ag-ui-width");
+      this.#host.element.style.removeProperty(DRAG_WIDTH);
+    }
+  }
+
+  /** The surface the live placement and collapse-to attributes describe. */
+  #surface(): 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(): boolean {
+    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: HTMLElement, anchor: Element | null): number {
+    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;
   }
 
   /**
@@ -550,7 +628,7 @@ export class PanelPlacement {
   #launcherDraggable(): boolean {
     return (
       this.#host.element.getAttribute("data-launcher-drag") !== "false" &&
-      surfaceFor(this.#host.element.getAttribute("placement")).launcherDraggable
+      this.#surface().launcherDraggable
     );
   }
 
@@ -1032,6 +1110,21 @@ export class PanelPlacement {
    */
   #applyResize(grip: ResizeGrip, box: PanelRect): PanelRect {
     box = this.#withinViewport(box);
+    if (this.#docked()) {
+      // A docked panel keeps its resize but never its position: the edges it
+      // stands on are the bar's or the anchor's, and a grip on one of them
+      // would write the position below and take the panel off its dock. So
+      // the pinned edges stay where they are and only the free ones follow.
+      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;

package/src/ui/placement/preset_styles.ts

@@ -12,7 +12,7 @@ export const PRESET_STYLES: string = `
 
 :host([placement="side"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);

package/src/ui/placement/sidebar_styles.ts

@@ -7,7 +7,7 @@ export const SIDEBAR_STYLES: string = `
    host-managed push instead. */
 :host([placement="sidebar"]) {
   --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
-  --_width: var(--ag-ui-width, 420px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 420px));
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
   --_panel-radius: var(--ag-ui-panel-radius, 0);

package/src/ui/placement/small_viewport_styles.ts

@@ -17,6 +17,11 @@ export const SMALL_VIEWPORT_STYLES: string = `
    fine-pointered and small, and conflating the two gets both wrong. What the
    pointer decides is which controls make sense, further down.
 
+   The size the user dragged is deliberately not read here. The desktop
+   placements read it before the host token, and this block restates the sizes
+   without it, so a persisted or freshly dragged size cannot change the shape
+   of a phone, and a window narrowed after a drag goes full-bleed.
+
    Two placements are left alone. "page" is already this shape. "embedded" sits
    in a box the host sized and placed, and taking that over would break the app
    shell it was embedded into -- the host is the only party that knows whether
@@ -52,5 +57,14 @@ export const SMALL_VIEWPORT_STYLES: string = `
   :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;
+  }
 }
 `;

package/src/ui/placement/surface_for.ts

@@ -1,20 +1,19 @@
 import type { ResizeAxis } from "./resize_handle.js";
 
 /**
- * What a collapsed panel shrinks to.
- *
- * Only `null` versus not-`null` is read today: every caller asks whether the
- * surface can collapse at all, never which target it collapses to. The three
- * names below therefore describe the surface rather than drive it, and nothing
- * relies on them (changing one fails only the test of this record). The
- * bottom-bar collapse is expected to read or replace them, and a reader that
- * does should come with a test outside this record's own.
+ * What a collapsed panel shrinks to, stamped on the element as
+ * data-collapsed-to so the stylesheet draws it.
  *
  * - `launcher` -- the round button in a corner.
  * - `rail` -- the slim full-height edge the sidebar docks against; the same
  *   launcher element, shaped by the stylesheet.
  * - `header` -- the in-flow collapse: the body hides and the header bar stays
  *   in the host's layout, so there is no launcher at all.
+ * - `bar` -- `collapse-to="bar"` over a placement that would otherwise
+ *   collapse to `launcher`: a strip along the bottom edge, the panel rising
+ *   from its right end.
+ * - `none` -- `collapse-to="none"` over any collapsible placement: collapsed
+ *   is hidden, and the host's own control brings the panel back.
  * - `null` -- no collapsed state. `page` is a dedicated route rather than a
  *   panel on someone else's page, so there is no "away" for it to go to:
  *   collapsing it left a strip of application chrome fixed over a route with
@@ -25,7 +24,7 @@ import type { ResizeAxis } from "./resize_handle.js";
  *   those paths asks this record; the stylesheet covers the one path that
  *   never does, an attribute written straight onto the element.
  */
-export type CollapseTarget = "launcher" | "rail" | "header" | null;
+export type CollapseTarget = "launcher" | "rail" | "header" | "bar" | "none" | null;
 
 /**
  * Everything the script needs to know about one display surface, in one
@@ -36,11 +35,7 @@ export type CollapseTarget = "launcher" | "rail" | "header" | null;
  * under this directory); this is the part of a surface that code decides.
  */
 export interface Surface {
-  /**
-   * What collapsing shrinks the panel to; `null` when it cannot collapse. Only
-   * the `null` test is authoritative: the non-null names are descriptive (see
-   * {@link CollapseTarget}), and nothing branches on which one a surface has.
-   */
+  /** What collapsing shrinks the panel to; `null` when it cannot collapse. */
   readonly collapseTo: CollapseTarget;
   /**
    * Whether a gesture may move the launcher. The rest have nowhere to put it:
@@ -127,9 +122,25 @@ const UNKNOWN: Surface = {
 };
 
 /**
- * The surface `placement` describes. Read per interaction by every caller,
- * because `placement` is a live attribute.
+ * The surface `placement` and `collapse-to` describe together. Read per
+ * interaction by every caller, because both are live attributes.
+ *
+ * `collapse-to` only ever replaces the round launcher or the whole collapsed
+ * state, never a placement's own shape: `bar` applies where the placement
+ * collapses to `launcher`, so the sidebar keeps its rail and an embedded chat
+ * its header bar, and `none` applies to every collapsible placement. Absent,
+ * `auto` and any other value leave the placement as it was. A docked surface
+ * cannot be moved -- the panel rises from the bar or the host's anchor, and a
+ * position the user dragged would take it away from either -- so both turn
+ * the launcher drag off, and with it the header drag and `moveTo`.
  */
-export function surfaceFor(placement: string | null): Surface {
-  return SURFACES.get(placement) ?? UNKNOWN;
+export function surfaceFor(placement: string | null, collapseTo: string | null = null): Surface {
+  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;
 }

package/src/ui/progress/tool_call_card.ts

@@ -197,9 +197,7 @@ export class ToolCallCard {
 
     this.element = document.createElement("div");
     this.element.className = "tool-call";
-    this.element.setAttribute("part", "tool-card");
     this.element.setAttribute("data-tool-name", name);
-    this.element.setAttribute("data-status", TOOL_CALL_STATUS.PENDING);
     this.element.setAttribute("data-expanded", "false");
 
     const head = document.createElement("div");
@@ -221,8 +219,7 @@ export class ToolCallCard {
 
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
-    this.#status.setAttribute("part", "tool-card-status");
-    this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
+    this.#setStatus(TOOL_CALL_STATUS.PENDING);
 
     this.#decision = document.createElement("span");
     this.#decision.className = "tool-call-decision";
@@ -283,8 +280,7 @@ export class ToolCallCard {
     if (this.#settled) {
       return;
     }
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
   }
 
   /**
@@ -326,8 +322,7 @@ export class ToolCallCard {
       return;
     }
     this.#settled = true;
-    this.element.setAttribute("data-status", status);
-    this.#status.textContent = statusLabels(this.#strings)[status];
+    this.#setStatus(status);
     this.#resultLabel.textContent = resultLabels(this.#strings)[status];
     this.#renderPayload(
       this.#resultBody,
@@ -337,6 +332,21 @@ export class ToolCallCard {
     this.#resultSection.hidden = false;
   }
 
+  /**
+   * Write the status everywhere it is read from, in one place so they cannot
+   * disagree: `data-status` for the shadow CSS, the pill's text, and the part
+   * lists. `::part()` takes no attribute selector, so the card and its pill also
+   * name the status as a part (`tool-card-error`, `tool-card-status-error`), the
+   * modifier convention a run notice uses, and a host styles failures alone.
+   * Setting the whole list replaces the previous modifier.
+   */
+  #setStatus(status: ToolCallStatus): void {
+    this.element.setAttribute("data-status", status);
+    this.element.setAttribute("part", `tool-card tool-card-${status}`);
+    this.#status.setAttribute("part", `tool-card-status tool-card-status-${status}`);
+    this.#status.textContent = statusLabels(this.#strings)[status];
+  }
+
   /**
    * Fill one body region, offering it to the host formatter first.
    *

package/src/ui/progress/tool_group_styles.ts

@@ -21,6 +21,18 @@ const GROUPED = `:host(:where(:not(${CARD_MODES})))`;
 /** The host in one of the four card modes, where a group drawn earlier is flattened. */
 const CARDS = `:host(:is(${CARD_MODES}))`;
 
+/**
+ * A card inside an opened group, with the host in grouped mode and the given
+ * data-tool-group-display. The inner attribute sits inside the same :host()
+ * as the grouped test, since the host is featureless outside it, and being
+ * grouped-only is what lets an outer card mode flatten the group into its own
+ * cards: none of these rules match there. Full is no rule at all, so an absent
+ * or unknown inner value draws the full card a group always drew.
+ */
+function inner(mode: string): string {
+  return `:host(:where(:not(${CARD_MODES}))[data-tool-group-display="${mode}"]) .tool-group-list .tool-call`;
+}
+
 export const TOOL_GROUP_STYLES: string = `
 /* ── The folded tool-step group ──────────────────────────────────
    One quiet row per run of consecutive calls, the cards one click down as
@@ -205,6 +217,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

package/src/ui/progress/tool_step_group.ts

@@ -225,6 +225,9 @@ export class ToolStepGroup {
       state = "error";
     }
     this.element.setAttribute("data-state", state);
+    // The state is also a part, because `::part()` takes no attribute selector;
+    // the whole list is rewritten so the old modifier goes.
+    this.element.setAttribute("part", `tool-group tool-group-${state}`);
     this.element.setAttribute("data-count", String(total));
 
     const only = total === 1 ? steps[0] : undefined;

package/src/ui/progress/tool_step_styles.ts

@@ -277,9 +277,11 @@ export const TOOL_STEP_STYLES: string = `
 
 /* 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;
 }
 

package/src/ui/shell/build_launcher.ts

@@ -7,21 +7,32 @@ export interface LauncherOptions {
   readonly launcher: HTMLButtonElement;
   readonly badge: HTMLElement;
   readonly railLabel: HTMLElement;
+  /** The bottom bar's wrapper, which holds the launcher and the history button. */
+  readonly bar: HTMLElement;
+  /** The bottom bar's history button, a sibling of the launcher in the bar. */
+  readonly barHistory: HTMLButtonElement;
   readonly titleText: string;
   readonly iconUrl: string | null;
   readonly strings: UiStrings;
   readonly signal: AbortSignal;
   readonly onOpen: () => void;
+  readonly onHistory: () => void;
 }
 
 /**
- * Build what a collapsed widget shrinks to: a round floating button, or the
- * slim edge rail under `placement="sidebar"` -- one element, shaped by the
- * stylesheet. The element mounts it as a sibling of the panel, so it survives
- * the panel being hidden.
+ * Build what a collapsed widget shrinks to: a round floating button, the slim
+ * edge rail under `placement="sidebar"`, or the strip along the bottom edge
+ * under `collapse-to="bar"` -- one element, shaped by the stylesheet. The
+ * element mounts the bar wrapper as a sibling of the panel, so it survives the
+ * panel being hidden.
+ *
+ * The wrapper is there for the bar's history button: a button cannot nest in
+ * a button, so the strip is the launcher and the history button side by side.
+ * Outside the bar the wrapper draws no box and the history button is not
+ * drawn, so the launcher lays out against the host exactly as it did alone.
  */
 export function buildLauncher(options: LauncherOptions): void {
-  const { launcher, badge, railLabel } = options;
+  const { launcher, badge, railLabel, bar, barHistory } = options;
   launcher.className = "launcher";
   launcher.type = "button";
   launcher.setAttribute("part", "launcher");
@@ -47,4 +58,20 @@ export function buildLauncher(options: LauncherOptions): void {
     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);
+  // A glyph rather than the header's icon slot: a slot name may appear once
+  // per shadow root, and the header's history button already holds it.
+  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);
 }

package/src/ui/shell/token_styles.ts

@@ -37,7 +37,15 @@ export const TOKEN_STYLES: string = `
   --_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. */
@@ -300,8 +308,27 @@ export const TOKEN_STYLES: string = `
      grid/flex layout) to embed it in the page flow instead of floating. */
   --_position: var(--ag-ui-position, fixed);
   --_z-index: var(--ag-ui-z-index, 2147483000);
-  --_width: var(--ag-ui-width, 380px);
-  --_height: var(--ag-ui-height, 560px);
+  /* A size the user dragged, written inline on the host by the placement
+     code, and read ahead of the host's tokens so the drag wins. There is no
+     public token behind it; it is declared initial here only so a chat that
+     was never dragged does not inherit one, from a dragged chat it is
+     slotted into or from any page rule naming it. The inline value still
+     beats this default. */
+  --_drag-width: initial;
+  --_drag-height: initial;
+  /* Where a docked panel stands, written inline the same way by the placement
+     code: the bottom bar's height, or the host anchor's distance from the
+     bottom and right edges. Read only by the dock rules, each with a 0px
+     fallback; declared initial so it never inherits either. */
+  --_dock-bottom: initial;
+  --_dock-right: initial;
+  /* The gap between a panel and the host's own button it rises from under
+     collapse-to="none". The button usually sits inside a taller toolbar, so a
+     host sets this to the button's distance from the toolbar's top plus the
+     clearance it wants, and the panel stands clear of the toolbar. */
+  --_anchor-gap: var(--ag-ui-anchor-gap, 8px);
+  --_width: var(--_drag-width, var(--ag-ui-width, 380px));
+  --_height: var(--_drag-height, var(--ag-ui-height, 560px));
   /* The gutter a resting floating panel keeps between itself and the edge of
      the box the host left free. One number, because the inset below spends it
      and the cap beneath has to know it was spent. */

package/src/ui/styles.ts

@@ -23,6 +23,7 @@ import { APPROVAL_STYLES } from "./interrupts/approval_styles.js";
 import { CONFIRMATION_STYLES } from "./interrupts/confirmation_styles.js";
 import { QUESTION_STYLES } from "./interrupts/question_styles.js";
 import { COLLAPSE_STYLES } from "./placement/collapse_styles.js";
+import { DOCK_STYLES } from "./placement/dock_styles.js";
 import { EMBEDDED_STYLES } from "./placement/embedded_styles.js";
 import { LAUNCHER_STYLES } from "./placement/launcher_styles.js";
 import { PAGE_STYLES } from "./placement/page_styles.js";
@@ -65,6 +66,9 @@ export const STYLES: string = [
   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,

package/src/ui/themes/scheme_styles.ts

@@ -6,9 +6,18 @@ export const SCHEME_STYLES: string = `
    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"]) {

package/src/version.ts

@@ -1 +1 @@
-export const VERSION: string = "0.46.0";
+export const VERSION: string = "0.48.0";