@artooi/agents-web-components 0.0.0-stage → 0.1.1

package/src/dom/highlight_overlay.ts

@@ -0,0 +1,204 @@
+import { HIGHLIGHT_OVERLAY_Z_INDEX } from "../constants.js";
+import { ringColor } from "./ring_color.js";
+
+/** How the overlay is drawn around the element being pointed at. */
+export interface HighlightOverlayOptions {
+  /** Dim everything except the target. Default false. */
+  readonly scrim?: boolean;
+  /** Draw the ring as a moving gradient rather than a flat colour. Default false. */
+  readonly gradient?: boolean;
+  /**
+   * Ring colour, and the flat fallback for the gradient. Default:
+   * `--ag-ui-highlight-ring-color` on the target, then on the chat, then the
+   * target's `--ag-ui-accent`, then the chat's accent, held to 3:1 against the
+   * surface behind the target.
+   */
+  readonly color?: string;
+  /** The chat whose ring colour and accent to use. Default: the latest connected. */
+  readonly chat?: HTMLElement;
+  /** Gap between the target's box and the ring. Default 4. */
+  readonly padding?: number;
+  /** Corner radius of the cut-out and the ring. Default: the target's own. */
+  readonly radius?: number;
+  /** Ring thickness. Default 3, or `--ag-ui-highlight-ring-width` on the target. */
+  readonly ringWidth?: number;
+  /** One pass of the gradient. Default 2400, or `--ag-ui-highlight-flow-ms`. */
+  readonly flowMs?: number;
+}
+
+/**
+ * Read a `--ag-ui-*` token from the target, not the overlay: the overlay sits in the body, so
+ * a host that themes the widget on `ag-ui-chat` or a wrapper would never reach a `var()` there.
+ */
+function tokenOn(target: HTMLElement, name: string, fallback: string): string {
+  const value = window.getComputedStyle(target).getPropertyValue(name).trim();
+  return value === "" ? fallback : value;
+}
+
+/** Default gap between the target's border box and the ring around it. */
+const DEFAULT_PADDING_PX = 4;
+
+/**
+ * Draw an overlay that points at `target`, and return a function that removes it.
+ *
+ * An overlay rather than a style on the target: a flat highlight is an `outline` so an
+ * `overflow: hidden` ancestor cannot clip it, but an outline takes a colour, never a
+ * gradient, and a dim needs a surface larger than the target. Nothing here is a descendant
+ * of the target, so none of it is clipped.
+ *
+ * It is inert: it never takes a pointer event, so the driver can still click what it
+ * just pointed at.
+ *
+ * It follows: the cut-out is recomputed on scroll and resize.
+ */
+export function showHighlightOverlay(
+  target: HTMLElement,
+  options: HighlightOverlayOptions = {},
+): () => void {
+  const root = document.createElement("div");
+  root.setAttribute("data-ag-ui-highlight", "");
+  // Decoration: the agent's message is what announces that the element matters.
+  root.setAttribute("aria-hidden", "true");
+  root.style.cssText = [
+    "position: fixed",
+    "inset: 0",
+    "pointer-events: none",
+    // Above the widget's own default, since it points at the page the widget sits over.
+    `z-index: ${tokenOn(target, "--ag-ui-highlight-z-index", String(HIGHLIGHT_OVERLAY_Z_INDEX))}`,
+  ].join(";");
+
+  const scrim = document.createElement("div");
+  const ring = document.createElement("div");
+  // Classes, since `::part` cannot reach the host document.
+  root.className = "ag-ui-highlight";
+  scrim.className = "ag-ui-highlight-scrim";
+  ring.className = "ag-ui-highlight-ring";
+  if (options.scrim === true) {
+    root.append(scrim);
+  }
+  root.append(ring);
+
+  const ringWidth =
+    options.ringWidth ?? Number.parseFloat(tokenOn(target, "--ag-ui-highlight-ring-width", "3"));
+  const flowMs =
+    options.flowMs ?? Number.parseFloat(tokenOn(target, "--ag-ui-highlight-flow-ms", "2400"));
+
+  const paint = (): void => {
+    const box = target.getBoundingClientRect();
+    const pad = options.padding ?? DEFAULT_PADDING_PX;
+    // No fallback for an unparseable radius: it always resolves for an element in the document.
+    const radius = options.radius ?? Number.parseFloat(getComputedStyle(target).borderRadius);
+    const left = box.left - pad;
+    const top = box.top - pad;
+    const width = box.width + pad * 2;
+    const height = box.height + pad * 2;
+
+    if (options.scrim === true) {
+      // One element with a hole; the opposite winding makes evenodd treat the inside as outside.
+      scrim.style.cssText = [
+        "position: absolute",
+        "inset: 0",
+        `background: ${tokenOn(target, "--ag-ui-highlight-scrim", "rgba(15, 15, 25, 0.45)")}`,
+        `clip-path: path(evenodd, '${holePath(left, top, width, height, radius + pad)}')`,
+      ].join(";");
+    }
+
+    ring.style.cssText = [
+      "position: absolute",
+      `left: ${left}px`,
+      `top: ${top}px`,
+      `width: ${width}px`,
+      `height: ${height}px`,
+      `border-radius: ${radius + pad}px`,
+      `border: ${ringWidth}px solid transparent`,
+      "box-sizing: border-box",
+      ringPaint(target, options),
+    ].join(";");
+  };
+
+  paint();
+  // Animated from script: a keyframe would mean injecting a rule into the host stylesheet,
+  // which is module-level state. Reduced motion draws the gradient but stops it travelling.
+  let flow: Animation | null = null;
+  if (options.gradient === true && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    flow = ring.animate([{ backgroundPosition: "100% 0" }, { backgroundPosition: "-100% 0" }], {
+      duration: flowMs,
+      iterations: Number.POSITIVE_INFINITY,
+      easing: "linear",
+    });
+  }
+  // Capture reaches a scroll in any container; passive, as this only reads geometry.
+  const listen = { capture: true, passive: true } as const;
+  window.addEventListener("scroll", paint, listen);
+  window.addEventListener("resize", paint, listen);
+  document.body.appendChild(root);
+
+  return () => {
+    window.removeEventListener("scroll", paint, listen);
+    window.removeEventListener("resize", paint, listen);
+    // An infinite animation never finishes, so cancel it rather than rely on the engine dropping it.
+    flow?.cancel();
+    root.remove();
+  };
+}
+
+/**
+ * A caller's colour, or `null` if it is not one: the value is joined into a `;`-separated
+ * `cssText`, so a string carrying a semicolon would write further declarations, and the
+ * colour can come from the agent.
+ */
+function safeColor(value: string | undefined): string | null {
+  if (value === undefined) {
+    return null;
+  }
+  return CSS.supports("color", value) ? value : null;
+}
+
+/** The ring's paint: a flat border, or a gradient masked to the frame (border box less padding box). */
+function ringPaint(target: HTMLElement, options: HighlightOverlayOptions): string {
+  const color = safeColor(options.color) ?? ringColor(target, options.chat);
+  if (options.gradient !== true) {
+    return `border-color: ${color}`;
+  }
+  const image = tokenOn(
+    target,
+    "--ag-ui-highlight-gradient",
+    `linear-gradient(115deg, transparent 20%, ${color} 50%, transparent 80%)`,
+  );
+  const mask = "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)";
+  return [
+    `background-image: ${image}`,
+    "background-origin: border-box",
+    "background-size: 300% 100%",
+    `-webkit-mask: ${mask}`,
+    `mask: ${mask}`,
+    "-webkit-mask-composite: xor",
+    "mask-composite: exclude",
+    "background-position: 50% 0",
+  ].join(";");
+}
+
+/**
+ * A viewport-sized rectangle with a rounded rectangle cut out, as a path for
+ * `clip-path: path(evenodd, ...)`. Absolute commands, closed explicitly: an unparseable
+ * `clip-path` is dropped silently and the scrim would cover the target.
+ */
+function holePath(x: number, y: number, width: number, height: number, radius: number): string {
+  const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+  const right = x + width;
+  const bottom = y + height;
+  const outer = `M 0 0 H ${window.innerWidth} V ${window.innerHeight} H 0 Z`;
+  const hole = [
+    `M ${x + r} ${y}`,
+    `H ${right - r}`,
+    `A ${r} ${r} 0 0 1 ${right} ${y + r}`,
+    `V ${bottom - r}`,
+    `A ${r} ${r} 0 0 1 ${right - r} ${bottom}`,
+    `H ${x + r}`,
+    `A ${r} ${r} 0 0 1 ${x} ${bottom - r}`,
+    `V ${y + r}`,
+    `A ${r} ${r} 0 0 1 ${x + r} ${y}`,
+    "Z",
+  ].join(" ");
+  return `${outer} ${hole}`;
+}

