@artooi/ag-ui-web-component 0.12.0 → 0.14.0

package/dist/index.js

@@ -2,6 +2,7 @@
 var ELEMENT_TAG = "ag-ui-chat";
 var SUBMIT_EVENT = "ag-ui-submit";
 var TOGGLE_EVENT = "ag-ui-toggle";
+var STATE_EVENT = "ag-ui-state";
 var MESSAGE_ROLE = {
   USER: "user",
   ASSISTANT: "assistant"
@@ -29,6 +30,8 @@ var TOOL_DISPLAY = {
   COMPACT: "compact",
   FULL: "full"
 };
+var COMPACTION_ACTIVITY_TYPE = "compaction";
+var LOAD_CAPABILITY_TOOL = "load_capability";
 
 // src/skills/fill_template.ts
 var PLACEHOLDER_RE = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g;
@@ -318,6 +321,38 @@ function createPageMapContext(getPageMap, autoInject) {
   return [{ description: "page_map", value: JSON.stringify(getPageMap()) }];
 }
 
+// src/tools/page_state.ts
+function createPageStateTools(binding) {
+  const tools = [
+    {
+      name: `read_${binding.name}`,
+      description: `Read the "${binding.name}" state.`,
+      parameters: {
+        type: "object",
+        properties: {},
+        required: [],
+        [X_SUMMARY_KEY]: `Read ${binding.name}`
+      },
+      handler: () => binding.read()
+    }
+  ];
+  const write = binding.write;
+  if (write !== void 0) {
+    tools.push({
+      name: `set_${binding.name}`,
+      description: `Update the "${binding.name}" state.`,
+      parameters: {
+        ...binding.schema ?? { type: "object" },
+        [X_DESTRUCTIVE_KEY]: true,
+        [X_SUMMARY_KEY]: `Update ${binding.name}`
+      },
+      handler: (args) => write(args)
+    });
+  }
+  return tools;
+}
+var createStateHookTools = createPageStateTools;
+
 // src/tools/parse_tool_catalog.ts
 function parseToolCatalog(data) {
   const out = {};
@@ -412,37 +447,6 @@ function createRouteTools(getRouteMap, getNavigate) {
   ];
 }
 
-// src/tools/state_hook.ts
-function createStateHookTools(hook) {
-  const tools = [
-    {
-      name: `read_${hook.name}`,
-      description: `Read the "${hook.name}" state.`,
-      parameters: {
-        type: "object",
-        properties: {},
-        required: [],
-        [X_SUMMARY_KEY]: `Read ${hook.name}`
-      },
-      handler: () => hook.read()
-    }
-  ];
-  const write = hook.write;
-  if (write !== void 0) {
-    tools.push({
-      name: `set_${hook.name}`,
-      description: `Update the "${hook.name}" state.`,
-      parameters: {
-        ...hook.schema ?? { type: "object" },
-        [X_DESTRUCTIVE_KEY]: true,
-        [X_SUMMARY_KEY]: `Update ${hook.name}`
-      },
-      handler: (args) => write(args)
-    });
-  }
-  return tools;
-}
-
 // src/ui/ui_strings.ts
 var DEFAULT_UI_STRINGS = {
   title: "Assistant",
@@ -464,6 +468,8 @@ var DEFAULT_UI_STRINGS = {
   noResult: "No result returned.",
   declinedAction: "User declined the action.",
   navigating: "Navigating\u2026",
+  historyCompacted: "Earlier turns condensed to fit the context window ({count} removed)",
+  usingSkill: "Using skill {name}",
   skillNeeds: "\u201C{title}\u201D needs: {fields}",
   message: "Message",
   inputPlaceholder: "Ask anything\u2026",
@@ -3713,6 +3719,25 @@ function wrapWords(root) {
   }
 }
 
+// src/ui/run_notice.ts
+function renderRunNotice(icon, text2, kind) {
+  const notice = document.createElement("div");
+  notice.className = `run-notice run-notice--${kind}`;
+  notice.setAttribute("part", `run-notice run-notice-${kind}`);
+  notice.setAttribute("role", "status");
+  const glyph = document.createElement("span");
+  glyph.className = "run-notice-icon";
+  glyph.setAttribute("part", "run-notice-icon");
+  glyph.textContent = icon;
+  glyph.setAttribute("aria-hidden", "true");
+  const label = document.createElement("span");
+  label.className = "run-notice-text";
+  label.setAttribute("part", "run-notice-text");
+  label.textContent = text2;
+  notice.append(glyph, label);
+  return notice;
+}
+
 // src/ui/skills_menu.ts
 var SkillsMenu = class {
   /** Chips row — append above the input. Hidden unless chips are enabled and present. */
@@ -4746,6 +4771,32 @@ var STYLES = `
   margin-top: 6px;
 }
 
+.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(--ag-ui-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--ag-ui-muted);
+  font-size: 0.8em;
+  line-height: 1.4;
+}
+
+.run-notice-icon {
+  flex: none;
+  opacity: 0.75;
+}
+
+.run-notice-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
 .attachment-chip {
   display: inline-flex;
   align-items: center;
@@ -5917,6 +5968,22 @@ var AgUiClient = class {
     this.#onPersist = config.onPersist ?? (() => {
     });
     this.#connectionLostMessage = config.connectionLostMessage ?? "Connection lost";
+    const onStateChanged = config.onStateChanged;
+    if (onStateChanged !== void 0) {
+      this.#agent.subscribe({
+        onStateChanged: ({ state }) => {
+          onStateChanged(state);
+        }
+      });
+    }
+  }
+  /** The current AG-UI shared state, as the agent last applied it. */
+  get state() {
+    return this.#agent.state;
+  }
+  /** Replace the shared state; the next run sends it as `RunAgentInput.state`. */
+  setState(state) {
+    this.#agent.setState({ ...state });
   }
   /** Whether a run is currently in flight. */
   get running() {
@@ -6080,6 +6147,9 @@ var AgUiClient = class {
       onToolCallResultEvent({ event }) {
         h.onToolResult(event.toolCallId, event.content);
       },
+      onActivitySnapshotEvent({ event }) {
+        h.onActivity(event.activityType, event.content);
+      },
       // Reasoning. `@ag-ui/client` already maps the deprecated
       // THINKING_* events onto these REASONING_* callbacks, so handling the
       // reasoning family alone covers both protocol versions.
@@ -6314,6 +6384,7 @@ function createHttpAgent(options) {
   return new HttpAgent({
     url: options.endpoint,
     headers: options.headers ?? {},
+    initialState: { ...options.initialState ?? {} },
     // HttpAgent invokes its configured fetch as a method (`this.fetch(...)`),
     // which would rebind the global `fetch` to the agent instance and trigger
     // "Illegal invocation" in browsers. Wrap it so `fetch` is always called as
@@ -6647,7 +6718,7 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Per-run frontend tool catalog provider. Defaults to the built-in
    * `route.*` tools (when a {@link routeMap} is set) plus the tools registered
-   * via {@link registerTool} / {@link registerStateHook}; override to supply a
+   * via {@link registerTool} / {@link registerPageState}; override to supply a
    * fully custom catalog.
    */
   getTools = () => [
@@ -6795,6 +6866,10 @@ var AgUiChat = class extends HTMLElement {
   /** Refs attached to the message currently being sent (the context manifest). */
   #runAttachments = [];
   #client = null;
+  // Seed for the next client. Once one exists it owns the live value (the
+  // agent applies STATE_SNAPSHOT / STATE_DELTA into it), so this is only the
+  // starting point — `sharedState` reads through to the client when present.
+  #sharedState = {};
   // Whether an interaction is in flight (first onRunStart → onSettled). Drives
   // the Send⇄Stop button: `agent.isRunning` is false between frontend-tool
   // rounds, but the user must still be able to stop there.
@@ -6941,12 +7016,40 @@ var AgUiChat = class extends HTMLElement {
   registerTool(tool) {
     this.#toolRegistry.register(tool);
   }
-  /** Bind a piece of host state to `read_<name>` / `set_<name>` tools. */
-  registerStateHook(hook) {
-    for (const tool of createStateHookTools(hook)) {
+  /**
+   * AG-UI **shared state** for this conversation — the protocol's own state
+   * channel, sent as `RunAgentInput.state` on every run and replaced in place
+   * when the server streams `STATE_SNAPSHOT` / `STATE_DELTA`. Assigning seeds
+   * the next run; reading returns whatever the agent last applied.
+   *
+   * Listen for {@link STATE_EVENT} to react to server-driven changes.
+   *
+   * Not to be confused with {@link registerPageState}, which exposes host
+   * state to the agent as ordinary *tools*.
+   */
+  get sharedState() {
+    return this.#client?.state ?? this.#sharedState;
+  }
+  set sharedState(state) {
+    this.#sharedState = { ...state };
+    this.#client?.setState(this.#sharedState);
+  }
+  /** Bind a piece of host page state to `read_<name>` / `set_<name>` tools. */
+  registerPageState(binding) {
+    for (const tool of createPageStateTools(binding)) {
       this.#toolRegistry.register(tool);
     }
   }
+  /**
+   * @deprecated Renamed to {@link registerPageState}. The old name read as
+   * AG-UI shared-state sync (`STATE_SNAPSHOT` / `STATE_DELTA`), which this
+   * component does not implement — these are ordinary client tools over host
+   * page state. Behaviour is unchanged; this alias will be removed in a future
+   * major.
+   */
+  registerStateHook(binding) {
+    this.registerPageState(binding);
+  }
   /** The built-in `route.*` tools, present only when a route map is set. */
   #routeTools() {
     if (this.routeMap.length === 0) {
@@ -7537,11 +7640,15 @@ Use the read_attachment tool with an id to read a file's contents.`
       const toolCalls = message.toolCalls;
       if (toolCalls !== void 0) {
         for (const call of toolCalls) {
-          this.#cardFor({
+          const restored = {
             id: call.id,
             name: call.function.name,
             args: this.#parseArgs(call.function.arguments)
-          });
+          };
+          if (this.#noticeIfSkillLoad(restored)) {
+            continue;
+          }
+          this.#cardFor(restored);
         }
       }
       return;
@@ -7872,7 +7979,8 @@ Use the read_attachment tool with an id to read a file's contents.`
         // re-reads this on each call.
         getHeaders: () => this.headers,
         threadId: this.#threadId,
-        initialMessages: this.#initialMessages
+        initialMessages: this.#initialMessages,
+        initialState: this.#sharedState
       });
       this.#client = new AgUiClient({
         agent,
