@lantos1618/better-ui 0.3.1 → 0.4.0

package/dist/components/index.js

@@ -0,0 +1,1977 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  Chat: () => Chat,
+  ChatPanel: () => ChatPanel,
+  ChatProvider: () => ChatProvider,
+  CodeBlockView: () => CodeBlockView,
+  Composer: () => Composer,
+  DataTableView: () => DataTableView,
+  FileUploadView: () => FileUploadView,
+  FormView: () => FormView,
+  Markdown: () => Markdown,
+  MediaDisplayView: () => MediaDisplayView,
+  Message: () => Message,
+  Panel: () => Panel,
+  ProgressView: () => ProgressView,
+  QuestionView: () => QuestionView,
+  ThemeProvider: () => ThemeProvider,
+  Thread: () => Thread,
+  ToastProvider: () => ToastProvider,
+  ToolResult: () => ToolResult,
+  createToolStateStore: () => createToolStateStore,
+  useChatContext: () => useChatContext,
+  useChatToolOutput: () => useChatToolOutput,
+  useToast: () => useToast,
+  useToolEffect: () => useToolEffect,
+  useToolOutput: () => useToolOutput,
+  useToolState: () => useToolState
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/components/ChatProvider.tsx
+var import_react2 = require("react");
+var import_react3 = require("@ai-sdk/react");
+var import_ai = require("ai");
+
+// src/components/useToolStateStore.ts
+var import_react = require("react");
+function createToolStateStore() {
+  let state = /* @__PURE__ */ new Map();
+  const keyListeners = /* @__PURE__ */ new Map();
+  const globalListeners = /* @__PURE__ */ new Set();
+  let seqCounter = 0;
+  function notifyKey(toolCallId) {
+    const listeners = keyListeners.get(toolCallId);
+    if (listeners) {
+      for (const l of listeners) l();
+    }
+    for (const l of globalListeners) l();
+  }
+  return {
+    get(toolCallId) {
+      return state.get(toolCallId);
+    },
+    set(toolCallId, entry) {
+      state = new Map(state);
+      const existing = state.get(toolCallId);
+      const seqNo = existing?.seqNo ?? ++seqCounter;
+      state.set(toolCallId, { ...entry, seqNo });
+      notifyKey(toolCallId);
+    },
+    clear() {
+      state = /* @__PURE__ */ new Map();
+      seqCounter = 0;
+      for (const l of globalListeners) l();
+    },
+    subscribe(toolCallId, listener) {
+      let listeners = keyListeners.get(toolCallId);
+      if (!listeners) {
+        listeners = /* @__PURE__ */ new Set();
+        keyListeners.set(toolCallId, listeners);
+      }
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+          keyListeners.delete(toolCallId);
+        }
+      };
+    },
+    subscribeAll(listener) {
+      globalListeners.add(listener);
+      return () => {
+        globalListeners.delete(listener);
+      };
+    },
+    getSnapshot() {
+      return state;
+    },
+    findAnchor(entityId) {
+      let oldest;
+      for (const [toolCallId, entry] of state) {
+        if (entry.entityId === entityId) {
+          if (!oldest || (entry.seqNo ?? 0) < (oldest.entry.seqNo ?? 0)) {
+            oldest = { toolCallId, entry };
+          }
+        }
+      }
+      return oldest;
+    },
+    getLatestPerEntity() {
+      const result = /* @__PURE__ */ new Map();
+      const entityLatest = /* @__PURE__ */ new Map();
+      for (const [toolCallId, entry] of state) {
+        if (entry.entityId) {
+          const current = entityLatest.get(entry.entityId);
+          if (!current || (entry.seqNo ?? 0) > (current.entry.seqNo ?? 0)) {
+            entityLatest.set(entry.entityId, { toolCallId, entry });
+          }
+        } else {
+          result.set(toolCallId, entry);
+        }
+      }
+      for (const [, { toolCallId, entry }] of entityLatest) {
+        result.set(toolCallId, entry);
+      }
+      return result;
+    }
+  };
+}
+function useToolState(store, toolCallId) {
+  const subscribe = (0, import_react.useCallback)(
+    (listener) => store.subscribe(toolCallId, listener),
+    [store, toolCallId]
+  );
+  const getSnapshot = (0, import_react.useCallback)(
+    () => store.get(toolCallId),
+    [store, toolCallId]
+  );
+  return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+
+// src/components/ChatProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ChatContext = (0, import_react2.createContext)(null);
+function useChatContext() {
+  const ctx = (0, import_react2.useContext)(ChatContext);
+  if (!ctx) {
+    throw new Error("useChatContext must be used within a <ChatProvider>");
+  }
+  return ctx;
+}
+function ChatProvider({ endpoint = "/api/chat", tools, toolStateStore: externalStore, persistence, threadId, children }) {
+  const transportRef = (0, import_react2.useRef)(new import_ai.DefaultChatTransport({ api: endpoint }));
+  const { messages, setMessages, sendMessage, status, addToolOutput } = (0, import_react3.useChat)({
+    transport: transportRef.current
+  });
+  const isLoading = status === "streaming" || status === "submitted";
+  const [threads, setThreads] = (0, import_react2.useState)([]);
+  const [activeThreadId, setActiveThreadId] = (0, import_react2.useState)(threadId);
+  (0, import_react2.useEffect)(() => {
+    if (persistence) {
+      persistence.listThreads().then(setThreads).catch((err) => console.warn("[better-ui] persistence error:", err));
+    }
+  }, [persistence]);
+  (0, import_react2.useEffect)(() => {
+    if (persistence && activeThreadId) {
+      persistence.getMessages(activeThreadId).then((msgs) => {
+        setMessages(msgs);
+      }).catch((err) => console.warn("[better-ui] persistence error:", err));
+    }
+  }, [persistence, activeThreadId, setMessages]);
+  const prevStatusRef = (0, import_react2.useRef)(status);
+  (0, import_react2.useEffect)(() => {
+    const wasStreaming = prevStatusRef.current === "streaming" || prevStatusRef.current === "submitted";
+    const isNowReady = status === "ready";
+    prevStatusRef.current = status;
+    if (persistence && activeThreadId && wasStreaming && isNowReady && messages.length > 0) {
+      persistence.saveMessages(activeThreadId, messages).catch((err) => console.warn("[better-ui] persistence error:", err));
+    }
+  }, [status, persistence, activeThreadId, messages]);
+  const internalStoreRef = (0, import_react2.useRef)(createToolStateStore());
+  const toolStateStore = externalStore || internalStoreRef.current;
+  const createThreadFn = (0, import_react2.useCallback)(async (title) => {
+    if (!persistence) throw new Error("Persistence not configured");
+    const thread = await persistence.createThread(title);
+    setThreads((prev) => [thread, ...prev]);
+    setActiveThreadId(thread.id);
+    setMessages([]);
+    toolStateStore.clear();
+    return thread;
+  }, [persistence, setMessages, toolStateStore]);
+  const switchThreadFn = (0, import_react2.useCallback)(async (id) => {
+    if (!persistence) throw new Error("Persistence not configured");
+    setActiveThreadId(id);
+    setMessages([]);
+    toolStateStore.clear();
+  }, [persistence, setMessages, toolStateStore]);
+  const deleteThreadFn = (0, import_react2.useCallback)(async (id) => {
+    if (!persistence) throw new Error("Persistence not configured");
+    await persistence.deleteThread(id);
+    setThreads((prev) => prev.filter((t) => t.id !== id));
+    if (activeThreadId === id) {
+      setActiveThreadId(void 0);
+      setMessages([]);
+    }
+  }, [persistence, activeThreadId, setMessages]);
+  const versionRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const dirtyToolCallIdsRef = (0, import_react2.useRef)(/* @__PURE__ */ new Set());
+  const collectDirtyState = (0, import_react2.useCallback)(() => {
+    const dirty = dirtyToolCallIdsRef.current;
+    if (dirty.size === 0) return null;
+    const stateContext = {};
+    for (const id of dirty) {
+      const entry = toolStateStore.get(id);
+      if (entry?.output && entry.toolName) {
+        stateContext[entry.toolName] = entry.output;
+      }
+    }
+    dirty.clear();
+    return Object.keys(stateContext).length > 0 ? stateContext : null;
+  }, [toolStateStore]);
+  const executeToolDirect = (0, import_react2.useCallback)(async (toolName, toolInput, toolCallId) => {
+    const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
+    versionRef.current.set(toolCallId, currentVersion);
+    const existing = toolStateStore.get(toolCallId);
+    toolStateStore.set(toolCallId, {
+      output: existing?.output ?? null,
+      loading: true,
+      error: null,
+      version: currentVersion,
+      toolName
+    });
+    try {
+      const response = await fetch("/api/tools/execute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ tool: toolName, input: toolInput })
+      });
+      if (!response.ok) {
+        const errBody = await response.json().catch(() => ({}));
+        throw new Error(errBody.error || `Tool execution failed (${response.status})`);
+      }
+      const { result } = await response.json();
+      if (versionRef.current.get(toolCallId) === currentVersion) {
+        toolStateStore.set(toolCallId, {
+          output: result,
+          loading: false,
+          error: null,
+          version: currentVersion,
+          toolName
+        });
+        dirtyToolCallIdsRef.current.add(toolCallId);
+        const toolDef = tools[toolName];
+        if (toolDef?.autoRespond) {
+          dirtyToolCallIdsRef.current.delete(toolCallId);
+          const otherState = collectDirtyState();
+          const stateContext = { ...otherState, [toolName]: result };
+          const envelope = JSON.stringify({ text: "", stateContext, _meta: { hidden: true } });
+          sendMessage({ text: envelope });
+        }
+      }
+    } catch (error) {
+      console.error("Tool execution error:", error);
+      if (versionRef.current.get(toolCallId) === currentVersion) {
+        toolStateStore.set(toolCallId, {
+          output: existing?.output ?? null,
+          loading: false,
+          error: error instanceof Error ? error.message : "Tool execution failed",
+          version: currentVersion,
+          toolName
+        });
+      }
+    }
+  }, [toolStateStore, tools, sendMessage, collectDirtyState]);
+  const confirmTool = (0, import_react2.useCallback)(async (toolCallId, toolName, toolInput) => {
+    const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
+    versionRef.current.set(toolCallId, currentVersion);
+    toolStateStore.set(toolCallId, {
+      output: null,
+      loading: true,
+      error: null,
+      version: currentVersion,
+      toolName,
+      status: "confirmed"
+    });
+    try {
+      const response = await fetch("/api/tools/confirm", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ tool: toolName, input: toolInput })
+      });
+      if (!response.ok) {
+        const errBody = await response.json().catch(() => ({}));
+        throw new Error(errBody.error || `Tool execution failed (${response.status})`);
+      }
+      const { result } = await response.json();
+      if (versionRef.current.get(toolCallId) === currentVersion) {
+        toolStateStore.set(toolCallId, {
+          output: result,
+          loading: false,
+          error: null,
+          version: currentVersion,
+          toolName,
+          status: "confirmed"
+        });
+      }
+      await addToolOutput({
+        state: "output-available",
+        tool: toolName,
+        toolCallId,
+        output: result
+      });
+    } catch (error) {
+      console.error("HITL tool execution error:", error);
+      if (versionRef.current.get(toolCallId) === currentVersion) {
+        toolStateStore.set(toolCallId, {
+          output: null,
+          loading: false,
+          error: error instanceof Error ? error.message : "Tool execution failed",
+          version: currentVersion,
+          toolName,
+          status: "confirmed"
+        });
+      }
+    }
+  }, [toolStateStore, addToolOutput]);
+  const rejectTool = (0, import_react2.useCallback)(async (toolCallId, toolName) => {
+    const currentVersion = (versionRef.current.get(toolCallId) || 0) + 1;
+    versionRef.current.set(toolCallId, currentVersion);
+    toolStateStore.set(toolCallId, {
+      output: null,
+      loading: false,
+      error: null,
+      version: currentVersion,
+      toolName,
+      status: "rejected"
+    });
+    await addToolOutput({
+      state: "output-error",
+      tool: toolName,
+      toolCallId,
+      errorText: "User rejected this action"
+    });
+  }, [toolStateStore, addToolOutput]);
+  const retryTool = (0, import_react2.useCallback)((toolCallId, toolName, toolInput) => {
+    executeToolDirect(toolName, toolInput ?? {}, toolCallId);
+  }, [executeToolDirect]);
+  const callbackCacheRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const getOnAction = (0, import_react2.useCallback)((toolCallId, toolName) => {
+    const key = `${toolName}:${toolCallId}`;
+    let cb = callbackCacheRef.current.get(key);
+    if (!cb) {
+      cb = (input) => {
+        executeToolDirect(toolName, input, toolCallId);
+      };
+      callbackCacheRef.current.set(key, cb);
+    }
+    return cb;
+  }, [executeToolDirect]);
+  const handleSendMessage = (0, import_react2.useCallback)((text) => {
+    if (!text.trim()) return;
+    const stateContext = collectDirtyState();
+    if (stateContext) {
+      const envelope = JSON.stringify({ text, stateContext, _meta: { hidden: false } });
+      sendMessage({ text: envelope });
+    } else {
+      sendMessage({ text });
+    }
+  }, [sendMessage, collectDirtyState]);
+  const value = {
+    messages,
+    sendMessage: handleSendMessage,
+    isLoading,
+    status,
+    tools,
+    executeToolDirect,
+    getOnAction,
+    toolStateStore,
+    confirmTool,
+    rejectTool,
+    retryTool,
+    ...persistence ? {
+      threads,
+      threadId: activeThreadId,
+      createThread: createThreadFn,
+      switchThread: switchThreadFn,
+      deleteThread: deleteThreadFn
+    } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChatContext.Provider, { value, children });
+}
+
+// src/components/Thread.tsx
+var import_react6 = require("react");
+
+// src/components/Message.tsx
+var import_ai2 = require("ai");
+
+// src/components/ToolResult.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function useIsFollowup(toolStateStore, toolCallId) {
+  const subscribe = (0, import_react4.useCallback)(
+    (listener) => toolStateStore.subscribeAll(listener),
+    [toolStateStore]
+  );
+  const getSnapshot = (0, import_react4.useCallback)(() => {
+    const myEntry = toolStateStore.get(toolCallId);
+    if (!myEntry?.entityId) return false;
+    const anchor = toolStateStore.findAnchor(myEntry.entityId);
+    return !!anchor && anchor.toolCallId !== toolCallId;
+  }, [toolStateStore, toolCallId]);
+  return (0, import_react4.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+}
+function ToolResult({
+  toolName,
+  toolCallId,
+  output,
+  toolInput,
+  hasResult,
+  toolPartState,
+  toolStateStore,
+  tools,
+  getOnAction,
+  onConfirm,
+  onReject,
+  onRetry,
+  className
+}) {
+  const storeState = useToolState(toolStateStore, toolCallId);
+  const toolDef = tools[toolName];
+  (0, import_react4.useEffect)(() => {
+    const existing = toolStateStore.get(toolCallId);
+    const entityId = toolDef?.getGroupKey?.(toolInput);
+    const anchor = entityId ? toolStateStore.findAnchor(entityId) : void 0;
+    const isFollowup2 = anchor && anchor.toolCallId !== toolCallId;
+    if (!existing) {
+      if (isFollowup2) {
+        if (hasResult && output != null) {
+          toolStateStore.set(anchor.toolCallId, {
+            ...anchor.entry,
+            output,
+            loading: false
+          });
+        }
+        toolStateStore.set(toolCallId, {
+          output: null,
+          loading: false,
+          error: null,
+          version: 1,
+          toolName,
+          entityId,
+          toolInput
+        });
+      } else {
+        toolStateStore.set(toolCallId, {
+          output: hasResult ? output : null,
+          loading: !hasResult,
+          error: null,
+          version: 1,
+          toolName,
+          entityId,
+          toolInput
+        });
+      }
+    } else if (isFollowup2) {
+      if (hasResult && output != null && existing.output == null) {
+        toolStateStore.set(anchor.toolCallId, {
+          ...toolStateStore.get(anchor.toolCallId),
+          output,
+          loading: false
+        });
+        toolStateStore.set(toolCallId, {
+          ...existing,
+          output: null,
+          loading: false
+        });
+      }
+    } else if (hasResult && output != null && !existing.output && existing.loading) {
+      toolStateStore.set(toolCallId, {
+        ...existing,
+        output,
+        loading: false,
+        entityId: existing.entityId ?? entityId,
+        toolInput: existing.toolInput ?? toolInput
+      });
+    } else if (!existing.entityId && entityId) {
+      toolStateStore.set(toolCallId, {
+        ...existing,
+        entityId,
+        toolInput: existing.toolInput ?? toolInput
+      });
+    }
+  }, [hasResult, output, toolCallId, toolName, toolInput, toolStateStore, toolDef]);
+  const isFollowup = useIsFollowup(toolStateStore, toolCallId);
+  const isHITL = toolDef?.requiresConfirmation ?? false;
+  const needsUserConfirm = isHITL && toolDef.shouldConfirm(toolInput);
+  const hasOutput = hasResult || !!storeState?.output;
+  const isRejected = storeState?.status === "rejected";
+  const isConfirming = storeState?.loading && storeState?.status === "confirmed";
+  const argsComplete = toolPartState === "input-available" || toolPartState === "output-available";
+  const autoApprovedRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
+    if (isHITL && argsComplete && !needsUserConfirm && !hasOutput && !autoApprovedRef.current && toolInput != null) {
+      autoApprovedRef.current = true;
+      onConfirm?.(toolCallId, toolName, toolInput ?? {});
+    }
+  }, [isHITL, argsComplete, needsUserConfirm, hasOutput, toolInput, toolCallId, toolName, onConfirm]);
+  if (!toolDef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `text-sm text-[var(--bui-fg-muted,#71717a)] px-4 py-2 bg-[var(--bui-bg-elevated,#27272a)]/50 rounded-lg ${className || ""}`, children: [
+      "Unknown tool: ",
+      toolName
+    ] });
+  }
+  if (isFollowup) {
+    return null;
+  }
+  if (argsComplete && needsUserConfirm && !hasOutput && !isRejected && !isConfirming) {
+    const inputObj = toolInput && typeof toolInput === "object" ? toolInput : null;
+    const simpleEntries = inputObj ? Object.entries(inputObj).filter(([, v]) => typeof v !== "object" || v === null) : [];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-warning-border,rgba(180,83,9,0.5))] rounded-xl overflow-hidden ${className || ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-[var(--bui-warning-border,rgba(180,83,9,0.5))]/50", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-2 h-2 bg-[var(--bui-warning-fg,#f59e0b)] rounded-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: [
+          toolName,
+          " requires confirmation"
+        ] })
+      ] }),
+      simpleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-4 py-3 space-y-1", children: simpleEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs", children: [
+          key,
+          ": "
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: String(value) })
+      ] }, key)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex gap-2 px-4 py-3 border-t border-[var(--bui-border,#27272a)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => onConfirm?.(toolCallId, toolName, toolInput ?? {}),
+            className: "px-4 py-2 bg-[var(--bui-success,#059669)] text-white text-sm rounded-lg hover:bg-[var(--bui-success,#059669)] transition-colors",
+            children: "Approve"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            onClick: () => onReject?.(toolCallId, toolName),
+            className: "px-4 py-2 bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)] text-sm rounded-lg hover:bg-[var(--bui-bg-hover,#3f3f46)] transition-colors",
+            children: "Reject"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (isHITL && isRejected) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4 ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs font-medium text-[var(--bui-error-fg,#f87171)] bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] px-2 py-0.5 rounded", children: "Rejected" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: toolName })
+    ] }) });
+  }
+  const resolvedOutput = storeState?.output ?? output;
+  const resolvedLoading = storeState?.loading ?? !hasResult;
+  if (storeState?.error && !resolvedOutput && !resolvedLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] border border-[var(--bui-error-border,rgba(153,27,27,0.5))] rounded-xl p-4 ${className || ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)] shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-[var(--bui-error-fg,#f87171)] text-sm font-medium", children: [
+          toolName,
+          " failed"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[var(--bui-error-fg,#f87171)]/70 text-xs mb-3", children: storeState.error }),
+      onRetry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          onClick: () => onRetry(toolCallId, toolName, storeState.toolInput ?? toolInput),
+          className: "px-3 py-1.5 bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)] text-xs rounded-lg border border-[var(--bui-error-border,rgba(153,27,27,0.5))] hover:bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] transition-colors",
+          children: "Retry"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: className || "", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    toolDef.View,
+    {
+      data: resolvedOutput,
+      loading: resolvedLoading,
+      onAction: getOnAction(toolCallId, toolName),
+      error: storeState?.error ? new Error(storeState.error) : null
+    }
+  ) });
+}
+
+// src/components/Markdown.tsx
+var import_react5 = __toESM(require("react"));
+var import_react_markdown = __toESM(require("react-markdown"));
+var import_remark_gfm = __toESM(require("remark-gfm"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ShikiCode({ code, language }) {
+  const [html, setHtml] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    import("shiki").then(({ codeToHtml }) => {
+      codeToHtml(code, { lang: language, theme: "github-dark" }).then(setHtml).catch(() => setHtml(null));
+    });
+  }, [code, language]);
+  if (html) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { dangerouslySetInnerHTML: { __html: html } });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "text-[var(--bui-fg,#f4f4f5)]", children: code });
+}
+function CopyButton({ text }) {
+  const [copied, setCopied] = (0, import_react5.useState)(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "absolute top-2 right-2 px-2 py-1 text-xs text-[var(--bui-fg-secondary,#a1a1aa)] hover:text-[var(--bui-fg,#f4f4f5)] bg-[var(--bui-bg-hover,#3f3f46)] hover:bg-[var(--bui-bg-hover,#3f3f46)] rounded transition-colors",
+      children: copied ? "Copied!" : "Copy"
+    }
+  );
+}
+var components = {
+  pre({ children, ...props }) {
+    let codeText = "";
+    import_react5.default.Children.forEach(children, (child) => {
+      if (import_react5.default.isValidElement(child) && child.props) {
+        const childProps = child.props;
+        if (typeof childProps.children === "string") {
+          codeText = childProps.children;
+        }
+      }
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative group my-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CopyButton, { text: codeText }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pre", { className: "bg-[var(--bui-bg-surface,#18181b)] border border-[var(--bui-border-strong,#3f3f46)] rounded-lg p-4 overflow-x-auto text-sm", ...props, children })
+    ] });
+  },
+  code({ className, children, ...props }) {
+    const isBlock = className?.startsWith("language-");
+    if (isBlock) {
+      const language = className.replace("language-", "");
+      const codeText = typeof children === "string" ? children : String(children).replace(/\n$/, "");
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ShikiCode, { code: codeText, language });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { className: "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg,#f4f4f5)] px-1.5 py-0.5 rounded text-sm", ...props, children });
+  },
+  h1({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { className: "text-xl font-bold text-[var(--bui-fg,#f4f4f5)] mt-4 mb-2", ...props, children });
+  },
+  h2({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-lg font-semibold text-[var(--bui-fg,#f4f4f5)] mt-3 mb-2", ...props, children });
+  },
+  h3({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { className: "text-base font-semibold text-[var(--bui-fg,#f4f4f5)] mt-3 mb-1", ...props, children });
+  },
+  p({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mb-2 last:mb-0", ...props, children });
+  },
+  ul({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "list-disc list-inside mb-2 space-y-1", ...props, children });
+  },
+  ol({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ol", { className: "list-decimal list-inside mb-2 space-y-1", ...props, children });
+  },
+  li({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]", ...props, children });
+  },
+  blockquote({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("blockquote", { className: "border-l-2 border-[var(--bui-border-strong,#3f3f46)] pl-3 my-2 text-[var(--bui-fg-secondary,#a1a1aa)] italic", ...props, children });
+  },
+  table({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-x-auto my-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("table", { className: "min-w-full border border-[var(--bui-border-strong,#3f3f46)] text-sm", ...props, children }) });
+  },
+  thead({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { className: "bg-[var(--bui-bg-elevated,#27272a)]", ...props, children });
+  },
+  th({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "px-3 py-2 text-left text-[var(--bui-fg-secondary,#a1a1aa)] font-medium border-b border-[var(--bui-border-strong,#3f3f46)]", ...props, children });
+  },
+  td({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "px-3 py-2 text-[var(--bui-fg-secondary,#a1a1aa)] border-b border-[var(--bui-border,#27272a)]", ...props, children });
+  },
+  a({ children, href, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("a", { href, className: "text-[var(--bui-primary-hover,#3b82f6)] hover:text-[var(--bui-primary-hover,#3b82f6)] underline", target: "_blank", rel: "noopener noreferrer", ...props, children });
+  },
+  hr(props) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("hr", { className: "border-[var(--bui-border-strong,#3f3f46)] my-4", ...props });
+  },
+  del({ children, ...props }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("del", { className: "text-[var(--bui-fg-muted,#71717a)]", ...props, children });
+  }
+};
+function Markdown({ content, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `prose-invert max-w-none ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components, children: content }) });
+}
+
+// src/components/Message.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Message({ message, tools, toolStateStore, getOnAction, onConfirm, onReject, onRetry, className }) {
+  const rawTextContent = message.parts.filter(import_ai2.isTextUIPart).map((part) => part.text).join("");
+  const isUser = message.role === "user";
+  let textContent = rawTextContent;
+  let isHidden = false;
+  if (isUser && textContent) {
+    try {
+      const envelope = JSON.parse(textContent);
+      if (envelope && typeof envelope === "object" && "_meta" in envelope) {
+        textContent = envelope.text || "";
+        isHidden = !!envelope._meta?.hidden;
+      }
+    } catch {
+    }
+  }
+  const toolParts = [];
+  for (const part of message.parts) {
+    if ((0, import_ai2.isToolOrDynamicToolUIPart)(part)) {
+      const toolName = (0, import_ai2.getToolOrDynamicToolName)(part);
+      toolParts.push({
+        toolName,
+        toolCallId: part.toolCallId,
+        state: part.state,
+        output: part.state === "output-available" ? part.output : null,
+        input: "input" in part ? part.input : void 0
+      });
+    }
+  }
+  if (isHidden && !textContent && toolParts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `space-y-3 ${className || ""}`, children: [
+    textContent && !isHidden && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        className: `max-w-[85%] px-4 py-2.5 rounded-2xl text-sm ${message.role === "user" ? "bg-[var(--bui-user-bg,#f4f4f5)] text-[var(--bui-user-fg,#18181b)]" : "bg-[var(--bui-bg-elevated,#27272a)] text-[var(--bui-fg,#f4f4f5)]"}`,
+        children: message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Markdown, { content: textContent }) : textContent
+      }
+    ) }),
+    toolParts.map((toolPart) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ToolResult,
+      {
+        toolName: toolPart.toolName,
+        toolCallId: toolPart.toolCallId,
+        output: toolPart.output,
+        toolInput: toolPart.input,
+        hasResult: toolPart.state === "output-available",
+        toolPartState: toolPart.state,
+        toolStateStore,
+        tools,
+        getOnAction,
+        onConfirm,
+        onReject,
+        onRetry
+      },
+      toolPart.toolCallId
+    ))
+  ] });
+}
+
+// src/components/Thread.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Thread({ className, emptyMessage, suggestions }) {
+  const { messages, isLoading, sendMessage, tools, toolStateStore, getOnAction, confirmTool, rejectTool, retryTool } = useChatContext();
+  const scrollRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: scrollRef, className: `${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-6 space-y-6", children: [
+    messages.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-center py-16", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "text-[var(--bui-fg-faint,#52525b)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] mb-4", children: emptyMessage || "Send a message to get started" }),
+      suggestions && suggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-wrap justify-center gap-2 mt-4", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          onClick: () => sendMessage(suggestion),
+          className: "px-3 py-1.5 text-xs text-[var(--bui-fg-secondary,#a1a1aa)] bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-full hover:bg-[var(--bui-bg-hover,#3f3f46)] hover:text-[var(--bui-fg,#f4f4f5)] transition-colors",
+          children: suggestion
+        },
+        suggestion
+      )) })
+    ] }) }),
+    messages.map((message, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      Message,
+      {
+        message,
+        tools,
+        toolStateStore,
+        getOnAction,
+        onConfirm: confirmTool,
+        onReject: rejectTool,
+        onRetry: retryTool
+      },
+      `${message.id}-${i}`
+    )),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-[var(--bui-fg-muted,#71717a)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-1.5 h-1.5 bg-[var(--bui-fg-muted,#71717a)] rounded-full animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Thinking" })
+    ] })
+  ] }) });
+}
+
+// src/components/Composer.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Composer({ className, placeholder = "Ask something..." }) {
+  const { sendMessage, isLoading } = useChatContext();
+  const [input, setInput] = (0, import_react7.useState)("");
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+    sendMessage(input);
+    setInput("");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("form", { onSubmit: handleSubmit, className: `relative ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        type: "text",
+        value: input,
+        onChange: (e) => setInput(e.target.value),
+        placeholder,
+        className: "w-full bg-[var(--bui-bg-surface,#18181b)] border border-[var(--bui-border,#27272a)] rounded-xl px-4 py-3 pr-12 text-sm text-[var(--bui-fg,#f4f4f5)] placeholder-[var(--bui-fg-faint,#52525b)] focus:outline-none focus:border-[var(--bui-border-strong,#3f3f46)] transition-colors",
+        disabled: isLoading
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading || !input.trim(),
+        className: "absolute right-2 top-1/2 -translate-y-1/2 p-2 text-[var(--bui-fg-secondary,#a1a1aa)] hover:text-[var(--bui-fg,#f4f4f5)] disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14.5 1.5L7 9M14.5 1.5L10 14.5L7 9M14.5 1.5L1.5 6L7 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      }
+    )
+  ] });
+}
+
+// src/components/Chat.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Chat({
+  endpoint = "/api/chat",
+  tools,
+  className,
+  placeholder,
+  emptyMessage,
+  suggestions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatProvider, { endpoint, tools, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `bg-[var(--bui-bg-surface,#18181b)] rounded-xl border border-[var(--bui-border,#27272a)] flex flex-col ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Thread,
+      {
+        className: "flex-1 overflow-y-auto",
+        emptyMessage,
+        suggestions
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-4 pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Composer, { placeholder }) })
+  ] }) });
+}
+
+// src/components/Panel.tsx
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Panel({ toolStateStore, tools, getOnAction, className, tool: filterTool, excludeTools, maxItems = 5 }) {
+  const subscribe = (0, import_react8.useCallback)(
+    (listener) => toolStateStore.subscribeAll(listener),
+    [toolStateStore]
+  );
+  const getSnapshot = (0, import_react8.useCallback)(
+    () => toolStateStore.getSnapshot(),
+    [toolStateStore]
+  );
+  const snapshot = (0, import_react8.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  const entityLatest = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const [toolCallId, entry] of snapshot) {
+    if (filterTool && entry.toolName !== filterTool) continue;
+    if (excludeTools && entry.toolName && excludeTools.includes(entry.toolName)) continue;
+    if (entry.output == null && !entry.loading) continue;
+    if (entry.entityId) {
+      const current = entityLatest.get(entry.entityId);
+      if (!current || (entry.seqNo ?? 0) > (current.entry.seqNo ?? 0)) {
+        entityLatest.set(entry.entityId, { toolCallId, entry });
+      }
+    } else {
+      ungrouped.push({ toolCallId, entry });
+    }
+  }
+  const items = [...entityLatest.values(), ...ungrouped].sort((a, b) => (b.entry.seqNo ?? 0) - (a.entry.seqNo ?? 0)).slice(0, maxItems);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `bg-[var(--bui-bg-surface,#18181b)] border border-[var(--bui-border,#27272a)] flex flex-col ${className || ""}`, children: items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 overflow-y-auto", children: items.map(({ toolCallId, entry }) => {
+    const toolName = entry.toolName;
+    const toolDef = toolName ? tools[toolName] : void 0;
+    if (!toolDef) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "border-b border-[var(--bui-border,#27272a)] last:border-b-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--bui-border,#27272a)]/50 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-[var(--bui-success,#059669)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-[var(--bui-fg-secondary,#a1a1aa)] uppercase tracking-wider", children: toolName })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        toolDef.View,
+        {
+          data: entry.output,
+          loading: entry.loading,
+          onAction: getOnAction(toolCallId, toolName),
+          error: entry.error ? new Error(entry.error) : null
+        }
+      ) })
+    ] }, toolCallId);
+  }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 flex flex-col items-center justify-center gap-4 p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: "absolute inset-0 overflow-hidden rounded-xl pointer-events-none opacity-[0.03]",
+        style: {
+          backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
+          backgroundSize: "24px 24px"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex flex-col items-center gap-3 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)]/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "w-5 h-5 text-[var(--bui-fg-faint,#52525b)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-sm font-medium", children: "Canvas" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: "Tool results will render here as you chat" })
+      ] })
+    ] })
+  ] }) });
+}
+function ChatPanel({ className, tool, excludeTools, maxItems }) {
+  const { tools, toolStateStore, getOnAction } = useChatContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    Panel,
+    {
+      toolStateStore,
+      tools,
+      getOnAction,
+      className,
+      tool,
+      excludeTools,
+      maxItems
+    }
+  );
+}
+
+// src/components/useToolEffect.ts
+var import_react9 = require("react");
+function useToolEffect(store, toolName, callback) {
+  const callbackRef = (0, import_react9.useRef)(callback);
+  callbackRef.current = callback;
+  const firedVersionsRef = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react9.useEffect)(() => {
+    return store.subscribeAll(() => {
+      const snapshot = store.getSnapshot();
+      for (const [toolCallId, entry] of snapshot) {
+        if (entry.toolName !== toolName) continue;
+        if (entry.loading) continue;
+        if (entry.error) continue;
+        if (entry.output == null) continue;
+        const lastFired = firedVersionsRef.current.get(toolCallId) ?? 0;
+        if (entry.version > lastFired) {
+          firedVersionsRef.current.set(toolCallId, entry.version);
+          callbackRef.current(entry, toolCallId);
+        }
+      }
+    });
+  }, [store, toolName]);
+}
+
+// src/components/useToolOutput.ts
+var import_react10 = require("react");
+function findBest(store, toolName) {
+  const snapshot = store.getSnapshot();
+  let best = null;
+  for (const [toolCallId, entry] of snapshot) {
+    if (entry.toolName !== toolName) continue;
+    if (entry.output == null && !entry.loading) continue;
+    if (!best || entry.version >= best.entry.version) {
+      best = { toolCallId, entry };
+    }
+  }
+  return best;
+}
+function useToolOutput(store, toolName) {
+  const [result, setResult] = (0, import_react10.useState)(() => {
+    const best = findBest(store, toolName);
+    if (!best) return { data: null, loading: false, error: null, toolCallId: null };
+    return {
+      data: best.entry.output,
+      loading: best.entry.loading,
+      error: best.entry.error,
+      toolCallId: best.toolCallId
+    };
+  });
+  (0, import_react10.useEffect)(() => {
+    function update() {
+      const best = findBest(store, toolName);
+      setResult((prev) => {
+        if (!best) {
+          if (prev.data === null && !prev.loading && prev.error === null && prev.toolCallId === null) return prev;
+          return { data: null, loading: false, error: null, toolCallId: null };
+        }
+        const next = {
+          data: best.entry.output,
+          loading: best.entry.loading,
+          error: best.entry.error,
+          toolCallId: best.toolCallId
+        };
+        if (prev.data === next.data && prev.loading === next.loading && prev.error === next.error && prev.toolCallId === next.toolCallId) {
+          return prev;
+        }
+        return next;
+      });
+    }
+    update();
+    return store.subscribeAll(update);
+  }, [store, toolName]);
+  return result;
+}
+
+// src/components/useChatToolOutput.ts
+function useChatToolOutput(toolName) {
+  const { toolStateStore } = useChatContext();
+  return useToolOutput(toolStateStore, toolName);
+}
+
+// src/components/ThemeProvider.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function ThemeProvider({
+  theme = "dark",
+  variables,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-theme": theme, className, style: variables, children });
+}
+
+// src/components/Question.tsx
+var import_react11 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function QuestionView({
+  question,
+  options,
+  mode = "single",
+  selected,
+  onSelect,
+  allowFreeform = false,
+  loading = false,
+  className
+}) {
+  const [multiSelected, setMultiSelected] = (0, import_react11.useState)(
+    () => new Set(Array.isArray(selected) ? selected : [])
+  );
+  const [freeformValue, setFreeformValue] = (0, import_react11.useState)("");
+  const [showFreeform, setShowFreeform] = (0, import_react11.useState)(false);
+  const isSelected = (value) => {
+    if (mode === "multi") return multiSelected.has(value);
+    return selected === value;
+  };
+  const handleSingleSelect = (value) => {
+    if (loading) return;
+    onSelect?.(value);
+  };
+  const handleMultiToggle = (value) => {
+    if (loading) return;
+    setMultiSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      return next;
+    });
+  };
+  const handleMultiSubmit = () => {
+    if (loading || multiSelected.size === 0) return;
+    onSelect?.(Array.from(multiSelected));
+  };
+  const handleFreeformSubmit = () => {
+    if (loading || !freeformValue.trim()) return;
+    onSelect?.(freeformValue.trim());
+  };
+  if (selected && !loading) {
+    const display = Array.isArray(selected) ? selected.map((v) => options.find((o) => o.value === v)?.label || v).join(", ") : options.find((o) => o.value === selected)?.label || selected;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 ${className || ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-xs uppercase tracking-wider mb-2", children: "Answered" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: question }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-2 inline-flex items-center gap-1.5 px-3 py-1.5 bg-[var(--bui-success-muted,rgba(16,185,129,0.12))] border border-[var(--bui-success-border,rgba(4,120,87,0.3))] rounded-lg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-[var(--bui-success-fg,#6ee7b7)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[var(--bui-success-fg,#6ee7b7)] text-sm", children: display })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 transition-opacity ${loading ? "opacity-60" : ""} ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--bui-fg,#f4f4f5)] text-sm font-medium mb-3", children: question }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-2", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        onClick: () => mode === "single" ? handleSingleSelect(opt.value) : handleMultiToggle(opt.value),
+        disabled: loading,
+        className: `w-full text-left px-3 py-2.5 rounded-lg border transition-colors ${isSelected(opt.value) ? "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)] text-[var(--bui-fg,#f4f4f5)]" : "border-[var(--bui-border-strong,#3f3f46)] bg-[var(--bui-bg-surface,#18181b)]/50 text-[var(--bui-fg-secondary,#a1a1aa)] hover:border-[var(--bui-border-strong,#3f3f46)] hover:bg-[var(--bui-bg-surface,#18181b)]"} disabled:opacity-50 disabled:cursor-not-allowed`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `shrink-0 w-4 h-4 rounded-${mode === "multi" ? "sm" : "full"} border ${isSelected(opt.value) ? "border-[var(--bui-primary,#2563eb)] bg-[var(--bui-primary-hover,#3b82f6)]" : "border-[var(--bui-border-strong,#3f3f46)]"} flex items-center justify-center`, children: isSelected(opt.value) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { className: "w-2.5 h-2.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-sm", children: opt.label }),
+            opt.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-0.5", children: opt.description })
+          ] })
+        ] })
+      },
+      opt.value
+    )) }),
+    mode === "multi" && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "button",
+      {
+        onClick: handleMultiSubmit,
+        disabled: loading || multiSelected.size === 0,
+        className: "mt-3 px-4 py-2 bg-[var(--bui-primary,#2563eb)] text-white text-sm rounded-lg hover:bg-[var(--bui-primary-hover,#3b82f6)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        children: [
+          "Confirm (",
+          multiSelected.size,
+          " selected)"
+        ]
+      }
+    ),
+    allowFreeform && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-3 pt-3 border-t border-[var(--bui-border-strong,#3f3f46)]", children: !showFreeform ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        onClick: () => setShowFreeform(true),
+        className: "text-[var(--bui-fg-muted,#71717a)] text-xs hover:text-[var(--bui-fg-secondary,#a1a1aa)] transition-colors",
+        children: "Or type your own answer..."
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "input",
+        {
+          type: "text",
+          value: freeformValue,
+          onChange: (e) => setFreeformValue(e.target.value),
+          onKeyDown: (e) => e.key === "Enter" && handleFreeformSubmit(),
+          placeholder: "Type your answer...",
+          className: "flex-1 bg-[var(--bui-bg-surface,#18181b)] border border-[var(--bui-border-strong,#3f3f46)] rounded-lg px-3 py-2 text-sm text-[var(--bui-fg,#f4f4f5)] placeholder-[var(--bui-fg-faint,#52525b)] focus:outline-none focus:border-[var(--bui-border-strong,#3f3f46)]"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "button",
+        {
+          onClick: handleFreeformSubmit,
+          disabled: loading || !freeformValue.trim(),
+          className: "px-3 py-2 bg-[var(--bui-primary,#2563eb)] text-white text-sm rounded-lg hover:bg-[var(--bui-primary-hover,#3b82f6)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+          children: "Send"
+        }
+      )
+    ] }) })
+  ] });
+}
+
+// src/components/Form.tsx
+var import_react12 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function FormView({
+  title,
+  description,
+  fields,
+  values: initialValues,
+  submitted = false,
+  submitLabel = "Submit",
+  onSubmit,
+  loading = false,
+  className
+}) {
+  const [values, setValues] = (0, import_react12.useState)(() => {
+    const v = {};
+    for (const f of fields) {
+      v[f.name] = initialValues?.[f.name] ?? f.defaultValue ?? "";
+    }
+    return v;
+  });
+  const [errors, setErrors] = (0, import_react12.useState)({});
+  const handleChange = (name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    if (errors[name]) {
+      setErrors((prev) => {
+        const next = { ...prev };
+        delete next[name];
+        return next;
+      });
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (loading) return;
+    const newErrors = {};
+    for (const f of fields) {
+      if (f.required && !values[f.name]?.trim()) {
+        newErrors[f.name] = `${f.label} is required`;
+      }
+    }
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+    onSubmit?.(values);
+  };
+  if (submitted && initialValues) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 ${className || ""}`, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-xs uppercase tracking-wider mb-2", children: "Submitted" }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium mb-3", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children: fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs min-w-[80px]", children: [
+          f.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: initialValues[f.name] || "-" })
+      ] }, f.name)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mt-3 inline-flex items-center gap-1.5 px-2 py-1 bg-[var(--bui-success-muted,rgba(16,185,129,0.12))] rounded text-xs text-[var(--bui-success-fg,#6ee7b7)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-[var(--bui-success-fg,#6ee7b7)]" }),
+        "Submitted"
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 transition-opacity ${loading ? "opacity-60" : ""} ${className || ""}`,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--bui-fg,#f4f4f5)] text-sm font-medium mb-1", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mb-4", children: description }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: "block text-[var(--bui-fg-secondary,#a1a1aa)] text-xs mb-1", children: [
+            field.label,
+            field.required && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[var(--bui-error-fg,#f87171)] ml-0.5", children: "*" })
+          ] }),
+          field.type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "textarea",
+            {
+              value: values[field.name] || "",
+              onChange: (e) => handleChange(field.name, e.target.value),
+              placeholder: field.placeholder,
+              disabled: loading,
+              rows: 3,
+              className: `w-full bg-[var(--bui-bg-surface,#18181b)] border rounded-lg px-3 py-2 text-sm text-[var(--bui-fg,#f4f4f5)] placeholder-[var(--bui-fg-faint,#52525b)] focus:outline-none focus:border-[var(--bui-border-strong,#3f3f46)] resize-none ${errors[field.name] ? "border-[var(--bui-error-border,rgba(153,27,27,0.5))]" : "border-[var(--bui-border-strong,#3f3f46)]"}`
+            }
+          ) : field.type === "select" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "select",
+            {
+              value: values[field.name] || "",
+              onChange: (e) => handleChange(field.name, e.target.value),
+              disabled: loading,
+              className: `w-full bg-[var(--bui-bg-surface,#18181b)] border rounded-lg px-3 py-2 text-sm text-[var(--bui-fg,#f4f4f5)] focus:outline-none focus:border-[var(--bui-border-strong,#3f3f46)] ${errors[field.name] ? "border-[var(--bui-error-border,rgba(153,27,27,0.5))]" : "border-[var(--bui-border-strong,#3f3f46)]"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: "", children: field.placeholder || "Select..." }),
+                field.options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: opt, children: opt }, opt))
+              ]
+            }
+          ) : field.type === "toggle" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleChange(field.name, values[field.name] === "true" ? "false" : "true"),
+              disabled: loading,
+              className: "flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `w-8 h-4.5 rounded-full transition-colors ${values[field.name] === "true" ? "bg-[var(--bui-primary-hover,#3b82f6)]" : "bg-[var(--bui-bg-hover,#3f3f46)]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `w-3.5 h-3.5 rounded-full bg-white mt-0.5 transition-transform ${values[field.name] === "true" ? "translate-x-4" : "translate-x-0.5"}` }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-xs", children: values[field.name] === "true" ? "On" : "Off" })
+              ]
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "input",
+            {
+              type: field.type || "text",
+              value: values[field.name] || "",
+              onChange: (e) => handleChange(field.name, e.target.value),
+              placeholder: field.placeholder,
+              disabled: loading,
+              className: `w-full bg-[var(--bui-bg-surface,#18181b)] border rounded-lg px-3 py-2 text-sm text-[var(--bui-fg,#f4f4f5)] placeholder-[var(--bui-fg-faint,#52525b)] focus:outline-none focus:border-[var(--bui-border-strong,#3f3f46)] ${errors[field.name] ? "border-[var(--bui-error-border,rgba(153,27,27,0.5))]" : "border-[var(--bui-border-strong,#3f3f46)]"}`
+            }
+          ),
+          errors[field.name] && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--bui-error-fg,#f87171)] text-xs mt-1", children: errors[field.name] }),
+          field.hint && !errors[field.name] && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: field.hint })
+        ] }, field.name)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "button",
+          {
+            type: "submit",
+            disabled: loading,
+            className: "mt-4 px-4 py-2 bg-[var(--bui-primary,#2563eb)] text-white text-sm rounded-lg hover:bg-[var(--bui-primary-hover,#3b82f6)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+            children: loading ? "Submitting..." : submitLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/DataTable.tsx
+var import_react13 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function DataTableView({
+  columns,
+  rows,
+  title,
+  caption,
+  pageSize = 0,
+  loading = false,
+  className
+}) {
+  const [sortKey, setSortKey] = (0, import_react13.useState)(null);
+  const [sortDir, setSortDir] = (0, import_react13.useState)("asc");
+  const [page, setPage] = (0, import_react13.useState)(0);
+  const handleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  };
+  const sortedRows = (0, import_react13.useMemo)(() => {
+    if (!sortKey) return rows;
+    return [...rows].sort((a, b) => {
+      const av = a[sortKey];
+      const bv = b[sortKey];
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv));
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [rows, sortKey, sortDir]);
+  const totalPages = pageSize > 0 ? Math.ceil(sortedRows.length / pageSize) : 1;
+  const displayRows = pageSize > 0 ? sortedRows.slice(page * pageSize, (page + 1) * pageSize) : sortedRows;
+  const formatCell = (col, value) => {
+    if (col.format) return col.format(value);
+    if (value == null) return "-";
+    if (typeof value === "number") return value.toLocaleString();
+    return String(value);
+  };
+  const alignClass = (align) => {
+    if (align === "right") return "text-right";
+    if (align === "center") return "text-center";
+    return "text-left";
+  };
+  if (loading && rows.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-1.5 h-1.5 bg-[var(--bui-fg-muted,#71717a)] rounded-full animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: "Loading data..." })
+    ] }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl overflow-hidden transition-opacity ${loading ? "opacity-60" : ""} ${className || ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-4 py-3 border-b border-[var(--bui-border-strong,#3f3f46)]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs font-mono", children: [
+        rows.length,
+        " rows"
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "border-b border-[var(--bui-border-strong,#3f3f46)]", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "th",
+        {
+          className: `px-4 py-2.5 text-[var(--bui-fg-muted,#71717a)] text-xs font-medium uppercase tracking-wider ${alignClass(col.align)} ${col.sortable ? "cursor-pointer hover:text-[var(--bui-fg-secondary,#a1a1aa)] select-none" : ""}`,
+          onClick: col.sortable ? () => handleSort(col.key) : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+            col.label,
+            col.sortable && sortKey === col.key && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]", children: sortDir === "asc" ? "\u2191" : "\u2193" })
+          ] })
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tbody", { className: "divide-y divide-[var(--bui-border-strong,#3f3f46)]/50", children: [
+        displayRows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { className: "hover:bg-[var(--bui-bg-hover,#3f3f46)]/20 transition-colors", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { className: `px-4 py-2.5 text-[var(--bui-fg-secondary,#a1a1aa)] ${alignClass(col.align)}`, children: formatCell(col, row[col.key]) }, col.key)) }, i)),
+        displayRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("td", { colSpan: columns.length, className: "px-4 py-6 text-center text-[var(--bui-fg-muted,#71717a)] text-sm", children: "No data" }) })
+      ] })
+    ] }) }),
+    totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "px-4 py-2 border-t border-[var(--bui-border-strong,#3f3f46)] flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs", children: [
+        "Page ",
+        page + 1,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: () => setPage((p) => Math.max(0, p - 1)),
+            disabled: page === 0,
+            className: "px-2 py-1 text-xs text-[var(--bui-fg-secondary,#a1a1aa)] hover:text-[var(--bui-fg,#f4f4f5)] disabled:opacity-30 disabled:cursor-not-allowed",
+            children: "Prev"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
+            disabled: page >= totalPages - 1,
+            className: "px-2 py-1 text-xs text-[var(--bui-fg-secondary,#a1a1aa)] hover:text-[var(--bui-fg,#f4f4f5)] disabled:opacity-30 disabled:cursor-not-allowed",
+            children: "Next"
+          }
+        )
+      ] })
+    ] }),
+    caption && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-4 py-2 border-t border-[var(--bui-border-strong,#3f3f46)]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs", children: caption }) })
+  ] });
+}
+
+// src/components/Progress.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ProgressView({
+  title,
+  steps,
+  percent,
+  label,
+  loading = false,
+  className
+}) {
+  if (percent != null && !steps) {
+    const clamped = Math.max(0, Math.min(100, percent));
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 ${className || ""}`, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium mb-3", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-xs", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-xs font-mono ml-auto", children: [
+          clamped,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-2 bg-[var(--bui-bg-hover,#3f3f46)] rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          className: `h-full rounded-full transition-all duration-500 ${clamped >= 100 ? "bg-[var(--bui-success,#059669)]" : "bg-[var(--bui-primary-hover,#3b82f6)]"}`,
+          style: { width: `${clamped}%` }
+        }
+      ) })
+    ] });
+  }
+  if (!steps || steps.length === 0) return null;
+  const done = steps.filter((s) => s.status === "done").length;
+  const pct = steps.length > 0 ? done / steps.length * 100 : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl overflow-hidden transition-opacity ${loading ? "opacity-70" : ""} ${className || ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--bui-border-strong,#3f3f46)]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs font-mono", children: [
+          done,
+          "/",
+          steps.length
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-2 h-1 bg-[var(--bui-bg-hover,#3f3f46)] rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          className: "h-full bg-[var(--bui-success,#059669)] rounded-full transition-all duration-500",
+          style: { width: `${pct}%` }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "divide-y divide-[var(--bui-border-strong,#3f3f46)]/50", children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "px-4 py-2.5 flex items-start gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mt-0.5 shrink-0", children: [
+        step.status === "pending" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 rounded-full border border-[var(--bui-border-strong,#3f3f46)]" }),
+        step.status === "active" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 rounded-full bg-[var(--bui-primary-muted,#1e3a5f)] flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-2 h-2 bg-[var(--bui-primary-hover,#3b82f6)] rounded-full animate-pulse" }) }),
+        step.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-success-fg,#6ee7b7)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
+        step.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className: "w-4 h-4 text-[var(--bui-error-fg,#f87171)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `text-sm ${step.status === "done" ? "text-[var(--bui-fg-secondary,#a1a1aa)] line-through" : step.status === "error" ? "text-[var(--bui-error-fg,#f87171)]" : step.status === "active" ? "text-[var(--bui-fg,#f4f4f5)]" : "text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: step.label }),
+        step.detail && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: `text-xs mt-0.5 ${step.status === "error" ? "text-[var(--bui-error-fg,#f87171)]" : "text-[var(--bui-fg-muted,#71717a)]"}`, children: step.detail })
+      ] })
+    ] }, i)) })
+  ] });
+}
+
+// src/components/MediaDisplay.tsx
+var import_react14 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function MediaDisplayView({
+  items,
+  layout = "grid",
+  title,
+  loading = false,
+  className
+}) {
+  const [lightboxIndex, setLightboxIndex] = (0, import_react14.useState)(null);
+  if (loading && items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-1.5 h-1.5 bg-[var(--bui-fg-muted,#71717a)] rounded-full animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "Loading media..." })
+    ] }) });
+  }
+  if (items.length === 0) return null;
+  const gridCols = items.length === 1 ? "grid-cols-1" : items.length === 2 ? "grid-cols-2" : items.length <= 4 ? "grid-cols-2" : "grid-cols-3";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl overflow-hidden transition-opacity ${loading ? "opacity-60" : ""} ${className || ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-4 py-3 border-b border-[var(--bui-border-strong,#3f3f46)]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs", children: [
+        items.length,
+        " item",
+        items.length !== 1 ? "s" : ""
+      ] })
+    ] }) }),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `grid ${gridCols} gap-1 p-1`, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      MediaItemRenderer,
+      {
+        item,
+        onImageClick: () => setLightboxIndex(i),
+        compact: items.length > 1
+      },
+      i
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-3 p-4", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      MediaItemRenderer,
+      {
+        item,
+        onImageClick: () => setLightboxIndex(i),
+        compact: false
+      },
+      i
+    )) }),
+    lightboxIndex != null && items[lightboxIndex]?.type === "image" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: "fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-8",
+        onClick: () => setLightboxIndex(null),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: () => setLightboxIndex(null),
+              className: "absolute top-4 right-4 text-white/60 hover:text-white text-2xl",
+              children: "\xD7"
+            }
+          ),
+          items.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setLightboxIndex(Math.max(0, lightboxIndex - 1));
+                },
+                disabled: lightboxIndex === 0,
+                className: "absolute left-4 text-white/60 hover:text-white text-3xl disabled:opacity-20",
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setLightboxIndex(Math.min(items.length - 1, lightboxIndex + 1));
+                },
+                disabled: lightboxIndex >= items.length - 1,
+                className: "absolute right-4 text-white/60 hover:text-white text-3xl disabled:opacity-20",
+                children: "\u203A"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "img",
+            {
+              src: items[lightboxIndex].url,
+              alt: items[lightboxIndex].alt || "",
+              className: "max-w-full max-h-full object-contain rounded",
+              onClick: (e) => e.stopPropagation()
+            }
+          ),
+          items[lightboxIndex].caption && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "absolute bottom-6 text-white/70 text-sm text-center", children: items[lightboxIndex].caption })
+        ]
+      }
+    )
+  ] });
+}
+function MediaItemRenderer({
+  item,
+  onImageClick,
+  compact
+}) {
+  if (item.type === "image") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "img",
+        {
+          src: item.url,
+          alt: item.alt || "",
+          className: `w-full object-cover rounded cursor-pointer hover:opacity-90 transition-opacity ${compact ? "h-32" : "h-auto max-h-80"}`,
+          onClick: onImageClick
+        }
+      ),
+      item.caption && !compact && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-1", children: item.caption })
+    ] });
+  }
+  if (item.type === "video") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        "video",
+        {
+          src: item.url,
+          controls: true,
+          className: `w-full rounded bg-black ${compact ? "max-h-32" : "max-h-80"}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("track", { kind: "captions" })
+        }
+      ),
+      item.caption && !compact && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-1", children: item.caption })
+    ] });
+  }
+  if (item.type === "audio") {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "bg-[var(--bui-bg-surface,#18181b)] rounded-lg p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("audio", { src: item.url, controls: true, className: "w-full" }),
+      item.caption && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-[var(--bui-fg-muted,#71717a)] text-xs mt-2", children: item.caption })
+    ] });
+  }
+  return null;
+}
+
+// src/components/CodeBlock.tsx
+var import_react15 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CodeBlockView({
+  code,
+  language,
+  title,
+  showLineNumbers = false,
+  diff,
+  loading = false,
+  className
+}) {
+  const [copied, setCopied] = (0, import_react15.useState)(false);
+  const [diffView, setDiffView] = (0, import_react15.useState)("diff");
+  const handleCopy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 ${className || ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2 text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-1.5 h-1.5 bg-[var(--bui-fg-muted,#71717a)] rounded-full animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Generating code..." })
+    ] }) });
+  }
+  if (diff) {
+    const beforeLines = diff.before.split("\n");
+    const afterLines = diff.after.split("\n");
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl overflow-hidden ${className || ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-4 py-2.5 border-b border-[var(--bui-border-strong,#3f3f46)] flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: title }),
+          language && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs font-mono", children: language })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center gap-1", children: ["before", "diff", "after"].map((mode) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            onClick: () => setDiffView(mode),
+            className: `px-2 py-0.5 text-xs rounded ${diffView === mode ? "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg,#f4f4f5)]" : "text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)]"}`,
+            children: mode
+          },
+          mode
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("pre", { className: "p-4 overflow-x-auto text-sm leading-relaxed", children: [
+        diffView === "before" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]", children: diff.before }),
+        diffView === "after" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]", children: diff.after }),
+        diffView === "diff" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { children: renderSimpleDiff(beforeLines, afterLines) })
+      ] })
+    ] });
+  }
+  const lines = code.split("\n");
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl overflow-hidden ${className || ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-4 py-2.5 border-b border-[var(--bui-border-strong,#3f3f46)] flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center gap-2", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: title }),
+        language && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs font-mono", children: language }),
+        !title && !language && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs", children: "Code" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "button",
+        {
+          onClick: () => handleCopy(code),
+          className: "flex items-center gap-1.5 px-2 py-1 text-xs text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)] transition-colors rounded hover:bg-[var(--bui-bg-hover,#3f3f46)]/50",
+          children: copied ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { className: "w-3.5 h-3.5 text-[var(--bui-success-fg,#6ee7b7)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
+            "Copied"
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" })
+            ] }),
+            "Copy"
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("pre", { className: "p-4 overflow-x-auto text-sm leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("code", { className: "text-[var(--bui-fg-secondary,#a1a1aa)]", children: showLineNumbers ? lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-fg-faint,#52525b)] select-none w-8 shrink-0 text-right mr-4 font-mono text-xs leading-relaxed", children: i + 1 }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: line })
+    ] }, i)) : code }) })
+  ] });
+}
+function renderSimpleDiff(beforeLines, afterLines) {
+  const result = [];
+  const beforeSet = new Set(beforeLines);
+  const afterSet = new Set(afterLines);
+  for (const line of beforeLines) {
+    if (!afterSet.has(line)) {
+      result.push(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-error-fg,#f87171)] select-none mr-2", children: "-" }),
+          line
+        ] }, `-${result.length}`)
+      );
+    }
+  }
+  for (const line of afterLines) {
+    if (!beforeSet.has(line)) {
+      result.push(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "bg-[var(--bui-success-muted,rgba(16,185,129,0.12))] text-[var(--bui-success-fg,#6ee7b7)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--bui-success,#059669)] select-none mr-2", children: "+" }),
+          line
+        ] }, `+${result.length}`)
+      );
+    }
+  }
+  for (const line of afterLines) {
+    if (beforeSet.has(line)) {
+      result.push(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "text-[var(--bui-fg-muted,#71717a)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "select-none mr-2", children: "\xA0" }),
+          line
+        ] }, `=${result.length}`)
+      );
+    }
+  }
+  return result;
+}
+
+// src/components/Toast.tsx
+var import_react16 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var ToastContext = (0, import_react16.createContext)(null);
+function useToast() {
+  const ctx = (0, import_react16.useContext)(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a <ToastProvider>");
+  return ctx;
+}
+function ToastProvider({ children, className }) {
+  const [toasts, setToasts] = (0, import_react16.useState)([]);
+  const counterRef = (0, import_react16.useRef)(0);
+  const toast = (0, import_react16.useCallback)((message, type = "info", duration = 4e3) => {
+    const id = `toast-${++counterRef.current}`;
+    setToasts((prev) => [...prev, { id, message, type, duration }]);
+  }, []);
+  const dismiss = (0, import_react16.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ToastContext.Provider, { value: { toast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToastContainer, { toasts, onDismiss: dismiss, className })
+  ] });
+}
+function ToastContainer({
+  toasts,
+  onDismiss,
+  className
+}) {
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm ${className || ""}`, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ToastItem, { toast: t, onDismiss }, t.id)) });
+}
+function ToastItem({ toast: t, onDismiss }) {
+  (0, import_react16.useEffect)(() => {
+    if (t.duration && t.duration > 0) {
+      const timer = setTimeout(() => onDismiss(t.id), t.duration);
+      return () => clearTimeout(timer);
+    }
+  }, [t.id, t.duration, onDismiss]);
+  const colors = {
+    success: "border-[var(--bui-success-border,rgba(4,120,87,0.3))] bg-[var(--bui-success-muted,rgba(16,185,129,0.12))]",
+    error: "border-[var(--bui-error-border,rgba(153,27,27,0.5))] bg-[var(--bui-error-muted,rgba(220,38,38,0.08))]",
+    warning: "border-[var(--bui-warning-border,rgba(180,83,9,0.5))] bg-[var(--bui-warning-muted,rgba(245,158,11,0.12))]",
+    info: "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)]"
+  };
+  const dotColors = {
+    success: "bg-[var(--bui-success-fg,#6ee7b7)]",
+    error: "bg-[var(--bui-error-fg,#f87171)]",
+    warning: "bg-[var(--bui-warning-fg,#f59e0b)]",
+    info: "bg-[var(--bui-primary-hover,#3b82f6)]"
+  };
+  const textColors = {
+    success: "text-[var(--bui-success-fg,#6ee7b7)]",
+    error: "text-[var(--bui-error-fg,#f87171)]",
+    warning: "text-[var(--bui-warning-fg,#f59e0b)]",
+    info: "text-[var(--bui-primary-hover,#3b82f6)]"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      className: `border rounded-lg px-4 py-3 bg-[var(--bui-bg-surface,#18181b)] shadow-lg animate-in slide-in-from-right ${colors[t.type]}`,
+      style: { animation: "slideIn 0.2s ease-out" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${dotColors[t.type]}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: `text-sm flex-1 ${textColors[t.type]}`, children: t.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "button",
+          {
+            onClick: () => onDismiss(t.id),
+            className: "text-[var(--bui-fg-muted,#71717a)] hover:text-[var(--bui-fg-secondary,#a1a1aa)] text-xs shrink-0 ml-2",
+            children: "\xD7"
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/FileUpload.tsx
+var import_react17 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function FileUploadView({
+  accept,
+  maxSize,
+  multiple = false,
+  files = [],
+  onUpload,
+  title,
+  loading = false,
+  className
+}) {
+  const [isDragging, setIsDragging] = (0, import_react17.useState)(false);
+  const [error, setError] = (0, import_react17.useState)(null);
+  const inputRef = (0, import_react17.useRef)(null);
+  const validateFiles = (0, import_react17.useCallback)((fileList) => {
+    setError(null);
+    const valid = [];
+    for (const file of fileList) {
+      if (maxSize && file.size > maxSize) {
+        setError(`${file.name} exceeds max size (${formatBytes(maxSize)})`);
+        continue;
+      }
+      valid.push(file);
+    }
+    if (!multiple && valid.length > 1) {
+      return [valid[0]];
+    }
+    return valid;
+  }, [maxSize, multiple]);
+  const handleFiles = (0, import_react17.useCallback)((fileList) => {
+    if (!fileList || fileList.length === 0) return;
+    const valid = validateFiles(Array.from(fileList));
+    if (valid.length > 0) {
+      onUpload?.(valid);
+    }
+  }, [validateFiles, onUpload]);
+  const handleDrop = (0, import_react17.useCallback)((e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  }, [handleFiles]);
+  const handleDragOver = (0, import_react17.useCallback)((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = (0, import_react17.useCallback)(() => {
+    setIsDragging(false);
+  }, []);
+  if (files.length > 0 && !loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl overflow-hidden ${className || ""}`, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "px-4 py-3 border-b border-[var(--bui-border-strong,#3f3f46)]", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium", children: title }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "divide-y divide-[var(--bui-border-strong,#3f3f46)]/50", children: files.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "px-4 py-2.5 flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FileIcon, { type: f.type }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm truncate", children: f.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs", children: formatBytes(f.size) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-[var(--bui-success-fg,#6ee7b7)] shrink-0" })
+      ] }, i)) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `bg-[var(--bui-bg-elevated,#27272a)] border border-[var(--bui-border-strong,#3f3f46)] rounded-xl p-4 transition-opacity ${loading ? "opacity-60" : ""} ${className || ""}`, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm font-medium mb-3", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onClick: () => inputRef.current?.click(),
+        className: `border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${isDragging ? "border-[var(--bui-primary-border,#2563eb80)] bg-[var(--bui-primary-muted,#1e3a5f)]" : "border-[var(--bui-border-strong,#3f3f46)] hover:border-[var(--bui-border-strong,#3f3f46)] hover:bg-[var(--bui-bg-surface,#18181b)]/50"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: (e) => handleFiles(e.target.files),
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-8 h-8 text-[var(--bui-fg-faint,#52525b)] mx-auto mb-2", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: isDragging ? "Drop files here" : "Click or drag files to upload" }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-[var(--bui-fg-faint,#52525b)] text-xs mt-1", children: [
+            accept ? accept : "Any file type",
+            maxSize ? ` (max ${formatBytes(maxSize)})` : ""
+          ] })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[var(--bui-error-fg,#f87171)] text-xs mt-2", children: error }),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "mt-3 flex items-center gap-2 text-[var(--bui-fg-secondary,#a1a1aa)] text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "w-1.5 h-1.5 bg-[var(--bui-fg-muted,#71717a)] rounded-full animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: "Uploading..." })
+    ] })
+  ] });
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileIcon({ type }) {
+  const isImage = type.startsWith("image/");
+  const isPdf = type === "application/pdf";
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-8 h-8 rounded-lg flex items-center justify-center shrink-0 ${isImage ? "bg-purple-900/30 text-purple-400" : isPdf ? "bg-[var(--bui-error-muted,rgba(220,38,38,0.08))] text-[var(--bui-error-fg,#f87171)]" : "bg-[var(--bui-bg-hover,#3f3f46)] text-[var(--bui-fg-secondary,#a1a1aa)]"}`, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" }) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chat,
+  ChatPanel,
+  ChatProvider,
+  CodeBlockView,
+  Composer,
+  DataTableView,
+  FileUploadView,
+  FormView,
+  Markdown,
+  MediaDisplayView,
+  Message,
+  Panel,
+  ProgressView,
+  QuestionView,
+  ThemeProvider,
+  Thread,
+  ToastProvider,
+  ToolResult,
+  createToolStateStore,
+  useChatContext,
+  useChatToolOutput,
+  useToast,
+  useToolEffect,
+  useToolOutput,
+  useToolState
+});