@witqq/agent-sdk 0.7.0 → 0.9.0

package/dist/chat/react.js

@@ -1,596 +1,6 @@
-import { createHash, randomBytes } from 'crypto';
 import { createContext, createElement, useContext, useState, useRef, useEffect, useCallback, useSyncExternalStore, useMemo } from 'react';
 
-var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-
-// src/errors.ts
-var AgentSDKError;
-var init_errors = __esm({
-  "src/errors.ts"() {
-    AgentSDKError = class extends Error {
-      /** @internal Marker for cross-bundle identity checks */
-      _agentSDKError = true;
-      constructor(message, options) {
-        super(message, options);
-        this.name = "AgentSDKError";
-      }
-      /** Check if an error is an AgentSDKError (works across bundled copies) */
-      static is(error) {
-        return error instanceof Error && "_agentSDKError" in error && error._agentSDKError === true;
-      }
-    };
-  }
-});
-
-// src/auth/types.ts
-var AuthError, DeviceCodeExpiredError, AccessDeniedError, TokenExchangeError;
-var init_types = __esm({
-  "src/auth/types.ts"() {
-    init_errors();
-    AuthError = class extends AgentSDKError {
-      constructor(message, options) {
-        super(message, options);
-        this.name = "AuthError";
-      }
-    };
-    DeviceCodeExpiredError = class extends AuthError {
-      constructor() {
-        super("Device code expired. Please restart the auth flow.");
-        this.name = "DeviceCodeExpiredError";
-      }
-    };
-    AccessDeniedError = class extends AuthError {
-      constructor() {
-        super("Access was denied by the user.");
-        this.name = "AccessDeniedError";
-      }
-    };
-    TokenExchangeError = class extends AuthError {
-      constructor(message, options) {
-        super(message, options);
-        this.name = "TokenExchangeError";
-      }
-    };
-  }
-});
-
-// src/auth/copilot-auth.ts
-var CLIENT_ID, DEVICE_CODE_URL, ACCESS_TOKEN_URL, USER_API_URL, DEFAULT_SCOPES, GRANT_TYPE, CopilotAuth;
-var init_copilot_auth = __esm({
-  "src/auth/copilot-auth.ts"() {
-    init_types();
-    CLIENT_ID = "Ov23ctDVkRmgkPke0Mmm";
-    DEVICE_CODE_URL = "https://github.com/login/device/code";
-    ACCESS_TOKEN_URL = "https://github.com/login/oauth/access_token";
-    USER_API_URL = "https://api.github.com/user";
-    DEFAULT_SCOPES = "read:user,read:org,repo,gist";
-    GRANT_TYPE = "urn:ietf:params:oauth:grant-type:device_code";
-    CopilotAuth = class {
-      fetchFn;
-      /** @param options - Optional configuration with custom fetch for testing */
-      constructor(options) {
-        this.fetchFn = options?.fetch ?? globalThis.fetch;
-      }
-      /**
-       * Start the GitHub Device Flow.
-       * Returns a device code result with user code, verification URL,
-       * and a `waitForToken()` function that polls until the user authorizes.
-       *
-       * @param options - Optional scopes and abort signal
-       * @returns Device flow result with user code, verification URL, and waitForToken poller
-       * @throws {AuthError} If the device code request fails
-       * @throws {DeviceCodeExpiredError} If the device code expires before user authorizes
-       * @throws {AccessDeniedError} If the user denies access
-       *
-       * @example
-       * ```ts
-       * const auth = new CopilotAuth();
-       * const { userCode, verificationUrl, waitForToken } = await auth.startDeviceFlow();
-       * console.log(`Open ${verificationUrl} and enter code: ${userCode}`);
-       * const token = await waitForToken();
-       * ```
-       */
-      async startDeviceFlow(options) {
-        const scopes = options?.scopes ?? DEFAULT_SCOPES;
-        const response = await this.fetchFn(DEVICE_CODE_URL, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-            Accept: "application/json"
-          },
-          body: new URLSearchParams({
-            client_id: CLIENT_ID,
-            scope: scopes
-          }),
-          signal: options?.signal
-        });
-        if (!response.ok) {
-          throw new AuthError(
-            `Failed to request device code: ${response.status} ${response.statusText}`
-          );
-        }
-        const data = await response.json();
-        return {
-          userCode: data.user_code,
-          verificationUrl: data.verification_uri,
-          waitForToken: (signal) => this.pollForToken(data.device_code, data.interval, signal)
-        };
-      }
-      async pollForToken(deviceCode, interval, signal) {
-        let pollIntervalMs = interval * 1e3;
-        while (true) {
-          if (signal?.aborted) {
-            throw new AuthError("Authentication was aborted.");
-          }
-          await this.delay(pollIntervalMs, signal);
-          const response = await this.fetchFn(ACCESS_TOKEN_URL, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/x-www-form-urlencoded",
-              Accept: "application/json"
-            },
-            body: new URLSearchParams({
-              client_id: CLIENT_ID,
-              device_code: deviceCode,
-              grant_type: GRANT_TYPE
-            }),
-            signal
-          });
-          if (!response.ok) {
-            throw new AuthError(
-              `Token poll failed: ${response.status} ${response.statusText}`
-            );
-          }
-          const data = await response.json();
-          if (data.access_token) {
-            const token = {
-              accessToken: data.access_token,
-              tokenType: data.token_type ?? "bearer",
-              obtainedAt: Date.now()
-            };
-            try {
-              const login = await this.fetchUserLogin(data.access_token, signal);
-              if (login) token.login = login;
-            } catch {
-            }
-            return token;
-          }
-          if (data.error === "authorization_pending") {
-            continue;
-          }
-          if (data.error === "slow_down") {
-            pollIntervalMs = (data.interval ?? interval + 5) * 1e3;
-            continue;
-          }
-          if (data.error === "expired_token") {
-            throw new DeviceCodeExpiredError();
-          }
-          if (data.error === "access_denied") {
-            throw new AccessDeniedError();
-          }
-          throw new AuthError(
-            data.error_description ?? `Unexpected error: ${data.error}`
-          );
-        }
-      }
-      async fetchUserLogin(token, signal) {
-        const response = await this.fetchFn(USER_API_URL, {
-          headers: {
-            Authorization: `Bearer ${token}`,
-            Accept: "application/json"
-          },
-          signal
-        });
-        if (!response.ok) return void 0;
-        const user = await response.json();
-        return user.login;
-      }
-      delay(ms, signal) {
-        return new Promise((resolve, reject) => {
-          const timer = setTimeout(resolve, ms);
-          signal?.addEventListener(
-            "abort",
-            () => {
-              clearTimeout(timer);
-              reject(new AuthError("Authentication was aborted."));
-            },
-            { once: true }
-          );
-        });
-      }
-    };
-  }
-});
-function defaultRandomBytes(size) {
-  return new Uint8Array(randomBytes(size));
-}
-function base64Encode(bytes) {
-  return Buffer.from(bytes).toString("base64");
-}
-function hexEncode(bytes) {
-  return Buffer.from(bytes).toString("hex");
-}
-var CLIENT_ID2, AUTHORIZE_URL, TOKEN_URL, DEFAULT_REDIRECT_URI, DEFAULT_SCOPES2, ClaudeAuth;
-var init_claude_auth = __esm({
-  "src/auth/claude-auth.ts"() {
-    init_types();
-    CLIENT_ID2 = "9d1c250a-e61b-44d9-88ed-5944d1962f5e";
-    AUTHORIZE_URL = "https://claude.ai/oauth/authorize";
-    TOKEN_URL = "https://platform.claude.com/v1/oauth/token";
-    DEFAULT_REDIRECT_URI = "https://platform.claude.com/oauth/code/callback";
-    DEFAULT_SCOPES2 = "user:profile user:inference user:sessions:claude_code user:mcp_servers";
-    ClaudeAuth = class _ClaudeAuth {
-      fetchFn;
-      randomBytes;
-      /**
-       * @param options - Optional configuration with custom fetch and random bytes for testing
-       */
-      constructor(options) {
-        this.fetchFn = options?.fetch ?? globalThis.fetch;
-        this.randomBytes = options?.randomBytes ?? defaultRandomBytes;
-      }
-      /**
-       * Start the Claude OAuth+PKCE flow.
-       * Generates PKCE code verifier/challenge and returns an authorize URL
-       * plus a `completeAuth(code)` function for token exchange.
-       *
-       * @param options - Redirect URI and optional scopes
-       * @returns OAuth flow result with authorize URL and completeAuth function
-       * @throws {AuthError} If PKCE generation fails
-       *
-       * @example
-       * ```ts
-       * const auth = new ClaudeAuth();
-       * const { authorizeUrl, completeAuth } = auth.startOAuthFlow({
-       *   redirectUri: "https://platform.claude.com/oauth/code/callback",
-       * });
-       * console.log(`Open: ${authorizeUrl}`);
-       * const token = await completeAuth(authorizationCode);
-       * ```
-       */
-      startOAuthFlow(options) {
-        const redirectUri = options?.redirectUri ?? DEFAULT_REDIRECT_URI;
-        const scopes = options?.scopes ?? DEFAULT_SCOPES2;
-        const codeVerifier = this.generateCodeVerifier();
-        const state = this.generateState();
-        const authorizeUrl = this.buildAuthorizeUrl(
-          redirectUri,
-          scopes,
-          codeVerifier,
-          state
-        );
-        return {
-          authorizeUrl,
-          completeAuth: (codeOrUrl) => {
-            const code = _ClaudeAuth.extractCode(codeOrUrl);
-            return this.exchangeCode(code, codeVerifier, state, redirectUri);
-          }
-        };
-      }
-      /**
-       * Extract an authorization code from user input.
-       * Accepts a raw code string or a full redirect URL containing a `code` query parameter.
-       *
-       * @param input - Raw authorization code or redirect URL
-       * @returns The extracted authorization code
-       *
-       * @example
-       * ```ts
-       * ClaudeAuth.extractCode("abc123"); // "abc123"
-       * ClaudeAuth.extractCode("https://platform.claude.com/oauth/code/callback?code=abc123&state=xyz"); // "abc123"
-       * ```
-       */
-      static extractCode(input) {
-        const trimmed = input.trim();
-        try {
-          const url = new URL(trimmed);
-          const code = url.searchParams.get("code");
-          if (code) return code;
-        } catch {
-        }
-        const hashIdx = trimmed.indexOf("#");
-        if (hashIdx > 0) {
-          return trimmed.substring(0, hashIdx);
-        }
-        return trimmed;
-      }
-      /**
-       * Refresh an expired Claude token.
-       *
-       * @param refreshToken - The refresh token from a previous authentication
-       * @returns New auth token with refreshed access token
-       * @throws {TokenExchangeError} If the refresh request fails
-       *
-       * @example
-       * ```ts
-       * const auth = new ClaudeAuth();
-       * const newToken = await auth.refreshToken(oldToken.refreshToken);
-       * ```
-       */
-      async refreshToken(refreshToken) {
-        const response = await this.fetchFn(TOKEN_URL, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            grant_type: "refresh_token",
-            refresh_token: refreshToken,
-            client_id: CLIENT_ID2
-          })
-        });
-        if (!response.ok) {
-          const text = await response.text();
-          throw new TokenExchangeError(
-            `Token refresh failed: ${response.status} ${text}`
-          );
-        }
-        const data = await response.json();
-        return this.mapTokenResponse(data);
-      }
-      generateCodeVerifier() {
-        const bytes = this.randomBytes(96);
-        return base64Encode(bytes).replace(/\+/g, "~").replace(/=/g, "_").replace(/\//g, "-");
-      }
-      generateState() {
-        const bytes = this.randomBytes(16);
-        return hexEncode(bytes);
-      }
-      buildAuthorizeUrl(redirectUri, scopes, codeVerifier, state) {
-        const codeChallenge = this.generateCodeChallengeSync(codeVerifier);
-        const url = new URL(AUTHORIZE_URL);
-        url.searchParams.set("code", "true");
-        url.searchParams.set("client_id", CLIENT_ID2);
-        url.searchParams.set("response_type", "code");
-        url.searchParams.set("redirect_uri", redirectUri);
-        url.searchParams.set("scope", scopes);
-        url.searchParams.set("code_challenge", codeChallenge);
-        url.searchParams.set("code_challenge_method", "S256");
-        url.searchParams.set("state", state);
-        return url.toString();
-      }
-      generateCodeChallengeSync(verifier) {
-        const hash = createHash("sha256").update(verifier).digest("base64");
-        return hash.split("=")[0].replace(/\+/g, "-").replace(/\//g, "_");
-      }
-      async exchangeCode(code, codeVerifier, state, redirectUri) {
-        const response = await this.fetchFn(TOKEN_URL, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            grant_type: "authorization_code",
-            code,
-            redirect_uri: redirectUri,
-            client_id: CLIENT_ID2,
-            code_verifier: codeVerifier,
-            state
-          })
-        });
-        if (!response.ok) {
-          const text = await response.text();
-          throw new TokenExchangeError(
-            `Token exchange failed: ${response.status} ${text}`
-          );
-        }
-        const data = await response.json();
-        return this.mapTokenResponse(data);
-      }
-      mapTokenResponse(data) {
-        return {
-          accessToken: data.access_token,
-          tokenType: data.token_type ?? "bearer",
-          expiresIn: data.expires_in,
-          obtainedAt: Date.now(),
-          refreshToken: data.refresh_token,
-          scopes: data.scope?.split(" ") ?? []
-        };
-      }
-    };
-  }
-});
-
-// src/auth/refresh-manager.ts
-var TokenRefreshManager;
-var init_refresh_manager = __esm({
-  "src/auth/refresh-manager.ts"() {
-    TokenRefreshManager = class {
-      currentToken;
-      refreshFn;
-      threshold;
-      maxRetries;
-      retryDelayMs;
-      minDelayMs;
-      timerId = null;
-      running = false;
-      disposed = false;
-      listeners = {
-        refreshed: /* @__PURE__ */ new Set(),
-        error: /* @__PURE__ */ new Set(),
-        expired: /* @__PURE__ */ new Set(),
-        disposed: /* @__PURE__ */ new Set()
-      };
-      constructor(options) {
-        this.currentToken = { ...options.token };
-        this.refreshFn = options.refresh;
-        this.threshold = options.refreshThreshold ?? 0.8;
-        this.maxRetries = options.maxRetries ?? 3;
-        this.retryDelayMs = options.retryDelayMs ?? 1e3;
-        this.minDelayMs = options.minDelayMs ?? 1e3;
-      }
-      /** Register an event listener */
-      on(event, listener) {
-        this.listeners[event].add(listener);
-        return this;
-      }
-      /** Remove an event listener */
-      off(event, listener) {
-        this.listeners[event].delete(listener);
-        return this;
-      }
-      /** Current token managed by this instance */
-      get token() {
-        return { ...this.currentToken };
-      }
-      /** Whether the manager is currently running */
-      get isRunning() {
-        return this.running;
-      }
-      /** Whether the manager has been disposed */
-      get isDisposed() {
-        return this.disposed;
-      }
-      /**
-       * Start automatic refresh scheduling.
-       * If the token is already expired, emits "expired" immediately.
-       * If the token has no expiresIn, does nothing (long-lived token).
-       */
-      start() {
-        if (this.disposed) return;
-        if (this.running) return;
-        this.running = true;
-        this.schedule();
-      }
-      /** Stop automatic refresh (can be restarted with start()) */
-      stop() {
-        this.running = false;
-        this.clearTimer();
-      }
-      /**
-       * Update the managed token (e.g. after manual refresh).
-       * Reschedules automatic refresh if running.
-       */
-      updateToken(token) {
-        if (this.disposed) return;
-        this.currentToken = { ...token };
-        if (this.running) {
-          this.clearTimer();
-          this.schedule();
-        }
-      }
-      /** Stop and clean up all resources */
-      dispose() {
-        if (this.disposed) return;
-        this.stop();
-        this.disposed = true;
-        this.emit("disposed");
-        for (const set of Object.values(this.listeners)) {
-          set.clear();
-        }
-      }
-      // ─── Private ──────────────────────────────────────────────────
-      schedule() {
-        if (!this.running || this.disposed) return;
-        const delayMs = this.computeRefreshDelay();
-        if (delayMs === null) {
-          return;
-        }
-        if (delayMs <= 0) {
-          this.timerId = setTimeout(() => {
-            this.timerId = null;
-            if (!this.running || this.disposed) return;
-            void this.performRefresh();
-          }, 0);
-          return;
-        }
-        this.timerId = setTimeout(() => {
-          this.timerId = null;
-          if (!this.running || this.disposed) return;
-          void this.performRefresh();
-        }, Math.max(delayMs, this.minDelayMs));
-      }
-      async performRefresh(attempt = 1) {
-        if (!this.running || this.disposed) return;
-        try {
-          const newToken = await this.refreshFn(this.currentToken);
-          if (!this.running || this.disposed) return;
-          this.currentToken = { ...newToken };
-          this.emit("refreshed", newToken);
-          this.schedule();
-        } catch (err) {
-          if (!this.running || this.disposed) return;
-          const error = err instanceof Error ? err : new Error(String(err));
-          this.emit("error", error, attempt);
-          if (attempt < this.maxRetries) {
-            const delay = this.retryDelayMs * Math.pow(2, attempt - 1);
-            this.timerId = setTimeout(() => {
-              this.timerId = null;
-              if (!this.running || this.disposed) return;
-              void this.performRefresh(attempt + 1);
-            }, delay);
-          } else {
-            if (this.isTokenExpired()) {
-              this.running = false;
-              this.emit("expired");
-            } else {
-              const expiresIn = this.currentToken.expiresIn;
-              if (expiresIn == null) return;
-              const expiresAt = this.currentToken.obtainedAt + expiresIn * 1e3;
-              const waitMs = Math.max(expiresAt - Date.now(), this.minDelayMs);
-              this.timerId = setTimeout(() => {
-                this.timerId = null;
-                if (!this.running || this.disposed) return;
-                void this.performRefresh();
-              }, waitMs);
-            }
-          }
-        }
-      }
-      computeRefreshDelay() {
-        if (this.currentToken.expiresIn == null) return null;
-        const lifetimeMs = this.currentToken.expiresIn * 1e3;
-        const refreshAtMs = this.currentToken.obtainedAt + lifetimeMs * this.threshold;
-        const now = Date.now();
-        const delay = refreshAtMs - now;
-        return delay;
-      }
-      isTokenExpired() {
-        if (this.currentToken.expiresIn == null) return false;
-        const expiresAt = this.currentToken.obtainedAt + this.currentToken.expiresIn * 1e3;
-        return Date.now() >= expiresAt;
-      }
-      clearTimer() {
-        if (this.timerId !== null) {
-          clearTimeout(this.timerId);
-          this.timerId = null;
-        }
-      }
-      emit(event, ...args) {
-        for (const listener of this.listeners[event]) {
-          try {
-            listener(...args);
-          } catch {
-          }
-        }
-      }
-    };
-  }
-});
-
-// src/auth/index.ts
-var auth_exports = {};
-__export(auth_exports, {
-  AccessDeniedError: () => AccessDeniedError,
-  AuthError: () => AuthError,
-  ClaudeAuth: () => ClaudeAuth,
-  CopilotAuth: () => CopilotAuth,
-  DeviceCodeExpiredError: () => DeviceCodeExpiredError,
-  TokenExchangeError: () => TokenExchangeError,
-  TokenRefreshManager: () => TokenRefreshManager
-});
-var init_auth = __esm({
-  "src/auth/index.ts"() {
-    init_types();
-    init_copilot_auth();
-    init_claude_auth();
-    init_refresh_manager();
-  }
-});
+// src/chat/react/ChatProvider.ts
 var ChatRuntimeContext = createContext(null);
 function ChatProvider({ runtime, children }) {
   return createElement(ChatRuntimeContext.Provider, { value: runtime }, children);
@@ -603,10 +13,15 @@ function useChatRuntime() {
   return runtime;
 }
 
-// src/chat/core.ts
+// 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":
@@ -632,7 +47,7 @@ function chatEventToAgentEvent(event) {
         result: event.result
       };
     case "error":
-      return { type: "error", error: event.error, recoverable: event.recoverable };
+      return { type: "error", error: event.error, recoverable: event.recoverable, code: event.code };
     default:
       return null;
   }