@@ -7882,11 +7990,23 @@ Use the read_attachment tool with an id to read a file's contents.`
         executeTool: (call) => this.#executeTool(call),
         resolveInterrupts: (interrupts) => this.#resolveInterrupts(interrupts),
         onPersist: (messages) => this.conversationStore.saveMessages(this.#threadId, messages),
+        onStateChanged: (state) => this.#onSharedStateChanged(state),
         connectionLostMessage: this.#strings.connectionLost
       });
     }
     return this.#client;
   }
+  /** Mirror the agent's applied state and tell the host it moved. */
+  #onSharedStateChanged(state) {
+    this.#sharedState = { ...state };
+    this.dispatchEvent(
+      new CustomEvent(STATE_EVENT, {
+        detail: { state: this.#sharedState },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
   /** Whether ``call`` should be gated behind the confirmation card. */
   async #needsConfirmation(call, tool) {
     if (this.autoConfirm) {
@@ -7898,6 +8018,9 @@ Use the read_attachment tool with an id to read a file's contents.`
     return isDestructive(tool.parameters);
   }
   async #executeTool(call) {
+    if (skillNameFrom(call) !== null) {
+      return null;
+    }
     const card = this.#cardFor(call);
     this.#toolCards.delete(call.id);
     const tool = this.#resolveTool(call.name);
@@ -8023,8 +8146,25 @@ Use the read_attachment tool with an id to read a file's contents.`
       },
       onToolCall: (call) => {
         this.#hidePending();
+        if (this.#noticeIfSkillLoad(call)) {
+          return;
+        }
         this.#cardFor(call);
       },
+      onActivity: (activityType, content) => {
+        if (activityType !== COMPACTION_ACTIVITY_TYPE) {
+          return;
+        }
+        const removed = compactionRemoved(content);
+        if (removed === null) {
+          return;
+        }
+        this.#appendNotice(
+          "\u{1F5DC}",
+          this.#strings.historyCompacted.replace("{count}", String(removed)),
+          "compaction"
+        );
+      },
       onToolResult: (toolCallId, content) => {
         const card = this.#toolCards.get(toolCallId);
         if (card === void 0) {
@@ -8136,6 +8276,32 @@ Use the read_attachment tool with an id to read a file's contents.`
    * {@link AgUiClientHandlers.onToolCall} creates the card (pending) during the
    * run; {@link #executeTool} later retrieves the same card to settle it.
    */
+  /**
+   * Append an ambient run notice to the current group.
+   *
+   * Goes through {@link #ensureGroup} like a tool card so it lands *inside* the
+   * assistant turn it annotates rather than floating between turns, and shares
+   * the same pending-hide / scroll behaviour.
+   */
+  /**
+   * Render a skill notice for a `load_capability` call; ``true`` when handled.
+   *
+   * Shared by the live stream and history replay so the transcript looks the
+   * same before and after a reload.
+   */
+  #noticeIfSkillLoad(call) {
+    const skill = skillNameFrom(call);
+    if (skill === null) {
+      return false;
+    }
+    this.#appendNotice("\u2728", this.#strings.usingSkill.replace("{name}", skill), "skill");
+    return true;
+  }
+  #appendNotice(icon, text2, kind) {
+    this.#ensureGroup().appendChild(renderRunNotice(icon, text2, kind));
+    this.#updateEmptyState();
+    this.#messages.scrollTop = this.#messages.scrollHeight;
+  }
   #cardFor(call) {
     const existing = this.#toolCards.get(call.id);
     if (existing !== void 0) {
@@ -8151,6 +8317,17 @@ Use the read_attachment tool with an id to read a file's contents.`
     return card;
   }
 };
+function skillNameFrom(call) {
+  if (call.name !== LOAD_CAPABILITY_TOOL) {
+    return null;
+  }
+  const id = call.args?.id;
+  return typeof id === "string" && id !== "" ? id : null;
+}
+function compactionRemoved(content) {
+  const removed = content?.removed;
+  return typeof removed === "number" ? removed : null;
+}
 
 // src/core/define_ag_ui_chat.ts
 function defineAgUiChat() {
@@ -8192,20 +8369,23 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.12.0";
+var VERSION = "0.14.0";
 export {
   AgUiChat,
   AgUiClient,
+  COMPACTION_ACTIVITY_TYPE,
   CheckpointMenu,
   ClientToolRegistry,
   ConnectionLostError,
   DEFAULT_UI_STRINGS,
   ELEMENT_TAG,
+  LOAD_CAPABILITY_TOOL,
   MAX_TOOL_ROUNDS,
   MESSAGE_ROLE,
   PAGE_ACTIONS,
   RemoteConversationStore,
   RunIndex,
+  STATE_EVENT,
   SUBMIT_EVENT,
   SessionStorageStore,
   TOGGLE_EVENT,
@@ -8221,6 +8401,7 @@ export {
   createHttpAgent,
   createPageActionTools,
   createPageMapContext,
+  createPageStateTools,
   createRouteTools,
   createStateHookTools,
   defineAgUiChat,