@invergent/website-widget 2.7.4 → 2.7.6

package/dist/ui.cjs

@@ -0,0 +1,1254 @@
+'use strict';
+
+var preact = require('preact');
+var client = require('@ag-ui/client');
+var rxjs = require('rxjs');
+var hooks = require('preact/hooks');
+var jsxRuntime = require('preact/jsx-runtime');
+
+// src/ui/mount.tsx
+
+// src/constants.ts
+var SDK_VERSION = "0.1.0";
+var CSRF_HEADER = "X-CSRF-Token";
+var VERSION_HEADER = "X-Surogates-Widget-Version";
+var PATH_BOOTSTRAP = "/v1/website/sessions";
+var PATH_MESSAGES = (sessionId) => `/v1/website/sessions/${sessionId}/messages`;
+var PATH_EVENTS = (sessionId, after) => `/v1/website/sessions/${sessionId}/events?after=${after}`;
+var PATH_END = (sessionId) => `/v1/website/sessions/${sessionId}/end`;
+var SURG_EVENT = {
+  USER_MESSAGE: "user.message",
+  LLM_REQUEST: "llm.request",
+  LLM_RESPONSE: "llm.response",
+  LLM_THINKING: "llm.thinking",
+  LLM_DELTA: "llm.delta",
+  TOOL_CALL: "tool.call",
+  TOOL_RESULT: "tool.result",
+  SANDBOX_PROVISION: "sandbox.provision",
+  SANDBOX_EXECUTE: "sandbox.execute",
+  SANDBOX_RESULT: "sandbox.result",
+  SANDBOX_DESTROY: "sandbox.destroy",
+  SESSION_START: "session.start",
+  SESSION_PAUSE: "session.pause",
+  SESSION_RESUME: "session.resume",
+  SESSION_COMPLETE: "session.complete",
+  SESSION_FAIL: "session.fail",
+  SESSION_DONE: "session.done",
+  CONTEXT_COMPACT: "context.compact",
+  MEMORY_UPDATE: "memory.update",
+  EXPERT_DELEGATION: "expert.delegation",
+  EXPERT_RESULT: "expert.result",
+  EXPERT_FAILURE: "expert.failure",
+  POLICY_DENIED: "policy.denied",
+  POLICY_ALLOWED: "policy.allowed",
+  HARNESS_CRASH: "harness.crash"
+};
+
+// src/errors.ts
+var SurogatesError = class extends Error {
+  constructor(message, opts) {
+    super(message);
+    this.name = "SurogatesError";
+    if (opts?.status !== void 0) this.status = opts.status;
+    if (opts?.detail !== void 0) this.detail = opts.detail;
+    if (opts?.cause !== void 0) this.cause = opts.cause;
+  }
+};
+var SurogatesAuthError = class extends SurogatesError {
+  constructor(message, opts) {
+    super(message, opts);
+    this.name = "SurogatesAuthError";
+  }
+};
+var SurogatesRateLimitError = class extends SurogatesError {
+  constructor(message, opts) {
+    super(message, opts);
+    this.name = "SurogatesRateLimitError";
+    if (opts?.retryAfter !== void 0) this.retryAfter = opts.retryAfter;
+  }
+};
+var SurogatesProtocolError = class extends SurogatesError {
+  constructor(message, opts) {
+    super(message, opts);
+    this.name = "SurogatesProtocolError";
+  }
+};
+var SurogatesNetworkError = class extends SurogatesError {
+  constructor(message, opts) {
+    super(message, opts);
+    this.name = "SurogatesNetworkError";
+  }
+};
+
+// src/protocol.ts
+function withAgentId(path, agentId) {
+  if (!agentId) return path;
+  const sep = path.includes("?") ? "&" : "?";
+  return `${path}${sep}agent_id=${encodeURIComponent(agentId)}`;
+}
+async function doFetch(url, init) {
+  let response;
+  try {
+    response = await fetch(url, {
+      ...init,
+      credentials: "include",
+      headers: {
+        ...init.headers,
+        [VERSION_HEADER]: SDK_VERSION
+      }
+    });
+  } catch (cause) {
+    throw new SurogatesNetworkError("Network request failed", { cause });
+  }
+  return response;
+}
+async function extractDetail(response) {
+  try {
+    const body = await response.json();
+    return typeof body.detail === "string" ? body.detail : void 0;
+  } catch {
+    return void 0;
+  }
+}
+async function raiseForStatus(response, action) {
+  const detail = await extractDetail(response);
+  if (response.status === 401 || response.status === 403) {
+    throw new SurogatesAuthError(`${action} rejected (${response.status})`, {
+      status: response.status,
+      ...detail !== void 0 && { detail }
+    });
+  }
+  if (response.status === 429) {
+    const retryAfterHeader = response.headers.get("Retry-After");
+    const retryAfter = retryAfterHeader ? Number(retryAfterHeader) : void 0;
+    throw new SurogatesRateLimitError(`${action} rate-limited`, {
+      status: response.status,
+      ...retryAfter !== void 0 && Number.isFinite(retryAfter) && { retryAfter },
+      ...detail !== void 0 && { detail }
+    });
+  }
+  if (response.status >= 500) {
+    throw new SurogatesNetworkError(
+      `${action} failed (${response.status}${detail ? `: ${detail}` : ""})`
+    );
+  }
+  throw new SurogatesProtocolError(`${action} failed (${response.status})`, {
+    status: response.status,
+    ...detail !== void 0 && { detail }
+  });
+}
+async function bootstrap(apiUrl, publishableKey, agentId) {
+  const response = await doFetch(apiUrl + withAgentId(PATH_BOOTSTRAP, agentId), {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${publishableKey}`,
+      "Content-Type": "application/json"
+    }
+  });
+  if (!response.ok) {
+    await raiseForStatus(response, "Bootstrap");
+  }
+  let body;
+  try {
+    body = await response.json();
+  } catch (cause) {
+    throw new SurogatesProtocolError("Bootstrap returned non-JSON body", { cause });
+  }
+  if (!body || typeof body.session_id !== "string" || typeof body.csrf_token !== "string") {
+    throw new SurogatesProtocolError("Bootstrap response missing required fields");
+  }
+  return {
+    sessionId: body.session_id,
+    csrfToken: body.csrf_token,
+    expiresAt: Number(body.expires_at) || 0,
+    agentName: body.agent_name ?? ""
+  };
+}
+async function sendMessage(apiUrl, sessionId, csrfToken, content, agentId) {
+  const response = await doFetch(apiUrl + withAgentId(PATH_MESSAGES(sessionId), agentId), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      [CSRF_HEADER]: csrfToken
+    },
+    body: JSON.stringify({ content })
+  });
+  if (!response.ok) {
+    await raiseForStatus(response, "Send message");
+  }
+  const body = await response.json().catch(() => ({}));
+  return { eventId: Number(body.event_id ?? 0) };
+}
+async function endSession(apiUrl, sessionId, csrfToken, agentId) {
+  try {
+    await doFetch(apiUrl + withAgentId(PATH_END(sessionId), agentId), {
+      method: "POST",
+      headers: { [CSRF_HEADER]: csrfToken }
+    });
+  } catch {
+  }
+}
+function openEventStream(apiUrl, sessionId, cursor, agentId) {
+  const url = apiUrl + withAgentId(PATH_EVENTS(sessionId, cursor), agentId);
+  return new EventSource(url, { withCredentials: true });
+}
+var END_OF_TURN_FINISH_REASONS = /* @__PURE__ */ new Set(["stop", "end_turn", "length"]);
+var CONTINUATION_FINISH_REASONS = /* @__PURE__ */ new Set(["tool_calls", "function_call", "tool_use"]);
+var Translator = class {
+  constructor() {
+    /**
+     * Tool calls that have been announced (``TOOL_CALL_CHUNK`` emitted)
+     * but have not yet received a matching ``tool.result``.  Non-empty
+     * means the turn is mid-execution even if an ``llm.response`` looks
+     * final.
+     */
+    this.pendingToolCalls = /* @__PURE__ */ new Set();
+    /** Set once we've seen an end-of-turn signal. */
+    this._turnComplete = false;
+  }
+  get isTurnComplete() {
+    return this._turnComplete;
+  }
+  /**
+   * Translate one SSE frame into zero or more AG-UI events.
+   *
+   * Returns an empty array when the frame carries no user-visible
+   * information (internal bookkeeping events like ``harness.wake``).
+   * Returns multiple events when a single Surogates event corresponds
+   * to a chunk triad that the AG-UI client can't reconstruct on its
+   * own -- though we try to use chunk events to keep this to one
+   * output event per input in the common path.
+   */
+  translate(frame) {
+    switch (frame.type) {
+      case SURG_EVENT.LLM_DELTA:
+        return this.handleLlmDelta(frame);
+      case SURG_EVENT.LLM_RESPONSE:
+        return this.handleLlmResponse(frame);
+      case SURG_EVENT.LLM_THINKING:
+        return this.handleLlmThinking(frame);
+      case SURG_EVENT.TOOL_CALL:
+        return this.handleToolCall(frame);
+      case SURG_EVENT.TOOL_RESULT:
+        return this.handleToolResult(frame);
+      case SURG_EVENT.POLICY_DENIED:
+        return this.handlePolicyDenied(frame);
+      case SURG_EVENT.EXPERT_DELEGATION:
+        return this.handleExpertDelegation(frame);
+      case SURG_EVENT.EXPERT_RESULT:
+        return this.handleExpertResult(frame);
+      case SURG_EVENT.EXPERT_FAILURE:
+        return this.asCustom(frame);
+      case SURG_EVENT.SESSION_FAIL:
+      case SURG_EVENT.HARNESS_CRASH:
+        return this.handleTerminalFailure(frame);
+      case SURG_EVENT.SESSION_DONE:
+      case SURG_EVENT.SESSION_COMPLETE:
+        this._turnComplete = true;
+        return [];
+      // Frames we do not surface to AG-UI consumers: internal
+      // orchestration (``user.message`` is already in the consumer's
+      // own ``agent.messages``; ``llm.request``, ``session.start``,
+      // ``sandbox.*``, ``harness.wake`` are implementation details).
+      case SURG_EVENT.USER_MESSAGE:
+      case SURG_EVENT.LLM_REQUEST:
+      case SURG_EVENT.SESSION_START:
+      case SURG_EVENT.SESSION_PAUSE:
+      case SURG_EVENT.SESSION_RESUME:
+      case SURG_EVENT.SANDBOX_PROVISION:
+      case SURG_EVENT.SANDBOX_EXECUTE:
+      case SURG_EVENT.SANDBOX_RESULT:
+      case SURG_EVENT.SANDBOX_DESTROY:
+      case SURG_EVENT.POLICY_ALLOWED:
+        return [];
+      // Everything else (``memory.update``, ``context.compact``,
+      // saga events, future server additions) is forwarded as CUSTOM
+      // so advanced consumers that want that visibility can still
+      // subscribe -- without us pre-committing to a particular AG-UI
+      // shape for a Surogates-specific event that might evolve.
+      default:
+        return this.asCustom(frame);
+    }
+  }
+  // ------------------------------------------------------------------
+  // Individual handlers
+  // ------------------------------------------------------------------
+  handleLlmDelta(frame) {
+    const payload = frame.data ?? {};
+    const delta = payload.delta ?? payload.content ?? "";
+    if (!delta) return [];
+    const messageId = this.currentMessageId ?? payload.message_id ?? this.mintMessageId(frame.id);
+    this.currentMessageId = messageId;
+    return [
+      {
+        type: client.EventType.TEXT_MESSAGE_CHUNK,
+        messageId,
+        role: "assistant",
+        delta
+      }
+    ];
+  }
+  handleLlmResponse(frame) {
+    const payload = frame.data ?? {};
+    const events = [];
+    if (!this.currentMessageId && payload.content) {
+      const messageId = payload.message_id ?? payload.id ?? this.mintMessageId(frame.id);
+      events.push({
+        type: client.EventType.TEXT_MESSAGE_CHUNK,
+        messageId,
+        role: "assistant",
+        delta: payload.content
+      });
+    }
+    this.currentMessageId = void 0;
+    const toolCalls = Array.isArray(payload.tool_calls) ? payload.tool_calls : [];
+    const finish = payload.finish_reason ?? payload.stop_reason ?? "";
+    if (CONTINUATION_FINISH_REASONS.has(finish)) {
+      return events;
+    }
+    const modelDone = toolCalls.length === 0 && (finish === "" || END_OF_TURN_FINISH_REASONS.has(finish));
+    if (modelDone && this.pendingToolCalls.size === 0) {
+      this._turnComplete = true;
+    }
+    return events;
+  }
+  handleLlmThinking(frame) {
+    const payload = frame.data ?? {};
+    const delta = payload.delta ?? payload.content ?? "";
+    if (!delta) return [];
+    const messageId = this.currentReasoningId ?? payload.message_id ?? this.mintMessageId(frame.id);
+    const isNew = this.currentReasoningId !== messageId;
+    this.currentReasoningId = messageId;
+    const events = [];
+    if (isNew) {
+      events.push({
+        type: client.EventType.REASONING_START,
+        messageId
+      });
+      events.push({
+        type: client.EventType.REASONING_MESSAGE_START,
+        messageId,
+        role: "reasoning"
+      });
+    }
+    events.push({
+      type: client.EventType.REASONING_MESSAGE_CONTENT,
+      messageId,
+      delta
+    });
+    return events;
+  }
+  handleToolCall(frame) {
+    const payload = frame.data ?? {};
+    const toolCallId = payload.tool_call_id ?? `tc-${frame.id}`;
+    const toolCallName = payload.name ?? "unknown_tool";
+    this.currentMessageId = void 0;
+    this.currentReasoningId = void 0;
+    this.pendingToolCalls.add(toolCallId);
+    const args = typeof payload.arguments === "string" ? payload.arguments : JSON.stringify(payload.arguments ?? {});
+    return [
+      {
+        type: client.EventType.TOOL_CALL_CHUNK,
+        toolCallId,
+        toolCallName,
+        delta: args
+      }
+    ];
+  }
+  handleToolResult(frame) {
+    const payload = frame.data ?? {};
+    const toolCallId = payload.tool_call_id ?? `tc-${frame.id}`;
+    const content = payload.content ?? "";
+    this.pendingToolCalls.delete(toolCallId);
+    return [
+      {
+        type: client.EventType.TOOL_CALL_RESULT,
+        messageId: `tr-${frame.id}`,
+        toolCallId,
+        content,
+        role: "tool"
+      }
+    ];
+  }
+  handlePolicyDenied(frame) {
+    const payload = frame.data ?? {};
+    return [
+      {
+        type: client.EventType.CUSTOM,
+        name: SURG_EVENT.POLICY_DENIED,
+        value: { tool: payload.tool, reason: payload.reason }
+      }
+    ];
+  }
+  handleExpertDelegation(frame) {
+    const payload = frame.data ?? {};
+    const name = payload.expert_name ?? "expert";
+    return [
+      {
+        type: client.EventType.STEP_STARTED,
+        stepName: `expert:${name}`
+      }
+    ];
+  }
+  handleExpertResult(frame) {
+    const payload = frame.data ?? {};
+    const name = payload.expert_name ?? "expert";
+    return [
+      {
+        type: client.EventType.STEP_FINISHED,
+        stepName: `expert:${name}`
+      }
+    ];
+  }
+  handleTerminalFailure(frame) {
+    this._turnComplete = true;
+    const payload = frame.data ?? {};
+    const message = payload.error ?? payload.message ?? `${frame.type} fired`;
+    return [
+      {
+        type: client.EventType.RUN_ERROR,
+        message,
+        code: frame.type
+      }
+    ];
+  }
+  asCustom(frame) {
+    return [
+      {
+        type: client.EventType.CUSTOM,
+        name: frame.type,
+        value: frame.data
+      }
+    ];
+  }
+  /**
+   * Generate a stable message id derived from the triggering frame's
+   * event id.  The event id is globally unique per session, so using
+   * it as a suffix guarantees uniqueness without pulling in ``uuid``.
+   */
+  mintMessageId(frameId) {
+    return `msg-${frameId}`;
+  }
+};
+
+// src/agent.ts
+var SURG_EVENT_NAMES = Object.values(SURG_EVENT);
+var DRAIN_WINDOW_MS = 250;
+var WebsiteAgent = class extends client.AbstractAgent {
+  constructor(config) {
+    super(config);
+    /** Monotonic cursor across runs.  Passed to the SSE ``?after=`` param. */
+    this.cursor = 0;
+    if (!config.apiUrl) {
+      throw new client.AGUIError('WebsiteAgent: "apiUrl" is required.');
+    }
+    if (!config.publishableKey) {
+      throw new client.AGUIError('WebsiteAgent: "publishableKey" is required.');
+    }
+    this.apiUrl = config.apiUrl.replace(/\/+$/, "");
+    this.publishableKey = config.publishableKey;
+  }
+  /**
+   * Ensure we have a live session cookie + CSRF token.
+   *
+   * Idempotent; returns the cached result when one already exists.
+   * ``bootstrap()`` is the only call that requires the publishable
+   * key to travel in an Authorization header, so callers that want
+   * to eagerly validate their configuration (e.g. to surface a
+   * setup error at widget-load time) can invoke this directly.
+   */
+  async ensureBootstrapped() {
+    if (this.bootstrapResult) return this.bootstrapResult;
+    this.bootstrapResult = await bootstrap(
+      this.apiUrl,
+      this.publishableKey,
+      this.agentId
+    );
+    return this.bootstrapResult;
+  }
+  /**
+   * Close the current session on the server side and drop local state.
+   *
+   * Callers should invoke this when the visitor closes the chat UI
+   * so the server can mark the session complete instead of waiting
+   * for the idle-reset timer.  Safe to call when no session has been
+   * bootstrapped yet.
+   */
+  async end() {
+    const current = this.bootstrapResult;
+    if (!current) return;
+    this.bootstrapResult = void 0;
+    this.cursor = 0;
+    await endSession(this.apiUrl, current.sessionId, current.csrfToken, this.agentId);
+  }
+  /**
+   * Implementation of the AG-UI ``run()`` contract.
+   *
+   * Returns a cold observable: one subscription per run.  AG-UI's
+   * ``runAgent`` pipeline pipes this through chunk transformation,
+   * verification, and subscriber notifications before updating
+   * ``this.messages``.
+   */
+  run(input) {
+    return new rxjs.Observable((subscriber) => {
+      const ctx = {
+        terminated: false,
+        source: void 0,
+        drainTimer: void 0
+      };
+      void this.driveRun(input, subscriber, ctx).catch((err) => {
+        if (!ctx.terminated) {
+          ctx.terminated = true;
+          subscriber.error(err);
+        }
+      });
+      return () => {
+        ctx.terminated = true;
+        if (ctx.drainTimer !== void 0) return;
+        closeEventSource(ctx.source);
+        ctx.source = void 0;
+      };
+    });
+  }
+  /**
+   * Async body of the observable factory.
+   *
+   * Emits ``RUN_STARTED`` up front so every downstream failure is
+   * well-bracketed by the AG-UI lifecycle.  ``RUN_FINISHED`` is
+   * emitted by the SSE listeners when the translator detects end-of-
+   * turn; ``RUN_ERROR`` is emitted from the catch below when bootstrap
+   * or message-send fails before the SSE has any chance to close out.
+   *
+   * The ``ctx.terminated`` guard is the single enforcement point for
+   * AG-UI's "exactly one terminal event" invariant.  Every emission
+   * site checks it before calling ``subscriber.next`` with RUN_FINISHED
+   * or RUN_ERROR, and every terminal call sets it to true first.
+   */
+  async driveRun(input, subscriber, ctx) {
+    if (ctx.terminated) return;
+    subscriber.next({
+      type: client.EventType.RUN_STARTED,
+      threadId: input.threadId,
+      runId: input.runId
+    });
+    try {
+      const userText = this.extractUserText(input.messages);
+      const boot = await this.ensureBootstrapped();
+      this.replaceStreamSource(
+        ctx,
+        boot.sessionId,
+        this.cursor,
+        new Translator(),
+        subscriber,
+        input
+      );
+      await this.sendWithCookieRecovery(boot, userText, (fresh) => {
+        this.replaceStreamSource(
+          ctx,
+          fresh.sessionId,
+          0,
+          new Translator(),
+          subscriber,
+          input
+        );
+      });
+    } catch (err) {
+      if (ctx.terminated) return;
+      ctx.terminated = true;
+      const message = err instanceof Error ? err.message : String(err);
+      const code = err instanceof SurogatesAuthError ? "auth" : "error";
+      subscriber.next({
+        type: client.EventType.RUN_ERROR,
+        message,
+        code
+      });
+      closeEventSource(ctx.source);
+      ctx.source = void 0;
+      subscriber.complete();
+    }
+  }
+  /**
+   * Tear down whatever EventSource is currently live on ``ctx`` and
+   * open a fresh one against *sessionId* starting at *after*.  Called
+   * both for the initial stream and after cookie recovery.  Always
+   * clears the stale ``onerror`` first so the old source can't race
+   * a ``RUN_ERROR`` into the subscriber after it's been replaced.
+   */
+  replaceStreamSource(ctx, sessionId, after, translator, subscriber, input) {
+    closeEventSource(ctx.source);
+    const source = openEventStream(this.apiUrl, sessionId, after, this.agentId);
+    ctx.source = source;
+    this.attachStreamListeners(source, translator, subscriber, input, ctx);
+  }
+  /**
+   * Try ``sendMessage``; on auth failure re-bootstrap once and retry.
+   *
+   * The re-bootstrap mints a new session id, so the caller passes an
+   * ``onRebootstrap`` callback that reopens the SSE stream against the
+   * fresh session before the retry.  Visitor continuity across
+   * bootstraps is a deliberate non-feature for v1; the new session
+   * starts empty.  Only frames emitted on the OLD session between
+   * SSE-open and send-failure are lost -- and those are always
+   * previous-turn events, since the current turn's ``sendMessage`` is
+   * what 401-ed.
+   */
+  async sendWithCookieRecovery(boot, content, onRebootstrap) {
+    try {
+      await sendMessage(this.apiUrl, boot.sessionId, boot.csrfToken, content, this.agentId);
+      return;
+    } catch (err) {
+      if (!(err instanceof SurogatesAuthError)) throw err;
+      this.bootstrapResult = void 0;
+      this.cursor = 0;
+      const fresh = await this.ensureBootstrapped();
+      onRebootstrap(fresh);
+      await sendMessage(this.apiUrl, fresh.sessionId, fresh.csrfToken, content, this.agentId);
+    }
+  }
+  /**
+   * Wire up the EventSource to translate and forward every frame,
+   * and terminate the observable when the translator flags
+   * end-of-turn or a transport failure occurs.
+   *
+   * After the translator flips end-of-turn we emit ``RUN_FINISHED``
+   * immediately, then keep the stream open for ``DRAIN_WINDOW_MS``
+   * so trailing frames (late ``memory.update``, the sentinel
+   * ``session.done``) advance ``this.cursor`` rather than arriving
+   * on the next run.  The ``ctx.terminated`` gate stops additional
+   * subscriber emissions during the drain.
+   */
+  attachStreamListeners(source, translator, subscriber, input, ctx) {
+    const scheduleDrainClose = () => {
+      if (ctx.drainTimer !== void 0) globalThis.clearTimeout(ctx.drainTimer);
+      ctx.drainTimer = globalThis.setTimeout(() => {
+        ctx.drainTimer = void 0;
+        closeEventSource(source);
+      }, DRAIN_WINDOW_MS);
+    };
+    const finish = () => {
+      if (ctx.terminated) return;
+      ctx.terminated = true;
+      subscriber.next({
+        type: client.EventType.RUN_FINISHED,
+        threadId: input.threadId,
+        runId: input.runId
+      });
+      scheduleDrainClose();
+      subscriber.complete();
+    };
+    const handleFrame = (name, data, lastEventId) => {
+      let parsed;
+      try {
+        parsed = JSON.parse(data);
+      } catch {
+        parsed = data;
+      }
+      const frame = {
+        id: Number(lastEventId) || 0,
+        type: name,
+        data: parsed
+      };
+      if (frame.id > this.cursor) this.cursor = frame.id;
+      if (ctx.terminated) return;
+      const events = translator.translate(frame);
+      for (const e of events) subscriber.next(e);
+      if (translator.isTurnComplete) finish();
+    };
+    for (const name of SURG_EVENT_NAMES) {
+      source.addEventListener(name, (ev) => {
+        handleFrame(name, ev.data, ev.lastEventId);
+      });
+    }
+    source.onerror = () => {
+      if (source.readyState !== 2) return;
+      if (ctx.terminated) return;
+      ctx.terminated = true;
+      subscriber.next({
+        type: client.EventType.RUN_ERROR,
+        message: "SSE connection closed",
+        code: "sse_closed"
+      });
+      subscriber.complete();
+    };
+  }
+  /**
+   * Find the last user-authored message body to post.  AG-UI supports
+   * multimodal content arrays; this v1 only handles string content
+   * (the website channel's ``POST /messages`` endpoint accepts plain
+   * text).  Multimodal support lands once the server grows a media
+   * upload path.
+   */
+  extractUserText(messages) {
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const m = messages[i];
+      if (!m || m.role !== "user") continue;
+      const content = m.content;
+      if (typeof content === "string" && content.trim().length > 0) {
+        return content;
+      }
+    }
+    throw new client.AGUIError(
+      "WebsiteAgent: no user message with string content found in input.messages."
+    );
+  }
+};
+function closeEventSource(source) {
+  if (!source) return;
+  try {
+    source.onerror = null;
+  } catch {
+  }
+  source.close();
+}
+
+// src/ui/styles.ts
+var WIDGET_STYLES = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+
+.surg-root {
+  --surg-radius: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #0f172a;
+}
+
+.surg-launcher {
+  position: fixed;
+  bottom: 20px;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  background: var(--surg-accent);
+  color: var(--surg-accent-fg);
+  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  z-index: 2147483000;
+}
+.surg-launcher:hover { transform: scale(1.06); box-shadow: 0 8px 28px rgba(15, 23, 42, 0.3); }
+.surg-launcher svg { width: 26px; height: 26px; }
+.surg-pos-bottom-right { right: 20px; }
+.surg-pos-bottom-left { left: 20px; }
+
+.surg-panel {
+  position: fixed;
+  bottom: 88px;
+  width: 380px;
+  max-width: calc(100vw - 40px);
+  height: 560px;
+  max-height: calc(100vh - 120px);
+  background: #ffffff;
+  border-radius: var(--surg-radius);
+  box-shadow: 0 12px 48px rgba(15, 23, 42, 0.28);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 2147483000;
+  animation: surg-rise 0.18s ease;
+}
+@keyframes surg-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
+
+.surg-inline {
+  position: relative;
+  bottom: auto; right: auto; left: auto;
+  width: 100%;
+  height: 100%;
+  box-shadow: none;
+  border: 1px solid #e2e8f0;
+  animation: none;
+}
+
+.surg-header {
+  background: var(--surg-accent);
+  color: var(--surg-accent-fg);
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+}
+.surg-header-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.surg-header-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
+.surg-title { font-weight: 600; font-size: 15px; }
+.surg-subtitle { font-size: 11px; font-weight: 400; opacity: 0.85; }
+.surg-logo {
+  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
+  background: rgba(255, 255, 255, 0.2); flex-shrink: 0;
+}
+.surg-launcher-logo {
+  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
+}
+.surg-close {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.85;
+  padding: 4px;
+  display: flex;
+  border-radius: 6px;
+}
+.surg-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
+
+.surg-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #f8fafc;
+}
+
+.surg-bubble {
+  max-width: 82%;
+  padding: 9px 13px;
+  border-radius: 14px;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.surg-bubble p { margin: 0 0 8px; }
+.surg-bubble p:last-child { margin-bottom: 0; }
+.surg-bubble ul, .surg-bubble ol { margin: 4px 0; padding-left: 20px; }
+.surg-bubble code {
+  background: rgba(15, 23, 42, 0.08);
+  padding: 1px 5px;
+  border-radius: 5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+}
+.surg-bubble pre {
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: 10px 12px;
+  border-radius: 10px;
+  overflow-x: auto;
+  margin: 6px 0;
+}
+.surg-bubble pre code { background: transparent; padding: 0; color: inherit; }
+.surg-bubble a { color: var(--surg-accent); }
+
+.surg-user {
+  align-self: flex-end;
+  background: var(--surg-accent);
+  color: var(--surg-accent-fg);
+  border-bottom-right-radius: 4px;
+  white-space: pre-wrap;
+}
+.surg-user a { color: var(--surg-accent-fg); text-decoration: underline; }
+.surg-assistant {
+  align-self: flex-start;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-bottom-left-radius: 4px;
+}
+
+.surg-typing { display: flex; gap: 4px; padding: 4px 2px; }
+.surg-typing span {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: #94a3b8;
+  animation: surg-blink 1.2s infinite ease-in-out;
+}
+.surg-typing span:nth-child(2) { animation-delay: 0.2s; }
+.surg-typing span:nth-child(3) { animation-delay: 0.4s; }
+@keyframes surg-blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
+
+.surg-error {
+  margin: 0 16px;
+  padding: 8px 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+  border-radius: 10px;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.surg-composer {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  border-top: 1px solid #e2e8f0;
+  background: #ffffff;
+  flex-shrink: 0;
+}
+.surg-input {
+  flex: 1;
+  resize: none;
+  border: 1px solid #cbd5e1;
+  border-radius: 12px;
+  padding: 9px 12px;
+  font: inherit;
+  color: inherit;
+  max-height: 120px;
+  outline: none;
+}
+.surg-input:focus { border-color: var(--surg-accent); }
+.surg-send {
+  border: none;
+  background: var(--surg-accent);
+  color: var(--surg-accent-fg);
+  border-radius: 12px;
+  width: 40px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.surg-send:disabled { opacity: 0.5; cursor: not-allowed; }
+.surg-send svg { width: 18px; height: 18px; }
+
+.surg-powered {
+  text-align: center;
+  font-size: 11px;
+  color: #94a3b8;
+  padding: 0 0 8px;
+  background: #ffffff;
+}
+`;
+
+// src/ui/markdown.ts
+var ESCAPE_MAP = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+function escapeHtml(s) {
+  return s.replace(/[&<>"']/g, (c) => ESCAPE_MAP[c] ?? c);
+}
+function safeHref(raw) {
+  const url = raw.trim();
+  if (/^(https?:|mailto:)/i.test(url)) return url;
+  return void 0;
+}
+function renderInline(escaped) {
+  let out = escaped;
+  out = out.replace(/`([^`]+)`/g, (_m, code) => `<code>${code}</code>`);
+  out = out.replace(
+    /\[([^\]]+)\]\(([^)\s]+)\)/g,
+    (_m, text, href) => {
+      const safe = safeHref(href);
+      if (!safe) return `${text}`;
+      return `<a href="${safe}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+    }
+  );
+  out = out.replace(/\*\*([^*]+)\*\*/g, (_m, t) => `<strong>${t}</strong>`);
+  out = out.replace(/(^|[^*])\*([^*\n]+)\*/g, (_m, pre, t) => `${pre}<em>${t}</em>`);
+  return out;
+}
+function renderMarkdown(src) {
+  const parts = src.split(/```/);
+  const html = [];
+  parts.forEach((part, index) => {
+    const isCodeFence = index % 2 === 1;
+    if (isCodeFence) {
+      const body = part.replace(/^[^\n]*\n/, (m) => part.includes("\n") ? "" : m);
+      html.push(`<pre><code>${escapeHtml(body.replace(/\n$/, ""))}</code></pre>`);
+      return;
+    }
+    const blocks = part.split(/\n{2,}/);
+    for (const block of blocks) {
+      const lines = block.split("\n").filter((l) => l.trim().length > 0);
+      if (lines.length === 0) continue;
+      const isUnordered = lines.every((l) => /^\s*[-*]\s+/.test(l));
+      const isOrdered = lines.every((l) => /^\s*\d+\.\s+/.test(l));
+      if (isUnordered || isOrdered) {
+        const items = lines.map((l) => l.replace(/^\s*(?:[-*]|\d+\.)\s+/, "")).map((l) => `<li>${renderInline(escapeHtml(l))}</li>`).join("");
+        html.push(isOrdered ? `<ol>${items}</ol>` : `<ul>${items}</ul>`);
+        continue;
+      }
+      const paragraph = lines.map((l) => renderInline(escapeHtml(l))).join("<br>");
+      html.push(`<p>${paragraph}</p>`);
+    }
+  });
+  return html.join("");
+}
+
+// src/ui/next-action.ts
+var NEXT_ACTION_RE = /<next_action([^>]*)>([\s\S]*?)<\/next_action>\s*/gi;
+var PARTIAL_FOOTER_RE = /(?:^|\n)\s*<(?:n(?:e(?:x(?:t(?:_(?:a(?:c(?:t(?:i(?:o(?:n[\s\S]*)?)?)?)?)?)?)?)?)?)?)?$/i;
+function stripNextAction(text) {
+  if (!text) return text;
+  const withoutBlocks = text.replace(NEXT_ACTION_RE, "").trimEnd();
+  const match = PARTIAL_FOOTER_RE.exec(withoutBlocks);
+  return match ? withoutBlocks.slice(0, match.index).trimEnd() : withoutBlocks;
+}
+var DEFAULT_SUBTITLE = "Typically replies instantly";
+var DEFAULT_WELCOME = "Hi! \u{1F44B} How can I help you today?";
+function uid() {
+  return `u-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`;
+}
+function snapshot(messages) {
+  const out = [];
+  for (const m of messages) {
+    if (m.role !== "user" && m.role !== "assistant") continue;
+    const content = typeof m.content === "string" ? m.content : "";
+    out.push({ id: m.id ?? uid(), role: m.role, content });
+  }
+  return out;
+}
+function friendlyError(err) {
+  if (err instanceof SurogatesAuthError) {
+    return "This chat isn\u2019t accepting messages from this site yet. The site owner needs to allow this origin.";
+  }
+  if (err instanceof SurogatesRateLimitError) {
+    return "You\u2019re sending messages too quickly. Please wait a moment and try again.";
+  }
+  if (err && typeof err === "object") {
+    const code = err.code;
+    if (code === "auth") {
+      return "This chat isn\u2019t accepting messages from this site yet. The site owner needs to allow this origin.";
+    }
+    if (code === "sse_closed") return "Connection lost. Please send your message again.";
+    const message = err.message;
+    if (message && message.length < 160) return message;
+  }
+  return "Something went wrong. Please try again.";
+}
+var ICON_CHAT = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" }) });
+var ICON_CLOSE = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var ICON_SEND = /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+] });
+function Widget({ agent, config, registerOpenControl, onOpenChange }) {
+  const inline = !!config.inline;
+  const [open, setOpen] = hooks.useState(inline || !!config.openByDefault);
+  const [messages, setMessages] = hooks.useState(() => snapshot(agent.messages));
+  const [running, setRunning] = hooks.useState(false);
+  const [error, setError] = hooks.useState(null);
+  const [input, setInput] = hooks.useState("");
+  const [agentName, setAgentName] = hooks.useState("");
+  const title = config.title || agentName || "Assistant";
+  const listRef = hooks.useRef(null);
+  const bootstrapStarted = hooks.useRef(false);
+  hooks.useEffect(() => registerOpenControl(setOpen), [registerOpenControl]);
+  hooks.useEffect(() => onOpenChange?.(open), [open, onOpenChange]);
+  hooks.useEffect(() => {
+    const sub = agent.subscribe({
+      onMessagesChanged: () => setMessages(snapshot(agent.messages)),
+      onRunStartedEvent: () => {
+        setRunning(true);
+        setError(null);
+      },
+      onRunFinishedEvent: () => setRunning(false),
+      onRunErrorEvent: ({ event }) => {
+        setRunning(false);
+        setError(friendlyError(event));
+      }
+    });
+    return () => sub.unsubscribe();
+  }, [agent]);
+  hooks.useEffect(() => {
+    if (!open || bootstrapStarted.current) return;
+    bootstrapStarted.current = true;
+    agent.ensureBootstrapped().then((res) => {
+      if (res.agentName) setAgentName(res.agentName);
+    }).catch((err) => {
+      bootstrapStarted.current = false;
+      setError(friendlyError(err));
+    });
+  }, [open, agent]);
+  hooks.useEffect(() => {
+    const el = listRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages, running]);
+  const send = () => {
+    const content = input.trim();
+    if (!content || running) return;
+    setInput("");
+    agent.addMessage({ id: uid(), role: "user", content });
+    setMessages(snapshot(agent.messages));
+    void agent.runAgent().catch(() => {
+    });
+  };
+  const onKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      send();
+    }
+  };
+  const subtitle = config.subtitle ?? DEFAULT_SUBTITLE;
+  const welcomeText = config.welcomeMessage ?? DEFAULT_WELCOME;
+  const hasAssistant = messages.some((m) => m.role === "assistant");
+  const showWelcome = !!welcomeText && !hasAssistant;
+  const showTyping = running && messages[messages.length - 1]?.role !== "assistant";
+  if (!inline && !open) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        class: `surg-launcher surg-pos-${config.position ?? "bottom-right"}`,
+        "aria-label": "Open chat",
+        onClick: () => setOpen(true),
+        children: config.logoUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { class: "surg-launcher-logo", src: config.logoUrl, alt: "" }) : ICON_CHAT
+      }
+    );
+  }
+  const panelClass = inline ? "surg-panel surg-inline" : `surg-panel surg-pos-${config.position ?? "bottom-right"}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { class: panelClass, role: "dialog", "aria-label": title, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "surg-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "surg-header-id", children: [
+        config.logoUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { class: "surg-logo", src: config.logoUrl, alt: "" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "surg-header-text", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { class: "surg-title", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { class: "surg-subtitle", children: subtitle })
+        ] })
+      ] }),
+      !inline && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "surg-close", "aria-label": "Close chat", onClick: () => setOpen(false), children: ICON_CLOSE })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "surg-messages", ref: listRef, children: [
+      showWelcome && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          class: "surg-bubble surg-assistant",
+          dangerouslySetInnerHTML: { __html: renderMarkdown(welcomeText) }
+        }
+      ),
+      messages.map(
+        (m) => m.role === "assistant" ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            class: "surg-bubble surg-assistant",
+            dangerouslySetInnerHTML: { __html: renderMarkdown(stripNextAction(m.content)) }
+          },
+          m.id
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { class: "surg-bubble surg-user", children: m.content }, m.id)
+      ),
+      showTyping && /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "surg-bubble surg-assistant surg-typing", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+        /* @__PURE__ */ jsxRuntime.jsx("span", {})
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { class: "surg-error", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { class: "surg-composer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          class: "surg-input",
+          rows: 1,
+          placeholder: "Type a message\u2026",
+          value: input,
+          disabled: running,
+          onInput: (e) => setInput(e.target.value),
+          onKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: "surg-send", "aria-label": "Send", disabled: running || !input.trim(), onClick: send, children: ICON_SEND })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { class: "surg-powered", children: "Powered by Surogate" })
+  ] });
+}
+var DEFAULT_ACCENT = "#4f46e5";
+function accentForeground(hex) {
+  const v = hex.replace("#", "");
+  const full = v.length === 3 ? v.split("").map((c) => c + c).join("") : v;
+  if (full.length !== 6 || /[^0-9a-f]/i.test(full)) return "#ffffff";
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.62 ? "#0f172a" : "#ffffff";
+}
+function mount(config) {
+  if (!config || !config.apiUrl || !config.publishableKey) {
+    throw new Error(
+      'SurogatesWidget.mount: "apiUrl" and "publishableKey" are required.'
+    );
+  }
+  const accent = config.accentColor ?? DEFAULT_ACCENT;
+  let destroyed = false;
+  const host = document.createElement("div");
+  host.setAttribute("data-surogates-widget", "");
+  const shadow = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = WIDGET_STYLES;
+  shadow.appendChild(style);
+  const root = document.createElement("div");
+  root.className = "surg-root";
+  shadow.appendChild(root);
+  const applyAccent = (accentColor) => {
+    const a = accentColor ?? DEFAULT_ACCENT;
+    root.style.setProperty("--surg-accent", a);
+    root.style.setProperty("--surg-accent-fg", accentForeground(a));
+  };
+  applyAccent(accent);
+  const attach = () => (config.target ?? document.body)?.appendChild(host);
+  if (config.target || document.body) {
+    attach();
+  } else {
+    document.addEventListener(
+      "DOMContentLoaded",
+      () => {
+        if (!destroyed) attach();
+      },
+      { once: true }
+    );
+  }
+  const agent = new WebsiteAgent(config);
+  let setOpen;
+  let isOpen = config.inline || !!config.openByDefault;
+  const registerOpenControl = (fn) => {
+    setOpen = fn;
+  };
+  const onOpenChange = (o) => {
+    isOpen = o;
+  };
+  let current = config;
+  const renderWidget = () => {
+    preact.render(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Widget,
+        {
+          agent,
+          config: current,
+          registerOpenControl,
+          onOpenChange
+        }
+      ),
+      root
+    );
+  };
+  renderWidget();
+  const endOnUnload = () => {
+    void agent.end();
+  };
+  window.addEventListener("beforeunload", endOnUnload);
+  return {
+    agent,
+    open: () => setOpen?.(true),
+    close: () => setOpen?.(false),
+    toggle: () => setOpen?.(!isOpen),
+    update: (partial) => {
+      if (destroyed) return;
+      current = { ...current, ...partial };
+      if ("accentColor" in partial) applyAccent(current.accentColor);
+      renderWidget();
+    },
+    destroy: () => {
+      if (destroyed) return;
+      destroyed = true;
+      window.removeEventListener("beforeunload", endOnUnload);
+      void agent.end();
+      preact.render(null, root);
+      host.remove();
+    }
+  };
+}
+
+exports.mount = mount;
+//# sourceMappingURL=ui.cjs.map
+//# sourceMappingURL=ui.cjs.map