@@ -785,9 +200,26 @@ function useChat(options = {}) {
   const [isGenerating, setIsGenerating] = useState(false);
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState(null);
+  const [usage, setUsage] = useState(null);
   const generatingRef = useRef(false);
+  const lastUserMessageRef = useRef(null);
   const onErrorRef = useRef(options.onError);
   onErrorRef.current = options.onError;
+  const dismissTimerRef = useRef(null);
+  const autoDismissMs = options.autoDismissMs ?? 0;
+  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]);
   useEffect(() => {
     if (!sessionId) {
       setMessages([]);
@@ -799,6 +231,15 @@ function useChat(options = {}) {
       }
     });
   }, [sessionId, runtime]);
+  useEffect(() => {
+    return runtime.onSessionChange(() => {
+      const activeId = runtime.activeSessionId;
+      if (activeId && activeId !== sessionId) {
+        setSessionId(activeId);
+        setError(null);
+      }
+    });
+  }, [runtime, sessionId]);
   const ensureSession = useCallback(async () => {
     if (sessionId) return sessionId;
     const session = await runtime.createSession({
@@ -810,6 +251,7 @@ function useChat(options = {}) {
   const sendMessage = useCallback(
     async (content) => {
       if (generatingRef.current) return;
+      lastUserMessageRef.current = content;
       setError(null);
       generatingRef.current = true;
       setIsGenerating(true);
@@ -829,8 +271,19 @@ function useChat(options = {}) {
         };
         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) {
+            if (agentEvent.type === "error" && !agentEvent.recoverable) {
+              throw new Error(agentEvent.error || "Stream error");
+            }
             accumulator.apply(agentEvent);
             hasEvents = true;
             const snapshot = accumulator.snapshot();
@@ -885,6 +338,10 @@ function useChat(options = {}) {
   const clearError = useCallback(() => {
     setError(null);
   }, []);
+  const retryLastMessage = useCallback(async () => {
+    if (!lastUserMessageRef.current || generatingRef.current) return;
+    await sendMessage(lastUserMessageRef.current);
+  }, [sendMessage]);
   const newSession = useCallback(async () => {
     const session = await runtime.createSession({
       config: { model: "", backend: "" }
@@ -892,6 +349,7 @@ function useChat(options = {}) {
     setSessionId(session.id);
     setMessages([]);
     setError(null);
+    lastUserMessageRef.current = null;
     return session.id;
   }, [runtime]);
   return {
@@ -903,7 +361,9 @@ function useChat(options = {}) {
     status,
     error,
     clearError,
-    newSession
+    retryLastMessage,
+    newSession,
+    usage
   };
 }
 var EMPTY_MESSAGES = [];
@@ -951,7 +411,7 @@ function useMessages(options) {
       messagesRef.current = session.messages;
       isLoadedRef.current = true;
       emitChange();
-      if (session.subscribe && session.getSnapshot) {
+      if (isObservableSession(session)) {
         unsubscribe = session.subscribe(() => {
           const snapshot = session.getSnapshot();
           messagesRef.current = snapshot.messages;
@@ -1023,124 +483,6 @@ function useSessions() {
   }, [fetchSessions]);
   return { sessions, loading, error, refresh };
 }
-function defaultRenderText(part, index) {
-  return createElement("span", { key: index, "data-part": "text" }, part.text);
-}
-function defaultRenderReasoning(part, index) {
-  return createElement("span", { key: index, "data-part": "reasoning" }, part.text);
-}
-function defaultRenderToolCall(part, index) {
-  return createElement("span", { key: index, "data-part": "tool_call", "data-tool-name": part.name }, part.name);
-}
-function defaultRenderSource(part, index) {
-  return createElement("a", { key: index, href: part.url, "data-part": "source" }, part.title ?? part.url);
-}
-function defaultRenderFile(part, index) {
-  return 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 createElement(
-    "div",
-    {
-      "data-role": message.role,
-      "data-status": message.status
-    },
-    ...children
-  );
-}
-function ThinkingBlock({ text, isStreaming, defaultOpen }) {
-  const attrs = {
-    "data-thinking": "true"
-  };
-  if (isStreaming) {
-    attrs["data-streaming"] = "true";
-  }
-  if (defaultOpen) {
-    attrs.open = true;
-  }
-  return createElement(
-    "details",
-    attrs,
-    createElement("summary", null, isStreaming ? "Thinking..." : "Reasoning"),
-    createElement("div", null, text)
-  );
-}
-function ToolCallView({ part, onApprove, onDeny, renderArgs, renderResult }) {
-  const children = [
-    createElement("span", { key: "name", "data-tool-label": "name" }, part.name),
-    createElement("span", { key: "status", "data-tool-label": "status" }, part.status)
-  ];
-  if (part.args !== void 0) {
-    children.push(
-      renderArgs ? renderArgs(part.args) : createElement("pre", { key: "args", "data-tool-label": "args" }, JSON.stringify(part.args, null, 2))
-    );
-  }
-  if (part.result !== void 0) {
-    children.push(
-      renderResult ? renderResult(part.result) : createElement("pre", { key: "result", "data-tool-label": "result" }, JSON.stringify(part.result, null, 2))
-    );
-  }
-  if (part.error) {
-    children.push(
-      createElement("span", { key: "error", "data-tool-label": "error", role: "alert" }, part.error)
-    );
-  }
-  if (part.status === "requires_approval") {
-    children.push(
-      createElement("button", { key: "approve", onClick: onApprove, "data-action": "approve" }, "Approve"),
-      createElement("button", { key: "deny", onClick: onDeny, "data-action": "deny" }, "Deny")
-    );
-  }
-  return createElement(
-    "div",
-    {
-      "data-tool-status": part.status,
-      "data-tool-name": part.name
-    },
-    ...children
-  );
-}
-function useToolApproval(messages, onApprove, onDeny) {
-  const pendingRequests = 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 = useCallback((toolCallId) => {
-    onApprove?.(toolCallId);
-  }, [onApprove]);
-  const deny = useCallback((toolCallId) => {
-    onDeny?.(toolCallId);
-  }, [onDeny]);
-  return { pendingRequests, approve, deny };
-}
 function parseBlocks(text) {
   const tokens = [];
   const lines = text.split("\n");
@@ -1289,68 +631,370 @@ function MarkdownRenderer(props) {
   const children = tokens.map((token, i) => renderBlock(token, i, props));
   return createElement("div", { "data-md-root": true }, ...children);
 }
-var ThreadSlotsContext = createContext(null);
-function ThreadProvider({
-  children,
-  renderMessage,
-  renderToolCall,
-  renderThinkingBlock
-}) {
-  const value = { renderMessage, renderToolCall, renderThinkingBlock };
-  return createElement(ThreadSlotsContext.Provider, { value }, children);
-}
-function useThreadSlots() {
-  const ctx = useContext(ThreadSlotsContext);
-  if (!ctx) {
-    throw new Error("useThreadSlots must be used within a ThreadProvider");
+function ThinkingBlock({ text, isStreaming, defaultOpen }) {
+  const attrs = {
+    "data-thinking": "true"
+  };
+  if (isStreaming) {
+    attrs["data-streaming"] = "true";
   }
-  return ctx;
+  if (defaultOpen) {
+    attrs.open = true;
+  }
+  return createElement(
+    "details",
+    attrs,
+    createElement("summary", null, isStreaming ? "Thinking..." : "Reasoning"),
+    createElement("div", null, text)
+  );
+}
+function ToolCallView({ part, onApprove, onDeny, renderArgs, renderResult }) {
+  const children = [];
+  children.push(
+    createElement(
+      "div",
+      { key: "header", "data-tool-header": "true" },
+      createElement("span", { "data-tool-label": "name" }, part.name),
+      createElement("span", { "data-tool-label": "status" }, part.status)
+    )
+  );
+  if (part.args !== void 0) {
+    children.push(
+      renderArgs ? renderArgs(part.args) : createElement(
+        "details",
+        { key: "args", "data-tool-details": "args" },
+        createElement("summary", null, "Arguments"),
+        createElement("pre", { "data-tool-label": "args" }, JSON.stringify(part.args, null, 2))
+      )
+    );
+  }
+  if (part.result !== void 0) {
+    children.push(
+      renderResult ? renderResult(part.result) : createElement(
+        "details",
+        { key: "result", "data-tool-details": "result", open: true },
+        createElement("summary", null, "Result"),
+        createElement("pre", { "data-tool-label": "result" }, JSON.stringify(part.result, null, 2))
+      )
+    );
+  }
+  if (part.error) {
+    children.push(
+      createElement("span", { key: "error", "data-tool-label": "error", role: "alert" }, part.error)
+    );
+  }
+  if (part.status === "requires_approval") {
+    children.push(
+      createElement(
+        "div",
+        { key: "actions", "data-tool-actions": "true" },
+        createElement("button", { key: "approve", onClick: onApprove, "data-action": "approve" }, "Approve"),
+        createElement("button", { key: "deny", onClick: onDeny, "data-action": "deny" }, "Deny")
+      )
+    );
+  }
+  return createElement(
+    "div",
+    {
+      "data-tool-status": part.status,
+      "data-tool-name": part.name
+    },
+    ...children
+  );
+}
+
+// src/chat/react/Message.ts
+function defaultRenderText(part, index) {
+  return createElement(
+    "div",
+    { key: index, "data-part": "text" },
+    createElement(MarkdownRenderer, { content: part.text })
+  );
+}
+function defaultRenderReasoning(part, index) {
+  return createElement(ThinkingBlock, {
+    key: index,
+    text: part.text,
+    isStreaming: part.status === "streaming"
+  });
+}
+function defaultRenderToolCall(part, index) {
+  return createElement(
+    "div",
+    { key: index, "data-part": "tool_call" },
+    createElement(ToolCallView, { part })
+  );
+}
+function defaultRenderSource(part, index) {
+  return createElement("a", { key: index, href: part.url, "data-part": "source" }, part.title ?? part.url);
+}
+function defaultRenderFile(part, index) {
+  return 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 createElement(
+    "div",
+    {
+      "data-role": message.role,
+      "data-status": message.status
+    },
+    ...children
+  );
+}
+function useToolApproval(messages, onApprove, onDeny) {
+  const pendingRequests = 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 = useCallback((toolCallId) => {
+    onApprove?.(toolCallId);
+  }, [onApprove]);
+  const deny = useCallback((toolCallId) => {
+    onDeny?.(toolCallId);
+  }, [onDeny]);
+  return { pendingRequests, approve, deny };
+}
+var ThreadSlotsContext = createContext(null);
+function ThreadProvider({
+  children,
+  renderMessage,
+  renderToolCall,
+  renderThinkingBlock
+}) {
+  const value = { renderMessage, renderToolCall, renderThinkingBlock };
+  return createElement(ThreadSlotsContext.Provider, { value }, children);
+}
+function useThreadSlots() {
+  const ctx = useContext(ThreadSlotsContext);
+  if (!ctx) {
+    throw new Error("useThreadSlots must be used within a ThreadProvider");
+  }
+  return ctx;
 }
 function useOptionalThreadSlots() {
   return useContext(ThreadSlotsContext);
 }
+function useVirtualMessages(items, options = {}) {
+  const { estimatedItemHeight = 80, overscan = 3 } = options;
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const containerElRef = useRef(null);
+  const containerRef = useCallback((el) => {
+    containerElRef.current = el;
+    if (el) {
+      setContainerHeight(el.clientHeight);
+    }
+  }, []);
+  useEffect(() => {
+    const el = containerElRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      setContainerHeight(el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const onScroll = useCallback(
+    (event) => {
+      setScrollTop(event.currentTarget.scrollTop);
+      setContainerHeight(event.currentTarget.clientHeight);
+    },
+    []
+  );
+  const result = useMemo(() => {
+    const totalCount = items.length;
+    const totalHeight = totalCount * estimatedItemHeight;
+    if (totalCount === 0 || containerHeight === 0) {
+      return {
+        visibleItems: items.slice(),
+        startIndex: 0,
+        endIndex: totalCount,
+        topSpacerHeight: 0,
+        bottomSpacerHeight: 0,
+        totalHeight
+      };
+    }
+    const rawStart = Math.floor(scrollTop / estimatedItemHeight) - overscan;
+    const startIndex = Math.max(0, rawStart);
+    const visibleCount = Math.ceil(containerHeight / estimatedItemHeight);
+    const rawEnd = Math.floor(scrollTop / estimatedItemHeight) + visibleCount + overscan;
+    const endIndex = Math.min(totalCount, rawEnd);
+    return {
+      visibleItems: items.slice(startIndex, endIndex),
+      startIndex,
+      endIndex,
+      topSpacerHeight: startIndex * estimatedItemHeight,
+      bottomSpacerHeight: (totalCount - endIndex) * estimatedItemHeight,
+      totalHeight
+    };
+  }, [items, scrollTop, containerHeight, estimatedItemHeight, overscan]);
+  return {
+    ...result,
+    onScroll,
+    containerRef
+  };
+}
 
 // src/chat/react/Thread.ts
 function Thread({
   messages,
   isGenerating,
   autoScroll = true,
-  className
+  className,
+  virtualize
 }) {
   const sentinelRef = useRef(null);
   const containerRef = useRef(null);
   const [userScrolledUp, setUserScrolledUp] = useState(false);
-  const handleScroll = useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
-    setUserScrolledUp(!atBottom);
+  const isScrollingProgrammatically = useRef(false);
+  const isVirtualized = virtualize != null && virtualize !== false;
+  const virtualizeOpts = virtualize === true ? {} : !isVirtualized ? false : virtualize;
+  const virtual = useVirtualMessages(
+    messages,
+    virtualizeOpts || void 0
+  );
+  const handleScroll = useCallback(
+    (e) => {
+      if (isVirtualized) {
+        virtual.onScroll(e);
+      }
+      if (isScrollingProgrammatically.current) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
+      setUserScrolledUp(!atBottom);
+    },
+    [isVirtualized, virtual.onScroll]
+  );
+  const scrollToBottom = useCallback(() => {
+    isScrollingProgrammatically.current = true;
+    sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
+    setUserScrolledUp(false);
+    setTimeout(() => {
+      isScrollingProgrammatically.current = false;
+    }, 500);
   }, []);
   useEffect(() => {
     if (!autoScroll || userScrolledUp) return;
     sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, autoScroll, userScrolledUp]);
   const slots = useOptionalThreadSlots();
+  const mergedRef = useCallback(
+    (el) => {
+      containerRef.current = el;
+      if (isVirtualized) {
+        virtual.containerRef(el);
+      }
+    },
+    [isVirtualized, virtual.containerRef]
+  );
   const attrs = { "data-thread": "true", className };
   if (isGenerating) {
     attrs["data-thread-loading"] = "true";
   }
-  attrs.ref = containerRef;
+  if (virtualizeOpts) {
+    attrs["data-thread-virtualized"] = "true";
+  }
+  attrs.ref = mergedRef;
   attrs.onScroll = handleScroll;
-  const children = messages.map((msg, i) => {
-    const content = slots?.renderMessage ? slots.renderMessage(msg, i) : createElement(Message, {
+  const children = [];
+  if (messages.length === 0 && !isGenerating) {
+    children.push(
+      createElement(
+        "div",
+        { key: "__empty", "data-thread-empty": "true" },
+        "Start a conversation"
+      )
+    );
+  }
+  const renderMessages = virtualizeOpts ? virtual.visibleItems : messages;
+  const startOffset = virtualizeOpts ? virtual.startIndex : 0;
+  if (virtualizeOpts && virtual.topSpacerHeight > 0) {
+    children.push(
+      createElement("div", {
+        key: "__virtual-top",
+        "data-virtual-spacer": "top",
+        style: { height: virtual.topSpacerHeight }
+      })
+    );
+  }
+  for (let i = 0; i < renderMessages.length; i++) {
+    const msg = renderMessages[i];
+    const originalIndex = startOffset + i;
+    const content = slots?.renderMessage ? slots.renderMessage(msg, originalIndex) : createElement(Message, {
       key: msg.id,
       message: msg,
       renderToolCall: slots?.renderToolCall,
       renderReasoning: slots?.renderThinkingBlock ? (part, idx) => slots.renderThinkingBlock(part, idx) : void 0
     });
-    return createElement(
-      "div",
-      { key: msg.id, "data-thread-message": "true", "data-role": msg.role },
-      content
+    children.push(
+      createElement(
+        "div",
+        { key: msg.id, "data-thread-message": "true", "data-role": msg.role },
+        content
+      )
     );
-  });
+  }
+  if (virtualizeOpts && virtual.bottomSpacerHeight > 0) {
+    children.push(
+      createElement("div", {
+        key: "__virtual-bottom",
+        "data-virtual-spacer": "bottom",
+        style: { height: virtual.bottomSpacerHeight }
+      })
+    );
+  }
+  if (isGenerating) {
+    children.push(
+      createElement(
+        "div",
+        { key: "__loading", "data-thread-loading-indicator": "true" },
+        createElement("span", null),
+        createElement("span", null),
+        createElement("span", null)
+      )
+    );
+  }
   children.push(createElement("div", { key: "__sentinel", ref: sentinelRef }));
+  if (userScrolledUp) {
+    children.push(
+      createElement("button", {
+        key: "__scroll-to-bottom",
+        "data-action": "scroll-to-bottom",
+        type: "button",
+        onClick: scrollToBottom,
+        "aria-label": "Scroll to bottom"
+      })
+    );
+  }
   return createElement("div", attrs, ...children);
 }
 function Composer({
@@ -1397,21 +1041,20 @@ function Composer({
     []
   );
   const children = [
-    createElement("textarea", {
-      key: "textarea",
-      ref: textareaRef,
-      value,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      placeholder,
-      disabled: disabled || false,
-      "aria-label": "Message input",
-      rows: 1
-    })
-  ];
-  if (isGenerating) {
-    children.push(
-      createElement(
+    createElement(
+      "div",
+      { key: "input-wrapper", "data-input": "" },
+      createElement("textarea", {
+        ref: textareaRef,
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled: disabled || false,
+        "aria-label": "Message input",
+        rows: 1
+      }),
+      isGenerating ? createElement(
         "button",
         {
           key: "stop",
@@ -1420,11 +1063,7 @@ function Composer({
           type: "button"
         },
         "Stop"
-      )
-    );
-  } else {
-    children.push(
-      createElement(
+      ) : createElement(
         "button",
         {
           key: "send",
@@ -1435,8 +1074,8 @@ function Composer({
         },
         "Send"
       )
-    );
-  }
+    )
+  ];
   return createElement(
     "div",
     { "data-composer": "true", className },
@@ -1446,6 +1085,20 @@ function Composer({
 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 {
@@ -1483,32 +1136,38 @@ function ThreadList({
     return normalized.filter((s) => (s.title ?? "").toLowerCase().includes(q));
   }, [normalized, searchQuery]);
   const children = [];
-  children.push(
-    createElement("input", {
-      key: "search",
-      "data-thread-list-search": "true",
-      value: searchQuery ?? "",
-      onChange: handleSearchChange,
-      placeholder: "Search sessions..."
-    })
-  );
   children.push(
     createElement(
-      "button",
-      {
-        key: "create",
-        "data-action": "create-session",
-        onClick: onCreate,
-        type: "button"
-      },
-      "New"
+      "div",
+      { key: "header", "data-thread-list-header": "true" },
+      createElement("input", {
+        "data-thread-list-search": "true",
+        value: searchQuery ?? "",
+        onChange: handleSearchChange,
+        placeholder: "Search..."
+      }),
+      createElement(
+        "button",
+        {
+          "data-action": "create-session",
+          onClick: onCreate,
+          type: "button"
+        },
+        "+"
+      )
     )
   );
   const items = filtered.map((session) => {
     const isActive = session.id === activeSessionId;
     const itemChildren = [
-      createElement("span", { key: "title" }, session.title ?? "Untitled")
+      createElement("span", { key: "title", "data-session-title": "true" }, session.title ?? "Untitled")
     ];
+    if (session.updatedAt) {
+      const timeStr = formatRelativeTime(new Date(session.updatedAt));
+      itemChildren.push(
+        createElement("span", { key: "time", "data-session-time": "true" }, timeStr)
+      );
+    }
     if (onDelete) {
       itemChildren.push(
         createElement(
@@ -1522,7 +1181,7 @@ function ThreadList({
             },
             type: "button"
           },
-          "Delete"
+          "\xD7"
         )
       );
     }
@@ -1532,6 +1191,7 @@ function ThreadList({
         key: session.id,
         "data-session-item": "true",
         "data-session-active": isActive ? "true" : "false",
+        "data-session-status": session.status ?? "active",
         onClick: () => onSelect(session.id)
       },
       ...itemChildren
@@ -1582,13 +1242,19 @@ function useSSE(url, options = {}) {
     setStatus("connecting");
     (async () => {
       try {
-        const response = await fetch(url, {
+        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}`);
         }
@@ -1677,7 +1343,8 @@ function useModels() {
       const mapped = result.map((m) => ({
         id: m.id,
         name: m.name ?? m.id,
-        tier: m.provider
+        tier: m.provider,
+        provider: m.provider
       }));
       setModels(mapped);
     } catch (err) {
@@ -1710,11 +1377,13 @@ function ModelSelector({
   selectedModel,
   onSelect,
   placeholder = "Select model",
-  className
+  className,
+  allowFreeText = true
 }) {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const [highlightIndex, setHighlightIndex] = useState(0);
+  const [freeText, setFreeText] = useState(selectedModel ?? "");
   const containerRef = useRef(null);
   const filtered = useMemo(() => {
     if (!search) return models;
@@ -1768,6 +1437,42 @@ function ModelSelector({
     },
     [filtered, highlightIndex, handleSelect]
   );
+  if (models.length === 0 && allowFreeText) {
+    return createElement(
+      "div",
+      {
+        "data-model-selector": "true",
+        "data-model-selector-freetext": "true",
+        className,
+        ref: containerRef
+      },
+      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);
+          }
+        }
+      }),
+      createElement(
+        "button",
+        {
+          type: "button",
+          "data-action": "apply-model",
+          onClick: () => {
+            const val = freeText.trim();
+            if (val) onSelect(val);
+          }
+        },
+        "Apply"
+      )
+    );
+  }
   const children = [];
   children.push(
     createElement(
@@ -1794,6 +1499,7 @@ function ModelSelector({
         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;
@@ -1805,13 +1511,17 @@ function ModelSelector({
       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";
       }
-      dropdownChildren.push(createElement("div", attrs, model.name));
+      const label = model.provider && hasMultipleProviders ? `${model.name} (${model.provider})` : model.name;
+      dropdownChildren.push(createElement("div", attrs, label));
     });
     children.push(
       createElement(
@@ -1831,124 +1541,203 @@ function ModelSelector({
     ...children
   );
 }
-var _authLoaders = {
-  async loadCopilotAuth() {
-    const { CopilotAuth: CopilotAuth2 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
-    return CopilotAuth2;
-  },
-  async loadClaudeAuth() {
-    const { ClaudeAuth: ClaudeAuth2 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
-    return ClaudeAuth2;
-  }
-};
-function useAuth(options) {
-  const { backend, onAuthenticated } = options;
+function useCopilotAuth(options) {
+  const { baseUrl, headers } = options;
+  const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState(null);
   const [token, setToken] = useState(null);
   const [deviceCode, setDeviceCode] = useState(null);
   const [verificationUrl, setVerificationUrl] = useState(null);
-  const [authorizeUrl, setAuthorizeUrl] = useState(null);
-  const onAuthenticatedRef = useRef(onAuthenticated);
-  onAuthenticatedRef.current = onAuthenticated;
-  const completeAuthRef = useRef(null);
-  const startDeviceFlow = useCallback(async () => {
-    if (backend !== "copilot") return;
+  const onAuthenticatedRef = useRef(options.onAuthenticated);
+  onAuthenticatedRef.current = options.onAuthenticated;
+  const onErrorRef = useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const post = 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 = useCallback(async () => {
     setStatus("pending");
     setError(null);
     try {
-      const CopilotAuth2 = await _authLoaders.loadCopilotAuth();
-      const auth = new CopilotAuth2();
-      const result = await auth.startDeviceFlow();
+      const result = await post("/auth/start", { provider: "copilot" });
       setDeviceCode(result.userCode);
       setVerificationUrl(result.verificationUrl);
-      const authToken = await result.waitForToken();
+      await post("/auth/copilot/poll");
+      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)));
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
       setStatus("error");
+      onErrorRef.current?.(e);
     }
-  }, [backend]);
-  const startOAuthFlow = useCallback(async () => {
-    if (backend !== "claude") return;
+  }, [post]);
+  const reset = 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] = useState("idle");
+  const [error, setError] = useState(null);
+  const [token, setToken] = useState(null);
+  const [authorizeUrl, setAuthorizeUrl] = useState(null);
+  const onAuthenticatedRef = useRef(options.onAuthenticated);
+  onAuthenticatedRef.current = options.onAuthenticated;
+  const onErrorRef = useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const post = 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 = useCallback(async () => {
     setStatus("pending");
     setError(null);
     try {
-      const ClaudeAuth2 = await _authLoaders.loadClaudeAuth();
-      const auth = new ClaudeAuth2();
-      const result = auth.startOAuthFlow();
+      const result = await post("/auth/start", { provider: "claude" });
       setAuthorizeUrl(result.authorizeUrl);
-      completeAuthRef.current = result.completeAuth;
     } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
       setStatus("error");
+      onErrorRef.current?.(e);
     }
-  }, [backend]);
-  const completeOAuth = useCallback(async (codeOrUrl) => {
-    if (!completeAuthRef.current) return;
+  }, [post]);
+  const complete = useCallback(async (codeOrUrl) => {
     try {
-      const authToken = await completeAuthRef.current(codeOrUrl);
+      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) {
-      setError(err instanceof Error ? err : new Error(String(err)));
+      const e = err instanceof Error ? err : new Error(String(err));
+      setError(e);
       setStatus("error");
+      onErrorRef.current?.(e);
     }
+  }, [post]);
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setError(null);
+    setToken(null);
+    setAuthorizeUrl(null);
   }, []);
-  const submitApiKey = useCallback((key) => {
-    if (backend !== "api-key") return;
+  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] = useState("idle");
+  const [error, setError] = useState(null);
+  const [token, setToken] = useState(null);
+  const onAuthenticatedRef = useRef(options.onAuthenticated);
+  onAuthenticatedRef.current = options.onAuthenticated;
+  const onErrorRef = useRef(options.onError);
+  onErrorRef.current = options.onError;
+  const submit = useCallback(async (key, apiBaseUrl) => {
     if (!key || !key.trim()) {
-      setError(new Error("API key cannot be empty"));
+      const e = new Error("API key cannot be empty");
+      setError(e);
       setStatus("error");
+      onErrorRef.current?.(e);
       return;
     }
-    const authToken = {
-      accessToken: key.trim(),
-      tokenType: "bearer",
-      obtainedAt: Date.now()
-    };
-    setToken(authToken);
-    setStatus("authenticated");
-    onAuthenticatedRef.current?.(authToken);
-  }, [backend]);
+    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 = useCallback(() => {
     setStatus("idle");
     setError(null);
     setToken(null);
-    setDeviceCode(null);
-    setVerificationUrl(null);
-    setAuthorizeUrl(null);
-    completeAuthRef.current = null;
   }, []);
-  return {
-    status,
-    error,
-    startDeviceFlow,
-    deviceCode,
-    verificationUrl,
-    startOAuthFlow,
-    authorizeUrl,
-    completeOAuth,
-    submitApiKey,
-    token,
-    reset
-  };
+  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] = useState("idle");
   const [error, setError] = useState(null);
   const [token, setToken] = useState(null);
-  const [deviceCode, setDeviceCode] = useState(null);
-  const [verificationUrl, setVerificationUrl] = useState(null);
-  const [authorizeUrl, setAuthorizeUrl] = useState(null);
   const [savedProviders, setSavedProviders] = useState([]);
   const onAuthenticatedRef = useRef(onAuthenticated);
   onAuthenticatedRef.current = onAuthenticated;
+  const handleSuccess = useCallback((authToken) => {
+    setToken(authToken);
+    setStatus("authenticated");
+    onAuthenticatedRef.current?.(authToken);
+  }, []);
+  const handleError = 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 = useCallback(
     async (path, body) => {
       const res = await fetchFn(`${baseUrl}${path}`, {
@@ -1978,82 +1767,26 @@ function useRemoteAuth(options) {
     if (backend !== "copilot") return;
     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) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-      setStatus("error");
-    }
-  }, [backend, post]);
+    await copilot.start();
+  }, [backend, copilot]);
   const startOAuthFlow = useCallback(async () => {
     if (backend !== "claude") return;
     setStatus("pending");
     setError(null);
-    try {
-      const result = await post("/auth/start", { provider: "claude" });
-      setAuthorizeUrl(result.authorizeUrl);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-      setStatus("error");
-    }
-  }, [backend, post]);
+    await claude.start();
+  }, [backend, claude]);
   const completeOAuth = 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) {
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setStatus("error");
-      }
+      await claude.complete(codeOrUrl);
     },
-    [post]
+    [claude]
   );
   const submitApiKey = useCallback(
     async (key, apiBaseUrl) => {
       if (backend !== "vercel-ai") return;
-      if (!key || !key.trim()) {
-        setError(new Error("API key cannot be empty"));
-        setStatus("error");
-        return;
-      }
-      try {
-        await post("/auth/vercel/complete", {
-          apiKey: key.trim(),
-          ...apiBaseUrl ? { baseUrl: apiBaseUrl } : {}
-        });
-        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");
-      }
+      await apiKey.submit(key, apiBaseUrl);
     },
-    [backend, post]
+    [backend, apiKey]
   );
   const loadSavedTokens = useCallback(async () => {
     try {
@@ -2092,55 +1825,44 @@ function useRemoteAuth(options) {
     setStatus("idle");
     setError(null);
     setToken(null);
-    setDeviceCode(null);
-    setVerificationUrl(null);
-    setAuthorizeUrl(null);
+    copilot.reset();
+    claude.reset();
+    apiKey.reset();
     setSavedProviders([]);
-  }, []);
+  }, [copilot, claude, apiKey]);
   const start = useCallback(async (provider) => {
     const target = provider ?? backend;
     setStatus("pending");
     setError(null);
-    try {
-      switch (target) {
-        case "copilot": {
-          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);
-          break;
-        }
-        case "claude": {
-          const result = await post("/auth/start", { provider: "claude" });
-          setAuthorizeUrl(result.authorizeUrl);
-          break;
-        }
-        case "vercel-ai":
-          throw new Error("vercel-ai requires submitApiKey(key, baseUrl) \u2014 cannot auto-start");
-        default:
-          throw new Error(`Unknown auth provider: ${target}`);
+    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;
       }
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-      setStatus("error");
     }
-  }, [backend, post]);
+  }, [backend, copilot, claude]);
   return {
     status,
     error,
     startDeviceFlow,
-    deviceCode,
-    verificationUrl,
+    deviceCode: copilot.deviceCode,
+    verificationUrl: copilot.verificationUrl,
     startOAuthFlow,
-    authorizeUrl,
+    authorizeUrl: claude.authorizeUrl,
     completeOAuth,
     submitApiKey,
     start,
@@ -2153,18 +1875,45 @@ function useRemoteAuth(options) {
   };
 }
 
-// src/chat/react/RemoteChatRuntime.ts
-var RemoteChatRuntime = class {
+// 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;
-  _currentBackend = "default";
-  _currentModel;
+  _selectedProviderId = null;
   _abortController = null;
-  _tools = /* @__PURE__ */ new Map();
-  _middlewares = [];
   baseUrl;
   headers;
   _fetch;
+  _selectionListeners = new ListenerSet();
   constructor(options) {
     this.baseUrl = options.baseUrl.replace(/\/$/, "");
     this.headers = options.headers ?? {};
@@ -2183,6 +1932,21 @@ var RemoteChatRuntime = class {
       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;
@@ -2214,16 +1978,22 @@ var RemoteChatRuntime = class {
     }
     this._notifySessionChange();
   }
-  async archiveSession(id) {
+  /**
+   * Fetch context window stats from server.
+   * Returns null if stats not available (e.g. no messages sent yet).
+   */
+  async getContextStats(sessionId) {
     this.assertNotDisposed();
-    await this._post(`/sessions/${id}/archive`, {});
-    this._notifySessionChange();
+    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 ──────────────────────────────────────────────
@@ -2242,7 +2012,8 @@ var RemoteChatRuntime = class {
         body: JSON.stringify({
           sessionId,
           message,
-          model: options?.model
+          model: options?.model,
+          providerId: this._selectedProviderId ?? void 0
         }),
         signal: this._abortController.signal
       });
@@ -2277,64 +2048,43 @@ var RemoteChatRuntime = class {
     this._post("/abort", {}).catch(() => {
     });
   }
-  // ─── Backend / Model ────────────────────────────────────────
-  get currentBackend() {
-    return this._currentBackend;
-  }
-  get currentModel() {
-    return this._currentModel;
-  }
-  async switchBackend(name) {
-    this.assertNotDisposed();
-    await this._post("/backend/switch", { backend: name });
-    this._currentBackend = name;
-  }
-  switchModel(model) {
-    this._currentModel = model;
-    this._post("/model/switch", { model }).catch(() => {
-    });
-  }
+  // ─── Discovery ─────────────────────────────────────────────
   async listModels() {
     this.assertNotDisposed();
     const res = await this._get("/models");
     return await res.json();
   }
-  // ─── Tools (client-side registry) ───────────────────────────
-  get registeredTools() {
-    return this._tools;
-  }
-  registerTool(tool) {
-    this._tools.set(tool.name, tool);
+  async listBackends() {
+    this.assertNotDisposed();
+    const res = await this._get("/backends");
+    return await res.json();
   }
-  removeTool(name) {
-    this._tools.delete(name);
+  // ─── Providers ──────────────────────────────────────────────
+  async listProviders() {
+    this.assertNotDisposed();
+    const res = await this._get("/providers");
+    return await res.json();
   }
-  // ─── Middleware (client-side) ───────────────────────────────
-  use(middleware) {
-    this._middlewares.push(middleware);
+  async createProvider(config) {
+    this.assertNotDisposed();
+    const res = await this._post("/providers", config);
+    return await res.json();
   }
-  removeMiddleware(middleware) {
-    const idx = this._middlewares.indexOf(middleware);
-    if (idx !== -1) this._middlewares.splice(idx, 1);
+  async updateProvider(id, changes) {
+    this.assertNotDisposed();
+    await this._put(`/providers/${id}`, changes);
   }
-  // ─── Context ────────────────────────────────────────────────
-  getContextStats(_sessionId) {
-    return null;
+  async deleteProvider(id) {
+    this.assertNotDisposed();
+    await this._delete(`/providers/${id}`);
   }
-  _sessionListeners = /* @__PURE__ */ new Set();
+  // ─── Session Change Notifications ────────────────────────────
+  _sessionListeners = new ListenerSet();
   onSessionChange(callback) {
-    this._sessionListeners.add(callback);
-    return () => {
-      this._sessionListeners.delete(callback);
-    };
+    return this._sessionListeners.add(callback);
   }
   _notifySessionChange() {
-    for (const cb of this._sessionListeners) {
-      try {
-        cb();
-      } catch {
-      }
-    }
+    this._sessionListeners.notify();
   }
   // ─── Internal HTTP helpers ──────────────────────────────────
   async _get(path) {
@@ -2371,14 +2121,28 @@ var RemoteChatRuntime = class {
     }
     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"));
+  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", () => {
@@ -2425,8 +2189,7 @@ function useRemoteChat(options) {
     authBaseUrl,
     backend,
     onReady,
-    headers,
-    autoRestore = true
+    headers
   } = options;
   const fetchFn = options.fetch ?? globalThis.fetch.bind(globalThis);
   const [phase, setPhase] = useState("initializing");
@@ -2450,7 +2213,7 @@ function useRemoteChat(options) {
   const restoredRef = useRef(false);
   const [tokensLoaded, setTokensLoaded] = useState(false);
   useEffect(() => {
-    if (!autoRestore || restoredRef.current) return;
+    if (restoredRef.current) return;
     restoredRef.current = true;
     (async () => {
       try {
@@ -2459,7 +2222,7 @@ function useRemoteChat(options) {
       }
       if (mountedRef.current) setTokensLoaded(true);
     })();
-  }, [autoRestore]);
+  }, []);
   useEffect(() => {
     if (!tokensLoaded) return;
     if (auth.status === "idle" && auth.savedProviders.includes(backend) && phase === "initializing") {
@@ -2486,7 +2249,7 @@ function useRemoteChat(options) {
     setError(null);
     (async () => {
       try {
-        const rt = new RemoteChatRuntime({
+        const rt = new RemoteChatClient({
           baseUrl: chatBaseUrl,
           headers,
           fetch: fetchFn
@@ -2541,174 +2304,1446 @@ function useRemoteChat(options) {
     logout
   };
 }
-function AuthDialog({
+function CopilotAuthForm({ auth, onAuthComplete }) {
+  const children = [];
+  if (auth.status === "idle") {
+    children.push(
+      createElement("button", {
+        key: "start",
+        type: "button",
+        "data-action": "start-auth",
+        onClick: () => {
+          auth.startDeviceFlow().then(() => onAuthComplete());
+        }
+      }, "Authenticate with GitHub")
+    );
+  }
+  if (auth.deviceCode) {
+    children.push(
+      createElement("div", { key: "code", "data-device-code": "true" }, auth.deviceCode)
+    );
+    if (auth.verificationUrl) {
+      children.push(
+        createElement("a", {
+          key: "url",
+          href: auth.verificationUrl,
+          target: "_blank",
+          rel: "noreferrer"
+        }, "Open GitHub \u2192")
+      );
+    }
+  }
+  if (auth.status === "pending") {
+    children.push(
+      createElement("span", { key: "wait", "data-auth-loading": "true" }, "Waiting...")
+    );
+  }
+  if (auth.status === "authenticated") {
+    children.push(
+      createElement(
+        "div",
+        { key: "done", "data-auth-success": "true" },
+        "\u2713 Authenticated",
+        createElement("button", {
+          type: "button",
+          "data-action": "continue",
+          onClick: onAuthComplete
+        }, "Continue \u2192")
+      )
+    );
+  }
+  if (auth.error) {
+    children.push(
+      createElement("div", { key: "error", "data-auth-error-display": "true" }, auth.error.message)
+    );
+  }
+  return createElement("div", { "data-auth-flow": "copilot" }, ...children);
+}
+function ClaudeAuthForm({ auth, onAuthComplete }) {
+  const codeRef = useRef(null);
+  const children = [];
+  if (auth.status === "idle") {
+    children.push(
+      createElement("button", {
+        key: "start",
+        type: "button",
+        "data-action": "start-auth",
+        onClick: () => auth.startOAuthFlow()
+      }, "Authenticate with Claude")
+    );
+  }
+  if (auth.authorizeUrl) {
+    children.push(
+      createElement("a", {
+        key: "url",
+        href: auth.authorizeUrl,
+        target: "_blank",
+        rel: "noreferrer"
+      }, "Open authorization page \u2192")
+    );
+    children.push(
+      createElement(
+        "div",
+        { key: "complete", "data-auth-complete": "true" },
+        createElement("input", {
+          ref: codeRef,
+          placeholder: "Paste code or redirect URL..."
+        }),
+        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(
+      createElement(
+        "div",
+        { key: "done", "data-auth-success": "true" },
+        "\u2713 Authenticated",
+        createElement("button", {
+          type: "button",
+          "data-action": "continue",
+          onClick: onAuthComplete
+        }, "Continue \u2192")
+      )
+    );
+  }
+  if (auth.error) {
+    children.push(
+      createElement("div", { key: "error", "data-auth-error-display": "true" }, auth.error.message)
+    );
+  }
+  return createElement("div", { "data-auth-flow": "claude" }, ...children);
+}
+function VercelAIAuthForm({ auth, onAuthComplete }) {
+  const apiKeyRef = useRef(null);
+  const baseUrlRef = useRef(null);
+  const children = [];
+  if (auth.status !== "authenticated") {
+    children.push(
+      createElement(
+        "div",
+        { key: "apikey", "data-auth-apikey": "true" },
+        createElement("input", {
+          ref: baseUrlRef,
+          placeholder: "Base URL (default: openai.com/v1)"
+        }),
+        createElement("input", {
+          ref: apiKeyRef,
+          type: "password",
+          placeholder: "API Key (sk-...)"
+        }),
+        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(
+      createElement(
+        "div",
+        { key: "done", "data-auth-success": "true" },
+        "\u2713 Connected",
+        createElement("button", {
+          type: "button",
+          "data-action": "continue",
+          onClick: onAuthComplete
+        }, "Continue \u2192")
+      )
+    );
+  }
+  if (auth.error) {
+    children.push(
+      createElement("div", { key: "error", "data-auth-error-display": "true" }, auth.error.message)
+    );
+  }
+  return createElement("div", { "data-auth-flow": "vercel-ai" }, ...children);
+}
+function BackendSelector({
   backends,
-  selectedBackend: controlledBackend,
-  onBackendChange,
-  onAuthenticated,
-  renderCopilotFlow,
-  renderClaudeFlow,
-  renderApiKeyFlow,
+  onSelect,
   className
 }) {
-  const [internalBackend, setInternalBackend] = useState(
-    controlledBackend ?? backends[0] ?? "copilot"
-  );
-  const activeBackend = controlledBackend ?? internalBackend;
-  const handleBackendChange = useCallback(
-    (backend) => {
-      setInternalBackend(backend);
-      onBackendChange?.(backend);
-    },
-    [onBackendChange]
+  const handleClick = useCallback(
+    (name) => () => onSelect(name),
+    [onSelect]
   );
-  const auth = useAuth({ backend: activeBackend, onAuthenticated });
-  const children = [];
-  const selectorButtons = backends.map(
+  const items = backends.map(
     (backend) => createElement(
       "button",
       {
-        key: backend,
+        key: backend.name,
         type: "button",
-        "data-auth-backend": backend,
-        "data-auth-selected": String(backend === activeBackend),
-        onClick: () => handleBackendChange(backend)
+        "data-backend-item": "true",
+        "data-backend-name": backend.name,
+        onClick: handleClick(backend.name)
       },
-      backend
+      backend.name
     )
   );
-  children.push(
-    createElement(
-      "div",
-      { key: "selector", "data-auth-selector": "true" },
-      ...selectorButtons
-    )
+  return createElement(
+    "div",
+    { "data-backend-selector": "true", className },
+    ...items
   );
-  const contentAttrs = {
-    key: "content",
-    "data-auth-content": "true",
-    "data-auth-status": auth.status
-  };
-  if (auth.error) {
-    contentAttrs["data-auth-error"] = auth.error.message;
-  }
-  let flowContent = null;
-  if (activeBackend === "copilot") {
-    if (renderCopilotFlow && auth.deviceCode && auth.verificationUrl) {
-      flowContent = renderCopilotFlow({
-        deviceCode: auth.deviceCode,
-        verificationUrl: auth.verificationUrl,
-        status: auth.status
-      });
-    } else {
-      const copilotChildren = [];
-      if (auth.status === "idle") {
-        copilotChildren.push(
-          createElement(
-            "button",
-            {
-              key: "start",
-              type: "button",
-              "data-action": "start-device-flow",
-              onClick: auth.startDeviceFlow
-            },
-            "Start Device Flow"
-          )
-        );
-      }
-      if (auth.deviceCode && auth.verificationUrl) {
-        copilotChildren.push(
-          createElement("span", { key: "code", "data-device-code": "true" }, auth.deviceCode)
-        );
-        copilotChildren.push(
-          createElement("a", { key: "url", "data-verification-url": "true", href: auth.verificationUrl }, auth.verificationUrl)
-        );
+}
+function useBackends() {
+  const runtime = useChatRuntime();
+  const [backends, setBackends] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const mountedRef = useRef(true);
+  const fetchBackends = 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);
+        }
       }
-      if (auth.status === "pending") {
-        copilotChildren.push(
-          createElement("span", { key: "loading", "data-auth-loading": "true" }, "Waiting...")
-        );
+    } catch (err) {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
       }
-      flowContent = createElement(
-        "div",
-        { "data-auth-flow": "copilot" },
-        ...copilotChildren
-      );
     }
-  } else if (activeBackend === "claude") {
-    if (renderClaudeFlow) {
-      flowContent = renderClaudeFlow({
-        authorizeUrl: auth.authorizeUrl,
-        status: auth.status,
-        completeOAuth: auth.completeOAuth
-      });
-    } else {
-      const claudeChildren = [];
-      if (auth.status === "idle") {
-        claudeChildren.push(
-          createElement(
-            "button",
-            {
-              key: "start",
-              type: "button",
-              "data-action": "start-oauth-flow",
-              onClick: auth.startOAuthFlow
-            },
-            "Start OAuth Flow"
-          )
-        );
+  }, [runtime]);
+  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] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const mountedRef = useRef(true);
+  const fetchProviders = useCallback(() => {
+    setIsLoading(true);
+    setError(null);
+    if (!isProviderCapable(runtime)) {
+      setIsLoading(false);
+      return;
+    }
+    runtime.listProviders().then((data) => {
+      if (mountedRef.current) {
+        setProviders(data);
+        setIsLoading(false);
       }
-      if (auth.authorizeUrl) {
-        claudeChildren.push(
-          createElement("a", { key: "url", "data-authorize-url": "true", href: auth.authorizeUrl }, auth.authorizeUrl)
-        );
+    }).catch((err) => {
+      if (mountedRef.current) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
       }
-      flowContent = createElement(
-        "div",
-        { "data-auth-flow": "claude" },
-        ...claudeChildren
+    });
+  }, [runtime]);
+  useEffect(() => {
+    mountedRef.current = true;
+    fetchProviders();
+    return () => {
+      mountedRef.current = false;
+    };
+  }, [fetchProviders]);
+  const createProvider = 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 = 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 = 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 = 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] = useState(false);
+  const [highlightIndex, setHighlightIndex] = useState(0);
+  const containerRef = useRef(null);
+  const activeProvider = useMemo(
+    () => providers.find((p) => p.id === activeProviderId),
+    [providers, activeProviderId]
+  );
+  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]);
+  useEffect(() => {
+    setHighlightIndex(0);
+  }, [providers.length]);
+  const handleToggle = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) setHighlightIndex(0);
+      return !prev;
+    });
+  }, []);
+  const handleSelect = useCallback(
+    (id) => {
+      onSelect(id);
+      setOpen(false);
+    },
+    [onSelect]
+  );
+  const handleKeyDown = 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(
+    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(
+        createElement(
+          "div",
+          attrs,
+          createElement("span", { "data-provider-label": "true" }, provider.label),
+          createElement("span", { "data-provider-model": "true" }, provider.model)
+        )
       );
-    }
-  } else if (activeBackend === "api-key") {
-    if (renderApiKeyFlow) {
-      flowContent = renderApiKeyFlow({
-        submitApiKey: auth.submitApiKey,
-        status: auth.status
-      });
-    } else {
-      flowContent = createElement(
-        "div",
-        { "data-auth-flow": "api-key" },
+    });
+    if (onSettingsClick) {
+      dropdownChildren.push(
         createElement(
           "button",
           {
-            key: "submit",
+            key: "settings",
             type: "button",
-            "data-action": "submit-api-key",
-            onClick: () => auth.submitApiKey("")
-          },
-          "Submit API Key"
+            "data-provider-settings-btn": "true",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(false);
+              onSettingsClick();
+            }
+          },
+          "\u2699 Settings"
         )
       );
     }
+    children.push(
+      createElement(
+        "div",
+        { key: "dropdown", "data-provider-dropdown": "true", onKeyDown: handleKeyDown },
+        ...dropdownChildren
+      )
+    );
   }
-  children.push(createElement("div", contentAttrs, flowContent));
-  if (auth.error) {
+  return 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] = useState(false);
+  const [search, setSearch] = useState("");
+  const [highlightIndex, setHighlightIndex] = useState(0);
+  const containerRef = useRef(null);
+  const isProviderMode = providers.length > 0;
+  const items = 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 = 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]);
+  useEffect(() => {
+    setHighlightIndex(0);
+  }, [filtered.length]);
+  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 = 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 = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) {
+        setSearch("");
+        setHighlightIndex(0);
+      }
+      return !prev;
+    });
+  }, []);
+  const handleSelect = 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 = useCallback((e) => {
+    setSearch(e.target.value);
+  }, []);
+  const handleKeyDown = 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(
+    createElement(
+      "button",
+      {
+        key: "trigger",
+        type: "button",
+        "data-pms-trigger": "true",
+        onClick: handleToggle
+      },
+      triggerLabel
+    )
+  );
+  if (open) {
+    const dropdownChildren = [];
+    if (items.length > 3) {
+      dropdownChildren.push(
+        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 = [
+        createElement("span", { key: "label", "data-pms-label": "true" }, item.label)
+      ];
+      if (item.sublabel) {
+        itemChildren.push(
+          createElement("span", { key: "sub", "data-pms-sublabel": "true" }, item.sublabel)
+        );
+      }
+      dropdownChildren.push(createElement("div", attrs, ...itemChildren));
+    });
+    if (onSettingsClick) {
+      dropdownChildren.push(
+        createElement(
+          "button",
+          {
+            key: "settings",
+            type: "button",
+            "data-pms-settings": "true",
+            onClick: (e) => {
+              e.stopPropagation();
+              setOpen(false);
+              onSettingsClick();
+            }
+          },
+          "\u2699 Settings"
+        )
+      );
+    }
     children.push(
       createElement(
         "div",
-        { key: "error", "data-auth-error-display": "true" },
-        auth.error.message
+        { key: "dropdown", "data-pms-dropdown": "true", onKeyDown: handleKeyDown },
+        ...dropdownChildren
       )
     );
   }
   return createElement(
     "div",
-    { "data-auth-dialog": "true", className },
+    {
+      "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] = useState("list");
+  const [addStep, setAddStep] = useState("select-backend");
+  const [selectedBackend, setSelectedBackend] = useState("copilot");
+  const [editingId, setEditingId] = useState(null);
+  const [availableModels, setAvailableModels] = useState([]);
+  const modelRef = useRef(null);
+  const labelRef = useRef(null);
+  const editModelRef = useRef(null);
+  const editLabelRef = useRef(null);
+  const runtime = useChatRuntime();
+  const auth = useRemoteAuth({
+    backend: selectedBackend,
+    baseUrl: authBaseUrl
+  });
+  const handleBackendSelect = useCallback((backend) => {
+    setSelectedBackend(backend);
+    auth.reset();
+    setAddStep("auth");
+  }, [auth]);
+  const handleAuthComplete = useCallback(() => {
+    onAuthCompleted?.(selectedBackend);
+    setAddStep("configure");
+  }, [selectedBackend, onAuthCompleted]);
+  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 = 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 = useCallback((id) => {
+    setEditingId(id);
+    setView("edit");
+  }, []);
+  const handleUpdate = 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 = useCallback((id) => {
+    onProviderDeleted?.(id);
+  }, [onProviderDeleted]);
+  const handleStartAdd = useCallback(() => {
+    setView("add");
+    setAddStep("select-backend");
+    auth.reset();
+  }, [auth]);
+  if (view === "list") {
+    const items = providers.map(
+      (p) => createElement(
+        "div",
+        { key: p.id, "data-provider-settings-item": "true" },
+        createElement("span", { "data-provider-settings-label": "true" }, p.label),
+        createElement("span", { "data-provider-settings-model": "true" }, `${p.backend} / ${p.model}`),
+        createElement(
+          "div",
+          { "data-provider-settings-actions": "true" },
+          createElement("button", {
+            type: "button",
+            "data-action": "edit-provider",
+            onClick: () => handleEdit(p.id)
+          }, "Edit"),
+          createElement("button", {
+            type: "button",
+            "data-action": "delete-provider",
+            onClick: () => handleDelete(p.id)
+          }, "Delete")
+        )
+      )
+    );
+    return createElement(
+      "div",
+      { "data-provider-settings": "true", className },
+      createElement(
+        "div",
+        { "data-provider-settings-header": "true" },
+        createElement("span", null, "Providers"),
+        onClose ? createElement("button", {
+          type: "button",
+          "data-provider-settings-close": "true",
+          onClick: onClose
+        }, "\u2715") : null
+      ),
+      createElement(
+        "div",
+        { "data-provider-settings-list": "true" },
+        ...items,
+        items.length === 0 ? createElement("div", { "data-provider-settings-empty": "true" }, "No providers configured") : null
+      ),
+      createElement("button", {
+        type: "button",
+        "data-action": "add-provider",
+        onClick: handleStartAdd
+      }, "+ Add Provider")
+    );
+  }
+  if (view === "add") {
+    const formChildren = [];
+    formChildren.push(
+      createElement(
+        "div",
+        { "data-provider-settings-header": "true", key: "header" },
+        createElement("span", null, "Add Provider"),
+        createElement("button", {
+          type: "button",
+          "data-provider-settings-close": "true",
+          onClick: () => {
+            setView("list");
+            setAddStep("select-backend");
+          }
+        }, "\u2190 Back")
+      )
+    );
+    if (addStep === "select-backend") {
+      formChildren.push(
+        createElement(
+          "div",
+          { key: "backends", "data-provider-settings-backends": "true" },
+          ...BACKENDS.map(
+            (b) => 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(
+        createElement(
+          "div",
+          { key: "auth", "data-provider-settings-auth": "true" },
+          FormComponent ? createElement(FormComponent, { auth, onAuthComplete: handleAuthComplete }) : null
+        )
+      );
+    } else if (addStep === "configure") {
+      const modelInput = availableModels.length > 0 ? createElement(
+        "select",
+        {
+          ref: modelRef,
+          "data-input": "model",
+          defaultValue: ""
+        },
+        createElement("option", { value: "", disabled: true }, "Select a model\u2026"),
+        ...availableModels.map(
+          (m) => createElement("option", { key: m.id, value: m.id }, m.name || m.id)
+        )
+      ) : createElement("input", {
+        ref: modelRef,
+        placeholder: "Model name (e.g. gpt-5-mini)",
+        "data-input": "model"
+      });
+      formChildren.push(
+        createElement(
+          "div",
+          { key: "config", "data-provider-settings-form": "true" },
+          modelInput,
+          createElement("input", {
+            ref: labelRef,
+            placeholder: "Display label (e.g. GPT-5 Mini)",
+            "data-input": "label"
+          }),
+          createElement("button", {
+            type: "button",
+            "data-action": "save-provider",
+            onClick: handleCreate
+          }, "Save Provider")
+        )
+      );
+    }
+    return createElement(
+      "div",
+      { "data-provider-settings": "true", className },
+      ...formChildren
+    );
+  }
+  const editingProvider = providers.find((p) => p.id === editingId);
+  return createElement(
+    "div",
+    { "data-provider-settings": "true", className },
+    createElement(
+      "div",
+      { "data-provider-settings-header": "true" },
+      createElement("span", null, "Edit Provider"),
+      createElement("button", {
+        type: "button",
+        "data-provider-settings-close": "true",
+        onClick: () => {
+          setView("list");
+          setEditingId(null);
+        }
+      }, "\u2190 Back")
+    ),
+    createElement(
+      "div",
+      { "data-provider-settings-form": "true" },
+      availableModels.length > 0 ? createElement(
+        "select",
+        {
+          ref: editModelRef,
+          defaultValue: editingProvider?.model ?? "",
+          "data-input": "model"
+        },
+        createElement("option", { value: "", disabled: true }, "Select a model\u2026"),
+        ...availableModels.map(
+          (m) => createElement("option", { key: m.id, value: m.id }, m.name || m.id)
+        )
+      ) : createElement("input", {
+        ref: editModelRef,
+        defaultValue: editingProvider?.model ?? "",
+        placeholder: "Model name",
+        "data-input": "model"
+      }),
+      createElement("input", {
+        ref: editLabelRef,
+        defaultValue: editingProvider?.label ?? "",
+        placeholder: "Display label",
+        "data-input": "label"
+      }),
+      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 createElement(
+    "div",
+    {
+      "data-context-stats": "",
+      "data-context-truncated": stats.wasTruncated ? "true" : "false",
+      className
+    },
+    createElement(
+      "span",
+      { "data-context-tokens": "" },
+      `${formatTokens(promptTokens)} tokens`
+    ),
+    createElement(
+      "span",
+      { "data-context-budget": "" },
+      `${formatTokens(availableBudget)} available`
+    ),
+    createElement(
+      "span",
+      { "data-context-usage": "", "data-usage-percent": String(usagePercent) },
+      `${usagePercent}%`
+    ),
+    stats.removedCount > 0 ? createElement(
+      "span",
+      { "data-context-removed": "" },
+      `${stats.removedCount} trimmed`
+    ) : null
+  );
+}
+function ChatLayout({ children, sidebar, overlay, className }) {
+  const overlayNodes = Array.isArray(overlay) ? overlay : [overlay ?? null];
+  return 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(
+      createElement(BSC, {
+        key: "backend-selector",
+        backends,
+        onSelect: onBackendSelect ?? (() => {
+        })
+      })
+    );
+  }
+  if (showModelSelector && !hasProviders && models.length > 0) {
+    children.push(
+      createElement(MSC, {
+        key: "model-selector",
+        models,
+        selectedModel,
+        onSelect: onModelSelect ?? (() => {
+        })
+      })
+    );
+  }
+  if (children.length === 0) return null;
+  return createElement("div", { "data-chat-header": "" }, ...children);
+}
+function UsageBadge({ usage, className }) {
+  if (!usage) return null;
+  return createElement(
+    "span",
+    { "data-usage-badge": "true", className },
+    createElement("span", { "data-usage-tokens": "prompt" }, `\u2191${usage.promptTokens}`),
+    createElement("span", { "data-usage-tokens": "completion" }, `\u2193${usage.completionTokens}`),
+    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 = createElement(
+    "div",
+    { "data-chat-input-controls": "" },
+    createElement(PMSC, {
+      providers,
+      models,
+      activeProviderId,
+      selectedModel,
+      onSelectProvider,
+      onSelectModel,
+      onSettingsClick
+    }),
+    usage ? createElement(UsageBadge, { usage }) : null
+  );
+  return createElement(
+    "div",
+    { "data-chat-input-area": "" },
+    createElement(
+      "div",
+      { "data-chat-input-container": "" },
+      selectorRow,
+      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] = useState(false);
+  const contentRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const handleClose = useCallback(() => {
+    setIsClosing(true);
+    setTimeout(() => {
+      setIsClosing(false);
+      onClose();
+    }, CLOSE_ANIMATION_MS);
+  }, [onClose]);
+  const handleKeyDown = 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 = useCallback((e) => {
+    if (e.target === e.currentTarget) handleClose();
+  }, [handleClose]);
+  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 createElement(
+    "div",
+    {
+      "data-provider-settings-overlay": "true",
+      "data-closing": isClosing ? "true" : void 0,
+      onClick: handleBackdropClick,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Provider settings"
+    },
+    createElement(
+      "div",
+      {
+        ref: contentRef,
+        "data-provider-settings-content": "true",
+        "data-closing": isClosing ? "true" : void 0
+      },
+      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] = useState(false);
+  const [activeProviderId, setActiveProviderId] = useState(void 0);
+  const [selectedModelId, setSelectedModelId] = useState(void 0);
+  const [searchQuery, setSearchQuery] = useState("");
+  const hasProviders = providers.length > 0;
+  useEffect(() => {
+    if (providers.length > 0 && !activeProviderId) {
+      setActiveProviderId(providers[0].id);
+      selectProvider(providers[0].id);
+    }
+  }, [providers, activeProviderId, selectProvider]);
+  const showBackendSelectorResolved = showBackendSelectorProp ?? false;
+  const handleSelect = useCallback(async (id) => {
+    try {
+      await runtime.switchSession(id);
+    } catch {
+    }
+  }, [runtime]);
+  const handleCreate = useCallback(async () => {
+    try {
+      await newSession();
+    } catch {
+    }
+  }, [newSession]);
+  const handleDelete = useCallback(async (id) => {
+    try {
+      await runtime.deleteSession(id);
+    } catch {
+    }
+  }, [runtime]);
+  const handleModelSelect = useCallback((modelId) => {
+    setSelectedModelId(modelId);
+  }, []);
+  const handleBackendSelect = useCallback((_name) => {
+    refreshModels();
+  }, [refreshModels]);
+  const handleProviderSelect = 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] = useState(null);
+  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 = createElement(
+    "div",
+    { "data-chat-main": "" },
+    createElement(ChatHeader, {
+      showBackendSelector: showBackendSelectorResolved,
+      showModelSelector,
+      hasProviders,
+      backends,
+      models,
+      selectedModel: selectedModelId,
+      onBackendSelect: handleBackendSelect,
+      onModelSelect: handleModelSelect,
+      BackendSelectorComponent: slots?.backendSelector,
+      ModelSelectorComponent: slots?.modelSelector
+    }),
+    contextStats ? createElement(ContextStatsComponent, { stats: contextStats }) : null,
+    error ? createElement(
+      "div",
+      { "data-chat-error": "" },
+      createElement("span", { "data-chat-error-text": "" }, error.message),
+      createElement(
+        "div",
+        { "data-chat-error-actions": "" },
+        createElement("button", {
+          "data-action": "retry",
+          type: "button",
+          onClick: retryLastMessage
+        }, "Retry"),
+        createElement("button", {
+          "data-action": "dismiss-error",
+          type: "button",
+          onClick: clearError
+        }, "\u2715")
+      ),
+      error.stack ? createElement(
+        "details",
+        { "data-chat-error-details": "" },
+        createElement("summary", null, "Details"),
+        createElement("pre", null, error.stack)
+      ) : null
+    ) : null,
+    showEmptyState ? createElement(
+      "div",
+      { "data-chat-empty-state": "" },
+      createElement("div", { "data-chat-empty-title": "" }, "Connect a provider to start chatting"),
+      createElement("button", {
+        "data-action": "open-settings",
+        onClick: () => setSettingsOpen(true)
+      }, "+ Connect Provider")
+    ) : createElement(ThreadComponent, { messages, isGenerating, autoScroll: true }),
+    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 ? createElement(ThreadProvider, {
+    renderToolCall: slots.renderToolCall,
+    renderMessage: slots.renderMessage,
+    renderThinkingBlock: slots.renderThinkingBlock,
+    children: mainContent
+  }) : mainContent;
+  const sidebar = showSidebar ? createElement(ThreadListComponent, {
+    sessions,
+    activeSessionId: runtime.activeSessionId ?? void 0,
+    onSelect: handleSelect,
+    onCreate: handleCreate,
+    onDelete: handleDelete,
+    searchQuery,
+    onSearchChange: setSearchQuery
+  }) : void 0;
+  const settingsOverlay = 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 createElement(ChatLayout, {
+    className,
+    sidebar,
+    overlay: [slots?.authDialog ?? null, settingsOverlay],
+    children: wrappedMain
+  });
+}
+function ChatUI({ runtime, ...rest }) {
+  return createElement(ChatProvider, {
+    runtime,
+    children: createElement(ChatUIInner, rest)
+  });
+}
+function PermissionDialog({
+  requests,
+  onApprove,
+  onDeny,
+  onApproveAll,
+  onDenyAll,
+  renderArgs,
+  className
+}) {
+  if (requests.length === 0) return null;
+  const items = requests.map(
+    (req) => createElement(
+      "div",
+      {
+        key: req.toolCallId,
+        "data-permission-request": "true",
+        "data-tool-name": req.toolName
+      },
+      // Tool name
+      createElement(
+        "div",
+        { "data-permission-tool-name": "true" },
+        req.toolName
+      ),
+      // Arguments display
+      createElement(
+        "div",
+        { "data-permission-tool-args": "true" },
+        renderArgs ? renderArgs(req.toolArgs, req.toolName) : createElement("pre", null, JSON.stringify(req.toolArgs, null, 2))
+      ),
+      // Action buttons
+      createElement(
+        "div",
+        { "data-permission-actions": "true" },
+        createElement(
+          "button",
+          {
+            type: "button",
+            "data-action": "approve",
+            onClick: () => onApprove(req.toolCallId),
+            "aria-label": `Approve ${req.toolName}`
+          },
+          "Allow"
+        ),
+        createElement(
+          "button",
+          {
+            type: "button",
+            "data-action": "deny",
+            onClick: () => onDeny(req.toolCallId),
+            "aria-label": `Deny ${req.toolName}`
+          },
+          "Deny"
+        )
+      )
+    )
+  );
+  const bulkActions = requests.length > 1 && (onApproveAll || onDenyAll) ? createElement(
+    "div",
+    { "data-permission-bulk-actions": "true" },
+    onApproveAll ? createElement(
+      "button",
+      {
+        type: "button",
+        "data-action": "approve-all",
+        onClick: onApproveAll,
+        "aria-label": "Approve all tool calls"
+      },
+      "Allow All"
+    ) : null,
+    onDenyAll ? createElement(
+      "button",
+      {
+        type: "button",
+        "data-action": "deny-all",
+        onClick: onDenyAll,
+        "aria-label": "Deny all tool calls"
+      },
+      "Deny All"
+    ) : null
+  ) : null;
+  return createElement(
+    "div",
+    {
+      "data-permission-dialog": "true",
+      role: "dialog",
+      "aria-label": "Tool permission requests",
+      className
+    },
+    ...items,
+    bulkActions
+  );
+}
 
-export { AuthDialog, ChatProvider, Composer, MarkdownRenderer, Message, ModelSelector, RemoteChatRuntime, ThinkingBlock, Thread, ThreadList, ThreadProvider, ToolCallView, useAuth, useChat, useChatRuntime, useMessages, useModels, useOptionalThreadSlots, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval };
+export { BackendSelector, ChatHeader, ChatInputArea, ChatLayout, ChatProvider, ChatSettingsOverlay, ChatUI, ClaudeAuthForm, Composer, ContextStatsDisplay, CopilotAuthForm, MarkdownRenderer, Message, ModelSelector, PermissionDialog, ProviderModelSelector, ProviderSelector, ProviderSettings, RemoteChatClient, ThinkingBlock, Thread, ThreadList, ThreadProvider, ToolCallView, UsageBadge, VercelAIAuthForm, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval, useVirtualMessages };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map