@witqq/agent-sdk 0.8.0 → 0.9.0

package/dist/chat/react.d.cts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
 import { IChatClient, BackendInfo, SelectionChangeCallback } from './runtime.cjs';
-import { c as ChatMessage, R as RuntimeStatus, r as SessionInfo, u as TextPart, q as ReasoningPart, v as ToolCallPart, t as SourcePart, F as FilePart, g as ChatSession, a as ChatEvent, b as ChatId, f as ChatIdLike, S as SendMessageOptions } from '../types-DRgd_9R7.cjs';
+import { c as ChatMessage, R as RuntimeStatus, r as SessionInfo, u as TextPart, q as ReasoningPart, v as ToolCallPart, t as SourcePart, F as FilePart, g as ChatSession, a as ChatEvent, b as ChatId, f as ChatIdLike, S as SendMessageOptions } from '../types-DkSXALKg.cjs';
 import { A as AuthToken } from '../types-4vbcmPTp.cjs';
 import { P as ProviderConfig } from '../provider-types-PTSlRPNB.cjs';
 import { ContextStats } from './context.cjs';
-import { M as ModelInfo } from '../agent-DxY68NZL.cjs';
+import { M as ModelInfo } from '../agent-C6H2CgJA.cjs';
 import { CreateSessionOptions, SessionListOptions } from './sessions.cjs';
 import '../errors-C-so0M4t.cjs';
 import 'zod';
