@artooi/ag-ui-web-component 0.1.0 → 0.2.0

package/dist/skills/fill_template.d.ts

@@ -0,0 +1,17 @@
+/** Result of {@link fillTemplate}: the filled text plus any unresolved keys. */
+export interface TemplateResult {
+    /** The prompt with resolved `{placeholder}`s substituted. */
+    readonly text: string;
+    /** Placeholder names with no value available (deduped, in first-seen order). */
+    readonly missing: readonly string[];
+}
+/**
+ * Substitute `{name}` placeholders in ``template`` from ``values``.
+ *
+ * A placeholder whose value is missing, ``null``, or an empty string is left
+ * verbatim and reported in ``missing`` — the caller blocks send and tells the
+ * user what's needed (e.g. "select rows first") rather than sending a
+ * half-filled prompt.
+ */
+export declare function fillTemplate(template: string, values: Record<string, unknown>): TemplateResult;
+//# sourceMappingURL=fill_template.d.ts.map

package/dist/skills/fill_template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill_template.d.ts","sourceRoot":"","sources":["../../src/skills/fill_template.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,MAAM,WAAW,cAAc;IAC7B,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;CACrC;AAID;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,cAAc,CAa9F"}

package/dist/skills/parse_skills.d.ts

@@ -0,0 +1,8 @@
+import type { Skill } from "./skill.js";
+/**
+ * Parse an untrusted value (parsed JSON from `data-skills` or a skills
+ * endpoint) into a list of {@link Skill}s, dropping anything malformed. Never
+ * throws — a bad payload yields an empty list.
+ */
+export declare function parseSkills(value: unknown): Skill[];
+//# sourceMappingURL=parse_skills.d.ts.map

package/dist/skills/parse_skills.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse_skills.d.ts","sourceRoot":"","sources":["../../src/skills/parse_skills.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAexC;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,CAKnD"}

package/dist/skills/skill.d.ts

@@ -0,0 +1,24 @@
+/**
+ * A pre-defined prompt the user can launch from the chat — surfaced as a chip
+ * and/or in the `/`-command palette. One catalog feeds both surfaces; the host
+ * provides skills via the `skills` property / `data-skills` attribute / a
+ * fetched endpoint (see {@link AgUiChat}).
+ */
+export interface Skill {
+    /** Stable id; the `/token` (kebab-case) in the palette. */
+    readonly name: string;
+    /** Label shown in chips and the palette. */
+    readonly title: string;
+    /** Secondary line shown in the palette. */
+    readonly description?: string;
+    /**
+     * The prompt inserted (or sent). May contain `{placeholder}`s filled from the
+     * host's skill context before send; an unfilled placeholder blocks send.
+     */
+    readonly prompt: string;
+    /** Send immediately on pick instead of pre-filling the input (default false). */
+    readonly sendImmediately?: boolean;
+    /** Also surface this skill as a chip (default false; the palette shows all). */
+    readonly chip?: boolean;
+}
+//# sourceMappingURL=skill.d.ts.map

package/dist/skills/skill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skill.d.ts","sourceRoot":"","sources":["../../src/skills/skill.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,KAAK;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,2CAA2C;IAC3C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,iFAAiF;IACjF,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,gFAAgF;IAChF,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/{client_tool_registry.d.ts → tools/client_tool_registry.d.ts}

