@witqq/agent-sdk 0.6.1 → 0.8.0

package/dist/chat/react.cjs

@@ -0,0 +1,3589 @@
+'use strict';
+
+var react = require('react');
+
+// src/chat/react/ChatProvider.ts
+var ChatRuntimeContext = react.createContext(null);
+function ChatProvider({ runtime, children }) {
+  return react.createElement(ChatRuntimeContext.Provider, { value: runtime }, children);
+}
+function useChatRuntime() {
+  const runtime = react.useContext(ChatRuntimeContext);
+  if (!runtime) {
+    throw new Error("useChatRuntime must be used within a ChatProvider");
+  }
+  return runtime;
+}
+
+// src/chat/types.ts
+function createChatId() {
+  return crypto.randomUUID();
+}
+function isObservableSession(session) {
+  return "subscribe" in session && typeof session.subscribe === "function" && "getSnapshot" in session && typeof session.getSnapshot === "function";
+}
+
+// src/chat/bridge.ts
+function chatEventToAgentEvent(event) {
+  switch (event.type) {
+    case "message:delta":
+      return { type: "text_delta", text: event.text };
+    case "thinking:start":
+      return { type: "thinking_start" };
+    case "thinking:delta":
+      return { type: "thinking_delta", text: event.text };
+    case "thinking:end":
+      return { type: "thinking_end" };
+    case "tool:start":
+      return {
+        type: "tool_call_start",
+        toolCallId: event.toolCallId,
+        toolName: event.toolName,
+        args: event.args
+      };
+    case "tool:complete":
+      return {
+        type: "tool_call_end",
+        toolCallId: event.toolCallId,
+        toolName: event.toolName,
+        result: event.result
+      };
+    case "error":
+      return { type: "error", error: event.error, recoverable: event.recoverable, code: event.code };
+    default:
+      return null;
+  }
+}
+
+// src/chat/accumulator.ts
+var MessageAccumulator = class {
+  messageId;
+  parts = [];
+  status = "pending";
+  currentTextPart = null;
+  currentReasoningPart = null;
+  toolCallParts = /* @__PURE__ */ new Map();
+  _finalized = false;
+  constructor(messageId) {
+    this.messageId = messageId ?? createChatId();
+  }
+  /** Get current message ID */
+  get id() {
+    return this.messageId;
+  }
+  /**
+   * Apply an AgentEvent to accumulate into the message
+   * @param event - AgentEvent to process
+   * @throws Error if accumulator is already finalized
+   */
+  apply(event) {
+    if (this._finalized) throw new Error("Cannot apply events to finalized accumulator");
+    if (this.status === "pending") {
+      this.status = "streaming";
+    }
+    switch (event.type) {
+      case "text_delta":
+        this.handleTextDelta(event.text);
+        break;
+      case "thinking_start":
+        this.finalizeCurrentText();
+        this.currentReasoningPart = { type: "reasoning", text: "", status: "streaming" };
+        this.parts.push(this.currentReasoningPart);
+        break;
+      case "thinking_delta":
+        if (this.currentReasoningPart) {
+          this.currentReasoningPart.text += event.text;
+        }
+        break;
+      case "thinking_end":
+        if (this.currentReasoningPart) {
+          this.currentReasoningPart.status = "complete";
+          this.currentReasoningPart = null;
+        }
+        break;
+      case "tool_call_start": {
+        this.finalizeCurrentText();
+        const toolPart = {
+          type: "tool_call",
+          toolCallId: event.toolCallId,
+          name: event.toolName,
+          args: event.args,
+          status: "running"
+        };
+        this.toolCallParts.set(event.toolCallId, toolPart);
+        this.parts.push(toolPart);
+        break;
+      }
+      case "tool_call_end": {
+        const existing = this.toolCallParts.get(event.toolCallId);
+        if (existing) {
+          existing.result = event.result;
+          existing.status = "complete";
+        }
+        break;
+      }
+      case "error":
+        this.status = "error";
+        break;
+    }
+  }
+  handleTextDelta(text) {
+    if (!this.currentTextPart) {
+      this.currentTextPart = { type: "text", text: "", status: "streaming" };
+      this.parts.push(this.currentTextPart);
+    }
+    this.currentTextPart.text += text;
+  }
+  finalizeCurrentText() {
+    if (this.currentTextPart) {
+      this.currentTextPart.status = "complete";
+      this.currentTextPart = null;
+    }
+  }
+  /**
+   * Get a snapshot of the current accumulated message (for streaming UI)
+   * @returns ChatMessage with current parts and "streaming" status
+   */
+  snapshot() {
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    return {
+      id: this.messageId,
+      role: "assistant",
+      parts: this.parts.map((p) => ({ ...p })),
+      status: this.status === "pending" ? "pending" : "streaming",
+      createdAt: now,
+      updatedAt: now
+    };
+  }
+  /**
+   * Finalize the accumulator and return the complete ChatMessage
+   * @returns Completed ChatMessage with all parts finalized
+   * @throws Error if accumulator is already finalized
+   */
+  finalize() {
+    if (this._finalized) throw new Error("Accumulator already finalized");
+    this._finalized = true;
+    this.finalizeCurrentText();
+    if (this.currentReasoningPart) {
+      this.currentReasoningPart.status = "complete";
+      this.currentReasoningPart = null;
+    }
+    for (const [, toolPart] of this.toolCallParts) {
+      if (toolPart.status === "running" || toolPart.status === "pending") {
+        toolPart.status = "error";
+      }
+    }
+    if (this.status !== "error" && this.status !== "cancelled") {
+      this.status = "complete";
+    }
+    const now = (/* @__PURE__ */ new Date()).toISOString();
+    return {
+      id: this.messageId,
+      role: "assistant",
+      parts: this.parts,
+      status: this.status,
+      createdAt: now,
+      updatedAt: now
+    };
+  }
+  /** Check if the accumulator has been finalized */
+  get finalized() {
+    return this._finalized;
+  }
+};
+
+// src/chat/react/useChat.ts
+function useChat(options = {}) {
+  const runtime = useChatRuntime();
+  const [sessionId, setSessionId] = react.useState(
+    options.sessionId ?? null
+  );
+  const [messages, setMessages] = react.useState([]);
+  const [isGenerating, setIsGenerating] = react.useState(false);
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const [usage, setUsage] = react.useState(null);
+  const generatingRef = react.useRef(false);
+  const lastUserMessageRef = react.useRef(null);
+  const onErrorRef = react.useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const dismissTimerRef = react.useRef(null);
+  const autoDismissMs = options.autoDismissMs ?? 0;
+  react.useEffect(() => {
+    if (!error || autoDismissMs <= 0) return;
+    dismissTimerRef.current = setTimeout(() => {
+      setError(null);
+      dismissTimerRef.current = null;
+    }, autoDismissMs);
+    return () => {
+      if (dismissTimerRef.current) {
+        clearTimeout(dismissTimerRef.current);
+        dismissTimerRef.current = null;
+      }
+    };
+  }, [error, autoDismissMs]);
+  react.useEffect(() => {
+    if (!sessionId) {
+      setMessages([]);
+      return;
+    }
+    runtime.getSession(sessionId).then((session) => {
+      if (session) {
+        setMessages([...session.messages]);
+      }
+    });
+  }, [sessionId, runtime]);
+  react.useEffect(() => {
+    return runtime.onSessionChange(() => {
+      const activeId = runtime.activeSessionId;
+      if (activeId && activeId !== sessionId) {
+        setSessionId(activeId);
+        setError(null);
+      }
+    });
+  }, [runtime, sessionId]);
+  const ensureSession = react.useCallback(async () => {
+    if (sessionId) return sessionId;
+    const session = await runtime.createSession({
+      config: { model: "", backend: "" }
+    });
+    setSessionId(session.id);
+    return session.id;
+  }, [sessionId, runtime]);
+  const sendMessage = react.useCallback(
+    async (content) => {
+      if (generatingRef.current) return;
+      lastUserMessageRef.current = content;
+      setError(null);
+      generatingRef.current = true;
+      setIsGenerating(true);
+      setStatus("streaming");
+      const accumulator = new MessageAccumulator();
+      let hasEvents = false;
+      try {
+        const sid = await ensureSession();
+        const now = (/* @__PURE__ */ new Date()).toISOString();
+        const userMsg = {
+          id: crypto.randomUUID(),
+          role: "user",
+          parts: [{ type: "text", text: content, status: "complete" }],
+          status: "complete",
+          createdAt: now,
+          updatedAt: now
+        };
+        setMessages((prev) => [...prev, userMsg]);
+        for await (const event of runtime.send(sid, content)) {
+          if (event.type === "usage") {
+            setUsage({
+              promptTokens: event.promptTokens,
+              completionTokens: event.completionTokens,
+              totalTokens: event.promptTokens + event.completionTokens,
+              model: event.model
+            });
+          }
+          const agentEvent = chatEventToAgentEvent(event);
+          if (agentEvent) {
+            accumulator.apply(agentEvent);
+            hasEvents = true;
+            const snapshot = accumulator.snapshot();
+            setMessages((prev) => {
+              const last = prev[prev.length - 1];
+              if (last && last.id === snapshot.id) {
+                return [...prev.slice(0, -1), snapshot];
+              }
+              return [...prev, snapshot];
+            });
+          }
+        }
+        const session = await runtime.getSession(sid);
+        if (session) {
+          setMessages([...session.messages]);
+        } else if (hasEvents) {
+          const final = accumulator.finalize();
+          setMessages((prev) => {
+            const last = prev[prev.length - 1];
+            if (last && last.id === final.id) {
+              return [...prev.slice(0, -1), final];
+            }
+            return [...prev, final];
+          });
+        }
+      } catch (err) {
+        const e = err instanceof Error ? err : new Error(String(err));
+        setError(e);
+        onErrorRef.current?.(e);
+        if (hasEvents && !accumulator.finalized) {
+          accumulator.apply({ type: "error", error: e.message, recoverable: false });
+          const errorSnapshot = accumulator.finalize();
+          setMessages((prev) => {
+            const last = prev[prev.length - 1];
+            if (last && last.id === errorSnapshot.id) {
+              return [...prev.slice(0, -1), errorSnapshot];
+            }
+            return prev;
+          });
+        }
+      } finally {
+        generatingRef.current = false;
+        setIsGenerating(false);
+        setStatus(runtime.status);
+      }
+    },
+    [ensureSession, runtime]
+  );
+  const stop = react.useCallback(() => {
+    runtime.abort();
+  }, [runtime]);
+  const clearError = react.useCallback(() => {
+    setError(null);
+  }, []);
+  const retryLastMessage = react.useCallback(async () => {
+    if (!lastUserMessageRef.current || generatingRef.current) return;
+    await sendMessage(lastUserMessageRef.current);
+  }, [sendMessage]);
+  const newSession = react.useCallback(async () => {
+    const session = await runtime.createSession({
+      config: { model: "", backend: "" }
+    });
+    setSessionId(session.id);
+    setMessages([]);
+    setError(null);
+    lastUserMessageRef.current = null;
+    return session.id;
+  }, [runtime]);
+  return {
+    sessionId,
+    messages,
+    sendMessage,
+    stop,
+    isGenerating,
+    status,
+    error,
+    clearError,
+    retryLastMessage,
+    newSession,
+    usage
+  };
+}
+var EMPTY_MESSAGES = [];
+function useMessages(options) {
+  const runtime = useChatRuntime();
+  const { sessionId } = options;
+  const sessionRef = react.useRef(null);
+  const messagesRef = react.useRef(EMPTY_MESSAGES);
+  const isLoadedRef = react.useRef(false);
+  const versionRef = react.useRef(0);
+  const listenersRef = react.useRef(/* @__PURE__ */ new Set());
+  const emitChange = react.useCallback(() => {
+    versionRef.current++;
+    for (const listener of listenersRef.current) {
+      listener();
+    }
+  }, []);
+  const subscribe = react.useCallback(
+    (callback) => {
+      listenersRef.current.add(callback);
+      return () => {
+        listenersRef.current.delete(callback);
+      };
+    },
+    []
+  );
+  const getSnapshot = react.useCallback(() => {
+    return messagesRef.current;
+  }, []);
+  react.useEffect(() => {
+    let cancelled = false;
+    let unsubscribe;
+    let pollInterval;
+    async function load() {
+      const session = await runtime.getSession(sessionId);
+      if (cancelled) return;
+      if (!session) {
+        sessionRef.current = null;
+        messagesRef.current = EMPTY_MESSAGES;
+        isLoadedRef.current = false;
+        emitChange();
+        return;
+      }
+      sessionRef.current = session;
+      messagesRef.current = session.messages;
+      isLoadedRef.current = true;
+      emitChange();
+      if (isObservableSession(session)) {
+        unsubscribe = session.subscribe(() => {
+          const snapshot = session.getSnapshot();
+          messagesRef.current = snapshot.messages;
+          emitChange();
+        });
+      } else {
+        pollInterval = setInterval(async () => {
+          if (cancelled) return;
+          const updated = await runtime.getSession(sessionId);
+          if (cancelled || !updated) return;
+          if (updated.messages.length !== messagesRef.current.length) {
+            messagesRef.current = updated.messages;
+            emitChange();
+          }
+        }, 500);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+      if (pollInterval) clearInterval(pollInterval);
+    };
+  }, [sessionId, runtime, emitChange]);
+  const messages = react.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return {
+    messages,
+    isLoaded: isLoadedRef.current
+  };
+}
+function toSessionInfo(s) {
+  return {
+    id: s.id,
+    title: s.title,
+    status: s.status,
+    messageCount: s.metadata.messageCount,
+    lastMessage: s.messages[s.messages.length - 1],
+    createdAt: s.createdAt,
+    updatedAt: s.updatedAt
+  };
+}
+function useSessions() {
+  const runtime = useChatRuntime();
+  const [sessions, setSessions] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const fetchSessions = react.useCallback(async () => {
+    try {
+      const list = await runtime.listSessions();
+      setSessions(list.map(toSessionInfo));
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      setLoading(false);
+    }
+  }, [runtime]);
+  react.useEffect(() => {
+    fetchSessions();
+  }, [fetchSessions]);
+  react.useEffect(() => {
+    return runtime.onSessionChange(() => {
+      fetchSessions();
+    });
+  }, [runtime, fetchSessions]);
+  const refresh = react.useCallback(() => {
+    setLoading(true);
+    fetchSessions();
+  }, [fetchSessions]);
+  return { sessions, loading, error, refresh };
+}
+function parseBlocks(text) {
+  const tokens = [];
+  const lines = text.split("\n");
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const fenceMatch = line.match(/^```(\w*)/);
+    if (fenceMatch) {
+      const language = fenceMatch[1] || void 0;
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+      tokens.push({ type: "code_block", code: codeLines.join("\n"), language });
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      tokens.push({ type: "heading", level: headingMatch[1].length, content: headingMatch[2] });
+      i++;
+      continue;
+    }
+    if (line.startsWith("> ")) {
+      const quoteLines = [];
+      while (i < lines.length && lines[i].startsWith("> ")) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      tokens.push({ type: "blockquote", content: quoteLines.join("\n") });
+      continue;
+    }
+    if (/^[-*]\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^[-*]\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*]\s+/, ""));
+        i++;
+      }
+      tokens.push({ type: "list", ordered: false, items });
+      continue;
+    }
+    if (/^\d+\.\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\d+\.\s+/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+\.\s+/, ""));
+        i++;
+      }
+      tokens.push({ type: "list", ordered: true, items });
+      continue;
+    }
+    if (line.trim() === "") {
+      i++;
+      continue;
+    }
+    const paraLines = [];
+    while (i < lines.length && lines[i].trim() !== "" && !lines[i].match(/^(#{1,6}\s|```|>\s|[-*]\s|\d+\.\s)/)) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    if (paraLines.length > 0) {
+      tokens.push({ type: "paragraph", content: paraLines.join("\n") });
+    }
+  }
+  return tokens;
+}
+function parseInline(text, props) {
+  const nodes = [];
+  const regex = /(`[^`]+`)|(\*\*[^*]+\*\*)|(\*[^*]+\*)|(_[^_]+_)|(\[[^\]]+\]\([^)]+\))/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      nodes.push(text.slice(lastIndex, match.index));
+    }
+    const fragment = match[0];
+    if (fragment.startsWith("`")) {
+      const code = fragment.slice(1, -1);
+      nodes.push(react.createElement("code", { key: `ic-${match.index}`, "data-md-inline-code": true }, code));
+    } else if (fragment.startsWith("**")) {
+      const content = fragment.slice(2, -2);
+      nodes.push(react.createElement("strong", { key: `b-${match.index}` }, content));
+    } else if (fragment.startsWith("*") || fragment.startsWith("_")) {
+      const content = fragment.slice(1, -1);
+      nodes.push(react.createElement("em", { key: `i-${match.index}` }, content));
+    } else if (fragment.startsWith("[")) {
+      const linkMatch = fragment.match(/\[([^\]]+)\]\(([^)]+)\)/);
+      if (linkMatch) {
+        nodes.push(
+          props?.renderLink ? props.renderLink(linkMatch[2], linkMatch[1]) : react.createElement("a", { key: `a-${match.index}`, href: linkMatch[2] }, linkMatch[1])
+        );
+      }
+    }
+    lastIndex = match.index + fragment.length;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(text.slice(lastIndex));
+  }
+  return nodes;
+}
+function renderBlock(token, index, props) {
+  switch (token.type) {
+    case "heading":
+      return react.createElement(
+        `h${token.level}`,
+        { key: index, "data-md-heading": true },
+        ...parseInline(token.content, props)
+      );
+    case "paragraph":
+      return react.createElement(
+        "p",
+        { key: index, "data-md-paragraph": true },
+        ...parseInline(token.content, props)
+      );
+    case "code_block":
+      if (props.renderCode) {
+        return props.renderCode(token.code, token.language);
+      }
+      return react.createElement(
+        "pre",
+        { key: index, "data-md-code-block": true },
+        react.createElement(
+          "code",
+          { className: token.language ? `language-${token.language}` : void 0 },
+          token.code
+        )
+      );
+    case "blockquote":
+      return react.createElement(
+        "blockquote",
+        { key: index, "data-md-blockquote": true },
+        ...parseInline(token.content, props)
+      );
+    case "list": {
+      const tag = token.ordered ? "ol" : "ul";
+      const items = token.items.map(
+        (item, i) => react.createElement("li", { key: i }, ...parseInline(item, props))
+      );
+      return react.createElement(tag, { key: index, "data-md-list": true }, ...items);
+    }
+  }
+}
+function MarkdownRenderer(props) {
+  const tokens = parseBlocks(props.content);
+  const children = tokens.map((token, i) => renderBlock(token, i, props));
+  return react.createElement("div", { "data-md-root": true }, ...children);
+}
+function ThinkingBlock({ text, isStreaming, defaultOpen }) {
+  const attrs = {
+    "data-thinking": "true"
+  };
+  if (isStreaming) {
+    attrs["data-streaming"] = "true";
+  }
+  if (defaultOpen) {
+    attrs.open = true;
+  }
+  return react.createElement(
+    "details",
+    attrs,
+    react.createElement("summary", null, isStreaming ? "Thinking..." : "Reasoning"),
+    react.createElement("div", null, text)
+  );
+}
+function ToolCallView({ part, onApprove, onDeny, renderArgs, renderResult }) {
+  const children = [];
+  children.push(
+    react.createElement(
+      "div",
+      { key: "header", "data-tool-header": "true" },
+      react.createElement("span", { "data-tool-label": "name" }, part.name),
+      react.createElement("span", { "data-tool-label": "status" }, part.status)
+    )
+  );
+  if (part.args !== void 0) {
+    children.push(
+      renderArgs ? renderArgs(part.args) : react.createElement(
+        "details",
+        { key: "args", "data-tool-details": "args" },
+        react.createElement("summary", null, "Arguments"),
+        react.createElement("pre", { "data-tool-label": "args" }, JSON.stringify(part.args, null, 2))
+      )
+    );
+  }
+  if (part.result !== void 0) {
+    children.push(
+      renderResult ? renderResult(part.result) : react.createElement(
+        "details",
+        { key: "result", "data-tool-details": "result", open: true },
+        react.createElement("summary", null, "Result"),
+        react.createElement("pre", { "data-tool-label": "result" }, JSON.stringify(part.result, null, 2))
+      )
+    );
+  }
+  if (part.error) {
+    children.push(
+      react.createElement("span", { key: "error", "data-tool-label": "error", role: "alert" }, part.error)
+    );
+  }
+  if (part.status === "requires_approval") {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "actions", "data-tool-actions": "true" },
+        react.createElement("button", { key: "approve", onClick: onApprove, "data-action": "approve" }, "Approve"),
+        react.createElement("button", { key: "deny", onClick: onDeny, "data-action": "deny" }, "Deny")
+      )
+    );
+  }
+  return react.createElement(
+    "div",
+    {
+      "data-tool-status": part.status,
+      "data-tool-name": part.name
+    },
+    ...children
+  );
+}
+
+// src/chat/react/Message.ts
+function defaultRenderText(part, index) {
+  return react.createElement(
+    "div",
+    { key: index, "data-part": "text" },
+    react.createElement(MarkdownRenderer, { content: part.text })
+  );
+}
+function defaultRenderReasoning(part, index) {
+  return react.createElement(ThinkingBlock, {
+    key: index,
+    text: part.text,
+    isStreaming: part.status === "streaming"
+  });
+}
+function defaultRenderToolCall(part, index) {
+  return react.createElement(
+    "div",
+    { key: index, "data-part": "tool_call" },
+    react.createElement(ToolCallView, { part })
+  );
+}
+function defaultRenderSource(part, index) {
+  return react.createElement("a", { key: index, href: part.url, "data-part": "source" }, part.title ?? part.url);
+}
+function defaultRenderFile(part, index) {
+  return react.createElement("span", { key: index, "data-part": "file" }, part.name);
+}
+function renderPart(props, part, index) {
+  switch (part.type) {
+    case "text":
+      return (props.renderText ?? defaultRenderText)(part, index);
+    case "reasoning":
+      return (props.renderReasoning ?? defaultRenderReasoning)(part, index);
+    case "tool_call":
+      return (props.renderToolCall ?? defaultRenderToolCall)(part, index);
+    case "source":
+      return (props.renderSource ?? defaultRenderSource)(part, index);
+    case "file":
+      return (props.renderFile ?? defaultRenderFile)(part, index);
+  }
+}
+function Message(props) {
+  const { message } = props;
+  const children = message.parts.map((part, i) => renderPart(props, part, i));
+  return react.createElement(
+    "div",
+    {
+      "data-role": message.role,
+      "data-status": message.status
+    },
+    ...children
+  );
+}
+function useToolApproval(messages, onApprove, onDeny) {
+  const pendingRequests = react.useMemo(() => {
+    const requests = [];
+    for (const msg of messages) {
+      for (const part of msg.parts) {
+        if (part.type === "tool_call" && part.status === "requires_approval") {
+          requests.push({
+            toolCallId: part.toolCallId,
+            toolName: part.name,
+            toolArgs: part.args ?? {},
+            messageId: msg.id
+          });
+        }
+      }
+    }
+    return requests;
+  }, [messages]);
+  const approve = react.useCallback((toolCallId) => {
+    onApprove?.(toolCallId);
+  }, [onApprove]);
+  const deny = react.useCallback((toolCallId) => {
+    onDeny?.(toolCallId);
+  }, [onDeny]);
+  return { pendingRequests, approve, deny };
+}
+var ThreadSlotsContext = react.createContext(null);
+function ThreadProvider({
+  children,
+  renderMessage,
+  renderToolCall,
+  renderThinkingBlock
+}) {
+  const value = { renderMessage, renderToolCall, renderThinkingBlock };
+  return react.createElement(ThreadSlotsContext.Provider, { value }, children);
+}
+function useThreadSlots() {
+  const ctx = react.useContext(ThreadSlotsContext);
+  if (!ctx) {
+    throw new Error("useThreadSlots must be used within a ThreadProvider");
+  }
+  return ctx;
+}
+function useOptionalThreadSlots() {
+  return react.useContext(ThreadSlotsContext);
+}
+
+// src/chat/react/Thread.ts
+function Thread({
+  messages,
+  isGenerating,
+  autoScroll = true,
+  className
+}) {
+  const sentinelRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const [userScrolledUp, setUserScrolledUp] = react.useState(false);
+  const isScrollingProgrammatically = react.useRef(false);
+  const handleScroll = react.useCallback(() => {
+    if (isScrollingProgrammatically.current) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
+    setUserScrolledUp(!atBottom);
+  }, []);
+  const scrollToBottom = react.useCallback(() => {
+    isScrollingProgrammatically.current = true;
+    sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
+    setUserScrolledUp(false);
+    setTimeout(() => {
+      isScrollingProgrammatically.current = false;
+    }, 500);
+  }, []);
+  react.useEffect(() => {
+    if (!autoScroll || userScrolledUp) return;
+    sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, autoScroll, userScrolledUp]);
+  const slots = useOptionalThreadSlots();
+  const attrs = { "data-thread": "true", className };
+  if (isGenerating) {
+    attrs["data-thread-loading"] = "true";
+  }
+  attrs.ref = containerRef;
+  attrs.onScroll = handleScroll;
+  const children = [];
+  if (messages.length === 0 && !isGenerating) {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "__empty", "data-thread-empty": "true" },
+        "Start a conversation"
+      )
+    );
+  }
+  for (let i = 0; i < messages.length; i++) {
+    const msg = messages[i];
+    const content = slots?.renderMessage ? slots.renderMessage(msg, i) : react.createElement(Message, {
+      key: msg.id,
+      message: msg,
+      renderToolCall: slots?.renderToolCall,
+      renderReasoning: slots?.renderThinkingBlock ? (part, idx) => slots.renderThinkingBlock(part, idx) : void 0
+    });
+    children.push(
+      react.createElement(
+        "div",
+        { key: msg.id, "data-thread-message": "true", "data-role": msg.role },
+        content
+      )
+    );
+  }
+  if (isGenerating) {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "__loading", "data-thread-loading-indicator": "true" },
+        react.createElement("span", null),
+        react.createElement("span", null),
+        react.createElement("span", null)
+      )
+    );
+  }
+  children.push(react.createElement("div", { key: "__sentinel", ref: sentinelRef }));
+  if (userScrolledUp) {
+    children.push(
+      react.createElement("button", {
+        key: "__scroll-to-bottom",
+        "data-action": "scroll-to-bottom",
+        type: "button",
+        onClick: scrollToBottom,
+        "aria-label": "Scroll to bottom"
+      })
+    );
+  }
+  return react.createElement("div", attrs, ...children);
+}
+function Composer({
+  onSend,
+  onStop,
+  isGenerating,
+  disabled,
+  placeholder = "Type a message...",
+  maxRows = 5,
+  className
+}) {
+  const textareaRef = react.useRef(null);
+  const [value, setValue] = react.useState("");
+  const resize = react.useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 20;
+    const maxHeight = lineHeight * maxRows;
+    el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+  }, [maxRows]);
+  react.useEffect(() => {
+    resize();
+  }, [value, resize]);
+  const handleSend = react.useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isGenerating) return;
+    onSend(trimmed);
+    setValue("");
+  }, [value, isGenerating, onSend]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend]
+  );
+  const handleChange = react.useCallback(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const children = [
+    react.createElement(
+      "div",
+      { key: "input-wrapper", "data-input": "" },
+      react.createElement("textarea", {
+        ref: textareaRef,
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled: disabled || false,
+        "aria-label": "Message input",
+        rows: 1
+      }),
+      isGenerating ? react.createElement(
+        "button",
+        {
+          key: "stop",
+          "data-action": "stop",
+          onClick: onStop,
+          type: "button"
+        },
+        "Stop"
+      ) : react.createElement(
+        "button",
+        {
+          key: "send",
+          "data-action": "send",
+          onClick: handleSend,
+          disabled: !value.trim() || isGenerating,
+          type: "button"
+        },
+        "Send"
+      )
+    )
+  ];
+  return react.createElement(
+    "div",
+    { "data-composer": "true", className },
+    ...children
+  );
+}
+function isFullSession(item) {
+  return "messages" in item && Array.isArray(item.messages);
+}
+function formatRelativeTime(date) {
+  const now = Date.now();
+  const diff = now - date.getTime();
+  const seconds = Math.floor(diff / 1e3);
+  if (seconds < 60) return "now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d`;
+  const months = Math.floor(days / 30);
+  return `${months}mo`;
+}
+function normalizeSession(item) {
+  if (isFullSession(item)) {
+    return {
+      id: item.id,
+      title: item.title,
+      status: item.status,
+      messageCount: item.metadata?.messageCount ?? item.messages.length,
+      lastMessage: item.messages[item.messages.length - 1],
+      createdAt: item.createdAt,
+      updatedAt: item.updatedAt
+    };
+  }
+  return item;
+}
+function ThreadList({
+  sessions,
+  activeSessionId,
+  onSelect,
+  onCreate,
+  onDelete,
+  searchQuery,
+  onSearchChange,
+  className
+}) {
+  const handleSearchChange = react.useCallback(
+    (e) => {
+      onSearchChange?.(e.target.value);
+    },
+    [onSearchChange]
+  );
+  const normalized = react.useMemo(() => sessions.map(normalizeSession), [sessions]);
+  const filtered = react.useMemo(() => {
+    if (!searchQuery) return normalized;
+    const q = searchQuery.toLowerCase();
+    return normalized.filter((s) => (s.title ?? "").toLowerCase().includes(q));
+  }, [normalized, searchQuery]);
+  const children = [];
+  children.push(
+    react.createElement(
+      "div",
+      { key: "header", "data-thread-list-header": "true" },
+      react.createElement("input", {
+        "data-thread-list-search": "true",
+        value: searchQuery ?? "",
+        onChange: handleSearchChange,
+        placeholder: "Search..."
+      }),
+      react.createElement(
+        "button",
+        {
+          "data-action": "create-session",
+          onClick: onCreate,
+          type: "button"
+        },
+        "+"
+      )
+    )
+  );
+  const items = filtered.map((session) => {
+    const isActive = session.id === activeSessionId;
+    const itemChildren = [
+      react.createElement("span", { key: "title", "data-session-title": "true" }, session.title ?? "Untitled")
+    ];
+    if (session.updatedAt) {
+      const timeStr = formatRelativeTime(new Date(session.updatedAt));
+      itemChildren.push(
+        react.createElement("span", { key: "time", "data-session-time": "true" }, timeStr)
+      );
+    }
+    if (onDelete) {
+      itemChildren.push(
+        react.createElement(
+          "button",
+          {
+            key: "delete",
+            "data-action": "delete-session",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete(session.id);
+            },
+            type: "button"
+          },
+          "\xD7"
+        )
+      );
+    }
+    return react.createElement(
+      "div",
+      {
+        key: session.id,
+        "data-session-item": "true",
+        "data-session-active": isActive ? "true" : "false",
+        "data-session-status": session.status ?? "active",
+        onClick: () => onSelect(session.id)
+      },
+      ...itemChildren
+    );
+  });
+  children.push(
+    react.createElement(
+      "div",
+      { key: "items", "data-thread-list-items": "true" },
+      ...items
+    )
+  );
+  return react.createElement(
+    "div",
+    { "data-thread-list": "true", className },
+    ...children
+  );
+}
+function useSSE(url, options = {}) {
+  const [status, setStatus] = react.useState(url === null ? "idle" : "idle");
+  const [lastEvent, setLastEvent] = react.useState(null);
+  const abortRef = react.useRef(null);
+  const reconnectTimerRef = react.useRef(null);
+  const optionsRef = react.useRef(options);
+  optionsRef.current = options;
+  const disconnect = react.useCallback(() => {
+    if (reconnectTimerRef.current !== null) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+    setStatus("closed");
+  }, []);
+  const connect = react.useCallback(() => {
+    if (!url) return;
+    if (reconnectTimerRef.current !== null) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
+    if (abortRef.current) {
+      abortRef.current.abort();
+    }
+    const controller = new AbortController();
+    abortRef.current = controller;
+    setStatus("connecting");
+    (async () => {
+      try {
+        const fetchInit = {
+          method: optionsRef.current.method ?? "GET",
+          headers: {
+            Accept: "text/event-stream",
+            ...optionsRef.current.headers
+          },
+          signal: controller.signal
+        };
+        if (fetchInit.method === "POST" && optionsRef.current.body !== void 0) {
+          fetchInit.headers["Content-Type"] = "application/json";
+          fetchInit.body = JSON.stringify(optionsRef.current.body);
+        }
+        const response = await fetch(url, fetchInit);
+        if (!response.ok) {
+          throw new Error(`SSE request failed: ${response.status}`);
+        }
+        if (!response.body) {
+          throw new Error("SSE response has no body");
+        }
+        setStatus("open");
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        let dataLines = [];
+        const dispatchEvent = () => {
+          if (dataLines.length === 0) return;
+          const data = dataLines.join("\n");
+          dataLines = [];
+          try {
+            const parsed = JSON.parse(data);
+            setLastEvent(parsed);
+            optionsRef.current.onEvent?.(parsed);
+          } catch {
+          }
+        };
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split("\n");
+          buffer = lines.pop();
+          for (const line of lines) {
+            if (line === "") {
+              dispatchEvent();
+            } else if (line.startsWith("data:")) {
+              dataLines.push(line.slice(5).trimStart());
+            } else if (line.startsWith("event:")) {
+            }
+          }
+        }
+        if (dataLines.length > 0) {
+          dispatchEvent();
+        }
+        if (!controller.signal.aborted) {
+          setStatus("closed");
+        }
+      } catch (err) {
+        if (controller.signal.aborted) return;
+        const error = err instanceof Error ? err : new Error(String(err));
+        setStatus("error");
+        optionsRef.current.onError?.(error);
+        if (optionsRef.current.reconnect && !controller.signal.aborted) {
+          const delay = optionsRef.current.reconnectInterval ?? 3e3;
+          reconnectTimerRef.current = setTimeout(() => {
+            if (abortRef.current && !abortRef.current.signal.aborted) {
+              connect();
+            }
+          }, delay);
+        }
+      }
+    })();
+  }, [url]);
+  react.useEffect(() => {
+    return () => {
+      if (reconnectTimerRef.current !== null) {
+        clearTimeout(reconnectTimerRef.current);
+        reconnectTimerRef.current = null;
+      }
+      if (abortRef.current) {
+        abortRef.current.abort();
+        abortRef.current = null;
+      }
+    };
+  }, []);
+  return { status, connect, disconnect, lastEvent };
+}
+function useModels() {
+  const runtime = useChatRuntime();
+  const [models, setModels] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const mountedRef = react.useRef(true);
+  const fetchModels = react.useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await runtime.listModels();
+      if (!mountedRef.current) return;
+      const mapped = result.map((m) => ({
+        id: m.id,
+        name: m.name ?? m.id,
+        tier: m.provider,
+        provider: m.provider
+      }));
+      setModels(mapped);
+    } catch (err) {
+      if (!mountedRef.current) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      if (mountedRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [runtime]);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    fetchModels();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [fetchModels]);
+  const search = react.useCallback(
+    (query) => {
+      const q = query.toLowerCase();
+      return models.filter((m) => m.name.toLowerCase().includes(q));
+    },
+    [models]
+  );
+  return { models, isLoading, error, refresh: fetchModels, search };
+}
+function ModelSelector({
+  models,
+  selectedModel,
+  onSelect,
+  placeholder = "Select model",
+  className,
+  allowFreeText = true
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [search, setSearch] = react.useState("");
+  const [highlightIndex, setHighlightIndex] = react.useState(0);
+  const [freeText, setFreeText] = react.useState(selectedModel ?? "");
+  const containerRef = react.useRef(null);
+  const filtered = react.useMemo(() => {
+    if (!search) return models;
+    const q = search.toLowerCase();
+    return models.filter((m) => m.name.toLowerCase().includes(q));
+  }, [models, search]);
+  react.useEffect(() => {
+    setHighlightIndex(0);
+  }, [filtered.length]);
+  const selectedInfo = react.useMemo(
+    () => models.find((m) => m.id === selectedModel),
+    [models, selectedModel]
+  );
+  const handleToggle = react.useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        setSearch("");
+        setHighlightIndex(0);
+      }
+      return !prev;
+    });
+  }, []);
+  const handleSelect = react.useCallback(
+    (modelId) => {
+      onSelect(modelId);
+      setOpen(false);
+      setSearch("");
+    },
+    [onSelect]
+  );
+  const handleSearchChange = react.useCallback((e) => {
+    setSearch(e.target.value);
+  }, []);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (filtered[highlightIndex]) {
+          handleSelect(filtered[highlightIndex].id);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    },
+    [filtered, highlightIndex, handleSelect]
+  );
+  if (models.length === 0 && allowFreeText) {
+    return react.createElement(
+      "div",
+      {
+        "data-model-selector": "true",
+        "data-model-selector-freetext": "true",
+        className,
+        ref: containerRef
+      },
+      react.createElement("input", {
+        "data-model-input": "true",
+        value: freeText,
+        placeholder: "Enter model name...",
+        onChange: (e) => setFreeText(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            const val = freeText.trim();
+            if (val) onSelect(val);
+          }
+        }
+      }),
+      react.createElement(
+        "button",
+        {
+          type: "button",
+          "data-action": "apply-model",
+          onClick: () => {
+            const val = freeText.trim();
+            if (val) onSelect(val);
+          }
+        },
+        "Apply"
+      )
+    );
+  }
+  const children = [];
+  children.push(
+    react.createElement(
+      "button",
+      {
+        key: "trigger",
+        "data-model-selector-trigger": "true",
+        onClick: handleToggle,
+        type: "button"
+      },
+      selectedInfo ? selectedInfo.name : placeholder
+    )
+  );
+  if (open) {
+    const dropdownChildren = [];
+    dropdownChildren.push(
+      react.createElement("input", {
+        key: "search",
+        "data-model-selector-search": "true",
+        value: search,
+        onChange: handleSearchChange,
+        onKeyDown: handleKeyDown,
+        placeholder: "Search models...",
+        autoFocus: true
+      })
+    );
+    const hasMultipleProviders = new Set(filtered.map((m) => m.provider).filter(Boolean)).size > 1;
+    filtered.forEach((model, idx) => {
+      const isSelected = model.id === selectedModel;
+      const isHighlighted = idx === highlightIndex;
+      const attrs = {
+        key: model.id,
+        "data-model-option": "true",
+        onClick: () => handleSelect(model.id)
+      };
+      if (model.tier) {
+        attrs["data-tier"] = model.tier;
+      }
+      if (model.provider && hasMultipleProviders) {
+        attrs["data-model-provider"] = model.provider;
+      }
+      if (isSelected) {
+        attrs["data-model-selected"] = "true";
+      }
+      if (isHighlighted) {
+        attrs["data-model-highlighted"] = "true";
+      }
+      const label = model.provider && hasMultipleProviders ? `${model.name} (${model.provider})` : model.name;
+      dropdownChildren.push(react.createElement("div", attrs, label));
+    });
+    children.push(
+      react.createElement(
+        "div",
+        { key: "dropdown", "data-model-selector-dropdown": "true" },
+        ...dropdownChildren
+      )
+    );
+  }
+  return react.createElement(
+    "div",
+    {
+      "data-model-selector": "true",
+      className,
+      ref: containerRef
+    },
+    ...children
+  );
+}
+function useCopilotAuth(options) {
+  const { baseUrl, headers } = options;
+  const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const [token, setToken] = react.useState(null);
+  const [deviceCode, setDeviceCode] = react.useState(null);
+  const [verificationUrl, setVerificationUrl] = react.useState(null);
+  const onAuthenticatedRef = react.useRef(options.onAuthenticated);
+  onAuthenticatedRef.current = options.onAuthenticated;
+  const onErrorRef = react.useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const post = react.useCallback(
+    async (path, body) => {
+      const res = await fetchFn(`${baseUrl}${path}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: body ? JSON.stringify(body) : void 0
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+      return data;
+    },
+    [baseUrl, fetchFn, headers]
+  );
+  const start = react.useCallback(async () => {
+    setStatus("pending");
+    setError(null);
+    try {
+      const result = await post("/auth/start", { provider: "copilot" });
+      setDeviceCode(result.userCode);
+      setVerificationUrl(result.verificationUrl);
+      await post("/auth/copilot/poll");
+      const authToken = {
+        accessToken: "server-managed",
+        tokenType: "bearer",
+        obtainedAt: Date.now()
+      };
+      setToken(authToken);
+      setStatus("authenticated");
+      onAuthenticatedRef.current?.(authToken);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      setStatus("error");
+      onErrorRef.current?.(e);
+    }
+  }, [post]);
+  const reset = react.useCallback(() => {
+    setStatus("idle");
+    setError(null);
+    setToken(null);
+    setDeviceCode(null);
+    setVerificationUrl(null);
+  }, []);
+  return { status, error, token, deviceCode, verificationUrl, start, reset };
+}
+function useClaudeAuth(options) {
+  const { baseUrl, headers } = options;
+  const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const [token, setToken] = react.useState(null);
+  const [authorizeUrl, setAuthorizeUrl] = react.useState(null);
+  const onAuthenticatedRef = react.useRef(options.onAuthenticated);
+  onAuthenticatedRef.current = options.onAuthenticated;
+  const onErrorRef = react.useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const post = react.useCallback(
+    async (path, body) => {
+      const res = await fetchFn(`${baseUrl}${path}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: body ? JSON.stringify(body) : void 0
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+      return data;
+    },
+    [baseUrl, fetchFn, headers]
+  );
+  const start = react.useCallback(async () => {
+    setStatus("pending");
+    setError(null);
+    try {
+      const result = await post("/auth/start", { provider: "claude" });
+      setAuthorizeUrl(result.authorizeUrl);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      setStatus("error");
+      onErrorRef.current?.(e);
+    }
+  }, [post]);
+  const complete = react.useCallback(async (codeOrUrl) => {
+    try {
+      await post("/auth/claude/complete", { code: codeOrUrl });
+      const authToken = {
+        accessToken: "server-managed",
+        tokenType: "bearer",
+        obtainedAt: Date.now()
+      };
+      setToken(authToken);
+      setStatus("authenticated");
+      onAuthenticatedRef.current?.(authToken);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      setStatus("error");
+      onErrorRef.current?.(e);
+    }
+  }, [post]);
+  const reset = react.useCallback(() => {
+    setStatus("idle");
+    setError(null);
+    setToken(null);
+    setAuthorizeUrl(null);
+  }, []);
+  return { status, error, token, authorizeUrl, start, complete, reset };
+}
+function useApiKeyAuth(options) {
+  const { baseUrl, headers } = options;
+  const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const [token, setToken] = react.useState(null);
+  const onAuthenticatedRef = react.useRef(options.onAuthenticated);
+  onAuthenticatedRef.current = options.onAuthenticated;
+  const onErrorRef = react.useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const submit = react.useCallback(async (key, apiBaseUrl) => {
+    if (!key || !key.trim()) {
+      const e = new Error("API key cannot be empty");
+      setError(e);
+      setStatus("error");
+      onErrorRef.current?.(e);
+      return;
+    }
+    setStatus("pending");
+    setError(null);
+    try {
+      const res = await fetchFn(`${baseUrl}/auth/vercel/complete`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: JSON.stringify({
+          apiKey: key.trim(),
+          ...apiBaseUrl ? { baseUrl: apiBaseUrl } : {}
+        })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+      const authToken = {
+        accessToken: "server-managed",
+        tokenType: "bearer",
+        obtainedAt: Date.now()
+      };
+      setToken(authToken);
+      setStatus("authenticated");
+      onAuthenticatedRef.current?.(authToken);
+    } catch (err) {
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
+      setStatus("error");
+      onErrorRef.current?.(e);
+    }
+  }, [baseUrl, fetchFn, headers]);
+  const reset = react.useCallback(() => {
+    setStatus("idle");
+    setError(null);
+    setToken(null);
+  }, []);
+  return { status, error, token, submit, reset };
+}
+
+// src/chat/react/useRemoteAuth.ts
+function useRemoteAuth(options) {
+  const { backend, baseUrl, onAuthenticated, headers } = options;
+  const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
+  const [status, setStatus] = react.useState("idle");
+  const [error, setError] = react.useState(null);
+  const [token, setToken] = react.useState(null);
+  const [savedProviders, setSavedProviders] = react.useState([]);
+  const onAuthenticatedRef = react.useRef(onAuthenticated);
+  onAuthenticatedRef.current = onAuthenticated;
+  const handleSuccess = react.useCallback((authToken) => {
+    setToken(authToken);
+    setStatus("authenticated");
+    onAuthenticatedRef.current?.(authToken);
+  }, []);
+  const handleError = react.useCallback((err) => {
+    setError(err);
+    setStatus("error");
+  }, []);
+  const hookOpts = { baseUrl, headers, fetch: fetchFn, onAuthenticated: handleSuccess, onError: handleError };
+  const copilot = useCopilotAuth(hookOpts);
+  const claude = useClaudeAuth(hookOpts);
+  const apiKey = useApiKeyAuth(hookOpts);
+  const post = react.useCallback(
+    async (path, body) => {
+      const res = await fetchFn(`${baseUrl}${path}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...headers },
+        body: body ? JSON.stringify(body) : void 0
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+      return data;
+    },
+    [baseUrl, fetchFn, headers]
+  );
+  const get = react.useCallback(
+    async (path) => {
+      const res = await fetchFn(`${baseUrl}${path}`, {
+        method: "GET",
+        headers: { ...headers }
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+      return data;
+    },
+    [baseUrl, fetchFn, headers]
+  );
+  const startDeviceFlow = react.useCallback(async () => {
+    if (backend !== "copilot") return;
+    setStatus("pending");
+    setError(null);
+    await copilot.start();
+  }, [backend, copilot]);
+  const startOAuthFlow = react.useCallback(async () => {
+    if (backend !== "claude") return;
+    setStatus("pending");
+    setError(null);
+    await claude.start();
+  }, [backend, claude]);
+  const completeOAuth = react.useCallback(
+    async (codeOrUrl) => {
+      await claude.complete(codeOrUrl);
+    },
+    [claude]
+  );
+  const submitApiKey = react.useCallback(
+    async (key, apiBaseUrl) => {
+      if (backend !== "vercel-ai") return;
+      await apiKey.submit(key, apiBaseUrl);
+    },
+    [backend, apiKey]
+  );
+  const loadSavedTokens = react.useCallback(async () => {
+    try {
+      const data = await get("/tokens/saved");
+      setSavedProviders(data.saved || []);
+    } catch {
+    }
+  }, [get]);
+  const useSavedToken = react.useCallback(
+    async (provider) => {
+      try {
+        await post("/tokens/use", { provider });
+        const authToken = {
+          accessToken: "server-managed",
+          tokenType: "bearer",
+          obtainedAt: Date.now()
+        };
+        setToken(authToken);
+        setStatus("authenticated");
+        onAuthenticatedRef.current?.(authToken);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setStatus("error");
+      }
+    },
+    [post]
+  );
+  const clearTokens = react.useCallback(async () => {
+    try {
+      await post("/tokens/clear");
+      setSavedProviders([]);
+    } catch {
+    }
+  }, [post]);
+  const reset = react.useCallback(() => {
+    setStatus("idle");
+    setError(null);
+    setToken(null);
+    copilot.reset();
+    claude.reset();
+    apiKey.reset();
+    setSavedProviders([]);
+  }, [copilot, claude, apiKey]);
+  const start = react.useCallback(async (provider) => {
+    const target = provider ?? backend;
+    setStatus("pending");
+    setError(null);
+    switch (target) {
+      case "copilot":
+        await copilot.start();
+        break;
+      case "claude":
+        await claude.start();
+        break;
+      case "vercel-ai": {
+        const e = new Error("vercel-ai requires submitApiKey(key, baseUrl) \u2014 cannot auto-start");
+        setError(e);
+        setStatus("error");
+        return;
+      }
+      default: {
+        const e = new Error(`Unknown auth provider: ${target}`);
+        setError(e);
+        setStatus("error");
+        return;
+      }
+    }
+  }, [backend, copilot, claude]);
+  return {
+    status,
+    error,
+    startDeviceFlow,
+    deviceCode: copilot.deviceCode,
+    verificationUrl: copilot.verificationUrl,
+    startOAuthFlow,
+    authorizeUrl: claude.authorizeUrl,
+    completeOAuth,
+    submitApiKey,
+    start,
+    token,
+    reset,
+    savedProviders,
+    loadSavedTokens,
+    useSavedToken,
+    clearTokens
+  };
+}
+
+// src/chat/listener-set.ts
+var ListenerSet = class {
+  _listeners = /* @__PURE__ */ new Set();
+  /** Add a listener. Returns an unsubscribe function. */
+  add(callback) {
+    this._listeners.add(callback);
+    return () => {
+      this._listeners.delete(callback);
+    };
+  }
+  /** Notify all listeners with the given arguments. Errors are isolated per listener. */
+  notify(...args) {
+    for (const cb of this._listeners) {
+      try {
+        cb(...args);
+      } catch {
+      }
+    }
+  }
+  /** Remove all listeners. */
+  clear() {
+    this._listeners.clear();
+  }
+  /** Current number of listeners. */
+  get size() {
+    return this._listeners.size;
+  }
+};
+
+// src/chat/react/RemoteChatClient.ts
+var RemoteChatClient = class {
+  _status = "idle";
+  _activeSessionId = null;
+  _selectedProviderId = null;
+  _abortController = null;
+  baseUrl;
+  headers;
+  _fetch;
+  _selectionListeners = new ListenerSet();
+  constructor(options) {
+    this.baseUrl = options.baseUrl.replace(/\/$/, "");
+    this.headers = options.headers ?? {};
+    this._fetch = options.fetch ?? globalThis.fetch.bind(globalThis);
+  }
+  // ─── Lifecycle ──────────────────────────────────────────────
+  get status() {
+    return this._status;
+  }
+  async dispose() {
+    this.abort();
+    this._status = "disposed";
+  }
+  assertNotDisposed() {
+    if (this._status === "disposed") {
+      throw new Error("Runtime is disposed");
+    }
+  }
+  // ─── Provider Selection ────────────────────────────────────
+  get selectedProviderId() {
+    return this._selectedProviderId;
+  }
+  selectProvider(providerId) {
+    this.assertNotDisposed();
+    this._selectedProviderId = providerId;
+    this._notifySelectionChange(providerId);
+  }
+  onSelectionChange(callback) {
+    return this._selectionListeners.add(callback);
+  }
+  _notifySelectionChange(providerId) {
+    this._selectionListeners.notify(providerId);
+  }
+  // ─── Sessions ───────────────────────────────────────────────
+  get activeSessionId() {
+    return this._activeSessionId;
+  }
+  async createSession(options) {
+    this.assertNotDisposed();
+    const res = await this._post("/sessions/create", options);
+    const session = await res.json();
+    this._activeSessionId = session.id;
+    this._notifySessionChange();
+    return session;
+  }
+  async getSession(id) {
+    this.assertNotDisposed();
+    const res = await this._get(`/sessions/${id}`);
+    if (res.status === 404) return null;
+    return await res.json();
+  }
+  async listSessions(_options) {
+    this.assertNotDisposed();
+    const res = await this._get("/sessions");
+    return await res.json();
+  }
+  async deleteSession(id) {
+    this.assertNotDisposed();
+    await this._delete(`/sessions/${id}`);
+    if (this._activeSessionId === id) {
+      this._activeSessionId = null;
+    }
+    this._notifySessionChange();
+  }
+  /**
+   * Fetch context window stats from server.
+   * Returns null if stats not available (e.g. no messages sent yet).
+   */
+  async getContextStats(sessionId) {
+    this.assertNotDisposed();
+    const res = await this._get(`/sessions/${sessionId}/context-stats`);
+    const data = await res.json();
+    return data;
+  }
+  async switchSession(id) {
+    this.assertNotDisposed();
+    const session = await this.getSession(id);
+    if (!session) throw new Error(`Session not found: ${id}`);
+    this._activeSessionId = session.id;
+    this._notifySessionChange();
+    return session;
+  }
+  // ─── Messaging ──────────────────────────────────────────────
+  async *send(sessionId, message, options) {
+    this.assertNotDisposed();
+    this._status = "streaming";
+    this._abortController = new AbortController();
+    try {
+      const res = await this._fetch(`${this.baseUrl}/send`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "text/event-stream",
+          ...this.headers
+        },
+        body: JSON.stringify({
+          sessionId,
+          message,
+          model: options?.model,
+          providerId: this._selectedProviderId ?? void 0
+        }),
+        signal: this._abortController.signal
+      });
+      if (!res.ok) {
+        throw new Error(`Send failed: ${res.status} ${res.statusText}`);
+      }
+      if (!res.body) {
+        throw new Error("No response body for SSE stream");
+      }
+      yield* this._parseSSEStream(res.body, this._abortController.signal);
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") ; else {
+        this._status = "error";
+        throw err;
+      }
+    } finally {
+      this._abortController = null;
+      if (this._status === "streaming") {
+        this._status = "idle";
+      }
+      this._notifySessionChange();
+    }
+  }
+  abort() {
+    if (this._abortController) {
+      this._abortController.abort();
+      this._abortController = null;
+    }
+    if (this._status === "streaming") {
+      this._status = "idle";
+    }
+    this._post("/abort", {}).catch(() => {
+    });
+  }
+  // ─── Discovery ─────────────────────────────────────────────
+  async listModels() {
+    this.assertNotDisposed();
+    const res = await this._get("/models");
+    return await res.json();
+  }
+  async listBackends() {
+    this.assertNotDisposed();
+    const res = await this._get("/backends");
+    return await res.json();
+  }
+  // ─── Providers ──────────────────────────────────────────────
+  async listProviders() {
+    this.assertNotDisposed();
+    const res = await this._get("/providers");
+    return await res.json();
+  }
+  async createProvider(config) {
+    this.assertNotDisposed();
+    const res = await this._post("/providers", config);
+    return await res.json();
+  }
+  async updateProvider(id, changes) {
+    this.assertNotDisposed();
+    await this._put(`/providers/${id}`, changes);
+  }
+  async deleteProvider(id) {
+    this.assertNotDisposed();
+    await this._delete(`/providers/${id}`);
+  }
+  // ─── Session Change Notifications ────────────────────────────
+  _sessionListeners = new ListenerSet();
+  onSessionChange(callback) {
+    return this._sessionListeners.add(callback);
+  }
+  _notifySessionChange() {
+    this._sessionListeners.notify();
+  }
+  // ─── Internal HTTP helpers ──────────────────────────────────
+  async _get(path) {
+    const res = await this._fetch(`${this.baseUrl}${path}`, {
+      method: "GET",
+      headers: { ...this.headers }
+    });
+    if (!res.ok && res.status !== 404) {
+      throw new Error(`GET ${path} failed: ${res.status} ${res.statusText}`);
+    }
+    return res;
+  }
+  async _post(path, body) {
+    const res = await this._fetch(`${this.baseUrl}${path}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...this.headers
+      },
+      body: JSON.stringify(body)
+    });
+    if (!res.ok) {
+      throw new Error(`POST ${path} failed: ${res.status} ${res.statusText}`);
+    }
+    return res;
+  }
+  async _delete(path) {
+    const res = await this._fetch(`${this.baseUrl}${path}`, {
+      method: "DELETE",
+      headers: { ...this.headers }
+    });
+    if (!res.ok) {
+      throw new Error(`DELETE ${path} failed: ${res.status} ${res.statusText}`);
+    }
+    return res;
+  }
+  async _put(path, body) {
+    const res = await this._fetch(`${this.baseUrl}${path}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        ...this.headers
+      },
+      body: JSON.stringify(body)
+    });
+    if (!res.ok) {
+      throw new Error(`PUT ${path} failed: ${res.status} ${res.statusText}`);
+    }
+    return res;
+  }
+  // ─── SSE Parser ─────────────────────────────────────────────
+  async *_parseSSEStream(body, signal) {
+    const reader = body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = "";
+    const abortPromise = new Promise((_, reject) => {
+      if (signal.aborted) {
+        reject(new DOMException("Aborted", "AbortError"));
+        return;
+      }
+      signal.addEventListener("abort", () => {
+        reject(new DOMException("Aborted", "AbortError"));
+      }, { once: true });
+    });
+    try {
+      while (true) {
+        if (signal.aborted) break;
+        const { done, value } = await Promise.race([
+          reader.read(),
+          abortPromise
+        ]);
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop();
+        for (const line of lines) {
+          if (signal.aborted) return;
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6).trim();
+            if (data === "[DONE]") return;
+            try {
+              yield JSON.parse(data);
+            } catch {
+            }
+          }
+        }
+      }
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") ; else {
+        throw err;
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  }
+};
+
+// src/chat/react/useRemoteChat.ts
+function useRemoteChat(options) {
+  const {
+    chatBaseUrl,
+    authBaseUrl,
+    backend,
+    onReady,
+    headers
+  } = options;
+  const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
+  const [phase, setPhase] = react.useState("initializing");
+  const [runtime, setRuntime] = react.useState(null);
+  const [sessionId, setSessionId] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const onReadyRef = react.useRef(onReady);
+  onReadyRef.current = onReady;
+  const mountedRef = react.useRef(true);
+  react.useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const auth = useRemoteAuth({
+    backend,
+    baseUrl: authBaseUrl,
+    fetch: fetchFn,
+    headers
+  });
+  const restoredRef = react.useRef(false);
+  const [tokensLoaded, setTokensLoaded] = react.useState(false);
+  react.useEffect(() => {
+    if (restoredRef.current) return;
+    restoredRef.current = true;
+    (async () => {
+      try {
+        await auth.loadSavedTokens();
+      } catch {
+      }
+      if (mountedRef.current) setTokensLoaded(true);
+    })();
+  }, []);
+  react.useEffect(() => {
+    if (!tokensLoaded) return;
+    if (auth.status === "idle" && auth.savedProviders.includes(backend) && phase === "initializing") {
+      auth.useSavedToken(backend).catch(() => {
+        if (mountedRef.current) setPhase("unauthenticated");
+      });
+    } else if (auth.status === "idle" && !auth.savedProviders.includes(backend) && phase === "initializing") {
+      setPhase("unauthenticated");
+    }
+  }, [tokensLoaded, auth.status, auth.savedProviders, backend, phase]);
+  react.useEffect(() => {
+    if (auth.status === "pending") {
+      setPhase("authenticating");
+    } else if (auth.status === "error" && auth.error) {
+      setError(auth.error);
+      setPhase("error");
+    }
+  }, [auth.status, auth.error]);
+  const creatingRef = react.useRef(false);
+  react.useEffect(() => {
+    if (auth.status !== "authenticated" || creatingRef.current || runtime !== null) return;
+    creatingRef.current = true;
+    setPhase("creating");
+    setError(null);
+    (async () => {
+      try {
+        const rt = new RemoteChatClient({
+          baseUrl: chatBaseUrl,
+          headers,
+          fetch: fetchFn
+        });
+        const session = await rt.createSession({});
+        if (!mountedRef.current) return;
+        setRuntime(rt);
+        setSessionId(session.id);
+        setPhase("ready");
+        onReadyRef.current?.();
+      } catch (err) {
+        if (!mountedRef.current) return;
+        creatingRef.current = false;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setPhase("error");
+      }
+    })();
+  }, [auth.status, chatBaseUrl]);
+  const newSession = react.useCallback(async () => {
+    if (!runtime) throw new Error("Runtime not ready");
+    const session = await runtime.createSession({});
+    setSessionId(session.id);
+    return session.id;
+  }, [runtime]);
+  const logout = react.useCallback(async () => {
+    try {
+      await auth.clearTokens();
+    } catch {
+    }
+    if (runtime) {
+      try {
+        runtime.dispose();
+      } catch {
+      }
+    }
+    auth.reset();
+    setRuntime(null);
+    setSessionId(null);
+    setError(null);
+    setTokensLoaded(false);
+    creatingRef.current = false;
+    restoredRef.current = false;
+    setPhase("unauthenticated");
+  }, [auth.clearTokens, auth.reset, runtime]);
+  return {
+    phase,
+    runtime,
+    sessionId,
+    auth,
+    error,
+    newSession,
+    logout
+  };
+}
+function CopilotAuthForm({ auth, onAuthComplete }) {
+  const children = [];
+  if (auth.status === "idle") {
+    children.push(
+      react.createElement("button", {
+        key: "start",
+        type: "button",
+        "data-action": "start-auth",
+        onClick: () => {
+          auth.startDeviceFlow().then(() => onAuthComplete());
+        }
+      }, "Authenticate with GitHub")
+    );
+  }
+  if (auth.deviceCode) {
+    children.push(
+      react.createElement("div", { key: "code", "data-device-code": "true" }, auth.deviceCode)
+    );
+    if (auth.verificationUrl) {
+      children.push(
+        react.createElement("a", {
+          key: "url",
+          href: auth.verificationUrl,
+          target: "_blank",
+          rel: "noreferrer"
+        }, "Open GitHub \u2192")
+      );
+    }
+  }
+  if (auth.status === "pending") {
+    children.push(
+      react.createElement("span", { key: "wait", "data-auth-loading": "true" }, "Waiting...")
+    );
+  }
+  if (auth.status === "authenticated") {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "done", "data-auth-success": "true" },
+        "\u2713 Authenticated",
+        react.createElement("button", {
+          type: "button",
+          "data-action": "continue",
+          onClick: onAuthComplete
+        }, "Continue \u2192")
+      )
+    );
+  }
+  if (auth.error) {
+    children.push(
+      react.createElement("div", { key: "error", "data-auth-error-display": "true" }, auth.error.message)
+    );
+  }
+  return react.createElement("div", { "data-auth-flow": "copilot" }, ...children);
+}
+function ClaudeAuthForm({ auth, onAuthComplete }) {
+  const codeRef = react.useRef(null);
+  const children = [];
+  if (auth.status === "idle") {
+    children.push(
+      react.createElement("button", {
+        key: "start",
+        type: "button",
+        "data-action": "start-auth",
+        onClick: () => auth.startOAuthFlow()
+      }, "Authenticate with Claude")
+    );
+  }
+  if (auth.authorizeUrl) {
+    children.push(
+      react.createElement("a", {
+        key: "url",
+        href: auth.authorizeUrl,
+        target: "_blank",
+        rel: "noreferrer"
+      }, "Open authorization page \u2192")
+    );
+    children.push(
+      react.createElement(
+        "div",
+        { key: "complete", "data-auth-complete": "true" },
+        react.createElement("input", {
+          ref: codeRef,
+          placeholder: "Paste code or redirect URL..."
+        }),
+        react.createElement("button", {
+          type: "button",
+          "data-action": "complete-auth",
+          onClick: () => {
+            const v = codeRef.current?.value?.trim();
+            if (v) auth.completeOAuth(v).then(() => onAuthComplete());
+          }
+        }, "Submit")
+      )
+    );
+  }
+  if (auth.status === "authenticated") {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "done", "data-auth-success": "true" },
+        "\u2713 Authenticated",
+        react.createElement("button", {
+          type: "button",
+          "data-action": "continue",
+          onClick: onAuthComplete
+        }, "Continue \u2192")
+      )
+    );
+  }
+  if (auth.error) {
+    children.push(
+      react.createElement("div", { key: "error", "data-auth-error-display": "true" }, auth.error.message)
+    );
+  }
+  return react.createElement("div", { "data-auth-flow": "claude" }, ...children);
+}
+function VercelAIAuthForm({ auth, onAuthComplete }) {
+  const apiKeyRef = react.useRef(null);
+  const baseUrlRef = react.useRef(null);
+  const children = [];
+  if (auth.status !== "authenticated") {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "apikey", "data-auth-apikey": "true" },
+        react.createElement("input", {
+          ref: baseUrlRef,
+          placeholder: "Base URL (default: openai.com/v1)"
+        }),
+        react.createElement("input", {
+          ref: apiKeyRef,
+          type: "password",
+          placeholder: "API Key (sk-...)"
+        }),
+        react.createElement("button", {
+          type: "button",
+          "data-action": "submit-apikey",
+          onClick: () => {
+            const k = apiKeyRef.current?.value?.trim();
+            if (k) {
+              auth.submitApiKey(k, baseUrlRef.current?.value?.trim() || void 0).then(() => onAuthComplete());
+            }
+          }
+        }, "Connect")
+      )
+    );
+  }
+  if (auth.status === "authenticated") {
+    children.push(
+      react.createElement(
+        "div",
+        { key: "done", "data-auth-success": "true" },
+        "\u2713 Connected",
+        react.createElement("button", {
+          type: "button",
+          "data-action": "continue",
+          onClick: onAuthComplete
+        }, "Continue \u2192")
+      )
+    );
+  }
+  if (auth.error) {
+    children.push(
+      react.createElement("div", { key: "error", "data-auth-error-display": "true" }, auth.error.message)
+    );
+  }
+  return react.createElement("div", { "data-auth-flow": "vercel-ai" }, ...children);
+}
+function BackendSelector({
+  backends,
+  onSelect,
+  className
+}) {
+  const handleClick = react.useCallback(
+    (name) => () => onSelect(name),
+    [onSelect]
+  );
+  const items = backends.map(
+    (backend) => react.createElement(
+      "button",
+      {
+        key: backend.name,
+        type: "button",
+        "data-backend-item": "true",
+        "data-backend-name": backend.name,
+        onClick: handleClick(backend.name)
+      },
+      backend.name
+    )
+  );
+  return react.createElement(
+    "div",
+    { "data-backend-selector": "true", className },
+    ...items
+  );
+}
+function useBackends() {
+  const runtime = useChatRuntime();
+  const [backends, setBackends] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const mountedRef = react.useRef(true);
+  const fetchBackends = react.useCallback(() => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = runtime.listBackends();
+      if (result instanceof Promise) {
+        result.then((data) => {
+          if (mountedRef.current) {
+            setBackends(data);
+            setIsLoading(false);
+          }
+        }).catch((err) => {
+          if (mountedRef.current) {
+            setError(err instanceof Error ? err : new Error(String(err)));
+            setIsLoading(false);
+          }
+        });
+      } else {
+        if (mountedRef.current) {
+          setBackends(result);
+          setIsLoading(false);
+        }
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
+    }
+  }, [runtime]);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    fetchBackends();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [fetchBackends]);
+  return { backends, isLoading, error, refresh: fetchBackends };
+}
+function isProviderCapable(runtime) {
+  return typeof runtime === "object" && runtime !== null && typeof runtime.listProviders === "function";
+}
+function useProviders() {
+  const runtime = useChatRuntime();
+  const [providers, setProviders] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const mountedRef = react.useRef(true);
+  const fetchProviders = react.useCallback(() => {
+    setIsLoading(true);
+    setError(null);
+    if (!isProviderCapable(runtime)) {
+      setIsLoading(false);
+      return;
+    }
+    runtime.listProviders().then((data) => {
+      if (mountedRef.current) {
+        setProviders(data);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
+    });
+  }, [runtime]);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    fetchProviders();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [fetchProviders]);
+  const createProvider = react.useCallback(
+    async (config) => {
+      if (!isProviderCapable(runtime)) return;
+      try {
+        await runtime.createProvider(config);
+        fetchProviders();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+    [runtime, fetchProviders]
+  );
+  const updateProvider = react.useCallback(
+    async (id, changes) => {
+      if (!isProviderCapable(runtime)) return;
+      try {
+        await runtime.updateProvider(id, changes);
+        fetchProviders();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+    [runtime, fetchProviders]
+  );
+  const deleteProvider = react.useCallback(
+    async (id) => {
+      if (!isProviderCapable(runtime)) return;
+      try {
+        await runtime.deleteProvider(id);
+        fetchProviders();
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+    [runtime, fetchProviders]
+  );
+  const selectProvider = react.useCallback(
+    (id) => {
+      if (!isProviderCapable(runtime)) return;
+      runtime.selectProvider(id);
+    },
+    [runtime]
+  );
+  return { providers, isLoading, error, refresh: fetchProviders, createProvider, updateProvider, deleteProvider, selectProvider };
+}
+function ProviderSelector({
+  providers,
+  activeProviderId,
+  onSelect,
+  onSettingsClick,
+  className
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [highlightIndex, setHighlightIndex] = react.useState(0);
+  const containerRef = react.useRef(null);
+  const activeProvider = react.useMemo(
+    () => providers.find((p) => p.id === activeProviderId),
+    [providers, activeProviderId]
+  );
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  react.useEffect(() => {
+    setHighlightIndex(0);
+  }, [providers.length]);
+  const handleToggle = react.useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) setHighlightIndex(0);
+      return !prev;
+    });
+  }, []);
+  const handleSelect = react.useCallback(
+    (id) => {
+      onSelect(id);
+      setOpen(false);
+    },
+    [onSelect]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((prev) => Math.min(prev + 1, providers.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (providers[highlightIndex]) {
+          handleSelect(providers[highlightIndex].id);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    },
+    [providers, highlightIndex, handleSelect]
+  );
+  const children = [];
+  children.push(
+    react.createElement(
+      "button",
+      {
+        key: "trigger",
+        type: "button",
+        "data-provider-trigger": "true",
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown
+      },
+      activeProvider ? activeProvider.label : "Select provider"
+    )
+  );
+  if (open) {
+    const dropdownChildren = [];
+    providers.forEach((provider, idx) => {
+      const isActive = provider.id === activeProviderId;
+      const isHighlighted = idx === highlightIndex;
+      const attrs = {
+        key: provider.id,
+        "data-provider-item": "true",
+        onClick: () => handleSelect(provider.id)
+      };
+      if (isActive) attrs["data-provider-active"] = "true";
+      if (isHighlighted) attrs["data-provider-highlighted"] = "true";
+      dropdownChildren.push(
+        react.createElement(
+          "div",
+          attrs,
+          react.createElement("span", { "data-provider-label": "true" }, provider.label),
+          react.createElement("span", { "data-provider-model": "true" }, provider.model)
+        )
+      );
+    });
+    if (onSettingsClick) {
+      dropdownChildren.push(
+        react.createElement(
+          "button",
+          {
+            key: "settings",
+            type: "button",
+            "data-provider-settings-btn": "true",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(false);
+              onSettingsClick();
+            }
+          },
+          "\u2699 Settings"
+        )
+      );
+    }
+    children.push(
+      react.createElement(
+        "div",
+        { key: "dropdown", "data-provider-dropdown": "true", onKeyDown: handleKeyDown },
+        ...dropdownChildren
+      )
+    );
+  }
+  return react.createElement(
+    "div",
+    {
+      "data-provider-selector": "true",
+      className,
+      ref: containerRef
+    },
+    ...children
+  );
+}
+function ProviderModelSelector({
+  providers = [],
+  models = [],
+  activeProviderId,
+  selectedModel,
+  onSelectProvider,
+  onSelectModel,
+  onSettingsClick,
+  placeholder = "Select model",
+  className
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [search, setSearch] = react.useState("");
+  const [highlightIndex, setHighlightIndex] = react.useState(0);
+  const containerRef = react.useRef(null);
+  const isProviderMode = providers.length > 0;
+  const items = react.useMemo(() => {
+    if (isProviderMode) {
+      return providers.map((p) => ({
+        id: p.id,
+        label: p.label,
+        sublabel: p.model,
+        type: "provider"
+      }));
+    }
+    return models.map((m) => ({
+      id: m.id,
+      label: m.name,
+      sublabel: m.provider,
+      tier: m.tier,
+      type: "model"
+    }));
+  }, [isProviderMode, providers, models]);
+  const filtered = react.useMemo(() => {
+    if (!search) return items;
+    const q = search.toLowerCase();
+    return items.filter(
+      (item) => item.label.toLowerCase().includes(q) || item.sublabel && item.sublabel.toLowerCase().includes(q)
+    );
+  }, [items, search]);
+  react.useEffect(() => {
+    setHighlightIndex(0);
+  }, [filtered.length]);
+  react.useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const triggerLabel = react.useMemo(() => {
+    if (isProviderMode && activeProviderId) {
+      const p = providers.find((prov) => prov.id === activeProviderId);
+      return p ? p.label : placeholder;
+    }
+    if (!isProviderMode && selectedModel) {
+      const m = models.find((mod) => mod.id === selectedModel);
+      return m ? m.name : selectedModel;
+    }
+    return placeholder;
+  }, [isProviderMode, activeProviderId, providers, selectedModel, models, placeholder]);
+  const handleToggle = react.useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        setSearch("");
+        setHighlightIndex(0);
+      }
+      return !prev;
+    });
+  }, []);
+  const handleSelect = react.useCallback(
+    (item) => {
+      if (item.type === "provider" && onSelectProvider) {
+        onSelectProvider(item.id);
+      } else if (item.type === "model" && onSelectModel) {
+        onSelectModel(item.id);
+      }
+      setOpen(false);
+      setSearch("");
+    },
+    [onSelectProvider, onSelectModel]
+  );
+  const handleSearchChange = react.useCallback((e) => {
+    setSearch(e.target.value);
+  }, []);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setHighlightIndex((prev) => Math.min(prev + 1, filtered.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setHighlightIndex((prev) => Math.max(prev - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (filtered[highlightIndex]) {
+          handleSelect(filtered[highlightIndex]);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+      }
+    },
+    [filtered, highlightIndex, handleSelect]
+  );
+  const children = [];
+  children.push(
+    react.createElement(
+      "button",
+      {
+        key: "trigger",
+        type: "button",
+        "data-pms-trigger": "true",
+        onClick: handleToggle
+      },
+      triggerLabel
+    )
+  );
+  if (open) {
+    const dropdownChildren = [];
+    if (items.length > 3) {
+      dropdownChildren.push(
+        react.createElement("input", {
+          key: "search",
+          "data-pms-search": "true",
+          value: search,
+          onChange: handleSearchChange,
+          onKeyDown: handleKeyDown,
+          placeholder: isProviderMode ? "Search providers..." : "Search models...",
+          autoFocus: true
+        })
+      );
+    }
+    filtered.forEach((item, idx) => {
+      const isActive = isProviderMode ? item.id === activeProviderId : item.id === selectedModel;
+      const isHighlighted = idx === highlightIndex;
+      const attrs = {
+        key: item.id,
+        "data-pms-item": "true",
+        "data-pms-type": item.type,
+        onClick: () => handleSelect(item)
+      };
+      if (item.tier) attrs["data-tier"] = item.tier;
+      if (isActive) attrs["data-pms-active"] = "true";
+      if (isHighlighted) attrs["data-pms-highlighted"] = "true";
+      const itemChildren = [
+        react.createElement("span", { key: "label", "data-pms-label": "true" }, item.label)
+      ];
+      if (item.sublabel) {
+        itemChildren.push(
+          react.createElement("span", { key: "sub", "data-pms-sublabel": "true" }, item.sublabel)
+        );
+      }
+      dropdownChildren.push(react.createElement("div", attrs, ...itemChildren));
+    });
+    if (onSettingsClick) {
+      dropdownChildren.push(
+        react.createElement(
+          "button",
+          {
+            key: "settings",
+            type: "button",
+            "data-pms-settings": "true",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(false);
+              onSettingsClick();
+            }
+          },
+          "\u2699 Settings"
+        )
+      );
+    }
+    children.push(
+      react.createElement(
+        "div",
+        { key: "dropdown", "data-pms-dropdown": "true", onKeyDown: handleKeyDown },
+        ...dropdownChildren
+      )
+    );
+  }
+  return react.createElement(
+    "div",
+    {
+      "data-provider-model-selector": "true",
+      "data-pms-mode": isProviderMode ? "provider" : "model",
+      className,
+      ref: containerRef
+    },
+    ...children
+  );
+}
+var BACKENDS = [
+  { id: "copilot", label: "GitHub Copilot" },
+  { id: "claude", label: "Claude" },
+  { id: "vercel-ai", label: "Vercel AI" }
+];
+var AUTH_FORMS = {
+  copilot: CopilotAuthForm,
+  claude: ClaudeAuthForm,
+  "vercel-ai": VercelAIAuthForm
+};
+function ProviderSettings({
+  providers,
+  onClose,
+  onProviderCreated,
+  onProviderDeleted,
+  onProviderUpdated,
+  onAuthCompleted,
+  authBaseUrl = "/api/auth",
+  className
+}) {
+  const [view, setView] = react.useState("list");
+  const [addStep, setAddStep] = react.useState("select-backend");
+  const [selectedBackend, setSelectedBackend] = react.useState("copilot");
+  const [editingId, setEditingId] = react.useState(null);
+  const [availableModels, setAvailableModels] = react.useState([]);
+  const modelRef = react.useRef(null);
+  const labelRef = react.useRef(null);
+  const editModelRef = react.useRef(null);
+  const editLabelRef = react.useRef(null);
+  const runtime = useChatRuntime();
+  const auth = useRemoteAuth({
+    backend: selectedBackend,
+    baseUrl: authBaseUrl
+  });
+  const handleBackendSelect = react.useCallback((backend) => {
+    setSelectedBackend(backend);
+    auth.reset();
+    setAddStep("auth");
+  }, [auth]);
+  const handleAuthComplete = react.useCallback(() => {
+    onAuthCompleted?.(selectedBackend);
+    setAddStep("configure");
+  }, [selectedBackend, onAuthCompleted]);
+  react.useEffect(() => {
+    if (addStep !== "configure" && view !== "edit") return;
+    const load = async () => {
+      try {
+        const models = await runtime.listModels();
+        setAvailableModels(models);
+      } catch {
+      }
+    };
+    load();
+  }, [addStep, view, runtime]);
+  const handleCreate = react.useCallback(() => {
+    const modelEl = modelRef.current;
+    const model = modelEl?.value?.trim();
+    const label = labelRef.current?.value?.trim() || model;
+    if (!model) return;
+    const existing = providers.find((p) => p.backend === selectedBackend);
+    if (existing) {
+      onProviderUpdated?.(existing.id, { model, label });
+    } else {
+      onProviderCreated?.({ backend: selectedBackend, model, label });
+    }
+    setView("list");
+    setAddStep("select-backend");
+    setAvailableModels([]);
+    auth.reset();
+  }, [selectedBackend, providers, onProviderCreated, onProviderUpdated, auth]);
+  const handleEdit = react.useCallback((id) => {
+    setEditingId(id);
+    setView("edit");
+  }, []);
+  const handleUpdate = react.useCallback(() => {
+    if (!editingId) return;
+    const modelEl = editModelRef.current;
+    const model = modelEl?.value?.trim();
+    const label = editLabelRef.current?.value?.trim();
+    if (!model && !label) return;
+    const changes = {};
+    if (model) changes.model = model;
+    if (label) changes.label = label;
+    onProviderUpdated?.(editingId, changes);
+    setView("list");
+    setEditingId(null);
+  }, [editingId, onProviderUpdated]);
+  const handleDelete = react.useCallback((id) => {
+    onProviderDeleted?.(id);
+  }, [onProviderDeleted]);
+  const handleStartAdd = react.useCallback(() => {
+    setView("add");
+    setAddStep("select-backend");
+    auth.reset();
+  }, [auth]);
+  if (view === "list") {
+    const items = providers.map(
+      (p) => react.createElement(
+        "div",
+        { key: p.id, "data-provider-settings-item": "true" },
+        react.createElement("span", { "data-provider-settings-label": "true" }, p.label),
+        react.createElement("span", { "data-provider-settings-model": "true" }, `${p.backend} / ${p.model}`),
+        react.createElement(
+          "div",
+          { "data-provider-settings-actions": "true" },
+          react.createElement("button", {
+            type: "button",
+            "data-action": "edit-provider",
+            onClick: () => handleEdit(p.id)
+          }, "Edit"),
+          react.createElement("button", {
+            type: "button",
+            "data-action": "delete-provider",
+            onClick: () => handleDelete(p.id)
+          }, "Delete")
+        )
+      )
+    );
+    return react.createElement(
+      "div",
+      { "data-provider-settings": "true", className },
+      react.createElement(
+        "div",
+        { "data-provider-settings-header": "true" },
+        react.createElement("span", null, "Providers"),
+        onClose ? react.createElement("button", {
+          type: "button",
+          "data-provider-settings-close": "true",
+          onClick: onClose
+        }, "\u2715") : null
+      ),
+      react.createElement(
+        "div",
+        { "data-provider-settings-list": "true" },
+        ...items,
+        items.length === 0 ? react.createElement("div", { "data-provider-settings-empty": "true" }, "No providers configured") : null
+      ),
+      react.createElement("button", {
+        type: "button",
+        "data-action": "add-provider",
+        onClick: handleStartAdd
+      }, "+ Add Provider")
+    );
+  }
+  if (view === "add") {
+    const formChildren = [];
+    formChildren.push(
+      react.createElement(
+        "div",
+        { "data-provider-settings-header": "true", key: "header" },
+        react.createElement("span", null, "Add Provider"),
+        react.createElement("button", {
+          type: "button",
+          "data-provider-settings-close": "true",
+          onClick: () => {
+            setView("list");
+            setAddStep("select-backend");
+          }
+        }, "\u2190 Back")
+      )
+    );
+    if (addStep === "select-backend") {
+      formChildren.push(
+        react.createElement(
+          "div",
+          { key: "backends", "data-provider-settings-backends": "true" },
+          ...BACKENDS.map(
+            (b) => react.createElement("button", {
+              key: b.id,
+              type: "button",
+              "data-provider-backend-option": b.id,
+              onClick: () => handleBackendSelect(b.id)
+            }, b.label)
+          )
+        )
+      );
+    } else if (addStep === "auth") {
+      const FormComponent = selectedBackend ? AUTH_FORMS[selectedBackend] : null;
+      formChildren.push(
+        react.createElement(
+          "div",
+          { key: "auth", "data-provider-settings-auth": "true" },
+          FormComponent ? react.createElement(FormComponent, { auth, onAuthComplete: handleAuthComplete }) : null
+        )
+      );
+    } else if (addStep === "configure") {
+      const modelInput = availableModels.length > 0 ? react.createElement(
+        "select",
+        {
+          ref: modelRef,
+          "data-input": "model",
+          defaultValue: ""
+        },
+        react.createElement("option", { value: "", disabled: true }, "Select a model\u2026"),
+        ...availableModels.map(
+          (m) => react.createElement("option", { key: m.id, value: m.id }, m.name || m.id)
+        )
+      ) : react.createElement("input", {
+        ref: modelRef,
+        placeholder: "Model name (e.g. gpt-5-mini)",
+        "data-input": "model"
+      });
+      formChildren.push(
+        react.createElement(
+          "div",
+          { key: "config", "data-provider-settings-form": "true" },
+          modelInput,
+          react.createElement("input", {
+            ref: labelRef,
+            placeholder: "Display label (e.g. GPT-5 Mini)",
+            "data-input": "label"
+          }),
+          react.createElement("button", {
+            type: "button",
+            "data-action": "save-provider",
+            onClick: handleCreate
+          }, "Save Provider")
+        )
+      );
+    }
+    return react.createElement(
+      "div",
+      { "data-provider-settings": "true", className },
+      ...formChildren
+    );
+  }
+  const editingProvider = providers.find((p) => p.id === editingId);
+  return react.createElement(
+    "div",
+    { "data-provider-settings": "true", className },
+    react.createElement(
+      "div",
+      { "data-provider-settings-header": "true" },
+      react.createElement("span", null, "Edit Provider"),
+      react.createElement("button", {
+        type: "button",
+        "data-provider-settings-close": "true",
+        onClick: () => {
+          setView("list");
+          setEditingId(null);
+        }
+      }, "\u2190 Back")
+    ),
+    react.createElement(
+      "div",
+      { "data-provider-settings-form": "true" },
+      availableModels.length > 0 ? react.createElement(
+        "select",
+        {
+          ref: editModelRef,
+          defaultValue: editingProvider?.model ?? "",
+          "data-input": "model"
+        },
+        react.createElement("option", { value: "", disabled: true }, "Select a model\u2026"),
+        ...availableModels.map(
+          (m) => react.createElement("option", { key: m.id, value: m.id }, m.name || m.id)
+        )
+      ) : react.createElement("input", {
+        ref: editModelRef,
+        defaultValue: editingProvider?.model ?? "",
+        placeholder: "Model name",
+        "data-input": "model"
+      }),
+      react.createElement("input", {
+        ref: editLabelRef,
+        defaultValue: editingProvider?.label ?? "",
+        placeholder: "Display label",
+        "data-input": "label"
+      }),
+      react.createElement("button", {
+        type: "button",
+        "data-action": "update-provider",
+        onClick: handleUpdate
+      }, "Update")
+    )
+  );
+}
+function formatTokens(n) {
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return String(n);
+}
+function ContextStatsDisplay({ stats, className }) {
+  if (!stats) return null;
+  const hasRealData = stats.realPromptTokens != null && stats.modelContextWindow != null;
+  if (!hasRealData) return null;
+  const promptTokens = stats.realPromptTokens;
+  const contextWindow = stats.modelContextWindow;
+  const availableBudget = Math.max(0, contextWindow - promptTokens);
+  const usagePercent = contextWindow > 0 ? Math.round(promptTokens / contextWindow * 100) : 0;
+  return react.createElement(
+    "div",
+    {
+      "data-context-stats": "",
+      "data-context-truncated": stats.wasTruncated ? "true" : "false",
+      className
+    },
+    react.createElement(
+      "span",
+      { "data-context-tokens": "" },
+      `${formatTokens(promptTokens)} tokens`
+    ),
+    react.createElement(
+      "span",
+      { "data-context-budget": "" },
+      `${formatTokens(availableBudget)} available`
+    ),
+    react.createElement(
+      "span",
+      { "data-context-usage": "", "data-usage-percent": String(usagePercent) },
+      `${usagePercent}%`
+    ),
+    stats.removedCount > 0 ? react.createElement(
+      "span",
+      { "data-context-removed": "" },
+      `${stats.removedCount} trimmed`
+    ) : null
+  );
+}
+function ChatLayout({ children, sidebar, overlay, className }) {
+  const overlayNodes = Array.isArray(overlay) ? overlay : [overlay ?? null];
+  return react.createElement(
+    "div",
+    { "data-chat-ui": "", className },
+    ...overlayNodes,
+    sidebar ?? null,
+    children
+  );
+}
+function ChatHeader({
+  showBackendSelector = false,
+  showModelSelector = true,
+  hasProviders = false,
+  backends = [],
+  models = [],
+  selectedModel,
+  onBackendSelect,
+  onModelSelect,
+  BackendSelectorComponent: BSC = BackendSelector,
+  ModelSelectorComponent: MSC = ModelSelector
+}) {
+  const children = [];
+  if (showBackendSelector) {
+    children.push(
+      react.createElement(BSC, {
+        key: "backend-selector",
+        backends,
+        onSelect: onBackendSelect ?? (() => {
+        })
+      })
+    );
+  }
+  if (showModelSelector && !hasProviders && models.length > 0) {
+    children.push(
+      react.createElement(MSC, {
+        key: "model-selector",
+        models,
+        selectedModel,
+        onSelect: onModelSelect ?? (() => {
+        })
+      })
+    );
+  }
+  if (children.length === 0) return null;
+  return react.createElement("div", { "data-chat-header": "" }, ...children);
+}
+function UsageBadge({ usage, className }) {
+  if (!usage) return null;
+  return react.createElement(
+    "span",
+    { "data-usage-badge": "true", className },
+    react.createElement("span", { "data-usage-tokens": "prompt" }, `\u2191${usage.promptTokens}`),
+    react.createElement("span", { "data-usage-tokens": "completion" }, `\u2193${usage.completionTokens}`),
+    react.createElement("span", { "data-usage-tokens": "total" }, `\u03A3${usage.totalTokens}`)
+  );
+}
+
+// src/chat/react/ChatInputArea.ts
+function ChatInputArea({
+  onSend,
+  onStop,
+  isGenerating,
+  placeholder,
+  providers = [],
+  models = [],
+  activeProviderId,
+  selectedModel,
+  onSelectProvider,
+  onSelectModel,
+  onSettingsClick,
+  ComposerComponent: CC = Composer,
+  ProviderModelSelectorComponent: PMSC = ProviderModelSelector,
+  usage
+}) {
+  const selectorRow = react.createElement(
+    "div",
+    { "data-chat-input-controls": "" },
+    react.createElement(PMSC, {
+      providers,
+      models,
+      activeProviderId,
+      selectedModel,
+      onSelectProvider,
+      onSelectModel,
+      onSettingsClick
+    }),
+    usage ? react.createElement(UsageBadge, { usage }) : null
+  );
+  return react.createElement(
+    "div",
+    { "data-chat-input-area": "" },
+    react.createElement(
+      "div",
+      { "data-chat-input-container": "" },
+      selectorRow,
+      react.createElement(CC, {
+        onSend,
+        onStop,
+        isGenerating,
+        placeholder
+      })
+    )
+  );
+}
+var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+var CLOSE_ANIMATION_MS = 150;
+function ChatSettingsOverlay({
+  open,
+  onClose,
+  providers = [],
+  authBaseUrl,
+  onProviderCreated,
+  onProviderDeleted,
+  onProviderUpdated,
+  onAuthCompleted,
+  ProviderSettingsComponent: PSC = ProviderSettings
+}) {
+  const [isClosing, setIsClosing] = react.useState(false);
+  const contentRef = react.useRef(null);
+  const previousFocusRef = react.useRef(null);
+  const handleClose = react.useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setIsClosing(false);
+      onClose();
+    }, CLOSE_ANIMATION_MS);
+  }, [onClose]);
+  const handleKeyDown = react.useCallback((e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      handleClose();
+      return;
+    }
+    if (e.key === "Tab" && contentRef.current) {
+      const focusable = Array.from(contentRef.current.querySelectorAll(FOCUSABLE));
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }, [handleClose]);
+  const handleBackdropClick = react.useCallback((e) => {
+    if (e.target === e.currentTarget) handleClose();
+  }, [handleClose]);
+  react.useEffect(() => {
+    if (!open) return;
+    previousFocusRef.current = document.activeElement;
+    document.addEventListener("keydown", handleKeyDown);
+    const timer = setTimeout(() => {
+      if (contentRef.current) {
+        const first = contentRef.current.querySelector(FOCUSABLE);
+        if (first) first.focus();
+      }
+    }, 50);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      clearTimeout(timer);
+      const prev = previousFocusRef.current;
+      if (prev && typeof prev.focus === "function") prev.focus();
+    };
+  }, [open, handleKeyDown]);
+  if (!open && !isClosing) return null;
+  return react.createElement(
+    "div",
+    {
+      "data-provider-settings-overlay": "true",
+      "data-closing": isClosing ? "true" : void 0,
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Provider settings"
+    },
+    react.createElement(
+      "div",
+      {
+        ref: contentRef,
+        "data-provider-settings-content": "true",
+        "data-closing": isClosing ? "true" : void 0
+      },
+      react.createElement(PSC, {
+        providers,
+        authBaseUrl,
+        onClose: handleClose,
+        onProviderCreated: onProviderCreated ?? void 0,
+        onProviderDeleted: onProviderDeleted ?? void 0,
+        onProviderUpdated: onProviderUpdated ?? void 0,
+        onAuthCompleted: onAuthCompleted ?? void 0
+      })
+    )
+  );
+}
+
+// src/chat/react/ChatUI.ts
+function ChatUIInner({
+  slots,
+  className,
+  showSidebar = true,
+  showModelSelector = true,
+  showBackendSelector: showBackendSelectorProp,
+  showProviderSelector: _showProviderSelectorProp,
+  authBaseUrl,
+  placeholder
+}) {
+  const runtime = useChatRuntime();
+  const { messages, sendMessage, stop, isGenerating, newSession, error, clearError, retryLastMessage, usage } = useChat();
+  const { sessions } = useSessions();
+  const { models, refresh: refreshModels } = useModels();
+  const { backends } = useBackends();
+  const { providers, createProvider, updateProvider, deleteProvider, selectProvider, refresh } = useProviders();
+  const [settingsOpen, setSettingsOpen] = react.useState(false);
+  const [activeProviderId, setActiveProviderId] = react.useState(void 0);
+  const [selectedModelId, setSelectedModelId] = react.useState(void 0);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const hasProviders = providers.length > 0;
+  react.useEffect(() => {
+    if (providers.length > 0 && !activeProviderId) {
+      setActiveProviderId(providers[0].id);
+      selectProvider(providers[0].id);
+    }
+  }, [providers, activeProviderId, selectProvider]);
+  const showBackendSelectorResolved = showBackendSelectorProp ?? false;
+  const handleSelect = react.useCallback(async (id) => {
+    try {
+      await runtime.switchSession(id);
+    } catch {
+    }
+  }, [runtime]);
+  const handleCreate = react.useCallback(async () => {
+    try {
+      await newSession();
+    } catch {
+    }
+  }, [newSession]);
+  const handleDelete = react.useCallback(async (id) => {
+    try {
+      await runtime.deleteSession(id);
+    } catch {
+    }
+  }, [runtime]);
+  const handleModelSelect = react.useCallback((modelId) => {
+    setSelectedModelId(modelId);
+  }, []);
+  const handleBackendSelect = react.useCallback((_name) => {
+    refreshModels();
+  }, [refreshModels]);
+  const handleProviderSelect = react.useCallback((id) => {
+    selectProvider(id);
+    setActiveProviderId(id);
+  }, [selectProvider]);
+  const hasSlotOverrides = !!(slots?.renderToolCall || slots?.renderMessage || slots?.renderThinkingBlock);
+  const ThreadComponent = slots?.thread ?? Thread;
+  const ThreadListComponent = slots?.threadList ?? ThreadList;
+  const ContextStatsComponent = slots?.contextStats ?? ContextStatsDisplay;
+  const [contextStats, setContextStats] = react.useState(null);
+  react.useEffect(() => {
+    if (!runtime.activeSessionId) {
+      setContextStats(null);
+      return;
+    }
+    const result = runtime.getContextStats(runtime.activeSessionId);
+    if (result instanceof Promise) {
+      result.then(setContextStats, () => setContextStats(null));
+    } else {
+      setContextStats(result);
+    }
+  }, [runtime, runtime.activeSessionId, messages.length]);
+  const showEmptyState = !hasProviders && messages.length === 0;
+  const mainContent = react.createElement(
+    "div",
+    { "data-chat-main": "" },
+    react.createElement(ChatHeader, {
+      showBackendSelector: showBackendSelectorResolved,
+      showModelSelector,
+      hasProviders,
+      backends,
+      models,
+      selectedModel: selectedModelId,
+      onBackendSelect: handleBackendSelect,
+      onModelSelect: handleModelSelect,
+      BackendSelectorComponent: slots?.backendSelector,
+      ModelSelectorComponent: slots?.modelSelector
+    }),
+    contextStats ? react.createElement(ContextStatsComponent, { stats: contextStats }) : null,
+    error ? react.createElement(
+      "div",
+      { "data-chat-error": "" },
+      react.createElement("span", { "data-chat-error-text": "" }, error.message),
+      react.createElement(
+        "div",
+        { "data-chat-error-actions": "" },
+        react.createElement("button", {
+          "data-action": "retry",
+          type: "button",
+          onClick: retryLastMessage
+        }, "Retry"),
+        react.createElement("button", {
+          "data-action": "dismiss-error",
+          type: "button",
+          onClick: clearError
+        }, "\u2715")
+      ),
+      error.stack ? react.createElement(
+        "details",
+        { "data-chat-error-details": "" },
+        react.createElement("summary", null, "Details"),
+        react.createElement("pre", null, error.stack)
+      ) : null
+    ) : null,
+    showEmptyState ? react.createElement(
+      "div",
+      { "data-chat-empty-state": "" },
+      react.createElement("div", { "data-chat-empty-title": "" }, "Connect a provider to start chatting"),
+      react.createElement("button", {
+        "data-action": "open-settings",
+        onClick: () => setSettingsOpen(true)
+      }, "+ Connect Provider")
+    ) : react.createElement(ThreadComponent, { messages, isGenerating, autoScroll: true }),
+    react.createElement(ChatInputArea, {
+      onSend: sendMessage,
+      onStop: stop,
+      isGenerating,
+      placeholder,
+      providers,
+      models,
+      activeProviderId,
+      selectedModel: selectedModelId,
+      onSelectProvider: handleProviderSelect,
+      onSelectModel: handleModelSelect,
+      onSettingsClick: () => setSettingsOpen(true),
+      ComposerComponent: slots?.composer,
+      ProviderModelSelectorComponent: slots?.providerModelSelector,
+      usage
+    })
+  );
+  const wrappedMain = hasSlotOverrides ? react.createElement(ThreadProvider, {
+    renderToolCall: slots.renderToolCall,
+    renderMessage: slots.renderMessage,
+    renderThinkingBlock: slots.renderThinkingBlock,
+    children: mainContent
+  }) : mainContent;
+  const sidebar = showSidebar ? react.createElement(ThreadListComponent, {
+    sessions,
+    activeSessionId: runtime.activeSessionId ?? void 0,
+    onSelect: handleSelect,
+    onCreate: handleCreate,
+    onDelete: handleDelete,
+    searchQuery,
+    onSearchChange: setSearchQuery
+  }) : void 0;
+  const settingsOverlay = react.createElement(ChatSettingsOverlay, {
+    open: settingsOpen,
+    onClose: () => setSettingsOpen(false),
+    providers,
+    authBaseUrl,
+    onProviderCreated: (p) => createProvider({ backend: p.backend, model: p.model, label: p.label ?? "" }),
+    onProviderDeleted: (id) => deleteProvider(id),
+    onProviderUpdated: (id, changes) => updateProvider(id, changes),
+    onAuthCompleted: () => refresh(),
+    ProviderSettingsComponent: slots?.providerSettings
+  });
+  return react.createElement(ChatLayout, {
+    className,
+    sidebar,
+    overlay: [slots?.authDialog ?? null, settingsOverlay],
+    children: wrappedMain
+  });
+}
+function ChatUI({ runtime, ...rest }) {
+  return react.createElement(ChatProvider, {
+    runtime,
+    children: react.createElement(ChatUIInner, rest)
+  });
+}
+
+exports.BackendSelector = BackendSelector;
+exports.ChatHeader = ChatHeader;
+exports.ChatInputArea = ChatInputArea;
+exports.ChatLayout = ChatLayout;
+exports.ChatProvider = ChatProvider;
+exports.ChatSettingsOverlay = ChatSettingsOverlay;
+exports.ChatUI = ChatUI;
+exports.ClaudeAuthForm = ClaudeAuthForm;
+exports.Composer = Composer;
+exports.ContextStatsDisplay = ContextStatsDisplay;
+exports.CopilotAuthForm = CopilotAuthForm;
+exports.MarkdownRenderer = MarkdownRenderer;
+exports.Message = Message;
+exports.ModelSelector = ModelSelector;
+exports.ProviderModelSelector = ProviderModelSelector;
+exports.ProviderSelector = ProviderSelector;
+exports.ProviderSettings = ProviderSettings;
+exports.RemoteChatClient = RemoteChatClient;
+exports.ThinkingBlock = ThinkingBlock;
+exports.Thread = Thread;
+exports.ThreadList = ThreadList;
+exports.ThreadProvider = ThreadProvider;
+exports.ToolCallView = ToolCallView;
+exports.UsageBadge = UsageBadge;
+exports.VercelAIAuthForm = VercelAIAuthForm;
+exports.useApiKeyAuth = useApiKeyAuth;
+exports.useBackends = useBackends;
+exports.useChat = useChat;
+exports.useChatRuntime = useChatRuntime;
+exports.useClaudeAuth = useClaudeAuth;
+exports.useCopilotAuth = useCopilotAuth;
+exports.useMessages = useMessages;
+exports.useModels = useModels;
+exports.useOptionalThreadSlots = useOptionalThreadSlots;
+exports.useProviders = useProviders;
+exports.useRemoteAuth = useRemoteAuth;
+exports.useRemoteChat = useRemoteChat;
+exports.useSSE = useSSE;
+exports.useSessions = useSessions;
+exports.useThreadSlots = useThreadSlots;
+exports.useToolApproval = useToolApproval;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map