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

package/src/ui/placement/resize_styles.ts

@@ -0,0 +1,186 @@
+// The resize grips on every edge and corner, and which placements keep them.
+export const RESIZE_STYLES: string = `
+/* Resize grips: every edge and every corner, so the panel can be dragged from
+   whichever side the reader is already near. Absent entirely where the
+   placement is full-bleed, since there is nothing to drag.
+
+   The whole set is always laid out. Which edges the *layout* pins is not a
+   question the stylesheet needs to answer any more -- it decided where the one
+   grip went, and there is no longer one grip. The element still measures and
+   stamps data-resize-anchor, because it decides what a drag on a pinned edge
+   costs in position and which grip carries the tab stop, but no rule here
+   reads it. */
+.resize-handle {
+  position: absolute;
+  z-index: 2;
+  background: transparent;
+  touch-action: none;
+}
+
+.resize-handle:focus-visible {
+  outline: 2px solid var(--_accent);
+  outline-offset: -2px;
+}
+
+/* Corners first in the file and last in the DOM, so they take the pointer
+   where they overlap an edge strip. */
+.resize-handle--top-left,
+.resize-handle--top-right,
+.resize-handle--bottom-left,
+.resize-handle--bottom-right {
+  width: var(--_grip-corner);
+  height: var(--_grip-corner);
+}
+
+.resize-handle--top-left {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+
+.resize-handle--top-right {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+
+.resize-handle--bottom-left {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
+
+.resize-handle--bottom-right {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+}
+
+/* Edge strips, held clear of the corners at both ends so a corner drag is
+   never swallowed by the edge next to it. */
+.resize-handle--left,
+.resize-handle--right {
+  top: var(--_grip-corner);
+  bottom: var(--_grip-corner);
+  width: var(--_grip-edge);
+  cursor: ew-resize;
+}
+
+.resize-handle--left {
+  left: 0;
+}
+
+.resize-handle--right {
+  right: 0;
+}
+
+.resize-handle--top,
+.resize-handle--bottom {
+  left: var(--_grip-corner);
+  right: var(--_grip-corner);
+  height: var(--_grip-edge);
+  cursor: ns-resize;
+}
+
+.resize-handle--top {
+  top: 0;
+}
+
+.resize-handle--bottom {
+  bottom: 0;
+}
+
+/* Docked: the placement owns the height, so the horizontal edges and every
+   corner are inert and must not advertise a drag that does nothing. The two
+   vertical edges remain, which is the same affordance these placements had
+   when there was one grip -- now on both sides, since either may be the inner
+   one depending on which side the rail is docked to. */
+:host([placement="sidebar"]) .resize-handle--top,
+:host([placement="sidebar"]) .resize-handle--bottom,
+:host([placement="sidebar"]) .resize-handle--top-left,
+:host([placement="sidebar"]) .resize-handle--top-right,
+:host([placement="sidebar"]) .resize-handle--bottom-left,
+:host([placement="sidebar"]) .resize-handle--bottom-right,
+:host([placement="side"]) .resize-handle--top,
+:host([placement="side"]) .resize-handle--bottom,
+:host([placement="side"]) .resize-handle--top-left,
+:host([placement="side"]) .resize-handle--top-right,
+:host([placement="side"]) .resize-handle--bottom-left,
+:host([placement="side"]) .resize-handle--bottom-right {
+  display: none;
+}
+
+/* The vertical edges run the full height once no corner shares them. */
+:host([placement="sidebar"]) .resize-handle--left,
+:host([placement="sidebar"]) .resize-handle--right,
+:host([placement="side"]) .resize-handle--left,
+:host([placement="side"]) .resize-handle--right {
+  top: 0;
+  bottom: 0;
+  width: var(--_grip-edge-docked);
+}
+
+/* Full-bleed: nothing to drag. */
+:host([placement="full"]) .resize-handle,
+:host([placement="page"]) .resize-handle {
+  display: none;
+}
+
+/* The visible mark on a grip.
+
+   Filling the whole strip was what the single corner grip did, and at 14px
+   square nobody ever saw it. On a strip running the length of an edge the same
+   fill reads as a border the panel grew -- square ended, stopping short of the
+   corner radius at both ends, and easily mistaken for a rendering fault rather
+   than for something to grab.
+
+   So the hit area stays the full strip and the mark is a short pill centred on
+   it, which cannot be read as an edge of anything and never meets the radius.
+
+   It shows on hover and focus as well as during the drag. With eight grips, a
+   mark that appears only once you are already dragging is a mark that never
+   told anyone the grips were there. */
+.resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 999px;
+  background: var(--_accent);
+  opacity: 0;
+  transition: opacity var(--_motion) var(--_ease);
+}
+
+.resize-handle--top::after,
+.resize-handle--bottom::after {
+  width: var(--_grip-mark-length);
+  height: var(--_grip-mark-thickness);
+}
+
+.resize-handle--left::after,
+.resize-handle--right::after {
+  width: var(--_grip-mark-thickness);
+  height: var(--_grip-mark-length);
+}
+
+/* A corner has no length to run along, so it gets a dot instead of a pill. */
+.resize-handle--top-left::after,
+.resize-handle--top-right::after,
+.resize-handle--bottom-left::after,
+.resize-handle--bottom-right::after {
+  width: var(--_grip-mark-thickness);
+  height: var(--_grip-mark-thickness);
+}
+
+.resize-handle:hover::after,
+.resize-handle:focus-visible::after {
+  opacity: 0.5;
+}
+
+/* Equal specificity to the pair above, so source order is what makes the drag
+   the stronger of the two states. */
+.resize-handle[data-dragging]::after {
+  opacity: 0.9;
+}
+`;