@@ -206,19 +206,67 @@ interface MarkdownRendererProps {
  */
 declare function MarkdownRenderer(props: MarkdownRendererProps): ReactNode;
 
+/** Configuration for message list virtualization. */
+interface VirtualizeOptions {
+    /** Estimated height of each message item in pixels (default: 80). */
+    estimatedItemHeight?: number;
+    /** Number of extra items to render above and below the visible area (default: 3). */
+    overscan?: number;
+}
+/** Result of the useVirtualMessages hook. */
+interface VirtualMessagesResult<T> {
+    /** Slice of items to actually render. */
+    visibleItems: T[];
+    /** Start index in the original array. */
+    startIndex: number;
+    /** End index (exclusive) in the original array. */
+    endIndex: number;
+    /** Height of the spacer above rendered items (px). */
+    topSpacerHeight: number;
+    /** Height of the spacer below rendered items (px). */
+    bottomSpacerHeight: number;
+    /** Total estimated height of all items (px). */
+    totalHeight: number;
+    /** Scroll event handler to attach to the container. */
+    onScroll: (event: {
+        currentTarget: {
+            scrollTop: number;
+            clientHeight: number;
+        };
+    }) => void;
+    /** Ref callback to measure container on mount. */
+    containerRef: (el: HTMLElement | null) => void;
+}
+/**
+ * Hook providing windowed rendering for a list of items.
+ *
+ * Only items within the visible viewport (plus overscan) are returned.
+ * Consumers render top/bottom spacer divs to preserve scroll position.
+ *
+ * @param items - Full array of items
+ * @param options - Virtualization config
+ */
+declare function useVirtualMessages<T>(items: readonly T[], options?: VirtualizeOptions): VirtualMessagesResult<T>;
+
 /** Props for the Thread component. */
 interface ThreadProps {
     messages: ChatMessage[];
     isGenerating?: boolean;
     autoScroll?: boolean;
     className?: string;
+    /**
+     * Enable windowed rendering for large message lists.
+     * Pass `true` for defaults or an options object.
+     * When enabled, only visible messages (plus overscan) are mounted.
+     */
+    virtualize?: boolean | VirtualizeOptions;
 }
 /**
  * Headless thread component wrapping a scrollable message list.
  * Auto-scrolls to bottom when new messages arrive unless user has scrolled up.
  * Shows a scroll-to-bottom button when scrolled up and an empty state when no messages.
  */
-declare function Thread({ messages, isGenerating, autoScroll, className, }: ThreadProps): ReactNode;
+declare function Thread({ messages, isGenerating, autoScroll, className, virtualize, }: ThreadProps): ReactNode;
 
 /** Props for the Composer component. */
 interface ComposerProps {
@@ -884,6 +932,32 @@ interface UsageBadgeProps {
 /** Compact token usage display. Shows prompt/completion/total tokens. */
 declare function UsageBadge({ usage, className }: UsageBadgeProps): ReactNode;
 
+/** Props for PermissionDialog. */
+interface PermissionDialogProps {
+    /** List of pending tool requests awaiting approval. */
+    requests: PendingToolRequest[];
+    /** Called when user approves a tool call. */
+    onApprove: (toolCallId: string) => void;
+    /** Called when user denies a tool call. */
+    onDeny: (toolCallId: string) => void;
+    /** Optional: approve all pending at once. */
+    onApproveAll?: () => void;
+    /** Optional: deny all pending at once. */
+    onDenyAll?: () => void;
+    /** Custom renderer for tool arguments. */
+    renderArgs?: (args: Record<string, unknown>, toolName: string) => ReactNode;
+    className?: string;
+}
+/**
+ * Headless permission dialog component for tool approval flows.
+ *
+ * Renders a list of pending tool calls with approve/deny buttons.
+ * Uses `data-*` attributes for styling — no built-in styles.
+ *
+ * Returns `null` when there are no pending requests.
+ */
+declare function PermissionDialog({ requests, onApprove, onDeny, onApproveAll, onDenyAll, renderArgs, className, }: PermissionDialogProps): ReactNode;
+
 /**
  * Client-side adapter that implements IChatClient by delegating
  * operations over HTTP/SSE to a remote server.
@@ -1085,4 +1159,4 @@ interface UseApiKeyAuthReturn {
  */
 declare function useApiKeyAuth(options: UseApiKeyAuthOptions): UseApiKeyAuthReturn;
 
-export { type AuthFormComponent, type AuthFormProps, BackendSelector, type BackendSelectorProps, ChatHeader, type ChatHeaderProps, ChatInputArea, type ChatInputAreaProps, ChatLayout, type ChatLayoutProps, ChatProvider, ChatSettingsOverlay, type ChatSettingsOverlayProps, ChatUI, type ChatUIProps, type ChatUISlots, type ChatUsage, ClaudeAuthForm, Composer, type ComposerProps, ContextStatsDisplay, type ContextStatsDisplayProps, CopilotAuthForm, MarkdownRenderer, type MarkdownRendererProps, Message, type MessageProps, type ModelOption, ModelSelector, type ModelSelectorProps, type PendingToolRequest, type ProviderModelItem, ProviderModelSelector, type ProviderModelSelectorProps, ProviderSelector, type ProviderSelectorProps, ProviderSettings, type ProviderSettingsProps, type RemoteAuthBackend, type RemoteAuthStatus, RemoteChatClient, type RemoteChatClientOptions, type RemoteChatPhase, type SSEStatus, ThinkingBlock, type ThinkingBlockProps, Thread, ThreadList, type ThreadListProps, type ThreadProps, ThreadProvider, type ThreadProviderProps, type ThreadSlotOverrides, ToolCallView, type ToolCallViewProps, UsageBadge, type UsageBadgeProps, type UseApiKeyAuthOptions, type UseApiKeyAuthReturn, type UseBackendsReturn, type UseChatOptions, type UseChatReturn, type UseClaudeAuthOptions, type UseClaudeAuthReturn, type UseCopilotAuthOptions, type UseCopilotAuthReturn, type UseMessagesOptions, type UseMessagesReturn, type UseModelsReturn, type UseProvidersReturn, type UseRemoteAuthOptions, type UseRemoteAuthReturn, type UseRemoteChatOptions, type UseRemoteChatReturn, type UseSSEOptions, type UseSSEReturn, type UseSessionsReturn, type UseToolApprovalReturn, VercelAIAuthForm, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval };
+export { type AuthFormComponent, type AuthFormProps, BackendSelector, type BackendSelectorProps, ChatHeader, type ChatHeaderProps, ChatInputArea, type ChatInputAreaProps, ChatLayout, type ChatLayoutProps, ChatProvider, ChatSettingsOverlay, type ChatSettingsOverlayProps, ChatUI, type ChatUIProps, type ChatUISlots, type ChatUsage, ClaudeAuthForm, Composer, type ComposerProps, ContextStatsDisplay, type ContextStatsDisplayProps, CopilotAuthForm, MarkdownRenderer, type MarkdownRendererProps, Message, type MessageProps, type ModelOption, ModelSelector, type ModelSelectorProps, type PendingToolRequest, PermissionDialog, type PermissionDialogProps, type ProviderModelItem, ProviderModelSelector, type ProviderModelSelectorProps, ProviderSelector, type ProviderSelectorProps, ProviderSettings, type ProviderSettingsProps, type RemoteAuthBackend, type RemoteAuthStatus, RemoteChatClient, type RemoteChatClientOptions, type RemoteChatPhase, type SSEStatus, ThinkingBlock, type ThinkingBlockProps, Thread, ThreadList, type ThreadListProps, type ThreadProps, ThreadProvider, type ThreadProviderProps, type ThreadSlotOverrides, ToolCallView, type ToolCallViewProps, UsageBadge, type UsageBadgeProps, type UseApiKeyAuthOptions, type UseApiKeyAuthReturn, type UseBackendsReturn, type UseChatOptions, type UseChatReturn, type UseClaudeAuthOptions, type UseClaudeAuthReturn, type UseCopilotAuthOptions, type UseCopilotAuthReturn, type UseMessagesOptions, type UseMessagesReturn, type UseModelsReturn, type UseProvidersReturn, type UseRemoteAuthOptions, type UseRemoteAuthReturn, type UseRemoteChatOptions, type UseRemoteChatReturn, type UseSSEOptions, type UseSSEReturn, type UseSessionsReturn, type UseToolApprovalReturn, VercelAIAuthForm, type VirtualMessagesResult, type VirtualizeOptions, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval, useVirtualMessages };

package/dist/chat/react.d.ts

@@ -1,11 +1,11 @@
 import * as react from 'react';
 import { ReactNode, ComponentType } from 'react';
 import { IChatClient, BackendInfo, SelectionChangeCallback } from './runtime.js';
-import { c as ChatMessage, R as RuntimeStatus, r as SessionInfo, u as TextPart, q as ReasoningPart, v as ToolCallPart, t as SourcePart, F as FilePart, g as ChatSession, a as ChatEvent, b as ChatId, f as ChatIdLike, S as SendMessageOptions } from '../types-ajANVzf7.js';
+import { c as ChatMessage, R as RuntimeStatus, r as SessionInfo, u as TextPart, q as ReasoningPart, v as ToolCallPart, t as SourcePart, F as FilePart, g as ChatSession, a as ChatEvent, b as ChatId, f as ChatIdLike, S as SendMessageOptions } from '../types-DgtI1hzh.js';
 import { A as AuthToken } from '../types-BxggH0Yh.js';
 import { P as ProviderConfig } from '../provider-types-PTSlRPNB.js';
 import { ContextStats } from './context.js';
-import { M as ModelInfo } from '../agent-CW9XbmG_.js';
+import { M as ModelInfo } from '../agent-F7oB6eKp.js';
 import { CreateSessionOptions, SessionListOptions } from './sessions.js';
 import '../errors-C-so0M4t.js';
 import 'zod';
@@ -206,19 +206,67 @@ interface MarkdownRendererProps {
  */
 declare function MarkdownRenderer(props: MarkdownRendererProps): ReactNode;
 
+/** Configuration for message list virtualization. */
+interface VirtualizeOptions {
+    /** Estimated height of each message item in pixels (default: 80). */
+    estimatedItemHeight?: number;
+    /** Number of extra items to render above and below the visible area (default: 3). */
+    overscan?: number;
+}
+/** Result of the useVirtualMessages hook. */
+interface VirtualMessagesResult<T> {
+    /** Slice of items to actually render. */
+    visibleItems: T[];
+    /** Start index in the original array. */
+    startIndex: number;
+    /** End index (exclusive) in the original array. */
+    endIndex: number;
+    /** Height of the spacer above rendered items (px). */
+    topSpacerHeight: number;
+    /** Height of the spacer below rendered items (px). */
+    bottomSpacerHeight: number;
+    /** Total estimated height of all items (px). */
+    totalHeight: number;
+    /** Scroll event handler to attach to the container. */
+    onScroll: (event: {
+        currentTarget: {
+            scrollTop: number;
+            clientHeight: number;
+        };
+    }) => void;
+    /** Ref callback to measure container on mount. */
+    containerRef: (el: HTMLElement | null) => void;
+}
+/**
+ * Hook providing windowed rendering for a list of items.
+ *
+ * Only items within the visible viewport (plus overscan) are returned.
+ * Consumers render top/bottom spacer divs to preserve scroll position.
+ *
+ * @param items - Full array of items
+ * @param options - Virtualization config
+ */
+declare function useVirtualMessages<T>(items: readonly T[], options?: VirtualizeOptions): VirtualMessagesResult<T>;
+
 /** Props for the Thread component. */
 interface ThreadProps {
     messages: ChatMessage[];
     isGenerating?: boolean;
     autoScroll?: boolean;
     className?: string;
+    /**
+     * Enable windowed rendering for large message lists.
+     * Pass `true` for defaults or an options object.
+     * When enabled, only visible messages (plus overscan) are mounted.
+     */
+    virtualize?: boolean | VirtualizeOptions;
 }
 /**
  * Headless thread component wrapping a scrollable message list.
  * Auto-scrolls to bottom when new messages arrive unless user has scrolled up.
  * Shows a scroll-to-bottom button when scrolled up and an empty state when no messages.
  */
-declare function Thread({ messages, isGenerating, autoScroll, className, }: ThreadProps): ReactNode;
+declare function Thread({ messages, isGenerating, autoScroll, className, virtualize, }: ThreadProps): ReactNode;
 
 /** Props for the Composer component. */
 interface ComposerProps {
@@ -884,6 +932,32 @@ interface UsageBadgeProps {
 /** Compact token usage display. Shows prompt/completion/total tokens. */
 declare function UsageBadge({ usage, className }: UsageBadgeProps): ReactNode;
 
+/** Props for PermissionDialog. */
+interface PermissionDialogProps {
+    /** List of pending tool requests awaiting approval. */
+    requests: PendingToolRequest[];
+    /** Called when user approves a tool call. */
+    onApprove: (toolCallId: string) => void;
+    /** Called when user denies a tool call. */
+    onDeny: (toolCallId: string) => void;
+    /** Optional: approve all pending at once. */
+    onApproveAll?: () => void;
+    /** Optional: deny all pending at once. */
+    onDenyAll?: () => void;
+    /** Custom renderer for tool arguments. */
+    renderArgs?: (args: Record<string, unknown>, toolName: string) => ReactNode;
+    className?: string;
+}
+/**
+ * Headless permission dialog component for tool approval flows.
+ *
+ * Renders a list of pending tool calls with approve/deny buttons.
+ * Uses `data-*` attributes for styling — no built-in styles.
+ *
+ * Returns `null` when there are no pending requests.
+ */
+declare function PermissionDialog({ requests, onApprove, onDeny, onApproveAll, onDenyAll, renderArgs, className, }: PermissionDialogProps): ReactNode;
+
 /**
  * Client-side adapter that implements IChatClient by delegating
  * operations over HTTP/SSE to a remote server.
@@ -1085,4 +1159,4 @@ interface UseApiKeyAuthReturn {
  */
 declare function useApiKeyAuth(options: UseApiKeyAuthOptions): UseApiKeyAuthReturn;
 
-export { type AuthFormComponent, type AuthFormProps, BackendSelector, type BackendSelectorProps, ChatHeader, type ChatHeaderProps, ChatInputArea, type ChatInputAreaProps, ChatLayout, type ChatLayoutProps, ChatProvider, ChatSettingsOverlay, type ChatSettingsOverlayProps, ChatUI, type ChatUIProps, type ChatUISlots, type ChatUsage, ClaudeAuthForm, Composer, type ComposerProps, ContextStatsDisplay, type ContextStatsDisplayProps, CopilotAuthForm, MarkdownRenderer, type MarkdownRendererProps, Message, type MessageProps, type ModelOption, ModelSelector, type ModelSelectorProps, type PendingToolRequest, type ProviderModelItem, ProviderModelSelector, type ProviderModelSelectorProps, ProviderSelector, type ProviderSelectorProps, ProviderSettings, type ProviderSettingsProps, type RemoteAuthBackend, type RemoteAuthStatus, RemoteChatClient, type RemoteChatClientOptions, type RemoteChatPhase, type SSEStatus, ThinkingBlock, type ThinkingBlockProps, Thread, ThreadList, type ThreadListProps, type ThreadProps, ThreadProvider, type ThreadProviderProps, type ThreadSlotOverrides, ToolCallView, type ToolCallViewProps, UsageBadge, type UsageBadgeProps, type UseApiKeyAuthOptions, type UseApiKeyAuthReturn, type UseBackendsReturn, type UseChatOptions, type UseChatReturn, type UseClaudeAuthOptions, type UseClaudeAuthReturn, type UseCopilotAuthOptions, type UseCopilotAuthReturn, type UseMessagesOptions, type UseMessagesReturn, type UseModelsReturn, type UseProvidersReturn, type UseRemoteAuthOptions, type UseRemoteAuthReturn, type UseRemoteChatOptions, type UseRemoteChatReturn, type UseSSEOptions, type UseSSEReturn, type UseSessionsReturn, type UseToolApprovalReturn, VercelAIAuthForm, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval };
+export { type AuthFormComponent, type AuthFormProps, BackendSelector, type BackendSelectorProps, ChatHeader, type ChatHeaderProps, ChatInputArea, type ChatInputAreaProps, ChatLayout, type ChatLayoutProps, ChatProvider, ChatSettingsOverlay, type ChatSettingsOverlayProps, ChatUI, type ChatUIProps, type ChatUISlots, type ChatUsage, ClaudeAuthForm, Composer, type ComposerProps, ContextStatsDisplay, type ContextStatsDisplayProps, CopilotAuthForm, MarkdownRenderer, type MarkdownRendererProps, Message, type MessageProps, type ModelOption, ModelSelector, type ModelSelectorProps, type PendingToolRequest, PermissionDialog, type PermissionDialogProps, type ProviderModelItem, ProviderModelSelector, type ProviderModelSelectorProps, ProviderSelector, type ProviderSelectorProps, ProviderSettings, type ProviderSettingsProps, type RemoteAuthBackend, type RemoteAuthStatus, RemoteChatClient, type RemoteChatClientOptions, type RemoteChatPhase, type SSEStatus, ThinkingBlock, type ThinkingBlockProps, Thread, ThreadList, type ThreadListProps, type ThreadProps, ThreadProvider, type ThreadProviderProps, type ThreadSlotOverrides, ToolCallView, type ToolCallViewProps, UsageBadge, type UsageBadgeProps, type UseApiKeyAuthOptions, type UseApiKeyAuthReturn, type UseBackendsReturn, type UseChatOptions, type UseChatReturn, type UseClaudeAuthOptions, type UseClaudeAuthReturn, type UseCopilotAuthOptions, type UseCopilotAuthReturn, type UseMessagesOptions, type UseMessagesReturn, type UseModelsReturn, type UseProvidersReturn, type UseRemoteAuthOptions, type UseRemoteAuthReturn, type UseRemoteChatOptions, type UseRemoteChatReturn, type UseSSEOptions, type UseSSEReturn, type UseSessionsReturn, type UseToolApprovalReturn, VercelAIAuthForm, type VirtualMessagesResult, type VirtualizeOptions, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval, useVirtualMessages };

package/dist/chat/react.js

@@ -281,6 +281,9 @@ function useChat(options = {}) {
           }
           const agentEvent = chatEventToAgentEvent(event);
           if (agentEvent) {
+            if (agentEvent.type === "error" && !agentEvent.recoverable) {
+              throw new Error(agentEvent.error || "Stream error");
+            }
             accumulator.apply(agentEvent);
             hasEvents = true;
             const snapshot = accumulator.snapshot();
@@ -799,25 +802,98 @@ function useThreadSlots() {
 function useOptionalThreadSlots() {
   return useContext(ThreadSlotsContext);
 }
+function useVirtualMessages(items, options = {}) {
+  const { estimatedItemHeight = 80, overscan = 3 } = options;
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+  const containerElRef = useRef(null);
+  const containerRef = useCallback((el) => {
+    containerElRef.current = el;
+    if (el) {
+      setContainerHeight(el.clientHeight);
+    }
+  }, []);
+  useEffect(() => {
+    const el = containerElRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      setContainerHeight(el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const onScroll = useCallback(
+    (event) => {
+      setScrollTop(event.currentTarget.scrollTop);
+      setContainerHeight(event.currentTarget.clientHeight);
+    },
+    []
+  );
+  const result = useMemo(() => {
+    const totalCount = items.length;
+    const totalHeight = totalCount * estimatedItemHeight;
+    if (totalCount === 0 || containerHeight === 0) {
+      return {
+        visibleItems: items.slice(),
+        startIndex: 0,
+        endIndex: totalCount,
+        topSpacerHeight: 0,
+        bottomSpacerHeight: 0,
+        totalHeight
+      };
+    }
+    const rawStart = Math.floor(scrollTop / estimatedItemHeight) - overscan;
+    const startIndex = Math.max(0, rawStart);
+    const visibleCount = Math.ceil(containerHeight / estimatedItemHeight);
+    const rawEnd = Math.floor(scrollTop / estimatedItemHeight) + visibleCount + overscan;
+    const endIndex = Math.min(totalCount, rawEnd);
+    return {
+      visibleItems: items.slice(startIndex, endIndex),
+      startIndex,
+      endIndex,
+      topSpacerHeight: startIndex * estimatedItemHeight,
+      bottomSpacerHeight: (totalCount - endIndex) * estimatedItemHeight,
+      totalHeight
+    };
+  }, [items, scrollTop, containerHeight, estimatedItemHeight, overscan]);
+  return {
+    ...result,
+    onScroll,
+    containerRef
+  };
+}
 
 // src/chat/react/Thread.ts
 function Thread({
   messages,
   isGenerating,
   autoScroll = true,
-  className
+  className,
+  virtualize
 }) {
   const sentinelRef = useRef(null);
   const containerRef = useRef(null);
   const [userScrolledUp, setUserScrolledUp] = useState(false);
   const isScrollingProgrammatically = useRef(false);
-  const handleScroll = useCallback(() => {
-    if (isScrollingProgrammatically.current) return;
-    const el = containerRef.current;
-    if (!el) return;
-    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
-    setUserScrolledUp(!atBottom);
-  }, []);
+  const isVirtualized = virtualize != null && virtualize !== false;
+  const virtualizeOpts = virtualize === true ? {} : !isVirtualized ? false : virtualize;
+  const virtual = useVirtualMessages(
+    messages,
+    virtualizeOpts || void 0
+  );
+  const handleScroll = useCallback(
+    (e) => {
+      if (isVirtualized) {
+        virtual.onScroll(e);
+      }
+      if (isScrollingProgrammatically.current) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
+      setUserScrolledUp(!atBottom);
+    },
+    [isVirtualized, virtual.onScroll]
+  );
   const scrollToBottom = useCallback(() => {
     isScrollingProgrammatically.current = true;
     sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -831,11 +907,23 @@ function Thread({
     sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, autoScroll, userScrolledUp]);
   const slots = useOptionalThreadSlots();
+  const mergedRef = useCallback(
+    (el) => {
+      containerRef.current = el;
+      if (isVirtualized) {
+        virtual.containerRef(el);
+      }
+    },
+    [isVirtualized, virtual.containerRef]
+  );
   const attrs = { "data-thread": "true", className };
   if (isGenerating) {
     attrs["data-thread-loading"] = "true";
   }
-  attrs.ref = containerRef;
+  if (virtualizeOpts) {
+    attrs["data-thread-virtualized"] = "true";
+  }
+  attrs.ref = mergedRef;
   attrs.onScroll = handleScroll;
   const children = [];
   if (messages.length === 0 && !isGenerating) {
@@ -847,9 +935,21 @@ function Thread({
       )
     );
   }
-  for (let i = 0; i < messages.length; i++) {
-    const msg = messages[i];
-    const content = slots?.renderMessage ? slots.renderMessage(msg, i) : createElement(Message, {
+  const renderMessages = virtualizeOpts ? virtual.visibleItems : messages;
+  const startOffset = virtualizeOpts ? virtual.startIndex : 0;
+  if (virtualizeOpts && virtual.topSpacerHeight > 0) {
+    children.push(
+      createElement("div", {
+        key: "__virtual-top",
+        "data-virtual-spacer": "top",
+        style: { height: virtual.topSpacerHeight }
+      })
+    );
+  }
+  for (let i = 0; i < renderMessages.length; i++) {
+    const msg = renderMessages[i];
+    const originalIndex = startOffset + i;
+    const content = slots?.renderMessage ? slots.renderMessage(msg, originalIndex) : createElement(Message, {
       key: msg.id,
       message: msg,
       renderToolCall: slots?.renderToolCall,
@@ -863,6 +963,15 @@ function Thread({
       )
     );
   }
+  if (virtualizeOpts && virtual.bottomSpacerHeight > 0) {
+    children.push(
+      createElement("div", {
+        key: "__virtual-bottom",
+        "data-virtual-spacer": "bottom",
+        style: { height: virtual.bottomSpacerHeight }
+      })
+    );
+  }
   if (isGenerating) {
     children.push(
       createElement(
@@ -3541,7 +3650,100 @@ function ChatUI({ runtime, ...rest }) {
     children: createElement(ChatUIInner, rest)
   });
 }
+function PermissionDialog({
+  requests,
+  onApprove,
+  onDeny,
+  onApproveAll,
+  onDenyAll,
+  renderArgs,
+  className
+}) {
+  if (requests.length === 0) return null;
+  const items = requests.map(
+    (req) => createElement(
+      "div",
+      {
+        key: req.toolCallId,
+        "data-permission-request": "true",
+        "data-tool-name": req.toolName
+      },
+      // Tool name
+      createElement(
+        "div",
+        { "data-permission-tool-name": "true" },
+        req.toolName
+      ),
+      // Arguments display
+      createElement(
+        "div",
+        { "data-permission-tool-args": "true" },
+        renderArgs ? renderArgs(req.toolArgs, req.toolName) : createElement("pre", null, JSON.stringify(req.toolArgs, null, 2))
+      ),
+      // Action buttons
+      createElement(
+        "div",
+        { "data-permission-actions": "true" },
+        createElement(
+          "button",
+          {
+            type: "button",
+            "data-action": "approve",
+            onClick: () => onApprove(req.toolCallId),
+            "aria-label": `Approve ${req.toolName}`
+          },
+          "Allow"
+        ),
+        createElement(
+          "button",
+          {
+            type: "button",
+            "data-action": "deny",
+            onClick: () => onDeny(req.toolCallId),
+            "aria-label": `Deny ${req.toolName}`
+          },
+          "Deny"
+        )
+      )
+    )
+  );
+  const bulkActions = requests.length > 1 && (onApproveAll || onDenyAll) ? createElement(
+    "div",
+    { "data-permission-bulk-actions": "true" },
+    onApproveAll ? createElement(
+      "button",
+      {
+        type: "button",
+        "data-action": "approve-all",
+        onClick: onApproveAll,
+        "aria-label": "Approve all tool calls"
+      },
+      "Allow All"
+    ) : null,
+    onDenyAll ? createElement(
+      "button",
+      {
+        type: "button",
+        "data-action": "deny-all",
+        onClick: onDenyAll,
+        "aria-label": "Deny all tool calls"
+      },
+      "Deny All"
+    ) : null
+  ) : null;
+  return createElement(
+    "div",
+    {
+      "data-permission-dialog": "true",
+      role: "dialog",
+      "aria-label": "Tool permission requests",
+      className
+    },
+    ...items,
+    bulkActions
+  );
+}
 
-export { BackendSelector, ChatHeader, ChatInputArea, ChatLayout, ChatProvider, ChatSettingsOverlay, ChatUI, ClaudeAuthForm, Composer, ContextStatsDisplay, CopilotAuthForm, MarkdownRenderer, Message, ModelSelector, ProviderModelSelector, ProviderSelector, ProviderSettings, RemoteChatClient, ThinkingBlock, Thread, ThreadList, ThreadProvider, ToolCallView, UsageBadge, VercelAIAuthForm, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval };
+export { BackendSelector, ChatHeader, ChatInputArea, ChatLayout, ChatProvider, ChatSettingsOverlay, ChatUI, ClaudeAuthForm, Composer, ContextStatsDisplay, CopilotAuthForm, MarkdownRenderer, Message, ModelSelector, PermissionDialog, ProviderModelSelector, ProviderSelector, ProviderSettings, RemoteChatClient, ThinkingBlock, Thread, ThreadList, ThreadProvider, ToolCallView, UsageBadge, VercelAIAuthForm, useApiKeyAuth, useBackends, useChat, useChatRuntime, useClaudeAuth, useCopilotAuth, useMessages, useModels, useOptionalThreadSlots, useProviders, useRemoteAuth, useRemoteChat, useSSE, useSessions, useThreadSlots, useToolApproval, useVirtualMessages };
 //# sourceMappingURL=react.js.map
 //# sourceMappingURL=react.js.map