@codespring-app/use-agent 0.1.0

package/dist/react.js

@@ -0,0 +1,1148 @@
+import {
+  createBrowserClient
+} from "./chunk-FAD2XMPA.js";
+
+// src/react.tsx
+import {
+  createContext,
+  createElement,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore
+} from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var agentThemeVariables = Object.freeze({
+  canvas: "--codespring-agent-canvas",
+  ink: "--codespring-agent-ink",
+  inkSecondary: "--codespring-agent-ink-secondary",
+  inkTertiary: "--codespring-agent-ink-tertiary",
+  well: "--codespring-agent-well",
+  hairline: "--codespring-agent-hairline",
+  statusGood: "--codespring-agent-status-good",
+  statusBad: "--codespring-agent-status-bad",
+  statusWarn: "--codespring-agent-status-warn",
+  accent: "--codespring-agent-accent",
+  fontFamily: "--codespring-agent-font-family",
+  monoFamily: "--codespring-agent-mono-family",
+  contentMaxWidth: "--codespring-agent-content-max-width",
+  containerRadius: "--codespring-agent-container-radius",
+  wellRadius: "--codespring-agent-well-radius"
+});
+var paperLightTheme = Object.freeze({
+  canvas: "#FFFFFF",
+  ink: "#141414",
+  inkSecondary: "#68686D",
+  inkTertiary: "#9B9BA0",
+  well: "#F5F5F8",
+  hairline: "#E4E4E8",
+  statusGood: "#0E7B3F",
+  statusBad: "#C33530",
+  statusWarn: "#A06C02",
+  accent: "#3B6AC5",
+  fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif",
+  monoFamily: "SFMono-Regular, SF Mono, ui-monospace, Menlo, Consolas, monospace",
+  contentMaxWidth: 760,
+  containerRadius: 10,
+  wellRadius: 8
+});
+var paperDarkTheme = Object.freeze({
+  ...paperLightTheme,
+  canvas: "#161618",
+  ink: "#ECECEC",
+  inkSecondary: "#98989D",
+  inkTertiary: "#66666B",
+  well: "#1D1D1F",
+  hairline: "#29292C",
+  statusGood: "#63C180",
+  statusBad: "#DF5048",
+  statusWarn: "#E3A648",
+  accent: "#87B1FD"
+});
+var defaultAgentCopy = Object.freeze({
+  title: "Assistant",
+  empty: "Start a conversation",
+  loading: "Loading conversation\u2026",
+  thinking: "Working\u2026",
+  placeholder: "Message the agent \u2014 Shift+Enter for a new line",
+  send: "Send message",
+  sending: "Sending\u2026",
+  failed: "The agent could not complete this message.",
+  cancelled: "This message was cancelled.",
+  userLabel: "You",
+  assistantLabel: "Assistant",
+  toolRunning: "Running",
+  toolCompleted: "Completed",
+  toolFailed: "Failed",
+  toolApprovalRequired: "Approval required"
+});
+function createAgentAppearance({
+  mode = "light",
+  theme,
+  copy
+} = {}) {
+  return Object.freeze({
+    theme: Object.freeze({ ...mode === "dark" ? paperDarkTheme : paperLightTheme, ...theme }),
+    copy: Object.freeze({ ...defaultAgentCopy, ...copy })
+  });
+}
+var paperAppearance = createAgentAppearance();
+var paperDarkAppearance = createAgentAppearance({ mode: "dark" });
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function cssVariable(name, fallback) {
+  return fallback === `var(${name})` || fallback.startsWith(`var(${name},`) ? fallback : `var(${name}, ${fallback})`;
+}
+function withThemeVariables(theme) {
+  return {
+    canvas: cssVariable(agentThemeVariables.canvas, theme.canvas),
+    ink: cssVariable(agentThemeVariables.ink, theme.ink),
+    inkSecondary: cssVariable(agentThemeVariables.inkSecondary, theme.inkSecondary),
+    inkTertiary: cssVariable(agentThemeVariables.inkTertiary, theme.inkTertiary),
+    well: cssVariable(agentThemeVariables.well, theme.well),
+    hairline: cssVariable(agentThemeVariables.hairline, theme.hairline),
+    statusGood: cssVariable(agentThemeVariables.statusGood, theme.statusGood),
+    statusBad: cssVariable(agentThemeVariables.statusBad, theme.statusBad),
+    statusWarn: cssVariable(agentThemeVariables.statusWarn, theme.statusWarn),
+    accent: cssVariable(agentThemeVariables.accent, theme.accent),
+    fontFamily: cssVariable(agentThemeVariables.fontFamily, theme.fontFamily),
+    monoFamily: cssVariable(agentThemeVariables.monoFamily, theme.monoFamily),
+    contentMaxWidth: cssVariable(agentThemeVariables.contentMaxWidth, cssLength(theme.contentMaxWidth)),
+    containerRadius: cssVariable(agentThemeVariables.containerRadius, cssLength(theme.containerRadius)),
+    wellRadius: cssVariable(agentThemeVariables.wellRadius, cssLength(theme.wellRadius))
+  };
+}
+function withThemeOverrides(base, overrides) {
+  if (!overrides) return base;
+  const resolvedOverrides = withThemeVariables({ ...paperLightTheme, ...overrides });
+  const merged = { ...base };
+  for (const key of Object.keys(overrides)) {
+    if (overrides[key] !== void 0) merged[key] = resolvedOverrides[key];
+  }
+  return merged;
+}
+var AgentContext = createContext(null);
+function shallowEqual(left, right) {
+  const leftKeys = Object.keys(left);
+  const rightKeys = Object.keys(right);
+  return leftKeys.length === rightKeys.length && leftKeys.every((key) => left[key] === right[key]);
+}
+function useStablePartial(value) {
+  const stable = useRef(value);
+  if (!shallowEqual(stable.current ?? {}, value ?? {})) stable.current = value;
+  return stable.current;
+}
+function AgentProvider({
+  client,
+  appearance = paperAppearance,
+  theme,
+  copy,
+  children
+}) {
+  const stableTheme = useStablePartial(theme);
+  const stableCopy = useStablePartial(copy);
+  const resolvedTheme = useMemo(
+    () => Object.freeze(withThemeVariables({ ...appearance.theme, ...stableTheme })),
+    [appearance.theme, stableTheme]
+  );
+  const resolvedCopy = useMemo(
+    () => Object.freeze({ ...appearance.copy, ...stableCopy }),
+    [appearance.copy, stableCopy]
+  );
+  const stores = useMemo(() => /* @__PURE__ */ new Map(), [client]);
+  useEffect(() => () => {
+    for (const store of stores.values()) store.dispose();
+    stores.clear();
+  }, [stores]);
+  const value = useMemo(
+    () => ({
+      client,
+      theme: resolvedTheme,
+      copy: resolvedCopy,
+      stores
+    }),
+    [client, resolvedTheme, resolvedCopy, stores]
+  );
+  return createElement(AgentContext.Provider, { value }, children);
+}
+function useAgentContext() {
+  const value = useContext(AgentContext);
+  if (!value) throw new Error("Agent React APIs must be used inside AgentProvider");
+  return value;
+}
+function useAgentClient() {
+  return useAgentContext().client;
+}
+function createAgentClient({
+  endpoint,
+  clientTokenEndpoint,
+  fetch: fetchImplementation,
+  credentials = "same-origin",
+  clientTokenTtlMs,
+  refreshSkewMs
+}) {
+  return createBrowserClient({
+    endpoint,
+    getClientToken: async () => {
+      const request = fetchImplementation ?? globalThis.fetch;
+      if (!request) throw new TypeError("A fetch implementation is required");
+      const response = await request(clientTokenEndpoint, {
+        method: "POST",
+        credentials,
+        headers: { Accept: "application/json" }
+      });
+      if (!response.ok) throw new Error(`Client token request failed with ${response.status}`);
+      const contentType = response.headers.get("content-type") ?? "";
+      if (!contentType.includes("application/json")) return response.text();
+      const body = await response.json();
+      if (typeof body.token !== "string") throw new Error("Client token response is missing token");
+      return {
+        token: body.token,
+        ...typeof body.expiresAt === "string" || typeof body.expiresAt === "number" ? { expiresAt: body.expiresAt } : {}
+      };
+    },
+    ...fetchImplementation === void 0 ? {} : { fetch: fetchImplementation },
+    ...clientTokenTtlMs === void 0 ? {} : { clientTokenTtlMs },
+    ...refreshSkewMs === void 0 ? {} : { refreshSkewMs }
+  });
+}
+function useAgentTheme() {
+  return useAgentContext().theme;
+}
+function useAgentCopy() {
+  return useAgentContext().copy;
+}
+function stringField(data, key) {
+  if (!data || typeof data !== "object") return void 0;
+  const value = data[key];
+  return typeof value === "string" ? value : void 0;
+}
+function unknownField(data, key) {
+  if (!data || typeof data !== "object") return void 0;
+  return data[key];
+}
+function reduceAgentMessages(events) {
+  const messages = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (!event.turnId) continue;
+    const inputId = `${event.turnId}:user`;
+    const outputId = `${event.turnId}:assistant:${event.attempt}`;
+    if (event.type === "message.input") {
+      messages.set(inputId, {
+        id: inputId,
+        turnId: event.turnId,
+        role: "user",
+        content: stringField(event.data, "content") ?? "",
+        status: "completed",
+        createdAt: event.createdAt,
+        eventId: event.id
+      });
+      continue;
+    }
+    if (event.type === "message.started") {
+      messages.set(outputId, {
+        id: outputId,
+        turnId: event.turnId,
+        role: "assistant",
+        content: "",
+        status: "streaming",
+        createdAt: event.createdAt,
+        eventId: event.id
+      });
+      continue;
+    }
+    if (event.type === "message.delta") {
+      const current = messages.get(outputId);
+      if (current) {
+        messages.set(outputId, {
+          ...current,
+          content: current.content + (stringField(event.data, "delta") ?? ""),
+          eventId: event.id
+        });
+      }
+      continue;
+    }
+    if (event.type === "message.completed") {
+      const current = messages.get(outputId);
+      messages.set(outputId, {
+        id: outputId,
+        turnId: event.turnId,
+        role: "assistant",
+        content: stringField(event.data, "content") ?? current?.content ?? "",
+        status: "completed",
+        createdAt: current?.createdAt ?? event.createdAt,
+        eventId: event.id
+      });
+      continue;
+    }
+    if (event.type === "message.attempt_abandoned") {
+      messages.delete(outputId);
+      continue;
+    }
+    if (event.type === "turn.failed" || event.type === "turn.cancelled") {
+      const current = [...messages.values()].filter((message) => message.turnId === event.turnId && message.role === "assistant").at(-1);
+      const terminalId = current?.id ?? `${event.turnId}:assistant:${event.attempt}`;
+      messages.set(terminalId, {
+        id: terminalId,
+        turnId: event.turnId,
+        role: "assistant",
+        content: current?.content ?? "",
+        status: event.type === "turn.failed" ? "failed" : "cancelled",
+        createdAt: current?.createdAt ?? event.createdAt,
+        eventId: event.id
+      });
+    }
+  }
+  return [...messages.values()].sort((left, right) => left.eventId - right.eventId);
+}
+function reduceAgentToolCalls(events) {
+  const calls = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    if (!event.turnId || !event.type.startsWith("tool.call.")) continue;
+    const eventName = stringField(event.data, "name");
+    const callId = stringField(event.data, "toolCallId") ?? `${event.turnId}:${event.attempt}:${eventName ?? "tool"}`;
+    const current = calls.get(callId);
+    const name = eventName ?? current?.name ?? "tool";
+    const summary = stringField(event.data, "summary");
+    const status = event.type === "tool.call.completed" ? "completed" : event.type === "tool.call.failed" ? "failed" : event.type === "tool.call.approval_required" ? "approval_required" : event.type === "tool.call.started" ? "running" : "proposed";
+    calls.set(callId, {
+      id: callId,
+      turnId: event.turnId,
+      name,
+      label: stringField(event.data, "label") ?? current?.label ?? name,
+      ...summary === void 0 ? current?.summary === void 0 ? {} : { summary: current.summary } : { summary },
+      status,
+      ...unknownField(event.data, "input") === void 0 ? current?.input === void 0 ? {} : { input: current.input } : { input: unknownField(event.data, "input") },
+      ...unknownField(event.data, "output") === void 0 ? current?.output === void 0 ? {} : { output: current.output } : { output: unknownField(event.data, "output") },
+      createdAt: current?.createdAt ?? event.createdAt,
+      eventId: event.id
+    });
+  }
+  return [...calls.values()].sort((left, right) => left.eventId - right.eventId);
+}
+var initialSessionState = {
+  status: "idle",
+  snapshot: null,
+  events: [],
+  messages: [],
+  toolCalls: [],
+  error: null
+};
+var SessionStore = class {
+  constructor(session) {
+    this.session = session;
+  }
+  session;
+  state = initialSessionState;
+  listeners = /* @__PURE__ */ new Set();
+  controller = null;
+  refreshTimer = null;
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    if (this.listeners.size === 1) void this.refresh();
+    return () => {
+      this.listeners.delete(listener);
+      if (this.listeners.size === 0) {
+        this.controller?.abort();
+        if (this.refreshTimer) clearTimeout(this.refreshTimer);
+        this.refreshTimer = null;
+      }
+    };
+  };
+  getSnapshot = () => this.state;
+  getServerSnapshot = () => initialSessionState;
+  setState(state) {
+    this.state = state;
+    for (const listener of this.listeners) listener();
+  }
+  scheduleRefresh() {
+    if (this.refreshTimer) clearTimeout(this.refreshTimer);
+    const isWorking = this.state.snapshot?.turns.some(
+      (turn) => turn.status === "queued" || turn.status === "running"
+    );
+    this.refreshTimer = isWorking && this.listeners.size > 0 ? setTimeout(() => void this.refresh(), 1e3) : null;
+  }
+  async refresh() {
+    this.controller?.abort();
+    this.controller = new AbortController();
+    const { signal } = this.controller;
+    this.setState({
+      ...this.state,
+      status: this.state.snapshot ? "ready" : "loading",
+      error: null
+    });
+    try {
+      const snapshot = await this.session.get({ signal });
+      const events = [];
+      let cursor = 0;
+      let hasMore = true;
+      let pages = 0;
+      while (hasMore && pages < 100) {
+        const page = await this.session.events(cursor, 100, { signal });
+        events.push(...page.events);
+        cursor = page.cursor;
+        hasMore = page.hasMore;
+        pages += 1;
+      }
+      if (hasMore) throw new Error("Conversation history exceeds the current 10,000-event UI limit");
+      this.setState({
+        status: "ready",
+        snapshot,
+        events,
+        messages: reduceAgentMessages(events),
+        toolCalls: reduceAgentToolCalls(events),
+        error: null
+      });
+      this.scheduleRefresh();
+    } catch (error) {
+      if (signal.aborted) return;
+      this.setState({
+        ...this.state,
+        status: "error",
+        error: error instanceof Error ? error : new Error(String(error))
+      });
+      this.scheduleRefresh();
+    }
+  }
+  dispose() {
+    this.controller?.abort();
+    if (this.refreshTimer) clearTimeout(this.refreshTimer);
+    this.refreshTimer = null;
+  }
+};
+function useAgentSession(sessionId) {
+  const context = useAgentContext();
+  const store = useMemo(() => {
+    const existing = context.stores.get(sessionId);
+    if (existing) return existing;
+    const created = new SessionStore(context.client.sessions.get(sessionId));
+    context.stores.set(sessionId, created);
+    return created;
+  }, [context.client, context.stores, sessionId]);
+  const state = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getServerSnapshot);
+  return {
+    ...state,
+    session: store.session,
+    refresh: () => store.refresh(),
+    submit: async (content, options) => {
+      const result = await store.session.submit(content, options);
+      await store.refresh();
+      return result;
+    },
+    cancel: async (turnId) => {
+      await store.session.cancel(turnId);
+      await store.refresh();
+    }
+  };
+}
+function useAgentMessages(sessionId) {
+  return useAgentSession(sessionId).messages;
+}
+function useAgentToolCalls(sessionId) {
+  return useAgentSession(sessionId).toolCalls;
+}
+function inlineMarkdown(text, colors) {
+  const nodes = [];
+  const pattern = /(\*\*[^*]+\*\*|`[^`]+`|\[[^\]]+\]\(https?:\/\/[^\s)]+\))/gu;
+  let cursor = 0;
+  for (const match of text.matchAll(pattern)) {
+    const index = match.index ?? 0;
+    if (index > cursor) nodes.push(text.slice(cursor, index));
+    const token = match[0];
+    if (token.startsWith("**")) {
+      nodes.push(/* @__PURE__ */ jsx("strong", { style: { fontWeight: 650 }, children: token.slice(2, -2) }, `${index}:strong`));
+    } else if (token.startsWith("`")) {
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "code",
+          {
+            style: {
+              padding: "1px 4px",
+              borderRadius: 4,
+              background: colors.well,
+              fontFamily: colors.monoFamily,
+              fontSize: 12
+            },
+            children: token.slice(1, -1)
+          },
+          `${index}:code`
+        )
+      );
+    } else {
+      const parts = /^\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)$/u.exec(token);
+      nodes.push(
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: parts?.[2],
+            target: "_blank",
+            rel: "noreferrer",
+            style: { color: colors.accent, textDecorationThickness: 1, textUnderlineOffset: 2 },
+            children: parts?.[1]
+          },
+          `${index}:link`
+        )
+      );
+    }
+    cursor = index + token.length;
+  }
+  if (cursor < text.length) nodes.push(text.slice(cursor));
+  return nodes;
+}
+function AgentMarkdown({ content, colors }) {
+  const lines = content.split("\n");
+  const blocks = [];
+  let index = 0;
+  while (index < lines.length) {
+    const line = lines[index] ?? "";
+    if (line.startsWith("```")) {
+      const language = line.slice(3).trim();
+      const code = [];
+      index += 1;
+      while (index < lines.length && !lines[index]?.startsWith("```")) {
+        code.push(lines[index] ?? "");
+        index += 1;
+      }
+      if (index < lines.length) index += 1;
+      blocks.push(
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", margin: "8px 0" }, children: [
+          language ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: 7,
+                right: 9,
+                color: colors.inkTertiary,
+                fontFamily: colors.monoFamily,
+                fontSize: 10
+              },
+              children: language
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "pre",
+            {
+              style: {
+                margin: 0,
+                padding: language ? "25px 12px 11px" : "11px 12px",
+                overflowX: "auto",
+                borderRadius: colors.wellRadius,
+                background: colors.well,
+                fontFamily: colors.monoFamily,
+                fontSize: 12,
+                lineHeight: 1.5
+              },
+              children: /* @__PURE__ */ jsx("code", { children: code.join("\n") })
+            }
+          )
+        ] }, `code:${index}`)
+      );
+      continue;
+    }
+    const heading = /^(#{1,3})\s+(.+)$/u.exec(line);
+    if (heading) {
+      const level = heading[1]?.length ?? 3;
+      blocks.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "heading",
+            "aria-level": level,
+            style: {
+              margin: index === 0 ? "0 0 6px" : "14px 0 6px",
+              fontSize: level === 1 ? 15 : 13,
+              fontWeight: level < 3 ? 650 : 550,
+              lineHeight: 1.35
+            },
+            children: inlineMarkdown(heading[2] ?? "", colors)
+          },
+          `heading:${index}`
+        )
+      );
+      index += 1;
+      continue;
+    }
+    if (/^[-*]\s+/u.test(line)) {
+      const items = [];
+      while (index < lines.length && /^[-*]\s+/u.test(lines[index] ?? "")) {
+        items.push((lines[index] ?? "").replace(/^[-*]\s+/u, ""));
+        index += 1;
+      }
+      blocks.push(
+        /* @__PURE__ */ jsx("ul", { style: { margin: "6px 0", paddingLeft: 19 }, children: items.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { style: { margin: "3px 0", paddingLeft: 2 }, children: inlineMarkdown(item, colors) }, itemIndex)) }, `list:${index}`)
+      );
+      continue;
+    }
+    if (line.startsWith("> ")) {
+      const quote = [];
+      while (index < lines.length && (lines[index] ?? "").startsWith("> ")) {
+        quote.push((lines[index] ?? "").slice(2));
+        index += 1;
+      }
+      blocks.push(
+        /* @__PURE__ */ jsx(
+          "blockquote",
+          {
+            style: {
+              margin: "8px 0",
+              paddingLeft: 10,
+              borderLeft: `2px solid ${colors.hairline}`,
+              color: colors.inkSecondary
+            },
+            children: inlineMarkdown(quote.join("\n"), colors)
+          },
+          `quote:${index}`
+        )
+      );
+      continue;
+    }
+    if (!line.trim()) {
+      index += 1;
+      continue;
+    }
+    const paragraph = [line];
+    index += 1;
+    while (index < lines.length && (lines[index] ?? "").trim() && !/^(#{1,3})\s+|^```|^[-*]\s+|^> /u.test(lines[index] ?? "")) {
+      paragraph.push(lines[index] ?? "");
+      index += 1;
+    }
+    blocks.push(
+      /* @__PURE__ */ jsx("p", { style: { margin: "0 0 9px", whiteSpace: "pre-wrap" }, children: inlineMarkdown(paragraph.join("\n"), colors) }, `paragraph:${index}`)
+    );
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: blocks });
+}
+function AgentMessage({ message, className, style, theme, copy }) {
+  const context = useAgentContext();
+  const colors = withThemeOverrides(context.theme, theme);
+  const labels = { ...context.copy, ...copy };
+  const isUser = message.role === "user";
+  const fallback = message.status === "failed" ? labels.failed : message.status === "cancelled" ? labels.cancelled : labels.thinking;
+  return /* @__PURE__ */ jsx(
+    "article",
+    {
+      className,
+      "aria-label": isUser ? labels.userLabel : labels.assistantLabel,
+      style: {
+        alignSelf: isUser ? "flex-end" : "stretch",
+        maxWidth: isUser ? "min(82%, 620px)" : "100%",
+        color: message.status === "failed" ? colors.statusBad : colors.ink,
+        background: isUser ? colors.well : "transparent",
+        borderRadius: isUser ? colors.containerRadius : 0,
+        padding: isUser ? "8px 12px" : 0,
+        fontSize: 13,
+        lineHeight: 1.52,
+        whiteSpace: isUser ? "pre-wrap" : "normal",
+        overflowWrap: "anywhere",
+        ...style
+      },
+      children: message.content ? isUser ? message.content : /* @__PURE__ */ jsx(AgentMarkdown, { content: message.content, colors }) : fallback
+    }
+  );
+}
+function formatToolPayload(payload) {
+  if (typeof payload === "string") return payload;
+  try {
+    return JSON.stringify(payload, null, 2);
+  } catch {
+    return String(payload);
+  }
+}
+function humanizeToolName(name) {
+  const action = name.split(/[./:]/u).at(-1) ?? name;
+  const words = action.replace(/([a-z])([A-Z])/gu, "$1 $2").replace(/[_-]+/gu, " ").trim();
+  return words ? words[0]?.toUpperCase() + words.slice(1) : "Use tool";
+}
+function deriveToolSummary(input) {
+  if (!input || typeof input !== "object" || Array.isArray(input)) return void 0;
+  const entry = Object.entries(input).find(
+    ([, value2]) => typeof value2 === "string" || typeof value2 === "number"
+  );
+  if (!entry) return void 0;
+  const value = String(entry[1]);
+  return value.length > 42 ? `${value.slice(0, 39)}\u2026` : value;
+}
+function ToolActionGlyph({ name, color }) {
+  const normalized = name.toLowerCase();
+  if (normalized.includes("search") || normalized.includes("lookup") || normalized.includes("find")) {
+    return /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "3.25", stroke: color, strokeWidth: "1.2" }),
+      /* @__PURE__ */ jsx("path", { d: "m7.5 7.5 2.3 2.3", stroke: color, strokeWidth: "1.2", strokeLinecap: "round" })
+    ] });
+  }
+  if (normalized.includes("read") || normalized.includes("file") || normalized.includes("document")) {
+    return /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 1.5h4l2 2V10.5H3z", stroke: color, strokeWidth: "1.1", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx("path", { d: "M7 1.8V4h2.1", stroke: color, strokeWidth: "1.1" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.2 2.2 2.1 6l2.1 3.8M7.8 2.2 9.9 6 7.8 9.8", stroke: color, strokeWidth: "1.1", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function StatusGlyph({ status, colors }) {
+  if (status === "completed") {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: colors.statusGood, fontSize: 12 }, children: "\u2713" });
+  }
+  if (status === "failed") {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: colors.statusBad, fontSize: 13 }, children: "\xD7" });
+  }
+  if (status === "approval_required") {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: colors.statusWarn, fontSize: 11 }, children: "?" });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      style: {
+        width: 10,
+        height: 10,
+        border: `1.5px solid ${colors.hairline}`,
+        borderTopColor: colors.inkSecondary,
+        borderRadius: "50%"
+      }
+    }
+  );
+}
+function AgentToolCall({ toolCall, className, style, theme, copy }) {
+  const context = useAgentContext();
+  const colors = withThemeOverrides(context.theme, theme);
+  const labels = { ...context.copy, ...copy };
+  const [expanded, setExpanded] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const hasDetails = toolCall.input !== void 0 || toolCall.output !== void 0;
+  const title = toolCall.label === toolCall.name ? humanizeToolName(toolCall.name) : toolCall.label;
+  const summary = toolCall.summary ?? deriveToolSummary(toolCall.input);
+  const statusLabel = toolCall.status === "completed" ? labels.toolCompleted : toolCall.status === "failed" ? labels.toolFailed : toolCall.status === "approval_required" ? labels.toolApprovalRequired : labels.toolRunning;
+  return /* @__PURE__ */ jsxs("div", { className, style: { color: colors.inkSecondary, ...style }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": hasDetails ? expanded : void 0,
+        "aria-label": `${title}: ${statusLabel}`,
+        disabled: !hasDetails,
+        onClick: () => hasDetails && setExpanded((current) => !current),
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        onFocus: () => setHovered(true),
+        onBlur: () => setHovered(false),
+        style: {
+          display: "flex",
+          width: "100%",
+          minHeight: 28,
+          alignItems: "center",
+          gap: 7,
+          padding: "0 4px",
+          border: 0,
+          borderRadius: 6,
+          color: "inherit",
+          background: hovered ? colors.well : "transparent",
+          cursor: hasDetails ? "pointer" : "default",
+          font: "inherit",
+          textAlign: "left"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "grid", width: 12, placeItems: "center", flex: "0 0 12px" }, children: hovered && hasDetails ? /* @__PURE__ */ jsx("span", { style: { fontSize: 14, lineHeight: 1, transform: expanded ? "rotate(90deg)" : void 0 }, children: "\u203A" }) : /* @__PURE__ */ jsx(ToolActionGlyph, { name: toolCall.name, color: colors.inkSecondary }) }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 11, fontWeight: 550, lineHeight: 1.2 }, children: title }),
+          summary ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                minWidth: 0,
+                maxWidth: "55%",
+                overflow: "hidden",
+                padding: "3px 6px",
+                borderRadius: 5,
+                background: colors.well,
+                color: colors.inkSecondary,
+                fontSize: 11,
+                lineHeight: 1,
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: summary
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+          /* @__PURE__ */ jsx("span", { style: { display: "grid", width: 16, minHeight: 24, placeItems: "center" }, children: /* @__PURE__ */ jsx(StatusGlyph, { status: toolCall.status, colors }) })
+        ]
+      }
+    ),
+    expanded && hasDetails ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: 8,
+          margin: "3px 0 7px 9px",
+          padding: "3px 0 3px 14px",
+          borderLeft: `1px solid ${colors.hairline}`,
+          color: colors.inkSecondary,
+          fontFamily: colors.monoFamily,
+          fontSize: 11,
+          lineHeight: 1.45
+        },
+        children: [
+          toolCall.input !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { marginBottom: 2, color: colors.inkTertiary, fontFamily: colors.fontFamily }, children: "Input" }),
+            /* @__PURE__ */ jsx("pre", { style: { margin: 0, whiteSpace: "pre-wrap", overflowWrap: "anywhere", font: "inherit" }, children: formatToolPayload(toolCall.input) })
+          ] }) : null,
+          toolCall.output !== void 0 ? /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { marginBottom: 2, color: colors.inkTertiary, fontFamily: colors.fontFamily }, children: "Output" }),
+            /* @__PURE__ */ jsx("pre", { style: { margin: 0, whiteSpace: "pre-wrap", overflowWrap: "anywhere", font: "inherit" }, children: formatToolPayload(toolCall.output) })
+          ] }) : null
+        ]
+      }
+    ) : null
+  ] });
+}
+function AgentMessageList({
+  messages,
+  toolCalls = [],
+  isWorking = false,
+  renderMessage,
+  renderToolCall,
+  className,
+  style,
+  theme,
+  copy
+}) {
+  const context = useAgentContext();
+  const colors = withThemeOverrides(context.theme, theme);
+  const labels = { ...context.copy, ...copy };
+  const end = useRef(null);
+  const scrollSurface = useRef(null);
+  const atLiveEdge = useRef(true);
+  const transcript = [
+    ...messages.map((message) => ({ type: "message", item: message })),
+    ...toolCalls.map((toolCall) => ({ type: "tool", item: toolCall }))
+  ].sort((left, right) => left.item.eventId - right.item.eventId);
+  useEffect(() => {
+    if (atLiveEdge.current) end.current?.scrollIntoView({ block: "end" });
+  }, [messages, toolCalls, isWorking]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      "aria-live": "polite",
+      ref: scrollSurface,
+      onScroll: () => {
+        const element = scrollSurface.current;
+        if (element) atLiveEdge.current = element.scrollHeight - element.scrollTop - element.clientHeight < 48;
+      },
+      style: {
+        display: "flex",
+        width: "100%",
+        maxWidth: colors.contentMaxWidth,
+        flex: 1,
+        flexDirection: "column",
+        alignSelf: "center",
+        gap: 16,
+        overflowY: "auto",
+        padding: "20px 24px 24px",
+        ...style
+      },
+      children: [
+        transcript.length === 0 && !isWorking ? /* @__PURE__ */ jsx("div", { style: { margin: "auto", color: colors.inkSecondary, fontSize: 13 }, children: labels.empty }) : null,
+        transcript.map((row) => {
+          if (row.type === "tool") {
+            return renderToolCall ? /* @__PURE__ */ jsx("div", { children: renderToolCall(row.item) }, `tool:${row.item.id}`) : /* @__PURE__ */ jsx(
+              AgentToolCall,
+              {
+                toolCall: row.item,
+                ...theme === void 0 ? {} : { theme },
+                ...copy === void 0 ? {} : { copy }
+              },
+              `tool:${row.item.id}`
+            );
+          }
+          return renderMessage ? /* @__PURE__ */ jsx("div", { children: renderMessage(row.item) }, `message:${row.item.id}`) : /* @__PURE__ */ jsx(
+            AgentMessage,
+            {
+              message: row.item,
+              ...theme === void 0 ? {} : { theme },
+              ...copy === void 0 ? {} : { copy }
+            },
+            `message:${row.item.id}`
+          );
+        }),
+        isWorking && !messages.some((message) => message.status === "streaming") ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "status",
+            style: { display: "flex", alignItems: "center", gap: 7, color: colors.inkSecondary, fontSize: 11 },
+            children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: colors.inkTertiary, fontSize: 10 }, children: "\u2726" }),
+              labels.thinking
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { ref: end })
+      ]
+    }
+  );
+}
+function AgentComposer({
+  value,
+  onChange,
+  onSubmit,
+  disabled = false,
+  error,
+  leadingActions,
+  trailingActions,
+  onCancel,
+  className,
+  style,
+  theme,
+  copy
+}) {
+  const context = useAgentContext();
+  const colors = withThemeOverrides(context.theme, theme);
+  const labels = { ...context.copy, ...copy };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+      event.preventDefault();
+      if (value.trim() && !disabled) void onSubmit();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width: "100%",
+        maxWidth: colors.contentMaxWidth,
+        margin: "0 auto",
+        padding: "16px 24px 10px",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gap: 8,
+              padding: "12px 10px 10px 14px",
+              background: colors.well,
+              border: `1px solid ${error ? colors.statusBad : colors.hairline}`,
+              borderRadius: 14
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  "aria-label": labels.placeholder,
+                  rows: 1,
+                  value,
+                  disabled,
+                  placeholder: disabled ? labels.sending : labels.placeholder,
+                  onChange: (event) => onChange(event.target.value),
+                  onKeyDown,
+                  style: {
+                    flex: 1,
+                    width: "100%",
+                    minHeight: 22,
+                    maxHeight: 160,
+                    resize: "vertical",
+                    border: 0,
+                    outline: 0,
+                    padding: 0,
+                    color: colors.ink,
+                    background: "transparent",
+                    fontFamily: colors.fontFamily,
+                    fontSize: 13,
+                    lineHeight: 1.45
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", minHeight: 28, alignItems: "center", gap: 7 }, children: [
+                leadingActions,
+                /* @__PURE__ */ jsx("span", { style: { flex: 1 } }),
+                trailingActions,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": disabled && onCancel ? "Stop agent" : labels.send,
+                    title: disabled && onCancel ? "Stop agent" : labels.send,
+                    disabled: disabled ? !onCancel : !value.trim(),
+                    onClick: () => void (disabled && onCancel ? onCancel() : onSubmit()),
+                    style: {
+                      display: "grid",
+                      width: 26,
+                      height: 26,
+                      placeItems: "center",
+                      padding: 0,
+                      border: 0,
+                      borderRadius: "50%",
+                      color: colors.canvas,
+                      background: disabled && !onCancel ? colors.inkTertiary : colors.ink,
+                      cursor: disabled && !onCancel ? "default" : !disabled && !value.trim() ? "default" : "pointer",
+                      opacity: !disabled && !value.trim() ? 0.38 : 1
+                    },
+                    children: disabled && onCancel ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 7, height: 7, borderRadius: 1, background: colors.canvas } }) : /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 9.5v-7M3.2 5.2 6 2.4l2.8 2.8", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        error ? /* @__PURE__ */ jsx("div", { style: { color: colors.statusBad, fontSize: 11, padding: "7px 4px 0" }, children: error }) : null
+      ]
+    }
+  );
+}
+function AgentChat({
+  sessionId,
+  header,
+  composerLeadingActions,
+  composerTrailingActions,
+  title,
+  className,
+  style,
+  theme,
+  copy,
+  renderMessage,
+  renderToolCall,
+  onError
+}) {
+  const context = useAgentContext();
+  const colors = withThemeOverrides(context.theme, theme);
+  const labels = { ...context.copy, ...copy };
+  const session = useAgentSession(sessionId);
+  const [draft, setDraft] = useState("");
+  const [submitError, setSubmitError] = useState(null);
+  const isWorking = session.snapshot?.turns.some((turn) => turn.status === "queued" || turn.status === "running") ?? false;
+  const activeTurn = session.snapshot?.turns.find(
+    (turn) => turn.status === "queued" || turn.status === "running"
+  );
+  const submit = async () => {
+    const content = draft.trim();
+    if (!content || isWorking) return;
+    setDraft("");
+    setSubmitError(null);
+    try {
+      await session.submit(content);
+    } catch (error) {
+      setDraft(content);
+      const normalized = error instanceof Error ? error : new Error(String(error));
+      setSubmitError(normalized.message);
+      onError?.(normalized);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className,
+      style: {
+        display: "flex",
+        width: "100%",
+        minHeight: 480,
+        height: "100%",
+        flexDirection: "column",
+        overflow: "hidden",
+        color: colors.ink,
+        background: colors.canvas,
+        fontFamily: colors.fontFamily,
+        fontSize: 13,
+        ...style
+      },
+      children: [
+        header ?? title ? /* @__PURE__ */ jsx(
+          "header",
+          {
+            style: {
+              width: "100%",
+              maxWidth: colors.contentMaxWidth,
+              margin: "0 auto",
+              padding: "16px 24px 8px",
+              color: colors.ink,
+              fontSize: 15,
+              fontWeight: 650
+            },
+            children: header ?? title
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              width: "100%",
+              minHeight: 0,
+              flex: 1,
+              flexDirection: "column"
+            },
+            children: [
+              session.status === "loading" && session.messages.length === 0 ? /* @__PURE__ */ jsx("div", { style: { margin: "auto", color: colors.inkSecondary, fontSize: 13 }, children: labels.loading }) : /* @__PURE__ */ jsx(
+                AgentMessageList,
+                {
+                  messages: session.messages,
+                  toolCalls: session.toolCalls,
+                  isWorking,
+                  ...renderMessage === void 0 ? {} : { renderMessage },
+                  ...renderToolCall === void 0 ? {} : { renderToolCall },
+                  ...theme === void 0 ? {} : { theme },
+                  ...copy === void 0 ? {} : { copy }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: "0 0 auto",
+                    background: `linear-gradient(to bottom, transparent 0, ${colors.canvas} 18%)`
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    AgentComposer,
+                    {
+                      value: draft,
+                      onChange: setDraft,
+                      onSubmit: submit,
+                      disabled: isWorking,
+                      error: submitError ?? session.error?.message ?? null,
+                      leadingActions: composerLeadingActions,
+                      trailingActions: composerTrailingActions,
+                      ...activeTurn ? { onCancel: () => session.cancel(activeTurn.id) } : {},
+                      ...theme === void 0 ? {} : { theme },
+                      ...copy === void 0 ? {} : { copy }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AgentChat,
+  AgentComposer,
+  AgentMessage,
+  AgentMessageList,
+  AgentProvider,
+  AgentToolCall,
+  agentThemeVariables,
+  createAgentAppearance,
+  createAgentClient,
+  createBrowserClient,
+  defaultAgentCopy,
+  paperAppearance,
+  paperDarkAppearance,
+  paperDarkTheme,
+  paperLightTheme,
+  reduceAgentMessages,
+  reduceAgentToolCalls,
+  useAgentClient,
+  useAgentCopy,
+  useAgentMessages,
+  useAgentSession,
+  useAgentTheme,
+  useAgentToolCalls
+};