package/src/ui/placement/sidebar_styles.ts

@@ -0,0 +1,88 @@
+// The sidebar placement: a docked full-height panel that slides to a rail.
+export const SIDEBAR_STYLES: string = `
+/* Sidebar: a full-height docked panel that slides open/closed and
+   collapses to a slim icon rail (not the floating launcher). Docked right by
+   default; data-side="left" docks it left. Overlay by default — set
+   --ag-ui-position: static (and place this element in your own layout) for a
+   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);
+  --_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);
+  transition: width var(--_motion) var(--_ease);
+}
+
+:host([placement="sidebar"][data-side="left"]) {
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) auto var(--_viewport-inset-bottom)
+      var(--_viewport-inset-left)
+  );
+}
+
+/* The docked panel is pinned to the edge it docks against rather than filling
+   the host as a flex child. Collapsing shrinks the host to the rail width, and
+   a flex child would be squashed to 52px on the way out instead of sliding out
+   at full width. */
+/* The panel is taken out of flow so the collapse can slide it out at full
+   width; see the note above. That makes the host its containing block, and the
+   host is only one by accident: it is position: fixed by default. A host that
+   takes the documented route to a pushed layout instead of an overlay sets
+   --ag-ui-position: static, and a static element establishes nothing -- so the
+   panel resolved against the initial containing block, landed at the document
+   origin, and scrolled away with the page. Docked left it pinned to the
+   document's left edge rather than the host's.
+
+   It looked correct wherever it was first tried, because a full-height column
+   at the top of an unscrolled document is exactly where those two answers
+   coincide. Containment makes the host a containing block whatever its
+   position, so the panel stays in the box the host was given. It is a no-op in
+   the default case, which is already positioned. */
+:host([placement="sidebar"]) {
+  contain: layout;
+}
+
+:host([placement="sidebar"]) .chat {
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: var(--_width);
+  transform-origin: right center;
+}
+
+:host([placement="sidebar"][data-side="left"]) .chat {
+  inset: 0 auto 0 0;
+  transform-origin: left center;
+}
+
+/* Collapsed sidebar: shrink the host to the rail width and slide the panel out
+   through the edge it docks against. Higher specificity than the generic
+   collapse rules, so it wins regardless of source order. */
+/* The rail is the full height of what the host left, not of the screen. It
+   said 100vh and pinned its own bottom, which put it under any chrome the host
+   had reserved -- and the icon lives at the top of the rail, so the one control
+   that reopens the panel was the first thing to disappear behind a sticky
+   header. */
+:host([placement="sidebar"][collapsed]) {
+  width: var(--_rail-width);
+  height: var(--_viewport-height);
+  max-height: var(--_viewport-height);
+  pointer-events: auto;
+}
+
+:host([placement="sidebar"][collapsed]) .chat {
+  transform: translateX(100%);
+}
+
+:host([placement="sidebar"][data-side="left"][collapsed]) .chat {
+  transform: translateX(-100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([placement="sidebar"]),
+  :host([placement="sidebar"]) .chat {
+    transition: none;
+  }
+}
+`;

package/src/ui/placement/small_viewport_styles.ts