package/src/dom/native_setter.ts

@@ -0,0 +1,40 @@
+// Set a control's `value` / `checked` through the native prototype setter, so
+// framework value-tracking sees the change. React (and Vue/Svelte) replace the
+// element's own setter with a tracked one, so `el.value = x` hits that override
+// and the following `input` event carries no change: the field looks filled
+// while the framework's state stays empty. Calling the original prototype
+// setter and then dispatching `input` avoids that.
+
+type ValueSetter = (this: HTMLElement, value: string) => void;
+type CheckedSetter = (this: HTMLElement, checked: boolean) => void;
+
+/** The original prototype setter for `prop` on `proto`. */
+function prototypeSetter(proto: object, prop: string): (this: HTMLElement, value: never) => void {
+  // Captured at module load; DOM environments always define these, so the cast is safe.
+  const setter = (Object.getOwnPropertyDescriptor(proto, prop) as PropertyDescriptor).set;
+  return setter as unknown as (this: HTMLElement, value: never) => void;
+}
+
+const setInputValue = prototypeSetter(HTMLInputElement.prototype, "value") as ValueSetter;
+const setTextareaValue = prototypeSetter(HTMLTextAreaElement.prototype, "value") as ValueSetter;
+const setSelectValue = prototypeSetter(HTMLSelectElement.prototype, "value") as ValueSetter;
+const setInputChecked = prototypeSetter(HTMLInputElement.prototype, "checked") as CheckedSetter;
+
+/** Set `el.value` via the element's native prototype setter. */
+export function setNativeValue(
+  el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement,
+  value: string,
+): void {
+  if (el instanceof HTMLTextAreaElement) {
+    setTextareaValue.call(el, value);
+  } else if (el instanceof HTMLSelectElement) {
+    setSelectValue.call(el, value);
+  } else {
+    setInputValue.call(el, value);
+  }
+}
+
+/** Set `el.checked` via the native prototype setter. */
+export function setNativeChecked(el: HTMLInputElement, checked: boolean): void {
+  setInputChecked.call(el, checked);
+}