@@ -21,7 +21,12 @@ export interface ClientTool {
  */
 export declare class ClientToolRegistry {
     #private;
-    /** Register a tool. Throws if the name is already taken. */
+    /**
+     * Register a tool, replacing any existing one with the same name.
+     *
+     * Idempotent on the name so re-fired host refs / React StrictMode's
+     * double-invoke don't throw — re-registering is a replace, not an error.
+     */
     register(tool: ClientTool): void;
     has(name: string): boolean;
     /** Return a registered tool or throw. */

package/dist/tools/client_tool_registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client_tool_registry.d.ts","sourceRoot":"","sources":["../../src/tools/client_tool_registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;CACxE;AAED;;;;;;GAMG;AACH,qBAAa,kBAAkB;;IAG7B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;IAIhC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAI1B,yCAAyC;IACzC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,UAAU;IAQ7B,wDAAwD;IACxD,KAAK,IAAI,IAAI,EAAE;CAOhB"}

package/dist/tools/is_destructive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is_destructive.d.ts","sourceRoot":"","sources":["../../src/tools/is_destructive.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAE1E"}

package/dist/tools/is_navigates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is_navigates.d.ts","sourceRoot":"","sources":["../../src/tools/is_navigates.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAExE"}

package/dist/tools/page_map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page_map.d.ts","sourceRoot":"","sources":["../../src/tools/page_map.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C;;;;GAIG;AACH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE9C;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,CAAC,MAAM,OAAO,CAAC,GAAG,IAAI,EAClC,UAAU,EAAE,OAAO,GAClB,OAAO,EAAE,CAKX"}

package/dist/tools/route_map.d.ts

@@ -0,0 +1,40 @@
+import type { ClientTool } from "./client_tool_registry.js";
+/** A single navigable route the host declares for the agent. */
+export interface Route {
+    /** Stable id the agent uses with `navigate_to_route`. */
+    readonly id: string;
+    /**
+     * The URL path to navigate to. May contain `:name` placeholders for dynamic
+     * segments (e.g. `/admin/shop/book/:pk/change/`); the agent fills them via
+     * the `navigate_to_route` `params` argument. Real apps are mostly
+     * parameterised — few pages have a truly static path.
+     */
+    readonly path: string;
+    /** Human label shown to the agent. */
+    readonly title?: string;
+    /** Optional grouping (e.g. an app or section). */
+    readonly group?: string;
+    /** Optional longer description of when to use the route. */
+    readonly description?: string;
+}
+/** The host-declared catalog of navigable routes. */
+export type RouteMap = readonly Route[];
+/** A route enriched with its derived dynamic-segment parameter names. */
+export interface RouteWithParams extends Route {
+    /** Names of the `:name` placeholders in {@link Route.path} (may be empty). */
+    readonly pathParams: readonly string[];
+}
+/**
+ * The built-in `route.*` tools, bound to live getters so a host can set
+ * `routeMap` / `navigate` before or after mount.
+ *
+ * `list_routes` is read-only and advertises each route's dynamic
+ * `pathParams` so the model knows what to supply. `navigate_to_route` is marked
+ * `x-navigates` so an MPA reload checkpoints + resumes; it substitutes path
+ * params into the template and appends any remaining params as a query string.
+ * When the host supplies a `navigate(path)` callback (an SPA), the element
+ * routes client-side instead and the run loop simply continues — see
+ * `AgUiChat`'s execute path.
+ */
+export declare function createRouteTools(getRouteMap: () => RouteMap, getNavigate: () => ((path: string) => void) | null): ClientTool[];
+//# sourceMappingURL=route_map.d.ts.map

package/dist/tools/route_map.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"route_map.d.ts","sourceRoot":"","sources":["../../src/tools/route_map.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,gEAAgE;AAChE,MAAM,WAAW,KAAK;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,4DAA4D;IAC5D,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED,qDAAqD;AACrD,MAAM,MAAM,QAAQ,GAAG,SAAS,KAAK,EAAE,CAAC;AAExC,yEAAyE;AACzE,MAAM,WAAW,eAAgB,SAAQ,KAAK;IAC5C,8EAA8E;IAC9E,QAAQ,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;CACxC;AAmDD;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,QAAQ,EAC3B,WAAW,EAAE,MAAM,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,GACjD,UAAU,EAAE,CA4Cd"}

package/dist/tools/state_hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state_hook.d.ts","sourceRoot":"","sources":["../../src/tools/state_hook.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,uCAAuC;IACvC,QAAQ,CAAC,IAAI,EAAE,MAAM,OAAO,CAAC;IAC7B,0EAA0E;IAC1E,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC;IAC5D,uEAAuE;IACvE,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC3C;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,SAAS,GAAG,UAAU,EAAE,CAmBlE"}

package/dist/ui/confirmation_card.d.ts

@@ -0,0 +1,22 @@
+/** What the inline confirmation card displays. */
+export interface ConfirmationRequest {
+    toolName: string;
+    args: Record<string, unknown>;
+    /**
+     * Human-readable prompt (from the tool's `x-confirm` metadata), e.g.
+     * "Activate this project?". Falls back to a generic `Run "<tool>"?`.
+     */
+    message?: string;
+}
+/**
+ * Append an inline confirmation card to ``host`` (the chat message list) and
+ * resolve when the user decides.
+ *
+ * Unlike a modal overlay, the card lives in the transcript right where the
+ * action is — it reads naturally after the assistant's explanation and never
+ * steals focus from the page. Resolves ``true`` on confirm, ``false`` on
+ * cancel. The card stays in the transcript as a resolved record (buttons
+ * disabled, `data-resolved` set) rather than vanishing.
+ */
+export declare function requestConfirmation(host: Node & ParentNode, request: ConfirmationRequest): Promise<boolean>;
+//# sourceMappingURL=confirmation_card.d.ts.map

package/dist/ui/confirmation_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirmation_card.d.ts","sourceRoot":"","sources":["../../src/ui/confirmation_card.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAWD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,IAAI,GAAG,UAAU,EACvB,OAAO,EAAE,mBAAmB,GAC3B,OAAO,CAAC,OAAO,CAAC,CAqClB"}

package/dist/ui/render_markdown.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Render markdown (and any embedded raw HTML) to a sanitised HTML string.
+ *
+ * Both markdown syntax and literal HTML flow through one path: `marked` emits
+ * HTML, then DOMPurify strips everything outside {@link ALLOWED_TAGS} /
+ * {@link ALLOWED_ATTR} (scripts, event handlers, `javascript:` URLs, etc.).
+ * Links are hardened with `target="_blank"` + `rel="noopener noreferrer"`.
+ *
+ * The result is trimmed so a single-paragraph message round-trips to clean
+ * `textContent` (no trailing newline from the wrapping `<p>`).
+ */
+export declare function renderMarkdown(text: string): string;
+//# sourceMappingURL=render_markdown.d.ts.map

package/dist/ui/render_markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render_markdown.d.ts","sourceRoot":"","sources":["../../src/ui/render_markdown.ts"],"names":[],"mappings":"AA8CA;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAUnD"}

package/dist/ui/reveal_words.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Wrap each word under ``root`` in `<span class="word" style="--ag-ui-word-index: N">`
+ * so CSS can reveal them one-by-one (staggered by the index). Whitespace is
+ * preserved as plain text. Used for the `word` text-animation mode on a
+ * completed assistant message; pure DOM, idempotent enough to re-run.
+ */
+export declare function wrapWords(root: HTMLElement): void;
+//# sourceMappingURL=reveal_words.d.ts.map

package/dist/ui/reveal_words.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reveal_words.d.ts","sourceRoot":"","sources":["../../src/ui/reveal_words.ts"],"names":[],"mappings":"AAWA;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAuBjD"}

package/dist/ui/skills_menu.d.ts

@@ -0,0 +1,35 @@
+import type { Skill } from "../skills/skill.js";
+/**
+ * The two skill surfaces over a single catalog: a **chips** row (the
+ * `chip: true` subset) and a **`/`-command palette** (all skills, filtered).
+ * Both are opt-in. Pure DOM; the host ({@link AgUiChat}) appends
+ * {@link chips} + {@link palette}, feeds input via {@link onInput} /
+ * {@link onKeydown}, and acts on the {@link onPick} callback.
+ */
+export declare class SkillsMenu {
+    #private;
+    /** Chips row — append above the input. Hidden unless chips are enabled and present. */
+    readonly chips: HTMLDivElement;
+    /** The `/`-command dropdown — append in the input area. Hidden until opened. */
+    readonly palette: HTMLDivElement;
+    constructor(onPick: (skill: Skill) => void);
+    /** Replace the catalog (both surfaces re-derive from it). */
+    setSkills(skills: readonly Skill[]): void;
+    enableChips(enabled: boolean): void;
+    enableSlash(enabled: boolean): void;
+    /** Whether the palette is currently open. */
+    isOpen(): boolean;
+    /**
+     * React to an input value change: open + filter the palette when slash mode
+     * is on and the value starts with `/`, otherwise close it.
+     */
+    onInput(value: string): void;
+    /**
+     * Handle a keydown while the palette is open. Returns ``true`` when consumed
+     * (the host should `preventDefault` and skip its own handling).
+     */
+    onKeydown(event: KeyboardEvent): boolean;
+    /** Close the palette. */
+    close(): void;
+}
+//# sourceMappingURL=skills_menu.d.ts.map

package/dist/ui/skills_menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skills_menu.d.ts","sourceRoot":"","sources":["../../src/ui/skills_menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;;;;GAMG;AACH,qBAAa,UAAU;;IACrB,uFAAuF;IACvF,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC;IAC/B,gFAAgF;IAChF,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBASrB,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI;IAW1C,6DAA6D;IAC7D,SAAS,CAAC,MAAM,EAAE,SAAS,KAAK,EAAE,GAAG,IAAI;IAKzC,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAKnC,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAInC,6CAA6C;IAC7C,MAAM,IAAI,OAAO;IAIjB;;;OAGG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQ5B;;;OAGG;IACH,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO;IA2BxC,yBAAyB;IACzB,KAAK,IAAI,IAAI;CAyEd"}

package/dist/ui/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const STYLES = "\n:host {\n  /* Colors */\n  --ag-ui-bg: #ffffff;\n  --ag-ui-fg: #1a1a2e;\n  --ag-ui-accent: #4f46e5;\n  --ag-ui-user-bg: #4f46e5;\n  --ag-ui-user-fg: #ffffff;\n  --ag-ui-assistant-bg: #f1f1f6;\n  --ag-ui-input-bg: var(--ag-ui-bg);\n  --ag-ui-tool-bg: var(--ag-ui-assistant-bg);\n  --ag-ui-tool-fg: var(--ag-ui-accent);\n  --ag-ui-header-bg: var(--ag-ui-accent);\n  --ag-ui-header-fg: #ffffff;\n  --ag-ui-border: #e2e2ec;\n  --ag-ui-radius: 12px;\n\n  /* Status accents for tool-call cards. */\n  --ag-ui-success: #15803d;\n  --ag-ui-danger: #b91c1c;\n  --ag-ui-muted: #6b7280;\n\n  /* Surface \u2014 set --ag-ui-shadow: none for a flush, embedded panel. */\n  --ag-ui-shadow: 0 12px 32px rgba(20, 20, 50, 0.18);\n  --ag-ui-font: inherit;\n  --ag-ui-font-size: 14px;\n  --ag-ui-code-font: ui-monospace, \"SF Mono\", Menlo, monospace;\n\n  /* Spacing \u2014 the density preset overrides these. */\n  --ag-ui-space: 10px;\n  --ag-ui-pad: 16px;\n  --ag-ui-msg-pad: 8px 12px;\n  --ag-ui-msg-radius: 14px;\n\n  /* Layout \u2014 override from outside to dock the widget anywhere.\n     Set --ag-ui-position: static (and place this element in your own\n     grid/flex layout) to embed it in the page flow instead of floating. */\n  --ag-ui-position: fixed;\n  --ag-ui-z-index: 2147483000;\n  --ag-ui-width: 380px;\n  --ag-ui-height: 560px;\n  --ag-ui-inset: auto 24px 24px auto;\n  --ag-ui-max-width: calc(100vw - 48px);\n  --ag-ui-max-height: calc(100vh - 48px);\n\n  position: var(--ag-ui-position);\n  inset: var(--ag-ui-inset);\n  z-index: var(--ag-ui-z-index);\n  width: var(--ag-ui-width);\n  max-width: var(--ag-ui-max-width);\n  height: var(--ag-ui-height);\n  max-height: var(--ag-ui-max-height);\n  display: flex;\n  font-family: var(--ag-ui-font);\n  font-size: var(--ag-ui-font-size);\n  color: var(--ag-ui-fg);\n}\n\n/* \u2500\u2500 Themes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Themes only re-set the colour variables; layout/spacing are unaffected.\n   theme=\"auto\" follows the OS via prefers-color-scheme. */\n:host([theme=\"dark\"]) {\n  --ag-ui-bg: #15151f;\n  --ag-ui-fg: #e8e8f2;\n  --ag-ui-assistant-bg: #25253a;\n  --ag-ui-header-bg: #1f1f30;\n  --ag-ui-header-fg: #e8e8f2;\n  --ag-ui-border: #33334a;\n  --ag-ui-muted: #9aa0b4;\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]) {\n    --ag-ui-bg: #15151f;\n    --ag-ui-fg: #e8e8f2;\n    --ag-ui-assistant-bg: #25253a;\n    --ag-ui-header-bg: #1f1f30;\n    --ag-ui-header-fg: #e8e8f2;\n    --ag-ui-border: #33334a;\n    --ag-ui-muted: #9aa0b4;\n    --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);\n  }\n}\n\n/* A terminal-flavoured \"code\" theme: dark, monospace, green accent. */\n:host([theme=\"code\"]) {\n  --ag-ui-bg: #0d1117;\n  --ag-ui-fg: #c9d1d9;\n  --ag-ui-accent: #3fb950;\n  --ag-ui-user-bg: #238636;\n  --ag-ui-assistant-bg: #161b22;\n  --ag-ui-header-bg: #010409;\n  --ag-ui-header-fg: #c9d1d9;\n  --ag-ui-border: #30363d;\n  --ag-ui-muted: #8b949e;\n  --ag-ui-font: var(--ag-ui-code-font);\n  --ag-ui-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);\n}\n\n/* \u2500\u2500 Density \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([density=\"compact\"]) {\n  --ag-ui-font-size: 13px;\n  --ag-ui-space: 6px;\n  --ag-ui-pad: 10px;\n  --ag-ui-msg-pad: 5px 9px;\n  --ag-ui-msg-radius: 10px;\n}\n\n/* \u2500\u2500 Placement presets \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([placement=\"bottom-left\"]) {\n  --ag-ui-inset: auto auto 24px 24px;\n}\n\n:host([placement=\"side\"]) {\n  --ag-ui-inset: 0 0 0 auto;\n  --ag-ui-width: 420px;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n:host([placement=\"full\"]) {\n  --ag-ui-inset: 0;\n  --ag-ui-width: 100vw;\n  --ag-ui-height: 100vh;\n  --ag-ui-max-width: 100vw;\n  --ag-ui-max-height: 100vh;\n  --ag-ui-radius: 0;\n}\n\n/* Embedded: drop the floating chrome and the high z-index stacking context so\n   the widget lives in the host's own layout (fixes overlay/z-index clashes). */\n:host([placement=\"embedded\"]) {\n  --ag-ui-position: static;\n  --ag-ui-width: 100%;\n  --ag-ui-height: 100%;\n  --ag-ui-max-width: 100%;\n  --ag-ui-max-height: 100%;\n  --ag-ui-shadow: none;\n  --ag-ui-z-index: auto;\n}\n\n.chat {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: var(--ag-ui-radius);\n  box-shadow: var(--ag-ui-shadow);\n  overflow: hidden;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--ag-ui-border);\n  background: var(--ag-ui-header-bg);\n  color: var(--ag-ui-header-fg);\n}\n\n.header-title {\n  font-weight: 600;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.header-controls {\n  display: flex;\n  gap: 2px;\n  flex: none;\n}\n\n.header-btn {\n  border: none;\n  background: transparent;\n  color: inherit;\n  font: inherit;\n  line-height: 1;\n  padding: 4px 7px;\n  border-radius: 6px;\n  cursor: pointer;\n  opacity: 0.85;\n}\n\n.header-btn:hover {\n  opacity: 1;\n  background: rgba(255, 255, 255, 0.18);\n}\n\n/* Collapsed: keep just the header bar \u2014 hide the whole body, and let the host\n   shrink to the header. (A host can also fully hide the element itself.) */\n:host([collapsed]) {\n  height: auto;\n  max-height: none;\n}\n\n:host([collapsed]) .messages,\n:host([collapsed]) .input-row,\n:host([collapsed]) .skill-chips,\n:host([collapsed]) .skill-palette,\n:host([collapsed]) .skill-hint {\n  display: none;\n}\n\n/* Edge-docked placements pin top *and* bottom, which would otherwise keep the\n   panel full-height when collapsed; unpin the bottom so it shrinks to the\n   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */\n:host([collapsed][placement=\"side\"]),\n:host([collapsed][placement=\"full\"]) {\n  bottom: auto;\n}\n\n.messages {\n  flex: 1;\n  overflow-y: auto;\n  padding: var(--ag-ui-pad);\n  display: flex;\n  flex-direction: column;\n  gap: var(--ag-ui-space);\n}\n\n.message {\n  max-width: 80%;\n  padding: var(--ag-ui-msg-pad);\n  border-radius: var(--ag-ui-msg-radius);\n  line-height: 1.4;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n/* \u2500\u2500 Incoming-text animations (data-text-animation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n:host([data-text-animation=\"fade\"]) .message--assistant {\n  animation: ag-ui-msg-fade 0.25s ease both;\n}\n\n@keyframes ag-ui-msg-fade {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: none; }\n}\n\n.message--assistant .word {\n  animation: ag-ui-word-in 0.3s ease both;\n  animation-delay: calc(var(--ag-ui-word-index, 0) * 35ms);\n}\n\n@keyframes ag-ui-word-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host([data-text-animation=\"fade\"]) .message--assistant,\n  .message--assistant .word {\n    animation: none;\n  }\n}\n\n.message--user {\n  align-self: flex-end;\n  background: var(--ag-ui-user-bg);\n  color: var(--ag-ui-user-fg);\n  border-bottom-right-radius: 4px;\n}\n\n.message--assistant {\n  align-self: flex-start;\n  background: var(--ag-ui-assistant-bg);\n  border-bottom-left-radius: 4px;\n  /* Assistant bubbles hold rendered markdown/HTML, so collapse the source\n     whitespace the renderer leaves between block tags. */\n  white-space: normal;\n}\n\n/* Rendered-markdown elements inside an assistant bubble. */\n.message--assistant > :first-child {\n  margin-top: 0;\n}\n\n.message--assistant > :last-child {\n  margin-bottom: 0;\n}\n\n.message--assistant p,\n.message--assistant ul,\n.message--assistant ol,\n.message--assistant blockquote,\n.message--assistant pre {\n  margin: 0.5em 0;\n}\n\n.message--assistant ul,\n.message--assistant ol {\n  padding-left: 1.3em;\n}\n\n.message--assistant a {\n  color: var(--ag-ui-accent);\n  text-decoration: underline;\n}\n\n.message--assistant code {\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  font-size: 0.92em;\n  background: rgba(127, 127, 127, 0.16);\n  padding: 1px 4px;\n  border-radius: 4px;\n}\n\n.message--assistant pre {\n  padding: 8px 10px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n}\n\n.message--assistant pre code {\n  background: none;\n  padding: 0;\n}\n\n.message--assistant blockquote {\n  padding-left: 10px;\n  border-left: 3px solid var(--ag-ui-border);\n  color: var(--ag-ui-muted);\n}\n\n.pending {\n  align-self: flex-start;\n  display: inline-flex;\n  gap: 4px;\n  align-items: center;\n  padding: 12px 14px;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 14px;\n  border-bottom-left-radius: 4px;\n}\n\n.pending-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--ag-ui-muted);\n  animation: ag-ui-pending 1.2s infinite ease-in-out both;\n}\n\n.pending-dot:nth-child(2) {\n  animation-delay: 0.16s;\n}\n\n.pending-dot:nth-child(3) {\n  animation-delay: 0.32s;\n}\n\n@keyframes ag-ui-pending {\n  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }\n  40% { opacity: 1; transform: translateY(-3px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pending-dot {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n\n.tool-call {\n  align-self: flex-start;\n  max-width: 80%;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--ag-ui-tool-bg);\n  border: 1px solid var(--ag-ui-border);\n  color: var(--ag-ui-tool-fg);\n}\n\n.tool-call-head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.tool-call-name {\n  font-weight: 600;\n  word-break: break-word;\n}\n\n.tool-call-status {\n  flex: none;\n  padding: 1px 8px;\n  border-radius: 999px;\n  font-size: 11px;\n  font-weight: 600;\n  background: rgba(127, 127, 127, 0.16);\n  color: var(--ag-ui-muted);\n}\n\n.tool-call[data-status=\"done\"] .tool-call-status {\n  color: var(--ag-ui-success);\n}\n\n.tool-call[data-status=\"error\"] .tool-call-status {\n  color: var(--ag-ui-danger);\n}\n\n.tool-call[data-status=\"declined\"] .tool-call-status {\n  color: var(--ag-ui-muted);\n}\n\n.tool-call-args,\n.tool-call-result {\n  margin: 0;\n  padding: 6px 8px;\n  max-height: 160px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 6px;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--ag-ui-fg);\n}\n\n.tool-call-toggle {\n  align-self: flex-start;\n  border: none;\n  padding: 0;\n  background: none;\n  font: inherit;\n  font-weight: 600;\n  color: var(--ag-ui-accent);\n  cursor: pointer;\n}\n\n.tool-call-toggle::before {\n  content: \"\u25B8 \";\n}\n\n.tool-call-toggle[aria-expanded=\"true\"]::before {\n  content: \"\u25BE \";\n}\n\n.input-row {\n  display: flex;\n  gap: 8px;\n  padding: 12px;\n  border-top: 1px solid var(--ag-ui-border);\n}\n\n.input {\n  flex: 1;\n  resize: none;\n  background: var(--ag-ui-input-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 10px;\n  font: inherit;\n  color: inherit;\n  outline: none;\n}\n\n.input:focus {\n  border-color: var(--ag-ui-accent);\n}\n\n.send {\n  border: none;\n  border-radius: 8px;\n  padding: 0 16px;\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.send:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n\n/* Inline confirmation card \u2014 lives in the transcript, no focus-stealing overlay. */\n.confirm {\n  align-self: stretch;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-accent);\n  border-radius: 10px;\n}\n\n.confirm[data-resolved] {\n  opacity: 0.7;\n  border-color: var(--ag-ui-border);\n}\n\n.confirm-body {\n  font-weight: 600;\n}\n\n.confirm-args {\n  margin: 0;\n  padding: 8px 10px;\n  max-height: 140px;\n  overflow: auto;\n  font-size: 12px;\n  font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n  background: var(--ag-ui-assistant-bg);\n  border-radius: 8px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n\n.confirm-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.confirm-btn {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  padding: 8px 14px;\n  font: inherit;\n  font-weight: 600;\n  cursor: pointer;\n  background: var(--ag-ui-bg);\n  color: var(--ag-ui-fg);\n}\n\n.confirm-btn:disabled {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.confirm-btn--confirm {\n  border-color: var(--ag-ui-accent);\n  background: var(--ag-ui-accent);\n  color: #ffffff;\n}\n\n/* Skills \u2014 chips row + the /-command palette, above the input. */\n.skill-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 10px 12px;\n}\n\n.skill-chip {\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 999px;\n  padding: 4px 12px;\n  font: inherit;\n  font-size: 0.9em;\n  cursor: pointer;\n  background: var(--ag-ui-assistant-bg);\n  color: var(--ag-ui-fg);\n}\n\n.skill-chip:hover {\n  border-color: var(--ag-ui-accent);\n}\n\n.skill-palette {\n  margin: 8px 12px 0;\n  display: flex;\n  flex-direction: column;\n  max-height: 220px;\n  overflow: auto;\n  background: var(--ag-ui-bg);\n  border: 1px solid var(--ag-ui-border);\n  border-radius: 8px;\n  box-shadow: 0 8px 24px rgba(20, 20, 50, 0.16);\n}\n\n.skill-item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  align-items: flex-start;\n  padding: 8px 12px;\n  border: none;\n  background: none;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  color: var(--ag-ui-fg);\n}\n\n.skill-item[aria-selected=\"true\"] {\n  background: var(--ag-ui-assistant-bg);\n}\n\n.skill-item-title {\n  font-weight: 600;\n}\n\n.skill-item-desc {\n  font-size: 0.85em;\n  color: var(--ag-ui-muted);\n}\n\n.skill-hint {\n  margin: 8px 12px 0;\n  font-size: 0.85em;\n  color: var(--ag-ui-danger);\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/ui/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,k/dAknBlB,CAAC"}

package/dist/ui/tool_call_card.d.ts

@@ -0,0 +1,35 @@
+import { TOOL_CALL_STATUS, TOOL_DISPLAY } from "../constants.js";
+/** Any state a tool-call card can be in. */
+export type ToolCallStatus = (typeof TOOL_CALL_STATUS)[keyof typeof TOOL_CALL_STATUS];
+/** How much detail a card renders. */
+export type ToolDisplayMode = (typeof TOOL_DISPLAY)[keyof typeof TOOL_DISPLAY];
+/** The terminal states a card settles into (everything but `pending`). */
+export type SettledStatus = Exclude<ToolCallStatus, typeof TOOL_CALL_STATUS.PENDING>;
+/**
+ * A live tool-call card for the chat transcript.
+ *
+ * Construction renders the tool name and a `running…` status pill; in `full`
+ * mode it also shows the pretty-printed arguments inline. {@link settle} later
+ * flips the pill to the outcome and — depending on the {@link ToolDisplayMode} —
+ * appends a collapsible body:
+ *
+ * - `minimal` — pill only; nothing to expand.
+ * - `compact` — one "Details" toggle revealing args *and* result together.
+ * - `full` — the result (or error / decline message) behind its own toggle.
+ *
+ * Pure DOM (no framework); the host appends {@link element} into its shadow
+ * root and themes it via the `--ag-ui-*` custom properties.
+ */
+export declare class ToolCallCard {
+    #private;
+    /** The card's root element; append this into the message list. */
+    readonly element: HTMLDivElement;
+    constructor(name: string, args: Record<string, unknown>, mode?: ToolDisplayMode, summary?: string);
+    /**
+     * Flip the status pill to ``status`` and, unless in `minimal` mode, append a
+     * collapsed body behind a click-to-expand toggle: the result alone (`full`),
+     * or the args + result together (`compact`).
+     */
+    settle(status: SettledStatus, text: string): void;
+}
+//# sourceMappingURL=tool_call_card.d.ts.map

package/dist/ui/tool_call_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool_call_card.d.ts","sourceRoot":"","sources":["../../src/ui/tool_call_card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEjE,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAEtF,sCAAsC;AACtC,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAE/E,0EAA0E;AAC1E,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,EAAE,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAiBrF;;;;;;;;;;;;;;GAcG;AACH,qBAAa,YAAY;;IACvB,kEAAkE;IAClE,QAAQ,CAAC,OAAO,EAAE,cAAc,CAAC;gBAO/B,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,IAAI,GAAE,eAAmC,EACzC,OAAO,CAAC,EAAE,MAAM;IAkClB;;;;OAIG;IACH,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAiClD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artooi/ag-ui-web-component",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Framework-free <ag-ui-chat> Web Component over the AG-UI protocol. Drop-in chat sidebar with a pluggable client-side tool registry, DOM driver primitives, animations, and destructive-action confirmation modal.",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,11 +52,13 @@
     "provenance": true
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "dependencies": {
     "@ag-ui/client": ">=0.0.54 <0.1",
-    "@ag-ui/core": ">=0.0.54 <0.1"
+    "@ag-ui/core": ">=0.0.54 <0.1",
+    "dompurify": "^3.4.7",
+    "marked": "^18.0.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.0",

package/src/constants.ts

@@ -11,6 +11,14 @@ export const ELEMENT_TAG = "ag-ui-chat";
  */
 export const SUBMIT_EVENT = "ag-ui-submit";
 
+/**
+ * Event dispatched by `<ag-ui-chat>` when its collapsed state changes (via the
+ * built-in toggle or {@link setCollapsed}). `detail` carries
+ * `{ collapsed: boolean }`. A host can listen to drive its own chrome, or hide
+ * the built-in toggle and drive the `collapsed` attribute itself.
+ */
+export const TOGGLE_EVENT = "ag-ui-toggle";
+
 /** Roles a chat message can take. */
 export const MESSAGE_ROLE = {
   USER: "user",
@@ -25,6 +33,21 @@ export const MESSAGE_ROLE = {
  */
 export const X_DESTRUCTIVE_KEY = "x-destructive";
 
+/**
+ * JSON-Schema extension key carrying a human-readable confirmation prompt for a
+ * destructive tool (e.g. `"Activate this project?"`). Mirrors the `django-ag-ui`
+ * server side. When present, the inline confirmation card shows this instead of
+ * the generic `Run "<tool>"?`.
+ */
+export const X_CONFIRM_KEY = "x-confirm";
+
+/**
+ * JSON-Schema extension key carrying a short human-readable label for a tool
+ * (e.g. `"Query orders"` for `query_model`). Mirrors the `django-ag-ui` server
+ * side; the tool-call card shows it instead of the raw tool name when present.
+ */
+export const X_SUMMARY_KEY = "x-summary";
+
 /**
  * JSON-Schema extension key marking a tool as navigating — its handler triggers
  * a full page reload (an MPA navigation). When a tool's `parameters` carries
@@ -46,3 +69,18 @@ export const TOOL_CALL_STATUS = {
   ERROR: "error",
   DECLINED: "declined",
 } as const;
+
+/**
+ * How much detail a tool-call card shows. Set via the `data-tool-display`
+ * attribute on `<ag-ui-chat>`; defaults to `full` (back-compatible).
+ *
+ * - `minimal` — just the tool name + status pill. No args, no result body.
+ * - `compact` — name + status, with args *and* result tucked behind a single
+ *   collapsed "Details" toggle. The light default for dense UIs.
+ * - `full` — args shown inline, result behind its own toggle (the original).
+ */
+export const TOOL_DISPLAY = {
+  MINIMAL: "minimal",
+  COMPACT: "compact",
+  FULL: "full",
+} as const;