@@ -0,0 +1,56 @@
+// The one shape every placement takes on a phone-sized viewport.
+export const SMALL_VIEWPORT_STYLES: string = `
+/* Small viewports: one shape, reached from whichever placement the host chose.
+
+   A phone is not an eighth placement, it is an override that collapses the
+   others onto one of them. The host picked a placement for the desktop it was
+   designing; a 380x560 panel with a 24px margin is not a smaller version of
+   that decision, it is most of the screen with a frame drawn round it.
+
+   The breakpoint is a literal because a custom property cannot be read in a
+   media query -- which is exactly why there is an opt-out. Everything the block
+   sets is a token a host can re-state, but the *trigger* is unreachable, so a
+   host whose layout wants a different threshold, or none, sets
+   data-small-viewport="off" and keeps its desktop shape at every width. 600px is above every common phone in portrait and below every
+   tablet in landscape, and it is a width rather than a pointer test on purpose:
+   a touch laptop is coarse-pointered and wide, a narrow desktop window is
+   fine-pointered and small, and conflating the two gets both wrong. What the
+   pointer decides is which controls make sense, further down.
+
+   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
+   its column should become the whole screen. */
+@media (max-width: 600px) {
+  :host([placement="floating"]:not([data-small-viewport="off"])),
+  :host([placement="bottom-left"]:not([data-small-viewport="off"])),
+  :host([placement="sidebar"]:not([data-small-viewport="off"])),
+  :host([placement="side"]:not([data-small-viewport="off"])),
+  :host(:not([placement]):not([data-small-viewport="off"])),
+  :host([placement=""]:not([data-small-viewport="off"])) {
+    --_inset: var(
+      --ag-ui-inset,
+      calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+        calc(var(--_viewport-inset-bottom) + var(--_keyboard-inset))
+        var(--_viewport-inset-left)
+    );
+    --_width: var(--ag-ui-width, var(--_viewport-width));
+    --_height: var(--ag-ui-height, var(--_viewport-height));
+    --_max-width: var(--ag-ui-max-width, var(--_viewport-width));
+    --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
+    --_panel-radius: var(--ag-ui-panel-radius, 0);
+    --_shadow: var(--ag-ui-shadow, none);
+  }
+
+  /* Nothing to resize once the panel is the screen, and the grips would sit
+     under the thumbs holding the phone. */
+  :host([placement="floating"]:not([data-small-viewport="off"])) .resize-handle,
+  :host([placement="bottom-left"]:not([data-small-viewport="off"])) .resize-handle,
+  :host([placement="sidebar"]:not([data-small-viewport="off"])) .resize-handle,
+  :host([placement="side"]:not([data-small-viewport="off"])) .resize-handle,
+  :host(:not([placement]):not([data-small-viewport="off"])) .resize-handle,
+  :host([placement=""]:not([data-small-viewport="off"])) .resize-handle {
+    display: none;
+  }
+}
+`;

package/src/ui/placement/surface_for.ts

@@ -0,0 +1,135 @@
+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.
+ *
+ * - `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.
+ * - `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
+ *   no owner, and it hides the launcher, so the usual way back did not exist.
+ *   The header drops its collapse control here, but a control removed from
+ *   the UI is not a state removed from the model: the property, the attribute
+ *   and a value restored from storage all still reach it, so every one of
+ *   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;
+
+/**
+ * Everything the script needs to know about one display surface, in one
+ * record, so a placement's behaviour is read in one place rather than
+ * assembled from a table per question.
+ *
+ * The stylesheet still carries each surface's look (one module per placement
+ * 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.
+   */
+  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.
+   */
+  readonly launcherDraggable: 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
+   * height, leaving only its inner edge.
+   */
+  readonly resizeAxis: ResizeAxis;
+  /**
+   * Whether a first mount with nothing stored starts collapsed. Only the
+   * corner placements do: a launcher is the resting state of every corner chat
+   * in the field, and mounting open put a 380x560 panel over the host page's
+   * corner on a visitor's first load, uninvited. The placements that place
+   * themselves start open -- a host that docks a sidebar has already decided
+   * the widget belongs on screen, and one that embeds it has given it a box.
+   *
+   * Separate from {@link launcherDraggable} although the two agree today:
+   * "has a launcher to rest on" and "the launcher can be moved" are different
+   * questions, and a surface with a fixed launcher would answer them apart.
+   */
+  readonly startsCollapsed: boolean;
+}
+
+const CORNER: Surface = {
+  collapseTo: "launcher",
+  launcherDraggable: true,
+  resizeAxis: "both",
+  startsCollapsed: true,
+};
+
+const DOCKED: Surface = {
+  collapseTo: "launcher",
+  launcherDraggable: false,
+  resizeAxis: "width",
+  startsCollapsed: false,
+};
+
+/**
+ * One record per `placement` value. Absent (`null`) and empty are the default
+ * floating corner, as the stylesheet treats them.
+ */
+const SURFACES: ReadonlyMap<string | null, Surface> = new Map<string | null, Surface>([
+  [null, CORNER],
+  ["", CORNER],
+  ["floating", CORNER],
+  ["bottom-left", CORNER],
+  ["side", DOCKED],
+  ["sidebar", { ...DOCKED, collapseTo: "rail" }],
+  [
+    "full",
+    {
+      collapseTo: "launcher",
+      launcherDraggable: false,
+      resizeAxis: "none",
+      startsCollapsed: false,
+    },
+  ],
+  [
+    "page",
+    { collapseTo: null, launcherDraggable: false, resizeAxis: "none", startsCollapsed: false },
+  ],
+  [
+    "embedded",
+    { collapseTo: "header", launcherDraggable: false, resizeAxis: "both", startsCollapsed: false },
+  ],
+]);
+
+/**
+ * A value no record names. The stylesheet lays it out as the default corner,
+ * but the script has never treated an unknown value as one: its launcher stays
+ * put and it mounts open, so a typo in a host's markup does not start moving
+ * or hiding a panel the host meant to show.
+ */
+const UNKNOWN: Surface = {
+  collapseTo: "launcher",
+  launcherDraggable: false,
+  resizeAxis: "both",
+  startsCollapsed: false,
+};
+
+/**
+ * The surface `placement` describes. Read per interaction by every caller,
+ * because `placement` is a live attribute.
+ */
+export function surfaceFor(placement: string | null): Surface {
+  return SURFACES.get(placement) ?? UNKNOWN;
+}

