@syntrologie/adapt-chatbot 2.27.0 → 2.28.0

package/dist/runtime.js

@@ -1,8 +1,1568 @@
 import {
-  ChatAssistantLitMountable
-} from "./chunk-W457NMGD.js";
+  ActionHandler,
+  AgUiTransport,
+  ChatAssistantLitMountable,
+  ElementInstanceStore,
+  ItemHandler,
+  TileHandler,
+  acquireTokenWithChallenge,
+  decodeMutationEnvelope,
+  fetchMountedElements,
+  renderFallbackHtml
+} from "./chunk-KUO67E2W.js";
+import "./chunk-QELVKBQV.js";
+import "./chunk-DOMEUJR7.js";
+import "./chunk-UC4XU6GH.js";
+import "./chunk-AUER7ZCK.js";
+import "./chunk-435KJD27.js";
 import "./chunk-UVKRO5ER.js";
 
+// src/ChatSession.ts
+var CHAT_SESSION_STORAGE_KEY = "syntro:chat:v1";
+function isValidMessage(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const m = value;
+  return (typeof m.id === "number" || typeof m.id === "string") && (m.role === "user" || m.role === "assistant" || m.role === "system") && typeof m.text === "string";
+}
+function loadFromStorage() {
+  try {
+    const raw = globalThis.localStorage?.getItem(CHAT_SESSION_STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || !Array.isArray(parsed.messages)) return null;
+    const messages = parsed.messages.filter(isValidMessage);
+    const nextId = typeof parsed.nextId === "number" ? parsed.nextId : messages.length + 1;
+    return { messages, nextId };
+  } catch {
+    return null;
+  }
+}
+var ChatSession = class {
+  constructor() {
+    this._messages = [];
+    this._inFlight = false;
+    this._nextId = 1;
+    this.subscribers = /* @__PURE__ */ new Set();
+    this.sendListeners = /* @__PURE__ */ new Set();
+    this.interruptListeners = /* @__PURE__ */ new Set();
+    this.toolResultListeners = /* @__PURE__ */ new Set();
+    const restored = loadFromStorage();
+    if (restored) {
+      this._messages = restored.messages;
+      this._nextId = restored.nextId;
+    }
+  }
+  /** Snapshot the current state. Always returns a fresh immutable view. */
+  getState() {
+    return { messages: [...this._messages], inFlight: this._inFlight };
+  }
+  /**
+   * Subscribe to state changes. Called immediately with the current
+   * state, then again on every change. Returns an unsubscribe function.
+   */
+  subscribe(cb) {
+    this.subscribers.add(cb);
+    cb(this.getState());
+    return () => {
+      this.subscribers.delete(cb);
+    };
+  }
+  /**
+   * User submitted a message. Appends a user-role message, sets
+   * inFlight=true, notifies state subscribers, and fires a "send"
+   * event so transports can pick it up. Empty/whitespace text is a
+   * no-op (matches the chat bar's local guard).
+   */
+  send(text, opts) {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    this._messages.push({ id: this._nextId++, role: "user", text: trimmed });
+    this._inFlight = true;
+    this.notify();
+    const event = { text: trimmed };
+    if (opts?.activeLidSlot) event.activeLidSlot = opts.activeLidSlot;
+    for (const listener of this.sendListeners) listener(event);
+  }
+  /**
+   * Single-shot assistant reply (no streaming). Equivalent to
+   * receiveStart + receiveDelta + receiveEnd in one call. Useful for
+   * stub transports and tests that don't model streaming.
+   */
+  receive(text) {
+    const id = `m-${this._nextId++}`;
+    this._messages.push({ id, role: "assistant", text, status: "complete" });
+    this._inFlight = false;
+    this.notify();
+  }
+  /**
+   * Begin a streaming assistant message. Appends an empty assistant
+   * message with status='streaming'. Caller (transport adapter) feeds
+   * deltas via receiveDelta(id, text) and signals completion via
+   * receiveEnd(id). `inFlight` stays true through the stream.
+   */
+  receiveStart(id) {
+    this._messages.push({ id, role: "assistant", text: "", status: "streaming" });
+    this._inFlight = true;
+    this.notify();
+  }
+  /**
+   * Append a delta to a streaming message. No-op when the id is
+   * unknown (race between transport events and reset, etc.) — never
+   * throws so transports can fire-and-forget.
+   */
+  receiveDelta(id, delta) {
+    const msg = this._messages.find((m) => m.id === id);
+    if (!msg || msg.status !== "streaming") return;
+    msg.text += delta;
+    this.notify();
+  }
+  /**
+   * Mark a streaming message complete and clear inFlight. No-op when
+   * the id is unknown (defensive against transport double-fires).
+   */
+  receiveEnd(id) {
+    const msg = this._messages.find((m) => m.id === id);
+    if (msg && msg.status === "streaming") {
+      msg.status = "complete";
+    }
+    this._inFlight = false;
+    this.notify();
+  }
+  /**
+   * Transport reports a fatal error. Marks any in-flight streaming
+   * message as 'error' (so the trail can render a styled error chip
+   * instead of pretending the partial text was a complete answer),
+   * appends a system-role message with the error text for visibility,
+   * and clears inFlight.
+   */
+  error(message) {
+    for (const m of this._messages) {
+      if (m.status === "streaming") m.status = "error";
+    }
+    this._messages.push({
+      id: `err-${this._nextId++}`,
+      role: "system",
+      text: message,
+      status: "error"
+    });
+    this._inFlight = false;
+    this.notify();
+  }
+  /**
+   * User clicked the in-flight stop button. Clears inFlight and
+   * fires an "interrupt" event so transports can cancel their
+   * in-flight request. No-op if not in-flight (idempotent).
+   */
+  interrupt() {
+    if (!this._inFlight) return;
+    this._inFlight = false;
+    this.notify();
+    for (const listener of this.interruptListeners) listener();
+  }
+  /**
+   * Wipe state. Used by the canvas-close path (start a fresh
+   * conversation next time) and by tests.
+   */
+  reset() {
+    this._messages = [];
+    this._inFlight = false;
+    this._nextId = 1;
+    this.notify();
+  }
+  /** Register a transport's send listener. Returns unsubscribe. */
+  onSend(listener) {
+    this.sendListeners.add(listener);
+    return () => {
+      this.sendListeners.delete(listener);
+    };
+  }
+  /**
+   * True when at least one transport has wired itself to the session's
+   * send pipeline. Views can use this to surface "no chat backend
+   * connected" affordances instead of hanging in `inFlight` after a
+   * send fires into the void.
+   */
+  hasTransport() {
+    return this.sendListeners.size > 0;
+  }
+  /** Register a transport's interrupt listener. Returns unsubscribe. */
+  onInterrupt(listener) {
+    this.interruptListeners.add(listener);
+    return () => {
+      this.interruptListeners.delete(listener);
+    };
+  }
+  /**
+   * Register a transport's tool-result listener. The transport
+   * forwards `tool-result` actions back to the agent after the user
+   * approves or rejects a client-tool call. Returns unsubscribe.
+   */
+  onToolResult(listener) {
+    this.toolResultListeners.add(listener);
+    return () => {
+      this.toolResultListeners.delete(listener);
+    };
+  }
+  // -------------------------------------------------------------------------
+  // Tool calls
+  // -------------------------------------------------------------------------
+  /**
+   * Attach a tool call to a streaming assistant message. No-op when
+   * the message id is unknown (race between transport events and
+   * reset / late mount).
+   */
+  addToolCall(messageId, toolCall) {
+    const msg = this._messages.find((m) => m.id === messageId);
+    if (!msg) return;
+    msg.toolCalls = [...msg.toolCalls ?? [], { ...toolCall }];
+    this.notify();
+  }
+  /**
+   * Partially update a tool call by id. Used by the transport to
+   * advance status (args-streaming → running → done) as AG-UI events
+   * arrive. No-op when the id is unknown.
+   */
+  updateToolCall(toolCallId, patch) {
+    for (const msg of this._messages) {
+      const tcs = msg.toolCalls;
+      if (!tcs) continue;
+      const idx = tcs.findIndex((tc) => tc.id === toolCallId);
+      if (idx === -1) continue;
+      const next = [...tcs];
+      next[idx] = { ...next[idx], ...patch };
+      msg.toolCalls = next;
+      this.notify();
+      return;
+    }
+  }
+  /**
+   * Resolve a (client-) tool call. Marks the call done, persists, and
+   * fires onToolResult so the transport can forward the result + the
+   * user's approve/reject decision back to the agent. No-op when the
+   * id is unknown.
+   */
+  resolveToolCall(toolCallId, result, approved) {
+    let found = false;
+    for (const msg of this._messages) {
+      const tcs = msg.toolCalls;
+      if (!tcs) continue;
+      const idx = tcs.findIndex((tc) => tc.id === toolCallId);
+      if (idx === -1) continue;
+      const next = [...tcs];
+      next[idx] = { ...next[idx], status: "done" };
+      msg.toolCalls = next;
+      found = true;
+      break;
+    }
+    if (!found) return;
+    this.notify();
+    for (const listener of this.toolResultListeners) {
+      listener({ toolCallId, result, approved });
+    }
+  }
+  notify() {
+    const state = this.getState();
+    this.persist();
+    for (const sub of this.subscribers) sub(state);
+  }
+  persist() {
+    try {
+      if (this._messages.length === 0) {
+        globalThis.localStorage?.removeItem(CHAT_SESSION_STORAGE_KEY);
+        return;
+      }
+      const payload = { messages: this._messages, nextId: this._nextId };
+      globalThis.localStorage?.setItem(CHAT_SESSION_STORAGE_KEY, JSON.stringify(payload));
+    } catch {
+    }
+  }
+};
+var chatSession = new ChatSession();
+
+// src/ChatTransport.ts
+var FALLBACK_DEBOUNCE_MS = 1500;
+function readSyntroToken() {
+  if (typeof window === "undefined") return void 0;
+  const cfg = window.__SYNTRO_CONFIG__;
+  const token = cfg?.token;
+  return typeof token === "string" && token.length > 0 ? token : void 0;
+}
+function debug(...args) {
+  if (typeof window === "undefined") return;
+  if (window.__SYNTRO_CHAT_DEBUG__) {
+    console.debug("[chat-transport]", ...args);
+  }
+}
+var ChatTransport = class {
+  constructor() {
+    this._config = null;
+    this._status = "idle";
+    this._agui = null;
+    this._transportUnsub = null;
+    this._sessionUnsubSend = null;
+    this._sessionUnsubInterrupt = null;
+    this._sessionUnsubToolResult = null;
+    this._connectInFlight = null;
+    /** Bounded streaming-message id for the currently-being-typed assistant turn. */
+    this._currentAssistantMessageId = null;
+    /** Outcome bookkeeping for telemetry. */
+    this._hadTurnstileToken = null;
+    /** Count of successful round-trips for telemetry payloads. */
+    this._messagesSucceeded = 0;
+    /** True once a successful assistant message has landed — gates fallback. */
+    this._hasSucceeded = false;
+    /** True once fallback has fired (one-shot). */
+    this._fallbackRendered = false;
+    /**
+     * Per-send override for ``X-Active-Lid-Slot``. Set in the
+     * ``chatSession.onSend`` listener immediately before each
+     * ``_forwardUserMessage`` and consumed by ``buildHeaders`` on the
+     * outbound request. The singleton transport is shared by every
+     * mounted chat-bar (drawer + inline) so cached ``_config.activeLidSlot``
+     * follows whichever bar last reconfigured — using that for routing
+     * silently misroutes tiles when both bars coexist. Per-send threading
+     * pins the header to the bar that actually sent the message.
+     */
+    this._pendingLidSlot = null;
+    /** Active debounce timer; null when no debounce pending. */
+    this._errorDebounceTimer = null;
+    /** Most recent error payload, captured so debounced fallback can attach it. */
+    this._lastErrorPayload = null;
+    this._fallbackListeners = /* @__PURE__ */ new Set();
+    /**
+     * Per-configure-cycle id for correlating telemetry events from a
+     * single transport lifetime. Mirrors ChatAssistantLit's mountId
+     * but scoped to configure cycles since the transport is a
+     * singleton across mounts.
+     */
+    this._transportId = `tx_${Math.random().toString(36).slice(2, 8)}`;
+    this._configuredAt = 0;
+  }
+  /**
+   * Configure the transport. Idempotent — calling again with the same
+   * backendUrl is a no-op; calling with a different backendUrl tears
+   * the connection down and re-arms.
+   */
+  configure(config) {
+    const same = this._config && this._config.backendUrl === config.backendUrl && this._config.threadId === config.threadId;
+    if (same) {
+      this._config = { ...this._config, ...config };
+      return;
+    }
+    this._disconnect();
+    this._config = config;
+    this._status = "configured";
+    this._transportId = `tx_${Math.random().toString(36).slice(2, 8)}`;
+    this._configuredAt = Date.now();
+    this._wireSession();
+    debug("configured", {
+      transportId: this._transportId,
+      backendUrl: config.backendUrl,
+      threadId: config.threadId
+    });
+  }
+  /** ms since the most recent configure() call. 0 before any configure. */
+  _ageMs() {
+    return this._configuredAt === 0 ? 0 : Date.now() - this._configuredAt;
+  }
+  /** True when configure() has been called and we're ready to lazy-connect on send. */
+  get isConfigured() {
+    return this._status !== "idle";
+  }
+  /** True when AgUiTransport is up. */
+  get isConnected() {
+    return this._status === "connected";
+  }
+  /**
+   * Subscribe to fallback events — fires once per configure cycle
+   * when the transport gives up after sustained failure. Hosts
+   * (typically AdaptiveChatBarMountable) use this to swap the chat
+   * bar for a static "contact support" card.
+   */
+  onFallback(listener) {
+    this._fallbackListeners.add(listener);
+    return () => {
+      this._fallbackListeners.delete(listener);
+    };
+  }
+  /**
+   * Test seam — drive a synthetic error event through the transport's
+   * error handling without standing up a real AgUi transport. Production
+   * code path uses _onTransportEvent. Exported as a public method to
+   * keep the test isolation simple; not part of the documented API.
+   */
+  simulateError(payload) {
+    this._handleErrorEvent(payload);
+  }
+  /**
+   * Test seam — register a synthetic successful message-complete so
+   * the hasSucceeded gate flips without a real AgUi round-trip.
+   */
+  simulateSuccessfulMessage() {
+    this._hasSucceeded = true;
+    this._messagesSucceeded += 1;
+    this._clearDebounceTimer();
+  }
+  /**
+   * Test seam — return the lid slot that the next outbound request
+   * WOULD tag ``X-Active-Lid-Slot`` with, given current state. Mirrors
+   * the exact resolution buildHeaders uses (per-send slot wins over
+   * cached config). Not part of the documented API.
+   */
+  getActiveLidSlotForTest() {
+    return this._pendingLidSlot ?? this._config?.activeLidSlot ?? null;
+  }
+  /**
+   * Tear connection-level state down. Used internally by configure()
+   * to swap backends; preserves host-registered fallback listeners
+   * because the host UI handler (e.g. AdaptiveChatBarMountable's
+   * "swap to fallback card" callback) is configuration-independent.
+   */
+  _disconnect() {
+    if (this._transportUnsub) {
+      this._transportUnsub();
+      this._transportUnsub = null;
+    }
+    if (this._sessionUnsubSend) {
+      this._sessionUnsubSend();
+      this._sessionUnsubSend = null;
+    }
+    if (this._sessionUnsubInterrupt) {
+      this._sessionUnsubInterrupt();
+      this._sessionUnsubInterrupt = null;
+    }
+    if (this._sessionUnsubToolResult) {
+      this._sessionUnsubToolResult();
+      this._sessionUnsubToolResult = null;
+    }
+    if (this._agui) {
+      this._agui.disconnect();
+      this._agui = null;
+    }
+    this._clearDebounceTimer();
+    this._config = null;
+    this._status = "idle";
+    this._connectInFlight = null;
+    this._currentAssistantMessageId = null;
+    this._hadTurnstileToken = null;
+    this._messagesSucceeded = 0;
+    this._hasSucceeded = false;
+    this._fallbackRendered = false;
+    this._lastErrorPayload = null;
+    this._pendingLidSlot = null;
+  }
+  /**
+   * Tear everything down — connection state PLUS host listeners.
+   * Use this in test teardown or when fully shutting the transport
+   * (page unload, integration test reset). The mountable calls
+   * _disconnect indirectly via reconfigure.
+   */
+  reset() {
+    this._disconnect();
+    this._fallbackListeners.clear();
+  }
+  _clearDebounceTimer() {
+    if (this._errorDebounceTimer) {
+      clearTimeout(this._errorDebounceTimer);
+      this._errorDebounceTimer = null;
+    }
+  }
+  /**
+   * Shared error-handling kernel — called by the AG-UI subscriber and
+   * by the simulateError test seam. Publishes transport_error
+   * telemetry, captures lastErrorPayload, and starts the debounce
+   * timer that will fire fallback if no successful message arrives
+   * before it expires. Gated by hasSucceeded (post-success errors
+   * never fallback) and _fallbackRendered (one-shot).
+   */
+  _handleErrorEvent(payload) {
+    const status = payload.status ?? null;
+    const body = payload.body ? String(payload.body).slice(0, 200) : null;
+    this._lastErrorPayload = {
+      message: payload.message,
+      status,
+      body,
+      errorName: payload.errorName ?? null
+    };
+    this._config?.runtime.events.publish("chatbot.transport_error", {
+      source: "chat-transport",
+      transportId: this._transportId,
+      transportAgeMs: this._ageMs(),
+      messagesSucceeded: this._messagesSucceeded,
+      hadTurnstileToken: this._hadTurnstileToken,
+      hasSucceeded: this._hasSucceeded,
+      errorMessage: payload.message ?? null,
+      errorStatus: status,
+      errorBody: body,
+      errorName: payload.errorName ?? null
+    });
+    if (this._hasSucceeded || this._fallbackRendered || this._errorDebounceTimer) return;
+    this._errorDebounceTimer = setTimeout(() => {
+      this._errorDebounceTimer = null;
+      if (this._hasSucceeded || this._fallbackRendered) return;
+      this._renderFallback("connect_failed");
+    }, FALLBACK_DEBOUNCE_MS);
+  }
+  /**
+   * Fire the fallback. One-shot per configure cycle. Notifies all
+   * fallback listeners with the per-customer card config and the
+   * diagnostic snapshot for telemetry/debug.
+   */
+  _renderFallback(reason) {
+    if (this._fallbackRendered) return;
+    this._fallbackRendered = true;
+    debug("fallback", { reason, transportId: this._transportId, ageMs: this._ageMs() });
+    const fallback = this._config?.fallback ?? {};
+    const payload = {
+      reason,
+      fallback,
+      transportId: this._transportId,
+      transportAgeMs: this._ageMs(),
+      messagesSucceeded: this._messagesSucceeded,
+      hadTurnstileToken: this._hadTurnstileToken,
+      errorStatus: this._lastErrorPayload?.status ?? null,
+      errorBody: this._lastErrorPayload?.body ?? null,
+      errorMessage: this._lastErrorPayload?.message ?? null,
+      errorName: this._lastErrorPayload?.errorName ?? null
+    };
+    this._config?.runtime.events.publish(
+      "chatbot.fallback_rendered",
+      payload
+    );
+    for (const listener of this._fallbackListeners) listener(payload);
+  }
+  // -------------------------------------------------------------------------
+  // Internal: chatSession wiring
+  // -------------------------------------------------------------------------
+  _wireSession() {
+    this._sessionUnsubSend = chatSession.onSend(({ text, activeLidSlot }) => {
+      this._pendingLidSlot = typeof activeLidSlot === "string" && activeLidSlot.length > 0 ? activeLidSlot : null;
+      void this._forwardUserMessage(text);
+    });
+    this._sessionUnsubInterrupt = chatSession.onInterrupt(() => {
+      this._agui?.send({ type: "stop-generation" });
+    });
+    this._sessionUnsubToolResult = chatSession.onToolResult(({ toolCallId, result, approved }) => {
+      this._agui?.send({ type: "tool-result", toolCallId, result, approved });
+    });
+  }
+  async _forwardUserMessage(text) {
+    const ok = await this._ensureConnected();
+    if (!ok || !this._agui) {
+      chatSession.error("Couldn't connect to chat. Please try again.");
+      return;
+    }
+    this._agui.send({ type: "user-message", text });
+  }
+  // -------------------------------------------------------------------------
+  // Internal: connect (lazy, Turnstile-gated)
+  // -------------------------------------------------------------------------
+  /**
+   * Ensure AgUiTransport is up. Idempotent — multiple concurrent calls
+   * dedupe to a single Turnstile acquisition + transport setup.
+   * Returns true on success, false on terminal failure.
+   */
+  async _ensureConnected() {
+    if (this._status === "connected" && this._agui) return true;
+    if (!this._config) return false;
+    if (this._connectInFlight) return this._connectInFlight;
+    this._connectInFlight = (async () => {
+      this._status = "acquiring";
+      const cft = await this._acquireTurnstileWithChallenge();
+      this._hadTurnstileToken = cft !== null;
+      if (this._config === null) return false;
+      const baseUrl = this._config.backendUrl.replace(/\/$/, "");
+      const streamUrl = `${baseUrl}/api/adaptive/stream`;
+      const token = readSyntroToken();
+      const buildHeaders = () => {
+        const h = {};
+        if (token) h.Authorization = `Bearer ${token}`;
+        if (cft) h["CF-Turnstile-Token"] = cft;
+        const lidSlot = this._pendingLidSlot ?? this._config?.activeLidSlot;
+        if (typeof lidSlot === "string" && lidSlot.length > 0) {
+          h["X-Active-Lid-Slot"] = lidSlot;
+        }
+        try {
+          const rt = this._config?.runtime;
+          const fromRuntime = rt?.telemetry?.getDistinctId?.();
+          const fromWindow = window.posthog?.get_distinct_id?.();
+          const did = fromRuntime || fromWindow;
+          if (typeof did === "string" && did.length > 0) {
+            h["X-Distinct-Id"] = did;
+          }
+        } catch {
+        }
+        return h;
+      };
+      const runtime2 = this._config.runtime;
+      const resolveForwardedProps = () => {
+        const raw = this._config?.forwardedProps;
+        return typeof raw === "function" ? raw() : raw;
+      };
+      this._agui = new AgUiTransport({
+        url: streamUrl,
+        headers: buildHeaders,
+        threadId: this._config.threadId,
+        clientTools: this._config.clientTools,
+        // Adaptive runtime SDK needs the `syntro_chat_session` cookie to
+        // round-trip cross-origin so subsequent boot fetches can rehydrate
+        // LLM-authored UI elements. Editor / action-plan chat surfaces
+        // auth via `?token=` and intentionally leave this unset (see
+        // AgUiTransportOptions.credentials docstring).
+        credentials: "include",
+        forwardedProps: resolveForwardedProps,
+        onA2UIEvent: (payload) => {
+          const mutations = decodeMutationEnvelope(payload);
+          if (mutations !== null) {
+            const handler = this._config?.onElementMutation;
+            if (handler) {
+              try {
+                handler(mutations);
+                runtime2.events.publish("chatbot.element_mutation_applied", {
+                  source: "chat-transport",
+                  count: mutations.length
+                });
+              } catch (err) {
+                const msg = err instanceof Error ? err.message : String(err);
+                console.error("[chat-transport] element mutation apply failed:", msg);
+              }
+              return;
+            }
+            return;
+          }
+          runtime2.actions.applyBatch([payload]).then(() => {
+            runtime2.events.publish("chatbot.a2ui_applied", { source: "chat-transport" });
+          }).catch((err) => {
+            const msg = err instanceof Error ? err.message : String(err);
+            console.error("[chat-transport] A2UI apply failed:", msg);
+          });
+        }
+      });
+      this._agui.connect();
+      this._transportUnsub = this._agui.subscribe((event) => this._onTransportEvent(event));
+      this._status = "connected";
+      return true;
+    })();
+    try {
+      return await this._connectInFlight;
+    } finally {
+      this._connectInFlight = null;
+    }
+  }
+  /**
+   * Acquire a Turnstile token via the managed-challenge flow.
+   * Delegates to the shared Turnstile helper that owns the verify
+   * panel lifecycle. Returns null when Turnstile is disabled at
+   * build time or acquisition fails.
+   */
+  async _acquireTurnstileWithChallenge() {
+    const { token } = await acquireTokenWithChallenge();
+    return token;
+  }
+  // -------------------------------------------------------------------------
+  // Internal: AgUi event → chatSession
+  // -------------------------------------------------------------------------
+  /**
+   * Look up a tool call's current chatSession-side status by id.
+   * Used to decide between addToolCall (first sighting) and
+   * updateToolCall (subsequent updates) when AG-UI re-emits
+   * `tool-call` events for client tools transitioning to 'pending'.
+   */
+  _findToolCallStatus(toolCallId) {
+    const state = chatSession.getState();
+    for (const msg of state.messages) {
+      const tc = msg.toolCalls?.find((t) => t.id === toolCallId);
+      if (tc) return tc.status;
+    }
+    return null;
+  }
+  /** Map AG-UI ToolCallStatus to TrailToolCall status. */
+  _mapToolCallStatus(status) {
+    switch (status) {
+      case "args-streaming":
+        return "args-streaming";
+      case "pending":
+        return "pending";
+      case "running":
+        return "running";
+      case "done":
+        return "done";
+      case "error":
+        return "error";
+      default:
+        return "running";
+    }
+  }
+  _onTransportEvent(event) {
+    const runtime2 = this._config?.runtime;
+    switch (event.type) {
+      case "session-ready":
+      case "messages-snapshot":
+      case "typing":
+        return;
+      case "message-append": {
+        this._currentAssistantMessageId = event.message.id;
+        chatSession.receiveStart(event.message.id);
+        if (event.message.content && event.message.content.length > 0) {
+          chatSession.receiveDelta(event.message.id, event.message.content);
+        }
+        return;
+      }
+      case "message-delta": {
+        const id = event.messageId ?? this._currentAssistantMessageId;
+        if (!id || !event.delta) return;
+        chatSession.receiveDelta(id, event.delta);
+        return;
+      }
+      case "message-complete": {
+        const id = event.messageId ?? this._currentAssistantMessageId;
+        if (!id) return;
+        chatSession.receiveEnd(id);
+        this._currentAssistantMessageId = null;
+        this._messagesSucceeded += 1;
+        this._hasSucceeded = true;
+        this._clearDebounceTimer();
+        return;
+      }
+      case "tool-call": {
+        const targetMessageId = event.messageId ?? this._currentAssistantMessageId;
+        if (!targetMessageId) return;
+        const existing = this._findToolCallStatus(event.toolCall.id);
+        if (!existing) {
+          chatSession.addToolCall(targetMessageId, {
+            id: event.toolCall.id,
+            name: event.toolCall.name,
+            status: this._mapToolCallStatus(event.toolCall.status)
+          });
+        } else {
+          chatSession.updateToolCall(event.toolCall.id, {
+            name: event.toolCall.name,
+            status: this._mapToolCallStatus(event.toolCall.status)
+          });
+        }
+        return;
+      }
+      case "tool-call-args-delta":
+        debug("tool-call-args-delta", event);
+        return;
+      case "tool-call-done":
+        chatSession.updateToolCall(event.toolCallId, { status: "done" });
+        return;
+      case "a2ui":
+        return;
+      case "error": {
+        const status = event.status ?? null;
+        const body = event.body ? String(event.body).slice(0, 200) : null;
+        console.warn(
+          `[chat-transport] error status=${status ?? "no-status"} succeeded=${this._messagesSucceeded}`,
+          event
+        );
+        this._handleErrorEvent({
+          message: event.message,
+          status,
+          body,
+          errorName: event.errorName ?? null
+        });
+        chatSession.error(event.message ?? "Chat connection failed");
+        this._currentAssistantMessageId = null;
+        if (this._agui) {
+          this._agui.disconnect();
+          this._agui = null;
+        }
+        if (this._transportUnsub) {
+          this._transportUnsub();
+          this._transportUnsub = null;
+        }
+        this._status = "error";
+        return;
+      }
+    }
+  }
+};
+var chatTransport = new ChatTransport();
+
+// src/observer/allowlist.ts
+var MAX_TEXT_LEN = 200;
+var SIGNIFICANT_CLICK_TAGS = /* @__PURE__ */ new Set(["button", "a"]);
+function truncate(s) {
+  return s.length <= MAX_TEXT_LEN ? s : `${s.slice(0, MAX_TEXT_LEN - 1)}\u2026`;
+}
+function firstElement(props) {
+  const els = props.$elements;
+  if (Array.isArray(els) && els.length > 0 && typeof els[0] === "object" && els[0] !== null) {
+    return els[0];
+  }
+  return null;
+}
+function elementText(props) {
+  const el = firstElement(props);
+  if (!el) return "";
+  const t = el.text;
+  return typeof t === "string" ? t.trim() : "";
+}
+function elementTag(props) {
+  const explicit = props.$element_tag_name;
+  if (typeof explicit === "string") return explicit.toLowerCase();
+  const el = firstElement(props);
+  if (el && typeof el.tag_name === "string") return el.tag_name.toLowerCase();
+  return "";
+}
+function elementRole(props) {
+  const el = firstElement(props);
+  if (!el) return "";
+  const role = el.attr__role;
+  return typeof role === "string" ? role.toLowerCase() : "";
+}
+function formName(props) {
+  const el = firstElement(props);
+  if (!el) return "unnamed";
+  const name = el.attr__name;
+  if (typeof name === "string" && name) return name;
+  const id = el.attr__id;
+  if (typeof id === "string" && id) return id;
+  return "unnamed";
+}
+function isSignificantClickTarget(props) {
+  const tag = elementTag(props);
+  if (SIGNIFICANT_CLICK_TAGS.has(tag)) return true;
+  if (elementRole(props) === "button") return true;
+  return false;
+}
+function pathname(props) {
+  const pn = props.$pathname;
+  return typeof pn === "string" ? pn : "/";
+}
+function renderCustomEvent(raw) {
+  const fields = [];
+  for (const [k, v] of Object.entries(raw.properties)) {
+    if (k.startsWith("$")) continue;
+    if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+      fields.push(`${k}=${v}`);
+      if (fields.length >= 2) break;
+    }
+  }
+  return fields.length > 0 ? `${raw.event} (${fields.join(", ")})` : raw.event;
+}
+function matchEvent(raw, opts = {}) {
+  const props = raw.properties;
+  switch (raw.event) {
+    case "$pageview": {
+      const path = pathname(props);
+      return {
+        ts: raw.timestamp,
+        kind: "nav",
+        text: truncate(`navigated to ${path}`),
+        ref: path
+      };
+    }
+    case "$autocapture": {
+      const eventType = props.$event_type;
+      if (eventType === "click") {
+        if (!isSignificantClickTarget(props)) return null;
+        const text = elementText(props) || elementTag(props);
+        return {
+          ts: raw.timestamp,
+          kind: "click",
+          text: truncate(`clicked '${text}'`)
+        };
+      }
+      if (eventType === "submit" && elementTag(props) === "form") {
+        return {
+          ts: raw.timestamp,
+          kind: "form",
+          text: truncate(`submitted form '${formName(props)}'`)
+        };
+      }
+      return null;
+    }
+    case "$rageclick": {
+      const text = elementText(props) || elementTag(props);
+      return {
+        ts: raw.timestamp,
+        kind: "rage",
+        text: truncate(`rage-clicked '${text}'`)
+      };
+    }
+    case "$dead_click": {
+      const text = elementText(props) || elementTag(props);
+      return {
+        ts: raw.timestamp,
+        kind: "dead",
+        text: truncate(`clicked '${text}' (no response)`)
+      };
+    }
+    // ── Canonical runtime-bus events (sources: `'canvas'` instrumentation
+    //    or the event-processor's rrweb detectors). These don't go through
+    //    PostHog; the chat-bar's bus translator forwards them as-is with
+    //    the canonical event name, and matchEvent picks the right slot
+    //    here. Keeps a single allowlist as the source of truth for what
+    //    the agent's observation tail can carry.
+    case "nav.section_viewed": {
+      const section = typeof props.section === "string" ? props.section : "";
+      if (!section) return null;
+      return {
+        ts: raw.timestamp,
+        kind: "view",
+        text: truncate(`viewed the '${section}' section`),
+        ref: section
+      };
+    }
+    case "nav.scroll_depth": {
+      const pct = typeof props.percent === "number" ? props.percent : null;
+      if (pct === null) return null;
+      return {
+        ts: raw.timestamp,
+        kind: "scroll",
+        text: truncate(`scrolled to ${pct}% of the page`)
+      };
+    }
+    case "ui.scroll_thrash": {
+      return {
+        ts: raw.timestamp,
+        kind: "scroll",
+        text: "scrolled up and down repeatedly (looking for something)"
+      };
+    }
+    case "ui.idle": {
+      const ms = typeof props.durationMs === "number" ? props.durationMs : null;
+      const secs = ms !== null ? Math.round(ms / 1e3) : null;
+      return {
+        ts: raw.timestamp,
+        kind: "idle",
+        text: secs !== null ? `idle for ${secs}s` : "idle"
+      };
+    }
+    case "ui.hover": {
+      const text = elementText(props) || elementTag(props);
+      return {
+        ts: raw.timestamp,
+        kind: "hover",
+        text: truncate(`hovered on '${text}'`)
+      };
+    }
+    case "ui.hesitation": {
+      const text = elementText(props) || elementTag(props);
+      return {
+        ts: raw.timestamp,
+        kind: "hesitation",
+        text: truncate(`hesitated near '${text}'`)
+      };
+    }
+    case "ui.focus_bounce": {
+      const text = elementText(props) || elementTag(props);
+      return {
+        ts: raw.timestamp,
+        kind: "form",
+        text: truncate(`focused '${text}' but didn't fill it`)
+      };
+    }
+    default: {
+      const allow = opts.observableEvents ?? [];
+      if (allow.includes(raw.event)) {
+        return {
+          ts: raw.timestamp,
+          kind: "custom",
+          text: truncate(renderCustomEvent(raw))
+        };
+      }
+      return null;
+    }
+  }
+}
+
+// src/observer/queue.ts
+var ObserverQueue = class {
+  constructor(opts) {
+    this._buffer = [];
+    this._sent = 0;
+    this._dropped = 0;
+    this._lastError = null;
+    this._disabled = false;
+    this._intervalTimer = null;
+    this._backoffTimer = null;
+    this._currentBackoffMs = 0;
+    this._inFlight = false;
+    this._opts = {
+      backoffStartMs: 1e3,
+      backoffCapMs: 3e4,
+      ...opts
+    };
+  }
+  push(event) {
+    if (this._disabled) return;
+    if (this._buffer.length >= this._opts.queueCap) {
+      this._buffer.shift();
+      this._dropped += 1;
+    }
+    this._buffer.push(event);
+    if (this._buffer.length >= this._opts.batchSize) {
+      this._scheduleImmediate();
+    } else {
+      this._scheduleInterval();
+    }
+  }
+  async flushNow() {
+    this._clearInterval();
+    await this._flush();
+  }
+  stats() {
+    return {
+      queued: this._buffer.length,
+      sent: this._sent,
+      dropped: this._dropped,
+      lastError: this._lastError,
+      disabled: this._disabled
+    };
+  }
+  _scheduleImmediate() {
+    queueMicrotask(() => {
+      void this._flush();
+    });
+  }
+  _scheduleInterval() {
+    if (this._intervalTimer != null) return;
+    this._intervalTimer = setTimeout(() => {
+      this._intervalTimer = null;
+      void this._flush();
+    }, this._opts.flushIntervalMs);
+  }
+  _clearInterval() {
+    if (this._intervalTimer != null) {
+      clearTimeout(this._intervalTimer);
+      this._intervalTimer = null;
+    }
+  }
+  async _flush() {
+    if (this._disabled || this._inFlight || this._buffer.length === 0) return;
+    this._clearInterval();
+    const batch = this._buffer.splice(0, this._opts.batchSize);
+    this._inFlight = true;
+    try {
+      await this._opts.flush(batch);
+      this._sent += batch.length;
+      this._currentBackoffMs = 0;
+      this._lastError = null;
+    } catch (err) {
+      this._buffer.unshift(...batch);
+      const perm = err?.permanent === true;
+      this._lastError = err instanceof Error ? err.message : String(err?.message ?? err);
+      if (perm) {
+        this._disabled = true;
+      } else {
+        this._scheduleBackoff();
+      }
+    } finally {
+      this._inFlight = false;
+    }
+  }
+  _scheduleBackoff() {
+    const next = this._currentBackoffMs === 0 ? this._opts.backoffStartMs : Math.min(this._currentBackoffMs * 2, this._opts.backoffCapMs);
+    this._currentBackoffMs = next;
+    if (this._backoffTimer != null) clearTimeout(this._backoffTimer);
+    this._backoffTimer = setTimeout(() => {
+      this._backoffTimer = null;
+      void this._flush();
+    }, next);
+  }
+};
+
+// src/observer/transport.ts
+function buildBody(distinctId, batch) {
+  const body = { distinct_id: distinctId, batch };
+  return JSON.stringify(body);
+}
+function createTransport(opts) {
+  return {
+    async send(batch) {
+      const body = buildBody(opts.getDistinctId(), batch);
+      const resp = await fetch(opts.url, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${opts.token()}`,
+          "Content-Type": "application/json"
+        },
+        body,
+        keepalive: true,
+        credentials: "include"
+      });
+      if (!resp.ok) {
+        const err = new Error(`observation POST ${resp.status}`);
+        if (resp.status >= 400 && resp.status < 500 && resp.status !== 429) {
+          err.permanent = true;
+        }
+        throw err;
+      }
+    },
+    sendBeacon(batch) {
+      const body = buildBody(opts.getDistinctId(), batch);
+      const blob = new Blob([body], { type: "application/json" });
+      const beacon = navigator?.sendBeacon;
+      if (typeof beacon !== "function") return false;
+      return beacon.call(navigator, opts.url, blob);
+    }
+  };
+}
+
+// src/observer/index.ts
+var _active = null;
+function _attachPostHog(ingest, _observableEvents) {
+  const ph = globalThis.posthog;
+  if (!ph) return () => {
+  };
+  const addHook = ph._addCaptureHook;
+  if (typeof addHook !== "function") return () => {
+  };
+  const handler = (eventName, properties) => {
+    if (typeof eventName !== "string") return;
+    ingest({
+      event: eventName,
+      timestamp: Date.now(),
+      properties: properties ?? {}
+    });
+  };
+  addHook.call(ph, handler);
+  return () => {
+  };
+}
+function _attachPageHide(_transport, queue) {
+  const handler = () => {
+    const stats = queue.stats();
+    if (stats.queued > 0) {
+      void queue.flushNow();
+    }
+  };
+  window.addEventListener("pagehide", handler, { capture: true });
+  return () => window.removeEventListener("pagehide", handler, { capture: true });
+}
+function startObserver(opts) {
+  if (_active) {
+    _active.refCount += 1;
+    return _makeHandle();
+  }
+  const transport = opts.transport ?? createTransport(opts);
+  const queue = new ObserverQueue({
+    batchSize: 10,
+    flushIntervalMs: 2e3,
+    queueCap: 200,
+    flush: (batch) => transport.send(batch)
+  });
+  const ingest = (raw) => {
+    const ev = matchEvent(raw, { observableEvents: opts.observableEvents });
+    if (ev !== null) {
+      queue.push(ev);
+    }
+  };
+  const unsubscribePh = _attachPostHog(ingest, opts.observableEvents ?? []);
+  const unsubscribePageHide = _attachPageHide(transport, queue);
+  _active = {
+    refCount: 1,
+    queue,
+    unsubscribe: () => {
+      unsubscribePh();
+      unsubscribePageHide();
+    },
+    options: opts
+  };
+  return _makeHandle();
+}
+function _makeHandle() {
+  return {
+    stop() {
+      if (!_active) return;
+      _active.refCount -= 1;
+      if (_active.refCount <= 0) {
+        _active.unsubscribe();
+        _active = null;
+      }
+    },
+    stats() {
+      return _active?.queue.stats() ?? {
+        queued: 0,
+        sent: 0,
+        dropped: 0,
+        lastError: null,
+        disabled: true
+      };
+    },
+    ingest(raw) {
+      if (!_active) return;
+      const ev = matchEvent(raw, {
+        observableEvents: _active.options.observableEvents
+      });
+      if (ev !== null) _active.queue.push(ev);
+    },
+    flushNow() {
+      return _active?.queue.flushNow() ?? Promise.resolve();
+    }
+  };
+}
+
+// src/AdaptiveChatBarMountable.ts
+var STATE_KEY = "__syntroChatBarMount";
+function getState(container) {
+  return container[STATE_KEY] ?? null;
+}
+function setState(container, state) {
+  container[STATE_KEY] = state;
+}
+function applyPlaceholder(bar, cfg) {
+  if (cfg.placeholder !== void 0) bar.placeholder = cfg.placeholder;
+  if (cfg.greeting !== void 0) bar.greeting = cfg.greeting;
+}
+var _elementStore = null;
+var _templateWidgetMap = /* @__PURE__ */ new Map();
+function resolveTileWidget(templateId) {
+  return _templateWidgetMap.get(templateId);
+}
+function refreshTemplateWidgetMap(uiTemplates) {
+  _templateWidgetMap.clear();
+  if (!uiTemplates) return;
+  const tiles = uiTemplates.tiles;
+  if (!Array.isArray(tiles)) return;
+  for (const t of tiles) {
+    const id = typeof t?.id === "string" ? t.id : null;
+    const widget = typeof t?.widget === "string" ? t.widget : null;
+    if (id && widget) _templateWidgetMap.set(id, widget);
+  }
+}
+function getOrCreateElementStore(runtime2) {
+  if (_elementStore) return _elementStore;
+  _elementStore = new ElementInstanceStore({
+    actions: runtime2.actions,
+    // Pass the runtime's event bus so ItemHandler can broadcast
+    // `element.compositional_append` / `_patch` / `_remove` events
+    // to container widgets (chips strip, FAQ accordion, nav tips).
+    events: {
+      publish: runtime2.events.publish.bind(runtime2.events),
+      subscribe: runtime2.events.subscribe?.bind(runtime2.events)
+    },
+    handlers: [new TileHandler(resolveTileWidget), new ActionHandler(), new ItemHandler()],
+    resolveTileWidget
+  });
+  return _elementStore;
+}
+var _hydrationStarted = false;
+function hydrateOnce(runtime2, backendUrl) {
+  if (_hydrationStarted) return;
+  _hydrationStarted = true;
+  const store = getOrCreateElementStore(runtime2);
+  const trimmed = backendUrl.replace(/\/$/, "");
+  const endpoint = trimmed ? `${trimmed}/api/adaptive/mounted_elements` : "/api/adaptive/mounted_elements";
+  fetchMountedElements({ endpoint }).then((response) => {
+    if (!response) return;
+    void store.hydrate(response.mounted_elements);
+  });
+}
+function configureTransportIfPossible(cfg) {
+  if (cfg.backendUrl === void 0 || !cfg.runtime) return;
+  const elementsActive = cfg.elementsEnabled === true && cfg.uiTemplates != null;
+  refreshTemplateWidgetMap(elementsActive ? cfg.uiTemplates : void 0);
+  const forwardedProps = elementsActive ? { elementsEnabled: true, uiTemplates: cfg.uiTemplates } : void 0;
+  const runtime2 = cfg.runtime;
+  const onElementMutation = elementsActive ? (mutations) => {
+    void getOrCreateElementStore(runtime2).apply(mutations);
+  } : void 0;
+  if (elementsActive) {
+    hydrateOnce(runtime2, cfg.backendUrl);
+  }
+  chatTransport.configure({
+    ...cfg,
+    forwardedProps,
+    onElementMutation,
+    activeLidSlot: cfg._syntroSlotName
+  });
+  startObserverIfPossible(cfg);
+}
+var _observerStarted = false;
+function startObserverIfPossible(cfg) {
+  if (_observerStarted) return;
+  if (typeof window === "undefined") return;
+  const runtime2 = cfg.runtime;
+  if (!runtime2?.events?.subscribe) return;
+  const trimmed = (cfg.backendUrl ?? "").replace(/\/$/, "");
+  const url = trimmed ? `${trimmed}/api/adaptive/observation` : "/api/adaptive/observation";
+  const getDistinctId = () => {
+    const ph = window.posthog;
+    try {
+      const v = ph?.get_distinct_id?.();
+      return typeof v === "string" && v.length > 0 ? v : null;
+    } catch {
+      return null;
+    }
+  };
+  const token = () => {
+    const c = window.__SYNTRO_CONFIG__;
+    return typeof c?.token === "string" ? c.token : "";
+  };
+  const handle = startObserver({ url, token, getDistinctId });
+  window.__syntroObserverStats = () => handle.stats();
+  runtime2.events.subscribe({}, (evt) => {
+    const e = evt;
+    if (!e?.name) return;
+    const ts = typeof e.ts === "number" ? e.ts : Date.now();
+    if (e.source === "posthog") {
+      const original = e.props?.originalEvent;
+      if (typeof original !== "string" || original.length === 0) return;
+      const properties = { ...e.props ?? {} };
+      if (typeof e.props?.pathname === "string") properties.$pathname = e.props.pathname;
+      if (typeof e.props?.url === "string") properties.$current_url = e.props.url;
+      handle.ingest({ event: original, timestamp: ts, properties });
+      return;
+    }
+    handle.ingest({
+      event: e.name,
+      timestamp: ts,
+      properties: { ...e.props ?? {} }
+    });
+  });
+  _observerStarted = true;
+}
+function wireListeners(bar, state) {
+  const onMessageSent = (e) => {
+    const text = e.detail.text;
+    chatSession.send(text, { activeLidSlot: state.cfg._syntroSlotName });
+    if (!chatSession.hasTransport()) {
+      chatSession.error("Chat backend not configured \u2014 set backendUrl in the canvas config.");
+    }
+  };
+  const onInterrupt = () => {
+    chatSession.interrupt();
+  };
+  const onToolCallApproved = (e) => {
+    const detail = e.detail;
+    chatSession.resolveToolCall(detail.toolCallId, {}, detail.approved);
+  };
+  const onClose = () => {
+    state.cfg.onClose?.();
+  };
+  bar.addEventListener("chat-message-sent", onMessageSent);
+  bar.addEventListener("chat-interrupt", onInterrupt);
+  bar.addEventListener("canvas-close", onClose);
+  bar.addEventListener("trail-toolcall-approved", onToolCallApproved);
+  return () => {
+    bar.removeEventListener("chat-message-sent", onMessageSent);
+    bar.removeEventListener("chat-interrupt", onInterrupt);
+    bar.removeEventListener("canvas-close", onClose);
+    bar.removeEventListener("trail-toolcall-approved", onToolCallApproved);
+  };
+}
+var AdaptiveChatBarMountable = {
+  mount(container, mountConfig) {
+    const cfg = mountConfig ?? {};
+    configureTransportIfPossible(cfg);
+    const bar = document.createElement("adaptive-chat-bar");
+    applyPlaceholder(bar, cfg);
+    const unsubSession = chatSession.subscribe((s) => {
+      bar.messages = [...s.messages];
+      bar.inFlight = s.inFlight;
+    });
+    const state = { bar, cleanup: () => {
+    }, cfg };
+    const unwireListeners = wireListeners(bar, state);
+    container.appendChild(bar);
+    const unsubFallback = chatTransport.onFallback(() => {
+      bar.remove();
+      container.innerHTML = renderFallbackHtml(state.cfg.fallback);
+    });
+    state.cleanup = () => {
+      unsubSession();
+      unsubFallback();
+      unwireListeners();
+      bar.remove();
+      setState(container, null);
+    };
+    setState(container, state);
+    return state.cleanup;
+  },
+  update(container, mountConfig) {
+    const state = getState(container);
+    if (!state) return;
+    const cfg = mountConfig ?? {};
+    configureTransportIfPossible(cfg);
+    applyPlaceholder(state.bar, cfg);
+    state.cfg = cfg;
+  }
+};
+
+// src/AdaptiveChipsStripMountable.ts
+var STATE_KEY2 = "__syntroChipsStripMount";
+function getState2(container) {
+  return container[STATE_KEY2] ?? null;
+}
+function setState2(container, state) {
+  container[STATE_KEY2] = state;
+}
+function applyProps(strip, cfg) {
+  if (cfg.chips !== void 0) strip.chips = cfg.chips;
+  if (cfg.runtime !== void 0) {
+    strip.runtimeRef = cfg.runtime;
+  }
+  if (cfg.chromeless !== void 0) strip.chromeless = cfg.chromeless;
+}
+var AdaptiveChipsStripMountable = {
+  mount(container, mountConfig) {
+    const cfg = mountConfig ?? {};
+    const strip = document.createElement("adaptive-chips-strip");
+    applyProps(strip, cfg);
+    const state = {
+      strip,
+      listeners: {
+        revealed: (e) => {
+          const cb = cfg.onChipRevealed;
+          if (cb) {
+            cb(
+              e.detail
+            );
+          }
+        },
+        dismissed: (e) => {
+          const cb = cfg.onChipDismissed;
+          if (cb) cb(e.detail);
+        }
+      }
+    };
+    strip.addEventListener("chip-revealed", state.listeners.revealed);
+    strip.addEventListener("chip-dismissed", state.listeners.dismissed);
+    container.appendChild(strip);
+    setState2(container, state);
+    return () => {
+      strip.removeEventListener("chip-revealed", state.listeners.revealed);
+      strip.removeEventListener("chip-dismissed", state.listeners.dismissed);
+      strip.remove();
+      setState2(container, null);
+    };
+  },
+  update(container, mountConfig) {
+    const state = getState2(container);
+    if (!state) return;
+    const cfg = mountConfig ?? {};
+    applyProps(state.strip, cfg);
+    state.strip.removeEventListener("chip-revealed", state.listeners.revealed);
+    state.strip.removeEventListener("chip-dismissed", state.listeners.dismissed);
+    state.listeners.revealed = (e) => {
+      const cb = cfg.onChipRevealed;
+      if (cb) {
+        cb(e.detail);
+      }
+    };
+    state.listeners.dismissed = (e) => {
+      const cb = cfg.onChipDismissed;
+      if (cb) cb(e.detail);
+    };
+    state.strip.addEventListener("chip-revealed", state.listeners.revealed);
+    state.strip.addEventListener("chip-dismissed", state.listeners.dismissed);
+  }
+};
+
+// src/NavLinkMountable.ts
+var STATE_KEY3 = "__syntroNavLinkMount";
+function getState3(container) {
+  return container[STATE_KEY3] ?? null;
+}
+function setState3(container, state) {
+  container[STATE_KEY3] = state;
+}
+function navigateTo(rawUrl) {
+  if (!rawUrl) return;
+  let resolved;
+  try {
+    resolved = new URL(rawUrl, window.location.origin);
+  } catch {
+    return;
+  }
+  if (resolved.origin !== window.location.origin) return;
+  if (resolved.protocol !== "http:" && resolved.protocol !== "https:") return;
+  window.history.pushState(null, "", resolved.toString());
+  window.dispatchEvent(new PopStateEvent("popstate"));
+}
+function buildButton(cfg) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.dataset.syntroNavLink = "";
+  button.style.display = "inline-flex";
+  button.style.alignItems = "center";
+  button.style.gap = "6px";
+  button.style.padding = "6px 12px";
+  button.style.borderRadius = "8px";
+  button.style.fontFamily = "var(--sc-font-family, 'system-ui')";
+  button.style.fontSize = "12px";
+  button.style.fontWeight = "600";
+  button.style.cursor = "pointer";
+  button.style.color = "var(--sc-accent-foreground, currentColor)";
+  button.style.background = "hsl(var(--sc-accent-color) / 0.85)";
+  button.style.border = "1px solid hsl(var(--sc-accent-color) / 0.30)";
+  applyLabel(button, cfg);
+  return button;
+}
+function applyLabel(button, cfg) {
+  const url = String(cfg.url ?? "");
+  const label = cfg.label ?? (url ? `Go to ${url}` : "Go");
+  button.textContent = label;
+}
+var NavLinkMountable = {
+  mount(container, mountConfig) {
+    const cfg = mountConfig ?? {};
+    const button = buildButton(cfg);
+    const onClick = (_e) => {
+      const current = getState3(container);
+      const url = current?.cfg.url ?? cfg.url;
+      navigateTo(String(url ?? ""));
+    };
+    button.addEventListener("click", onClick);
+    container.appendChild(button);
+    setState3(container, { button, cfg, onClick });
+    return () => {
+      button.removeEventListener("click", onClick);
+      button.remove();
+      setState3(container, null);
+    };
+  },
+  update(container, mountConfig) {
+    const state = getState3(container);
+    if (!state) return;
+    const cfg = mountConfig ?? {};
+    applyLabel(state.button, cfg);
+    state.cfg = cfg;
+  }
+};
+
+// src/TextAnswerMountable.ts
+var STATE_KEY4 = "__syntroTextAnswerMount";
+function getState4(container) {
+  return container[STATE_KEY4] ?? null;
+}
+function setState4(container, state) {
+  container[STATE_KEY4] = state;
+}
+function applyText(p, text) {
+  p.textContent = text;
+}
+var TextAnswerMountable = {
+  mount(container, mountConfig) {
+    const cfg = mountConfig ?? {};
+    const paragraph = document.createElement("p");
+    paragraph.dataset.syntroTextAnswer = "";
+    paragraph.style.margin = "0";
+    paragraph.style.fontSize = "12px";
+    paragraph.style.lineHeight = "1.55";
+    paragraph.style.color = "var(--sc-tile-text-color, currentColor)";
+    applyText(paragraph, String(cfg.text ?? ""));
+    container.appendChild(paragraph);
+    setState4(container, { paragraph, cfg });
+    return () => {
+      paragraph.remove();
+      setState4(container, null);
+    };
+  },
+  update(container, mountConfig) {
+    const state = getState4(container);
+    if (!state) return;
+    const cfg = mountConfig ?? {};
+    applyText(state.paragraph, String(cfg.text ?? ""));
+    state.cfg = cfg;
+  }
+};
+
 // src/runtime.ts
 var runtime = {
   id: "adaptive-chatbot",
@@ -19,6 +1579,61 @@ var runtime = {
         description: "AI-powered chat assistant with SSE streaming and A2UI support",
         icon: "\u{1F4AC}"
       }
+    },
+    // PRD §3 chat lid: the standalone chat bar UI shell. Used as a slot
+    // `lid` widget (where it replaces the launcher) or as a regular
+    // tile widget (renders inside the drawer). Headless of any chat
+    // transport — emits chat-message-sent / chat-interrupt / canvas-close
+    // for the parent to wire to whatever pipeline it owns.
+    {
+      id: "adaptive-chatbot:chat-bar",
+      component: AdaptiveChatBarMountable,
+      metadata: {
+        name: "Chat Bar",
+        description: "Always-visible chat input row with bubble-up trail. Headless \u2014 wire to your own transport.",
+        icon: "\u2726"
+      }
+    },
+    // PRD §4.5 suggested-chips tile: horizontally-wrapping chip strip
+    // with click-to-reveal payload drawer. Each chip is a
+    // `suggestions:chip` action.
+    {
+      id: "adaptive-chatbot:chips-strip",
+      component: AdaptiveChipsStripMountable,
+      metadata: {
+        name: "Suggested Chips",
+        description: "Wrapping chip strip with click-to-reveal payloads.",
+        icon: "\u2728"
+      }
+    },
+    // Built-in chip payload — a single paragraph of body text. Chip
+    // payloads are widget references (same {widget,props} shape as
+    // tile/lid configs); this is the simplest one shipped out of the
+    // box so the chip pattern works without requiring a downstream
+    // adaptive for a "just answer with text" case.
+    {
+      id: "adaptive-chatbot:text-answer",
+      component: TextAnswerMountable,
+      metadata: {
+        name: "Text Answer",
+        description: "Single paragraph payload \u2014 the default chip-drawer content.",
+        icon: "\xB6"
+      }
+    },
+    // Chip payload for LLM-authored navigation suggestions. Backed by
+    // the `suggest-navigation` ItemTemplate: the backend wraps a curated
+    // URL into props.url, the chip's payload-drawer mounts this widget,
+    // user clicks "Go to <url>" → same-origin SPA navigation. Kept here
+    // (not in adaptive-nav) so chip payloads ship with the chatbot
+    // bundle that already provides chips-strip + text-answer.
+    {
+      id: "adaptive-chatbot:nav-link",
+      component: NavLinkMountable,
+      metadata: {
+        name: "Nav Link",
+        description: "Same-origin navigation button \u2014 used as a chip payload for LLM-authored nav suggestions.",
+        icon: "\u2192"
+      }
     }
   ]
 };