package/src/dom/ring_color.ts

@@ -0,0 +1,206 @@
+import { ChatRegistration } from "../core/chat_registry.js";
+
+/** The public ring token, read from the target and then from the chat. */
+const RING_TOKEN = "--ag-ui-highlight-ring-color";
+
+/** The accent a host themes its page with, read from the target. */
+const ACCENT_TOKEN = "--ag-ui-accent";
+
+/**
+ * The accent the chat actually resolved, its theme's default included. Read
+ * through the private alias because the public token is unset on a page that
+ * themed nothing, which is exactly the page this exists for.
+ */
+const CHAT_ACCENT = "--_accent";
+
+/** The package indigo, for a page with no chat and no theming at all. */
+const PACKAGE_ACCENT = "#4f46e5";
+
+/**
+ * The colour a highlight ring is drawn in when the caller passed none.
+ *
+ * In order: `--ag-ui-highlight-ring-color` on the target, the same token on the chat, the
+ * target's `--ag-ui-accent`, the chat's resolved accent, the package indigo. The target's
+ * accent outranks the chat's default so a host theming its page keeps its rings; the ring
+ * token outranks both so a host can keep the ring apart from the accent. Only the
+ * chat's own accent is adjusted, since it follows the widget's scheme rather than the
+ * page's: it is held to 3:1 against the surface behind the target (see
+ * {@link surfaceBehind}) by trying the other half of its light-dark pair, then stepping
+ * toward black or white. Every other value is a host's choice and is drawn as given.
+ *
+ * `chat` defaults to the most recently connected `<ag-ui-chat>`.
+ */
+export function ringColor(target: HTMLElement, chat?: HTMLElement): string {
+  const onTarget = readToken(target, RING_TOKEN);
+  if (onTarget !== "") {
+    return onTarget;
+  }
+  const owner = chat ?? ChatRegistration.latest();
+  const onChat = owner === null ? "" : resolveOn(owner, RING_TOKEN);
+  if (onChat !== "") {
+    return onChat;
+  }
+  const accent = readToken(target, ACCENT_TOKEN);
+  if (accent !== "") {
+    return accent;
+  }
+  if (owner === null) {
+    return PACKAGE_ACCENT;
+  }
+  const chatAccent = resolveOn(owner, CHAT_ACCENT);
+  return chatAccent === "" ? PACKAGE_ACCENT : legible(owner, chatAccent, target);
+}
+
+/** The contrast a ring needs against what it is drawn on (WCAG 2.4.13). */
+const RING_CONTRAST = 3;
+
+/** How far each step moves a failing accent toward black or white. */
+const STEP = 0.1;
+
+type Rgba = readonly [number, number, number, number];
+
+/**
+ * `accent`, or the nearest variant of it that holds {@link RING_CONTRAST}
+ * against the surface behind `target`.
+ *
+ * Colours are compared as sRGB bytes painted onto a one-pixel canvas, the one
+ * reading that turns a resolved color-mix() or oklch() into numbers. Where
+ * there is no 2d context to paint on, nothing can be measured, and the accent
+ * is drawn as it was.
+ */
+function legible(chat: HTMLElement, accent: string, target: HTMLElement): string {
+  const paint = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+  if (paint === null) {
+    return accent;
+  }
+  const bytes = (color: string): Rgba => {
+    paint.clearRect(0, 0, 1, 1);
+    paint.fillStyle = "rgb(0 0 0 / 0)";
+    paint.fillStyle = color;
+    paint.fillRect(0, 0, 1, 1);
+    const [r = 0, g = 0, b = 0, a = 0] = paint.getImageData(0, 0, 1, 1).data;
+    return [r, g, b, a / 255];
+  };
+  const surface = surfaceBehind(target, bytes);
+  const holds = (color: Rgba): boolean => 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 !== undefined) {
+    return fit;
+  }
+  // Black or white, whichever the surface sets off better, holds at least
+  // 4.5:1 against any surface, so the walk always ends by the last step.
+  const from = over(bytes(accent), surface);
+  const black: Rgba = [0, 0, 0, 1];
+  const white: Rgba = [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})`;
+}
+
+/**
+ * The colour of the surface a ring around `target` is drawn on, as opaque
+ * sRGB bytes.
+ *
+ * The ring sits outside the target's border box (the flash outline is offset
+ * from it, the overlay leaves a gap), so the target's own fill is not under
+ * it: a white field on a dark page is ringed on the dark page. The surface is
+ * every background from the target's parent up, composited until one is
+ * opaque, over the page canvas, which follows the root's colour scheme. A
+ * background image is not read; its colour beneath is.
+ */
+function surfaceBehind(target: HTMLElement, bytes: (color: string) => Rgba): Rgba {
+  const layers: Rgba[] = [];
+  for (let el = parentOf(target); el !== null; el = parentOf(el)) {
+    const layer = bytes(window.getComputedStyle(el).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;
+}
+
+/** The element above `el`, crossing out of a shadow root to its host. */
+function parentOf(el: Element): Element | null {
+  if (el.parentElement !== null) {
+    return el.parentElement;
+  }
+  const root = el.getRootNode();
+  return root instanceof ShadowRoot ? root.host : null;
+}
+
+/** `top` painted over the opaque `under`. */
+function over(top: Rgba, under: Rgba): Rgba {
+  return mix(under, top, top[3]);
+}
+
+/** `from` moved `share` of the way to `to`, as opaque bytes. */
+function mix(from: Rgba, to: Rgba, share: number): Rgba {
+  const channel = (index: 0 | 1 | 2): number =>
+    Math.round(from[index] + (to[index] - from[index]) * share);
+  return [channel(0), channel(1), channel(2), 1];
+}
+
+/** WCAG relative luminance of opaque sRGB bytes. */
+function luminance([r, g, b]: Rgba): number {
+  const linear = (channel: number): number => {
+    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);
+}
+
+/** WCAG contrast ratio between two opaque colours. */
+function contrast(a: Rgba, b: Rgba): number {
+  const [la, lb] = [luminance(a), luminance(b)];
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+
+function readToken(el: HTMLElement, name: string): string {
+  return window.getComputedStyle(el).getPropertyValue(name).trim();
+}
+
+/**
+ * The custom property `name` on `chat`, as the colour it computes to there, or `""` when
+ * unset or not a colour.
+ *
+ * Resolved by a probe inside the shadow tree, because the chat's colours are `light-dark()`
+ * pairs that a custom property keeps unresolved: on a page element the pair would follow the
+ * page's scheme. An element with no open shadow root is read as it is. `scheme` forces one
+ * half of the pair, to find the chat's other accent.
+ */
+function resolveOn(chat: HTMLElement, name: string, scheme?: "light" | "dark"): string {
+  const value = readToken(chat, name);
+  const root = chat.shadowRoot;
+  if (value === "" || root === null) {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.hidden = true;
+  if (scheme !== undefined) {
+    probe.style.colorScheme = scheme;
+  }
+  probe.style.color = value;
+  // An unparseable value leaves the declaration empty; the probe would report an inherited colour.
+  if (probe.style.color === "") {
+    return "";
+  }
+  root.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved;
+}

package/src/dom/utils.ts

@@ -0,0 +1,5 @@
+/** Dispatch the `input` then `change` events frameworks listen for. */
+export function dispatchInputAndChange(el: HTMLElement): void {
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+}

package/src/index.ts

@@ -0,0 +1,220 @@
+// The package root. The element itself is the `./chat` entry (src/chat.ts).
+
+export {
+  ATTACHMENT_EVENT,
+  BAR_HEIGHT_EVENT,
+  CHART_ACTIVITY_TYPE,
+  COMPACTION_ACTIVITY_TYPE,
+  CUSTOM_AGENT_EVENT,
+  DOCK_WIDTH_EVENT,
+  ELEMENT_TAG,
+  FEEDBACK_EVENT,
+  INVALIDATE_CUSTOM_NAME,
+  INVALIDATE_EVENT,
+  LOAD_CAPABILITY_TOOL,
+  MAX_TOOL_ROUNDS,
+  MAXIMIZE_EVENT,
+  MESSAGE_ACTIONS,
+  MESSAGE_ROLE,
+  RUN_FINISHED_EVENT,
+  STATE_EVENT,
+  SUBMIT_EVENT,
+  SUGGESTIONS_ACTIVITY_TYPE,
+  THREAD_EVENT,
+  THREAD_TITLE_EVENT,
+  TOGGLE_EVENT,
+  TOOL_CALL_STATUS,
+  TOOL_DISPLAY,
+  TOOL_GROUP_DISPLAY,
+  TOOL_OUTCOME,
+  type ToolGroupDisplayMode,
+  UNREAD_EVENT,
+  X_CONFIRM_KEY,
+  X_DESTRUCTIVE_KEY,
+  X_NAVIGATES_KEY,
+  X_SUMMARY_KEY,
+} from "./constants.js";
+export type { ActivityRegistration } from "./core/activity_registration.js";
+export type { ActivityRenderer } from "./core/activity_renderer.js";
+export {
+  AgUiClient,
+  type AgUiClientConfig,
+  type AgUiClientHandlers,
+  type AgUiMessageIds,
+  type AgUiRunInputs,
+  type AgUiToolCall,
+  ConnectionLostError,
+  type ExecuteTool,
+  type InterruptResponse,
+  type ResolveInterrupts,
+  type ToolExecution,
+} from "./core/agui_client.js";
+export { type AttachmentRef, messageAttachments } from "./core/attachment.js";
+export {
+  type ClientConversationStore,
+  type NavigationCheckpoint,
+  SessionStorageStore,
+  type ThreadMeta,
+} from "./core/conversation_store.js";
+export {
+  type AgentFactory,
+  createHttpAgent,
+  type HttpAgentOptions,
+} from "./core/create_http_agent.js";
+export type { AttachmentsDetail } from "./core/events/attachments_detail.js";
+export type { BarHeightDetail } from "./core/events/bar_height_detail.js";
+export type { CustomAgentDetail } from "./core/events/custom_agent_detail.js";
+export type { DockWidthDetail } from "./core/events/dock_width_detail.js";
+export type { FeedbackDetail } from "./core/events/feedback_detail.js";
+export type { InvalidateDetail } from "./core/events/invalidate_detail.js";
+export type { MaximizeDetail } from "./core/events/maximize_detail.js";
+export type { RunFinishedDetail } from "./core/events/run_finished_detail.js";
+export type { StateDetail } from "./core/events/state_detail.js";
+export type { SubmitDetail } from "./core/events/submit_detail.js";
+export type { ThreadDetail } from "./core/events/thread_detail.js";
+export type { ThreadTitleDetail } from "./core/events/thread_title_detail.js";
+export type { ToggleDetail } from "./core/events/toggle_detail.js";
+export type { ToolRun } from "./core/events/tool_run.js";
+export type { UnreadDetail } from "./core/events/unread_detail.js";
+export type { MessageRole } from "./core/message_role.js";
+export { RemoteConversationStore } from "./core/remote_conversation_store.js";
+export { RunIndex, type RunRow } from "./core/run_index.js";
+export { type ToolOutcome, toolStatusFromOutcome } from "./core/tool_outcome.js";
+export {
+  type TranscribeHandler,
+  type TranscribeOptions,
+  transcribeAudio,
+} from "./core/transcribe_audio.js";
+export {
+  type UploadHandler,
+  type UploadOptions,
+  uploadAttachment,
+} from "./core/upload_attachment.js";
+export {
+  type FlashOptions,
+  flash,
+  focusWithFlash,
+  type HighlightClickOptions,
+  highlightThenClick,
+  type PressOptions,
+  prefersReducedMotion,
+  pressThenClick,
+  type RingOwnerOptions,
+  type ScrollOptions,
+  type SelectOptions,
+  scrollIntoCenterView,
+  selectOption,
+  type TextLikeElement,
+  type ToggleOptions,
+  type TypeOptions,
+  toggleControl,
+  typeInto,
+} from "./dom/animations.js";
+export {
+  clickElement,
+  type FillFieldOptions,
+  fillField,
+  pressButton,
+  selectControl,
+  setControlValue,
+  toggleCheckbox,
+} from "./dom/dom_driver.js";
+export {
+  type HighlightOverlayOptions,
+  showHighlightOverlay,
+} from "./dom/highlight_overlay.js";
+export { setNativeChecked, setNativeValue } from "./dom/native_setter.js";
+export type { Skill } from "./skills/skill.js";
+export {
+  CHAT_CORNERS,
+  type ChatCorner,
+  type ChatSurface,
+  type ChatSurfaceReport,
+  createChatSurfaceTools,
+  isChatCorner,
+} from "./tools/chat_surface_tools.js";
+export { type ClientTool, ClientToolRegistry } from "./tools/client_tool_registry.js";
+export { isDestructive } from "./tools/is_destructive.js";
+export { isNavigates } from "./tools/is_navigates.js";
+export {
+  createPageActionTools,
+  PAGE_ACTIONS,
+  type ResolvePageTarget,
+} from "./tools/page_action_tools.js";
+export { createPageMapContext, type PageMap } from "./tools/page_map.js";
+export { createPageStateTools, type PageState } from "./tools/page_state.js";
+export { parseToolCatalog, type ToolCatalogEntry } from "./tools/parse_tool_catalog.js";
+export {
+  createRouteTools,
+  type Route,
+  type RouteMap,
+  type RouteWithParams,
+} from "./tools/route_map.js";
+// Charts. `CHART_ACTIVITY_TYPE` above is the wire name a server sets on an
+// ACTIVITY_SNAPSHOT; these are the shape it carries and the renderer itself,
+// for a host building its own visual on the same seam.
+export type { ChartKind, ChartSeries, ChartSpec } from "./ui/charts/chart_block.js";
+export { renderChart } from "./ui/charts/chart_block.js";
+export { chartSpecFrom } from "./ui/charts/chart_spec_from.js";
+export { CHART_TOOL_NAME } from "./ui/charts/chart_tool.js";
+export {
+  attachQuoteOffer,
+  type PageQuoteOffer,
+  type PageQuoteOfferOptions,
+} from "./ui/excerpts/page_quote_offer.js";
+// Quoting. The transcript wires these itself; they are exported for the half
+// the component cannot reach -- a selection made in the **host page**, which
+// a host reads its own way and hands to `AgUiChat.quote()`.
+export {
+  asQuote,
+  MAX_QUOTE_CHARS,
+  type QuotableSelection,
+  quotableSelection,
+} from "./ui/excerpts/quote_selection.js";
+export { CheckpointMenu, type CheckpointVerb } from "./ui/history/checkpoint_menu.js";
+export {
+  type RelativeTimeFormatter,
+  relativeTime,
+} from "./ui/history/relative_time.js";
+export {
+  type ApprovalOptions,
+  type ApprovalRenderer,
+  type ApprovalRequest,
+  requestApproval,
+} from "./ui/interrupts/approval_card.js";
+export {
+  type ConfirmationOptions,
+  type ConfirmationRequest,
+  requestConfirmation,
+} from "./ui/interrupts/confirmation_card.js";
+export {
+  type QuestionOptions,
+  type QuestionRenderer,
+  type QuestionRequest,
+  requestQuestion,
+} from "./ui/interrupts/question_card.js";
+export type { Place } from "./ui/place/place.js";
+export { prettifyToolName } from "./ui/progress/prettify_tool_name.js";
+export {
+  type SettledStatus,
+  ToolCallCard,
+  type ToolCallCardOptions,
+  type ToolCallStatus,
+  type ToolDisplayMode,
+  type ToolPayload,
+  type ToolPayloadFormatter,
+} from "./ui/progress/tool_call_card.js";
+export {
+  attachMessageActions,
+  type MessageActionsOptions,
+  messageActionBar,
+} from "./ui/transcript/message_actions.js";
+export { type RenderMarkdownOptions, renderMarkdown } from "./ui/transcript/render_markdown.js";
+export {
+  MAX_SUGGESTION_CHARS,
+  MAX_SUGGESTIONS,
+  renderSuggestionChips,
+  suggestionPrompts,
+} from "./ui/transcript/suggestion_chips.js";
+export { DEFAULT_UI_STRINGS, mergeUiStrings, type UiStrings } from "./ui/ui_strings.js";
+export { VERSION } from "./version.js";