package/src/ui/progress/run_notice_styles.ts

@@ -0,0 +1,52 @@
+// The one-line notice a run leaves in the transcript, with its undo.
+export const RUN_NOTICE_STYLES: string = `
+.run-notice {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  align-self: flex-start;
+  max-width: 100%;
+  margin: 2px 0;
+  padding: 3px 10px;
+  border: 1px dashed var(--_border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--_muted);
+  font-size: 0.8em;
+  line-height: 1.4;
+}
+
+.run-notice-icon {
+  flex: none;
+  opacity: 0.75;
+}
+
+/* The one control a notice may carry. Quiet, because it reports something
+   already done rather than asking for a decision. */
+.run-notice-undo {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+  padding: 2px 8px;
+  border: 1px solid var(--_border);
+  border-radius: var(--_radius);
+  background: var(--_bg);
+  color: var(--_accent);
+  font: inherit;
+  font-size: 0.9em;
+  cursor: pointer;
+}
+
+.run-notice-undo:hover:not(:disabled) {
+  background: var(--_hover);
+}
+
+.run-notice-undo:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.run-notice-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+`;

package/src/ui/progress/thoughts_styles.ts

@@ -0,0 +1,65 @@
+// The collapsible reasoning region over an assistant turn.
+export const THOUGHTS_STYLES: string = `
+/* ── Thoughts region ────────────────────────────────────────────
+   A muted, collapsible chain-of-thought at the top of the answer group: open
+   while the model reasons, folded once the answer text starts. */
+.thoughts {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--_muted);
+}
+
+.thoughts-toggle {
+  align-self: flex-start;
+  border: none;
+  padding: 0;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--_muted);
+  cursor: pointer;
+}
+
+.thoughts-toggle::before {
+  content: var(--_disclosure-expanded) " ";
+}
+
+.thoughts-toggle[aria-expanded="false"]::before {
+  content: var(--_disclosure-collapsed) " ";
+}
+
+/* A gentle pulse on the label while reasoning is still streaming. */
+.thoughts[data-streaming] .thoughts-label {
+  animation: ag-ui-thoughts-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes ag-ui-thoughts-pulse {
+  0%, 100% { opacity: 0.55; }
+  50% { opacity: 1; }
+}
+
+.thoughts-body {
+  margin: 0;
+  padding: 4px 0 4px 10px;
+  border-left: 2px solid var(--_border);
+  max-height: 220px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: inherit;
+}
+
+.thoughts-body[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .thoughts[data-streaming] .thoughts-label {
+    animation: none;
+  }
+}
+`;

package/src/ui/progress/tool_call_card.ts

@@ -287,6 +287,17 @@ export class ToolCallCard {
     this.#status.textContent = statusLabels(this.#strings)[status];
   }
 
+  /**
+   * Say whether a prompt is open on this call, a question it asked or a
+   * confirmation it needs. A flag of its own beside the status, which stays
+   * `pending`: the call is still running as far as the status goes, and a card
+   * display mode that reads the status draws it exactly as before. The step
+   * group reads the flag to tell a call waiting on a person from one working.
+   */
+  setAsking(asking: boolean): void {
+    this.element.toggleAttribute("data-asking", asking);
+  }
+
   /**
    * Record that a human approved or declined this call, as a line in the card.
    * The prompt disappears once answered, so this is the only lasting trace that