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

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,18 +35,22 @@ 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:
-   * the rail is a docked edge, `header` and `null` have no launcher, and a
-   * full-bleed panel covers the screen it would be opening into.
+   * the rail is a docked edge, `header` and `null` have no launcher, a
+   * full-bleed panel covers the screen it would be opening into, and the bar
+   * and the host's own control are not a launcher at all.
    */
   readonly launcherDraggable: boolean;
+  /**
+   * Whether the header drag and `moveTo` may move the open panel. The same
+   * answer as {@link launcherDraggable} for every placement on its own; the two
+   * part under `collapse-to="bar"` and `"none"`, where a corner panel still
+   * moves like one but has no launcher left to drag.
+   */
+  readonly panelMovable: boolean;
   /**
    * Which axes the resize grips may change. A full-bleed layout is the whole
    * viewport by definition and cannot be resized; a docked panel owns its
@@ -72,6 +75,7 @@ export interface Surface {
 const CORNER: Surface = {
   collapseTo: "launcher",
   launcherDraggable: true,
+  panelMovable: true,
   resizeAxis: "both",
   startsCollapsed: true,
 };
@@ -79,6 +83,7 @@ const CORNER: Surface = {
 const DOCKED: Surface = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "width",
   startsCollapsed: false,
 };
@@ -99,17 +104,30 @@ const SURFACES: ReadonlyMap<string | null, Surface> = new Map<string | null, Sur
     {
       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,
+    },
   ],
 ]);
 
@@ -122,14 +140,32 @@ const SURFACES: ReadonlyMap<string | null, Surface> = new Map<string | null, Sur
 const UNKNOWN: Surface = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "both",
   startsCollapsed: false,
 };
 
 /**
- * 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. Both turn the
+ * launcher drag off, because there is no launcher left to drag, and keep the
+ * placement's own answer for moving the panel: a corner panel rises from the
+ * bar or the anchor until the user drags it somewhere else, and a placement
+ * that owns its position keeps owning it.
  */
-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_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
@@ -161,7 +173,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;
@@ -172,7 +185,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);
 }
@@ -205,6 +218,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_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. */
@@ -50,6 +58,23 @@ export const TOKEN_STYLES: string = `
   --_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
@@ -300,6 +325,25 @@ 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);
+  /* 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
@@ -403,4 +447,17 @@ export const TOKEN_STYLES: string = `
     --_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);
+  }
+}
 `;

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/quiet_styles.ts

@@ -24,14 +24,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 {

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.47.0";
+export const VERSION: string = "0.49.0";