@sandbox-agent/react 0.3.1 → 0.4.0-rc.1

package/dist/index.d.ts

@@ -1,6 +1,180 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { CSSProperties } from 'react';
+import * as react from 'react';
+import { RefObject, ReactNode, KeyboardEvent, Ref, TextareaHTMLAttributes, CSSProperties } from 'react';
 import { SandboxAgent, TerminalExitStatus, TerminalErrorStatus } from 'sandbox-agent';
+import * as _tanstack_react_virtual from '@tanstack/react-virtual';
+
+type PermissionReply = "once" | "always" | "reject";
+type PermissionOption = {
+    optionId: string;
+    name: string;
+    kind: string;
+};
+type TranscriptEntry = {
+    id: string;
+    eventId?: string;
+    kind: "message" | "tool" | "meta" | "reasoning" | "permission";
+    time: string;
+    role?: "user" | "assistant";
+    text?: string;
+    toolName?: string;
+    toolInput?: string;
+    toolOutput?: string;
+    toolStatus?: string;
+    reasoning?: {
+        text: string;
+        visibility?: string;
+    };
+    meta?: {
+        title: string;
+        detail?: string;
+        severity?: "info" | "error";
+    };
+    permission?: {
+        permissionId: string;
+        title: string;
+        description?: string;
+        options: PermissionOption[];
+        resolved?: boolean;
+        selectedOptionId?: string;
+    };
+};
+interface AgentTranscriptClassNames {
+    root: string;
+    divider: string;
+    dividerLine: string;
+    dividerText: string;
+    message: string;
+    messageContent: string;
+    messageText: string;
+    error: string;
+    toolGroupSingle: string;
+    toolGroupContainer: string;
+    toolGroupHeader: string;
+    toolGroupIcon: string;
+    toolGroupLabel: string;
+    toolGroupChevron: string;
+    toolGroupBody: string;
+    toolItem: string;
+    toolItemConnector: string;
+    toolItemDot: string;
+    toolItemLine: string;
+    toolItemContent: string;
+    toolItemHeader: string;
+    toolItemIcon: string;
+    toolItemLabel: string;
+    toolItemSpinner: string;
+    toolItemLink: string;
+    toolItemChevron: string;
+    toolItemBody: string;
+    toolSection: string;
+    toolSectionTitle: string;
+    toolCode: string;
+    toolCodeMuted: string;
+    permissionPrompt: string;
+    permissionHeader: string;
+    permissionIcon: string;
+    permissionTitle: string;
+    permissionDescription: string;
+    permissionActions: string;
+    permissionButton: string;
+    permissionAutoResolved: string;
+    thinkingRow: string;
+    thinkingAvatar: string;
+    thinkingAvatarImage: string;
+    thinkingAvatarLabel: string;
+    thinkingIndicator: string;
+    thinkingDot: string;
+    endAnchor: string;
+}
+interface PermissionOptionRenderContext {
+    entry: TranscriptEntry;
+    option: PermissionOption;
+    label: string;
+    reply: PermissionReply;
+    selected: boolean;
+    dimmed: boolean;
+    resolved: boolean;
+}
+interface AgentTranscriptProps {
+    entries: TranscriptEntry[];
+    className?: string;
+    classNames?: Partial<AgentTranscriptClassNames>;
+    endRef?: RefObject<HTMLDivElement>;
+    scrollRef?: RefObject<HTMLDivElement>;
+    scrollToEntryId?: string | null;
+    sessionError?: string | null;
+    eventError?: string | null;
+    isThinking?: boolean;
+    agentId?: string;
+    virtualize?: boolean;
+    onAtBottomChange?: (atBottom: boolean) => void;
+    onEventClick?: (eventId: string) => void;
+    onPermissionReply?: (permissionId: string, reply: PermissionReply) => void;
+    isDividerEntry?: (entry: TranscriptEntry) => boolean;
+    canOpenEvent?: (entry: TranscriptEntry) => boolean;
+    getToolGroupSummary?: (entries: TranscriptEntry[]) => string;
+    renderMessageText?: (entry: TranscriptEntry) => ReactNode;
+    renderInlinePendingIndicator?: () => ReactNode;
+    renderThinkingState?: (context: {
+        agentId?: string;
+    }) => ReactNode;
+    renderToolItemIcon?: (entry: TranscriptEntry) => ReactNode;
+    renderToolGroupIcon?: (entries: TranscriptEntry[], expanded: boolean) => ReactNode;
+    renderChevron?: (expanded: boolean) => ReactNode;
+    renderEventLinkContent?: (entry: TranscriptEntry) => ReactNode;
+    renderPermissionIcon?: (entry: TranscriptEntry) => ReactNode;
+    renderPermissionOptionContent?: (context: PermissionOptionRenderContext) => ReactNode;
+}
+declare const AgentTranscript: ({ entries, className, classNames: classNameOverrides, endRef, scrollRef, scrollToEntryId, sessionError, eventError, isThinking, agentId, virtualize, onAtBottomChange, onEventClick, onPermissionReply, isDividerEntry, canOpenEvent, getToolGroupSummary, renderMessageText, renderInlinePendingIndicator, renderThinkingState, renderToolItemIcon, renderToolGroupIcon, renderChevron, renderEventLinkContent, renderPermissionIcon, renderPermissionOptionContent, }: AgentTranscriptProps) => react_jsx_runtime.JSX.Element;
+
+interface ChatComposerClassNames {
+    root: string;
+    form: string;
+    input: string;
+    submit: string;
+    submitContent: string;
+}
+interface ChatComposerProps {
+    message: string;
+    onMessageChange: (value: string) => void;
+    onSubmit: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    submitDisabled?: boolean;
+    allowEmptySubmit?: boolean;
+    submitLabel?: string;
+    className?: string;
+    classNames?: Partial<ChatComposerClassNames>;
+    inputRef?: Ref<HTMLTextAreaElement>;
+    rows?: number;
+    textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className" | "disabled" | "onChange" | "onKeyDown" | "placeholder" | "rows" | "value">;
+    renderSubmitContent?: () => ReactNode;
+    renderFooter?: () => ReactNode;
+}
+declare const ChatComposer: ({ message, onMessageChange, onSubmit, onKeyDown, placeholder, disabled, submitDisabled, allowEmptySubmit, submitLabel, className, classNames: classNameOverrides, inputRef, rows, textareaProps, renderSubmitContent, renderFooter, }: ChatComposerProps) => react_jsx_runtime.JSX.Element;
+
+interface AgentConversationClassNames {
+    root: string;
+    transcript: string;
+    emptyState: string;
+    composer: string;
+}
+interface AgentConversationProps {
+    entries: TranscriptEntry[];
+    className?: string;
+    classNames?: Partial<AgentConversationClassNames>;
+    emptyState?: ReactNode;
+    transcriptClassName?: string;
+    transcriptClassNames?: Partial<AgentTranscriptClassNames>;
+    scrollRef?: RefObject<HTMLDivElement>;
+    composerClassName?: string;
+    composerClassNames?: Partial<ChatComposerClassNames>;
+    transcriptProps?: Omit<AgentTranscriptProps, "entries" | "className" | "classNames" | "scrollRef">;
+    composerProps?: Omit<ChatComposerProps, "className" | "classNames">;
+}
+declare const AgentConversation: ({ entries, className, classNames: classNameOverrides, emptyState, transcriptClassName, transcriptClassNames, scrollRef, composerClassName, composerClassNames, transcriptProps, composerProps, }: AgentConversationProps) => react_jsx_runtime.JSX.Element;
 
 type ProcessTerminalClient = Pick<SandboxAgent, "connectProcessTerminal">;
 interface ProcessTerminalProps {
@@ -9,10 +183,17 @@ interface ProcessTerminalProps {
     className?: string;
     style?: CSSProperties;
     terminalStyle?: CSSProperties;
+    statusBarStyleOverride?: CSSProperties;
     height?: number | string;
+    showStatusBar?: boolean;
     onExit?: (status: TerminalExitStatus) => void;
     onError?: (error: TerminalErrorStatus | Error) => void;
 }
-declare const ProcessTerminal: ({ client, processId, className, style, terminalStyle, height, onExit, onError, }: ProcessTerminalProps) => react_jsx_runtime.JSX.Element;
+declare const ProcessTerminal: ({ client, processId, className, style, terminalStyle, statusBarStyleOverride, height, showStatusBar, onExit, onError, }: ProcessTerminalProps) => react_jsx_runtime.JSX.Element;
+
+declare function useTranscriptVirtualizer<T>(items: T[], scrollElementRef?: RefObject<HTMLDivElement>, onAtBottomChange?: (atBottom: boolean) => void): {
+    virtualizer: _tanstack_react_virtual.Virtualizer<HTMLDivElement, Element>;
+    isFollowingRef: react.MutableRefObject<boolean>;
+};
 
-export { ProcessTerminal, type ProcessTerminalClient, type ProcessTerminalProps };
+export { AgentConversation, type AgentConversationClassNames, type AgentConversationProps, AgentTranscript, type AgentTranscriptClassNames, type AgentTranscriptProps, ChatComposer, type ChatComposerClassNames, type ChatComposerProps, type PermissionOption, type PermissionOptionRenderContext, type PermissionReply, ProcessTerminal, type ProcessTerminalClient, type ProcessTerminalProps, type TranscriptEntry, useTranscriptVirtualizer };

package/dist/index.js

@@ -1,6 +1,787 @@
-// src/ProcessTerminal.tsx
-import { useEffect, useRef, useState } from "react";
+// src/AgentTranscript.tsx
+import { useEffect as useEffect2, useMemo, useRef as useRef2, useState } from "react";
+
+// src/useTranscriptVirtualizer.ts
+import { useEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+function useTranscriptVirtualizer(items, scrollElementRef, onAtBottomChange) {
+  const isFollowingRef = useRef(true);
+  const virtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => scrollElementRef?.current ?? null,
+    estimateSize: () => 80,
+    measureElement: (element) => element.getBoundingClientRect().height,
+    overscan: 10
+  });
+  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => isFollowingRef.current;
+  useEffect(() => {
+    const scrollElement = scrollElementRef?.current;
+    if (!scrollElement) {
+      return;
+    }
+    const updateFollowState = () => {
+      const atBottom = scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight < 50;
+      isFollowingRef.current = atBottom;
+      onAtBottomChange?.(atBottom);
+    };
+    updateFollowState();
+    scrollElement.addEventListener("scroll", updateFollowState, { passive: true });
+    return () => {
+      scrollElement.removeEventListener("scroll", updateFollowState);
+    };
+  }, [onAtBottomChange, scrollElementRef]);
+  useEffect(() => {
+    if (!isFollowingRef.current || items.length === 0) {
+      return;
+    }
+    const frameId = requestAnimationFrame(() => {
+      virtualizer.scrollToIndex(items.length - 1, {
+        align: "end",
+        behavior: "smooth"
+      });
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [items.length, virtualizer]);
+  return { virtualizer, isFollowingRef };
+}
+
+// src/AgentTranscript.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var VIRTUAL_GROUP_GAP_PX = 12;
+var DEFAULT_CLASS_NAMES = {
+  root: "sa-agent-transcript",
+  divider: "sa-agent-transcript-divider",
+  dividerLine: "sa-agent-transcript-divider-line",
+  dividerText: "sa-agent-transcript-divider-text",
+  message: "sa-agent-transcript-message",
+  messageContent: "sa-agent-transcript-message-content",
+  messageText: "sa-agent-transcript-message-text",
+  error: "sa-agent-transcript-error",
+  toolGroupSingle: "sa-agent-transcript-tool-group-single",
+  toolGroupContainer: "sa-agent-transcript-tool-group",
+  toolGroupHeader: "sa-agent-transcript-tool-group-header",
+  toolGroupIcon: "sa-agent-transcript-tool-group-icon",
+  toolGroupLabel: "sa-agent-transcript-tool-group-label",
+  toolGroupChevron: "sa-agent-transcript-tool-group-chevron",
+  toolGroupBody: "sa-agent-transcript-tool-group-body",
+  toolItem: "sa-agent-transcript-tool-item",
+  toolItemConnector: "sa-agent-transcript-tool-item-connector",
+  toolItemDot: "sa-agent-transcript-tool-item-dot",
+  toolItemLine: "sa-agent-transcript-tool-item-line",
+  toolItemContent: "sa-agent-transcript-tool-item-content",
+  toolItemHeader: "sa-agent-transcript-tool-item-header",
+  toolItemIcon: "sa-agent-transcript-tool-item-icon",
+  toolItemLabel: "sa-agent-transcript-tool-item-label",
+  toolItemSpinner: "sa-agent-transcript-tool-item-spinner",
+  toolItemLink: "sa-agent-transcript-tool-item-link",
+  toolItemChevron: "sa-agent-transcript-tool-item-chevron",
+  toolItemBody: "sa-agent-transcript-tool-item-body",
+  toolSection: "sa-agent-transcript-tool-section",
+  toolSectionTitle: "sa-agent-transcript-tool-section-title",
+  toolCode: "sa-agent-transcript-tool-code",
+  toolCodeMuted: "sa-agent-transcript-tool-code-muted",
+  permissionPrompt: "sa-agent-transcript-permission-prompt",
+  permissionHeader: "sa-agent-transcript-permission-header",
+  permissionIcon: "sa-agent-transcript-permission-icon",
+  permissionTitle: "sa-agent-transcript-permission-title",
+  permissionDescription: "sa-agent-transcript-permission-description",
+  permissionActions: "sa-agent-transcript-permission-actions",
+  permissionButton: "sa-agent-transcript-permission-button",
+  permissionAutoResolved: "sa-agent-transcript-permission-auto-resolved",
+  thinkingRow: "sa-agent-transcript-thinking-row",
+  thinkingAvatar: "sa-agent-transcript-thinking-avatar",
+  thinkingAvatarImage: "sa-agent-transcript-thinking-avatar-image",
+  thinkingAvatarLabel: "sa-agent-transcript-thinking-avatar-label",
+  thinkingIndicator: "sa-agent-transcript-thinking-indicator",
+  thinkingDot: "sa-agent-transcript-thinking-dot",
+  endAnchor: "sa-agent-transcript-end"
+};
+var DEFAULT_DIVIDER_TITLES = /* @__PURE__ */ new Set(["Session Started", "Turn Started", "Turn Ended"]);
+var cx = (...values) => values.filter(Boolean).join(" ");
+var mergeClassNames = (defaults, overrides) => ({
+  root: cx(defaults.root, overrides?.root),
+  divider: cx(defaults.divider, overrides?.divider),
+  dividerLine: cx(defaults.dividerLine, overrides?.dividerLine),
+  dividerText: cx(defaults.dividerText, overrides?.dividerText),
+  message: cx(defaults.message, overrides?.message),
+  messageContent: cx(defaults.messageContent, overrides?.messageContent),
+  messageText: cx(defaults.messageText, overrides?.messageText),
+  error: cx(defaults.error, overrides?.error),
+  toolGroupSingle: cx(defaults.toolGroupSingle, overrides?.toolGroupSingle),
+  toolGroupContainer: cx(defaults.toolGroupContainer, overrides?.toolGroupContainer),
+  toolGroupHeader: cx(defaults.toolGroupHeader, overrides?.toolGroupHeader),
+  toolGroupIcon: cx(defaults.toolGroupIcon, overrides?.toolGroupIcon),
+  toolGroupLabel: cx(defaults.toolGroupLabel, overrides?.toolGroupLabel),
+  toolGroupChevron: cx(defaults.toolGroupChevron, overrides?.toolGroupChevron),
+  toolGroupBody: cx(defaults.toolGroupBody, overrides?.toolGroupBody),
+  toolItem: cx(defaults.toolItem, overrides?.toolItem),
+  toolItemConnector: cx(defaults.toolItemConnector, overrides?.toolItemConnector),
+  toolItemDot: cx(defaults.toolItemDot, overrides?.toolItemDot),
+  toolItemLine: cx(defaults.toolItemLine, overrides?.toolItemLine),
+  toolItemContent: cx(defaults.toolItemContent, overrides?.toolItemContent),
+  toolItemHeader: cx(defaults.toolItemHeader, overrides?.toolItemHeader),
+  toolItemIcon: cx(defaults.toolItemIcon, overrides?.toolItemIcon),
+  toolItemLabel: cx(defaults.toolItemLabel, overrides?.toolItemLabel),
+  toolItemSpinner: cx(defaults.toolItemSpinner, overrides?.toolItemSpinner),
+  toolItemLink: cx(defaults.toolItemLink, overrides?.toolItemLink),
+  toolItemChevron: cx(defaults.toolItemChevron, overrides?.toolItemChevron),
+  toolItemBody: cx(defaults.toolItemBody, overrides?.toolItemBody),
+  toolSection: cx(defaults.toolSection, overrides?.toolSection),
+  toolSectionTitle: cx(defaults.toolSectionTitle, overrides?.toolSectionTitle),
+  toolCode: cx(defaults.toolCode, overrides?.toolCode),
+  toolCodeMuted: cx(defaults.toolCodeMuted, overrides?.toolCodeMuted),
+  permissionPrompt: cx(defaults.permissionPrompt, overrides?.permissionPrompt),
+  permissionHeader: cx(defaults.permissionHeader, overrides?.permissionHeader),
+  permissionIcon: cx(defaults.permissionIcon, overrides?.permissionIcon),
+  permissionTitle: cx(defaults.permissionTitle, overrides?.permissionTitle),
+  permissionDescription: cx(defaults.permissionDescription, overrides?.permissionDescription),
+  permissionActions: cx(defaults.permissionActions, overrides?.permissionActions),
+  permissionButton: cx(defaults.permissionButton, overrides?.permissionButton),
+  permissionAutoResolved: cx(defaults.permissionAutoResolved, overrides?.permissionAutoResolved),
+  thinkingRow: cx(defaults.thinkingRow, overrides?.thinkingRow),
+  thinkingAvatar: cx(defaults.thinkingAvatar, overrides?.thinkingAvatar),
+  thinkingAvatarImage: cx(defaults.thinkingAvatarImage, overrides?.thinkingAvatarImage),
+  thinkingAvatarLabel: cx(defaults.thinkingAvatarLabel, overrides?.thinkingAvatarLabel),
+  thinkingIndicator: cx(defaults.thinkingIndicator, overrides?.thinkingIndicator),
+  thinkingDot: cx(defaults.thinkingDot, overrides?.thinkingDot),
+  endAnchor: cx(defaults.endAnchor, overrides?.endAnchor)
+});
+var getMessageVariant = (entry) => {
+  if (entry.kind === "tool") return "tool";
+  if (entry.kind === "meta") return entry.meta?.severity === "error" ? "error" : "system";
+  if (entry.kind === "reasoning") return "assistant";
+  if (entry.kind === "permission") return "system";
+  if (entry.role === "user") return "user";
+  return "assistant";
+};
+var getToolItemLabel = (entry) => {
+  if (entry.kind === "tool") {
+    const statusLabel = entry.toolStatus && entry.toolStatus !== "completed" ? ` (${entry.toolStatus.replaceAll("_", " ")})` : "";
+    return `${entry.toolName ?? "tool"}${statusLabel}`;
+  }
+  if (entry.kind === "reasoning") {
+    return `Reasoning${entry.reasoning?.visibility ? ` (${entry.reasoning.visibility})` : ""}`;
+  }
+  return entry.meta?.title ?? "Status";
+};
+var getDefaultToolItemIcon = (entry) => {
+  if (entry.kind === "tool") return "Tool";
+  if (entry.kind === "reasoning") return "Thought";
+  return entry.meta?.severity === "error" ? "Error" : "Info";
+};
+var getDefaultToolGroupSummary = (entries) => {
+  const count = entries.length;
+  return `${count} Event${count === 1 ? "" : "s"}`;
+};
+var getPermissionReplyForOption = (kind) => {
+  if (kind === "allow_once") return "once";
+  if (kind === "allow_always") return "always";
+  return "reject";
+};
+var getPermissionOptionLabel = (option) => {
+  if (option.name) return option.name;
+  if (option.kind === "allow_once") return "Allow Once";
+  if (option.kind === "allow_always") return "Always Allow";
+  if (option.kind === "reject_once") return "Reject";
+  if (option.kind === "reject_always") return "Reject Always";
+  return option.kind;
+};
+var getPermissionOptionTone = (kind) => kind.startsWith("allow") ? "allow" : "reject";
+var defaultRenderMessageText = (entry) => entry.text;
+var defaultRenderPendingIndicator = () => "...";
+var defaultRenderChevron = (expanded) => expanded ? "\u25BE" : "\u25B8";
+var defaultRenderEventLinkContent = () => "Open";
+var defaultRenderPermissionIcon = () => "Permission";
+var defaultRenderPermissionOptionContent = ({ label }) => label;
+var defaultIsDividerEntry = (entry) => entry.kind === "meta" && DEFAULT_DIVIDER_TITLES.has(entry.meta?.title ?? "");
+var defaultCanOpenEvent = (entry) => Boolean(entry.eventId);
+var buildGroupedEntries = (entries, isDividerEntry) => {
+  const groupedEntries = [];
+  let currentToolGroup = [];
+  const flushToolGroup = () => {
+    if (currentToolGroup.length === 0) {
+      return;
+    }
+    groupedEntries.push({ type: "tool-group", entries: currentToolGroup });
+    currentToolGroup = [];
+  };
+  for (const entry of entries) {
+    if (isDividerEntry(entry)) {
+      flushToolGroup();
+      groupedEntries.push({ type: "divider", entries: [entry] });
+      continue;
+    }
+    if (entry.kind === "permission") {
+      flushToolGroup();
+      groupedEntries.push({ type: "permission", entries: [entry] });
+      continue;
+    }
+    if (entry.kind === "tool" || entry.kind === "reasoning" || entry.kind === "meta") {
+      currentToolGroup.push(entry);
+      continue;
+    }
+    flushToolGroup();
+    groupedEntries.push({ type: "message", entries: [entry] });
+  }
+  flushToolGroup();
+  return groupedEntries;
+};
+var getGroupedEntryKey = (group, index) => {
+  const firstEntry = group.entries[0];
+  if (group.type === "tool-group") {
+    return `tool-group:${firstEntry?.id ?? index}`;
+  }
+  return firstEntry?.id ?? `${group.type}:${index}`;
+};
+var ToolItem = ({
+  entry,
+  isLast,
+  expanded,
+  onExpandedChange,
+  classNames,
+  onEventClick,
+  canOpenEvent,
+  renderInlinePendingIndicator,
+  renderToolItemIcon,
+  renderChevron,
+  renderEventLinkContent
+}) => {
+  const isTool = entry.kind === "tool";
+  const isReasoning = entry.kind === "reasoning";
+  const isMeta = entry.kind === "meta";
+  const isComplete = isTool && (entry.toolStatus === "completed" || entry.toolStatus === "failed");
+  const isFailed = isTool && entry.toolStatus === "failed";
+  const isInProgress = isTool && entry.toolStatus === "in_progress";
+  const hasContent = isTool ? Boolean(entry.toolInput || entry.toolOutput) : isReasoning ? Boolean(entry.reasoning?.text?.trim()) : Boolean(entry.meta?.detail?.trim());
+  const showEventLink = Boolean(entry.eventId && onEventClick && canOpenEvent(entry));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(classNames.toolItem, isLast && "last", isFailed && "failed"),
+      "data-slot": "tool-item",
+      "data-kind": entry.kind,
+      "data-state": entry.toolStatus,
+      "data-last": isLast ? "true" : void 0,
+      "data-failed": isFailed ? "true" : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: classNames.toolItemConnector, "data-slot": "tool-item-connector", children: [
+          /* @__PURE__ */ jsx("div", { className: classNames.toolItemDot, "data-slot": "tool-item-dot" }),
+          !isLast ? /* @__PURE__ */ jsx("div", { className: classNames.toolItemLine, "data-slot": "tool-item-line" }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: classNames.toolItemContent, "data-slot": "tool-item-content", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cx(classNames.toolItemHeader, expanded && "expanded"),
+              "data-slot": "tool-item-header",
+              "data-expanded": expanded ? "true" : void 0,
+              "data-has-content": hasContent ? "true" : void 0,
+              disabled: !hasContent,
+              onClick: () => {
+                if (hasContent) {
+                  onExpandedChange(!expanded);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: classNames.toolItemIcon, "data-slot": "tool-item-icon", children: renderToolItemIcon(entry) }),
+                /* @__PURE__ */ jsx("span", { className: classNames.toolItemLabel, "data-slot": "tool-item-label", children: getToolItemLabel(entry) }),
+                isInProgress ? /* @__PURE__ */ jsx("span", { className: classNames.toolItemSpinner, "data-slot": "tool-item-spinner", children: renderInlinePendingIndicator() }) : null,
+                showEventLink ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: classNames.toolItemLink,
+                    "data-slot": "tool-item-link",
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      onEventClick?.(entry.eventId);
+                    },
+                    onKeyDown: (event) => {
+                      if (event.key === "Enter" || event.key === " ") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onEventClick?.(entry.eventId);
+                      }
+                    },
+                    children: renderEventLinkContent(entry)
+                  }
+                ) : null,
+                hasContent ? /* @__PURE__ */ jsx("span", { className: classNames.toolItemChevron, "data-slot": "tool-item-chevron", children: renderChevron(expanded) }) : null
+              ]
+            }
+          ),
+          expanded && hasContent ? /* @__PURE__ */ jsxs("div", { className: classNames.toolItemBody, "data-slot": "tool-item-body", children: [
+            isTool && entry.toolInput ? /* @__PURE__ */ jsxs("div", { className: classNames.toolSection, "data-slot": "tool-section", "data-section": "input", children: [
+              /* @__PURE__ */ jsx("div", { className: classNames.toolSectionTitle, "data-slot": "tool-section-title", children: "Input" }),
+              /* @__PURE__ */ jsx("pre", { className: classNames.toolCode, "data-slot": "tool-code", children: entry.toolInput })
+            ] }) : null,
+            isTool && isComplete && entry.toolOutput ? /* @__PURE__ */ jsxs("div", { className: classNames.toolSection, "data-slot": "tool-section", "data-section": "output", children: [
+              /* @__PURE__ */ jsx("div", { className: classNames.toolSectionTitle, "data-slot": "tool-section-title", children: "Output" }),
+              /* @__PURE__ */ jsx("pre", { className: classNames.toolCode, "data-slot": "tool-code", children: entry.toolOutput })
+            ] }) : null,
+            isReasoning && entry.reasoning?.text ? /* @__PURE__ */ jsx("div", { className: classNames.toolSection, "data-slot": "tool-section", "data-section": "reasoning", children: /* @__PURE__ */ jsx("pre", { className: cx(classNames.toolCode, classNames.toolCodeMuted), "data-slot": "tool-code", children: entry.reasoning.text }) }) : null,
+            isMeta && entry.meta?.detail ? /* @__PURE__ */ jsx("div", { className: classNames.toolSection, "data-slot": "tool-section", "data-section": "meta", children: /* @__PURE__ */ jsx("pre", { className: classNames.toolCode, "data-slot": "tool-code", children: entry.meta.detail }) }) : null
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+};
+var ToolGroup = ({
+  entries,
+  expanded,
+  onExpandedChange,
+  expandedItemIds,
+  onToolItemExpandedChange,
+  classNames,
+  onEventClick,
+  canOpenEvent,
+  getToolGroupSummary,
+  renderInlinePendingIndicator,
+  renderToolItemIcon,
+  renderToolGroupIcon,
+  renderChevron,
+  renderEventLinkContent
+}) => {
+  const hasFailed = entries.some((entry) => entry.kind === "tool" && entry.toolStatus === "failed");
+  if (entries.length === 1) {
+    return /* @__PURE__ */ jsx("div", { className: classNames.toolGroupSingle, "data-slot": "tool-group-single", children: /* @__PURE__ */ jsx(
+      ToolItem,
+      {
+        entry: entries[0],
+        isLast: true,
+        expanded: Boolean(expandedItemIds[entries[0].id]),
+        onExpandedChange: (nextExpanded) => onToolItemExpandedChange(entries[0].id, nextExpanded),
+        classNames,
+        onEventClick,
+        canOpenEvent,
+        renderInlinePendingIndicator,
+        renderToolItemIcon,
+        renderChevron,
+        renderEventLinkContent
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx(classNames.toolGroupContainer, hasFailed && "failed"), "data-slot": "tool-group", "data-failed": hasFailed ? "true" : void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cx(classNames.toolGroupHeader, expanded && "expanded"),
+        "data-slot": "tool-group-header",
+        "data-expanded": expanded ? "true" : void 0,
+        onClick: () => onExpandedChange(!expanded),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: classNames.toolGroupIcon, "data-slot": "tool-group-icon", children: renderToolGroupIcon(entries, expanded) }),
+          /* @__PURE__ */ jsx("span", { className: classNames.toolGroupLabel, "data-slot": "tool-group-label", children: getToolGroupSummary(entries) }),
+          /* @__PURE__ */ jsx("span", { className: classNames.toolGroupChevron, "data-slot": "tool-group-chevron", children: renderChevron(expanded) })
+        ]
+      }
+    ),
+    expanded ? /* @__PURE__ */ jsx("div", { className: classNames.toolGroupBody, "data-slot": "tool-group-body", children: entries.map((entry, index) => /* @__PURE__ */ jsx(
+      ToolItem,
+      {
+        entry,
+        isLast: index === entries.length - 1,
+        expanded: Boolean(expandedItemIds[entry.id]),
+        onExpandedChange: (nextExpanded) => onToolItemExpandedChange(entry.id, nextExpanded),
+        classNames,
+        onEventClick,
+        canOpenEvent,
+        renderInlinePendingIndicator,
+        renderToolItemIcon,
+        renderChevron,
+        renderEventLinkContent
+      },
+      entry.id
+    )) }) : null
+  ] });
+};
+var PermissionPrompt = ({
+  entry,
+  classNames,
+  onPermissionReply,
+  renderPermissionIcon,
+  renderPermissionOptionContent
+}) => {
+  const permission = entry.permission;
+  if (!permission) {
+    return null;
+  }
+  const resolved = Boolean(permission.resolved);
+  const selectedOptionId = permission.selectedOptionId;
+  const canReply = Boolean(onPermissionReply) && !resolved;
+  return /* @__PURE__ */ jsxs("div", { className: cx(classNames.permissionPrompt, resolved && "resolved"), "data-slot": "permission-prompt", "data-resolved": resolved ? "true" : void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: classNames.permissionHeader, "data-slot": "permission-header", children: [
+      /* @__PURE__ */ jsx("span", { className: classNames.permissionIcon, "data-slot": "permission-icon", children: renderPermissionIcon(entry) }),
+      /* @__PURE__ */ jsx("span", { className: classNames.permissionTitle, "data-slot": "permission-title", children: permission.title })
+    ] }),
+    permission.description ? /* @__PURE__ */ jsx("div", { className: classNames.permissionDescription, "data-slot": "permission-description", children: permission.description }) : null,
+    /* @__PURE__ */ jsxs("div", { className: classNames.permissionActions, "data-slot": "permission-actions", children: [
+      permission.options.map((option) => {
+        const reply = getPermissionReplyForOption(option.kind);
+        const label = getPermissionOptionLabel(option);
+        const selected = resolved && selectedOptionId === option.optionId;
+        const dimmed = resolved && !selected && selectedOptionId != null;
+        const tone = getPermissionOptionTone(option.kind);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(classNames.permissionButton, tone, selected && "selected", dimmed && "dimmed"),
+            "data-slot": "permission-button",
+            "data-tone": tone,
+            "data-selected": selected ? "true" : void 0,
+            "data-dimmed": dimmed ? "true" : void 0,
+            disabled: !canReply,
+            onClick: () => onPermissionReply?.(permission.permissionId, reply),
+            children: renderPermissionOptionContent({
+              entry,
+              option,
+              label,
+              reply,
+              selected,
+              dimmed,
+              resolved
+            })
+          },
+          option.optionId
+        );
+      }),
+      resolved && !selectedOptionId ? /* @__PURE__ */ jsx("span", { className: classNames.permissionAutoResolved, "data-slot": "permission-auto-resolved", children: "Auto-resolved" }) : null
+    ] })
+  ] });
+};
+var AgentTranscript = ({
+  entries,
+  className,
+  classNames: classNameOverrides,
+  endRef,
+  scrollRef,
+  scrollToEntryId,
+  sessionError,
+  eventError,
+  isThinking,
+  agentId,
+  virtualize = false,
+  onAtBottomChange,
+  onEventClick,
+  onPermissionReply,
+  isDividerEntry = defaultIsDividerEntry,
+  canOpenEvent = defaultCanOpenEvent,
+  getToolGroupSummary = getDefaultToolGroupSummary,
+  renderMessageText = defaultRenderMessageText,
+  renderInlinePendingIndicator = defaultRenderPendingIndicator,
+  renderThinkingState,
+  renderToolItemIcon = getDefaultToolItemIcon,
+  renderToolGroupIcon = () => null,
+  renderChevron = defaultRenderChevron,
+  renderEventLinkContent = defaultRenderEventLinkContent,
+  renderPermissionIcon = defaultRenderPermissionIcon,
+  renderPermissionOptionContent = defaultRenderPermissionOptionContent
+}) => {
+  const resolvedClassNames = useMemo(() => mergeClassNames(DEFAULT_CLASS_NAMES, classNameOverrides), [classNameOverrides]);
+  const groupedEntries = useMemo(() => buildGroupedEntries(entries, isDividerEntry), [entries, isDividerEntry]);
+  const [expandedToolGroups, setExpandedToolGroups] = useState({});
+  const [expandedToolItems, setExpandedToolItems] = useState({});
+  const lastScrollTargetRef = useRef2(null);
+  const isVirtualized = virtualize && Boolean(scrollRef);
+  const { virtualizer, isFollowingRef } = useTranscriptVirtualizer(groupedEntries, isVirtualized ? scrollRef : void 0, onAtBottomChange);
+  useEffect2(() => {
+    if (!scrollToEntryId) {
+      lastScrollTargetRef.current = null;
+      return;
+    }
+    if (!isVirtualized || scrollToEntryId === lastScrollTargetRef.current) {
+      return;
+    }
+    const targetIndex = groupedEntries.findIndex((group) => group.entries.some((entry) => entry.id === scrollToEntryId));
+    if (targetIndex < 0) {
+      return;
+    }
+    lastScrollTargetRef.current = scrollToEntryId;
+    const frameId = requestAnimationFrame(() => {
+      virtualizer.scrollToIndex(targetIndex, {
+        align: "center",
+        behavior: "smooth"
+      });
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [groupedEntries, isVirtualized, scrollToEntryId, virtualizer]);
+  useEffect2(() => {
+    if (!isVirtualized || !scrollRef?.current || !isFollowingRef.current) {
+      return;
+    }
+    const scrollElement = scrollRef.current;
+    const frameId = requestAnimationFrame(() => {
+      scrollElement.scrollTo({ top: scrollElement.scrollHeight });
+    });
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [eventError, isFollowingRef, isThinking, isVirtualized, scrollRef, sessionError]);
+  const setToolGroupExpanded = (groupKey, expanded) => {
+    setExpandedToolGroups((current) => {
+      if (current[groupKey] === expanded) {
+        return current;
+      }
+      return { ...current, [groupKey]: expanded };
+    });
+  };
+  const setToolItemExpanded = (entryId, expanded) => {
+    setExpandedToolItems((current) => {
+      if (current[entryId] === expanded) {
+        return current;
+      }
+      return { ...current, [entryId]: expanded };
+    });
+  };
+  const renderGroup = (group, index) => {
+    if (group.type === "divider") {
+      const entry2 = group.entries[0];
+      const title = entry2.meta?.title ?? "Status";
+      return /* @__PURE__ */ jsxs("div", { className: resolvedClassNames.divider, "data-slot": "divider", children: [
+        /* @__PURE__ */ jsx("div", { className: resolvedClassNames.dividerLine, "data-slot": "divider-line" }),
+        /* @__PURE__ */ jsx("span", { className: resolvedClassNames.dividerText, "data-slot": "divider-text", children: title }),
+        /* @__PURE__ */ jsx("div", { className: resolvedClassNames.dividerLine, "data-slot": "divider-line" })
+      ] }, entry2.id);
+    }
+    if (group.type === "tool-group") {
+      const groupKey = getGroupedEntryKey(group, index);
+      return /* @__PURE__ */ jsx(
+        ToolGroup,
+        {
+          entries: group.entries,
+          expanded: Boolean(expandedToolGroups[groupKey]),
+          onExpandedChange: (expanded) => setToolGroupExpanded(groupKey, expanded),
+          expandedItemIds: expandedToolItems,
+          onToolItemExpandedChange: setToolItemExpanded,
+          classNames: resolvedClassNames,
+          onEventClick,
+          canOpenEvent,
+          getToolGroupSummary,
+          renderInlinePendingIndicator,
+          renderToolItemIcon,
+          renderToolGroupIcon,
+          renderChevron,
+          renderEventLinkContent
+        },
+        groupKey
+      );
+    }
+    if (group.type === "permission") {
+      const entry2 = group.entries[0];
+      return /* @__PURE__ */ jsx(
+        PermissionPrompt,
+        {
+          entry: entry2,
+          classNames: resolvedClassNames,
+          onPermissionReply,
+          renderPermissionIcon,
+          renderPermissionOptionContent
+        },
+        entry2.id
+      );
+    }
+    const entry = group.entries[0];
+    const messageVariant = getMessageVariant(entry);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(resolvedClassNames.message, messageVariant, "no-avatar"),
+        "data-slot": "message",
+        "data-kind": entry.kind,
+        "data-role": entry.role,
+        "data-variant": messageVariant,
+        "data-severity": entry.meta?.severity,
+        children: /* @__PURE__ */ jsx("div", { className: resolvedClassNames.messageContent, "data-slot": "message-content", children: entry.text ? /* @__PURE__ */ jsx("div", { className: resolvedClassNames.messageText, "data-slot": "message-text", children: renderMessageText(entry) }) : /* @__PURE__ */ jsx("span", { className: resolvedClassNames.thinkingIndicator, "data-slot": "thinking-indicator", children: renderInlinePendingIndicator() }) })
+      },
+      entry.id
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx(resolvedClassNames.root, className), "data-slot": "root", "data-virtualized": isVirtualized ? "true" : void 0, children: [
+    isVirtualized ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "virtual-list",
+        style: {
+          height: `${virtualizer.getTotalSize()}px`,
+          position: "relative",
+          width: "100%"
+        },
+        children: virtualizer.getVirtualItems().map((virtualItem) => {
+          const group = groupedEntries[virtualItem.index];
+          if (!group) {
+            return null;
+          }
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-index": virtualItem.index,
+              ref: (node) => {
+                if (node) {
+                  virtualizer.measureElement(node);
+                }
+              },
+              style: {
+                left: 0,
+                position: "absolute",
+                top: 0,
+                transform: `translateY(${virtualItem.start}px)`,
+                width: "100%"
+              },
+              children: /* @__PURE__ */ jsx("div", { style: { paddingBottom: virtualItem.index === groupedEntries.length - 1 ? 0 : `${VIRTUAL_GROUP_GAP_PX}px` }, children: renderGroup(group, virtualItem.index) })
+            },
+            getGroupedEntryKey(group, virtualItem.index)
+          );
+        })
+      }
+    ) : groupedEntries.map((group, index) => renderGroup(group, index)),
+    sessionError ? /* @__PURE__ */ jsx("div", { className: resolvedClassNames.error, "data-slot": "error", "data-source": "session", children: sessionError }) : null,
+    eventError ? /* @__PURE__ */ jsx("div", { className: resolvedClassNames.error, "data-slot": "error", "data-source": "event", children: eventError }) : null,
+    isThinking ? renderThinkingState?.({ agentId }) ?? /* @__PURE__ */ jsx("div", { className: resolvedClassNames.thinkingRow, "data-slot": "thinking-row", children: /* @__PURE__ */ jsx("span", { className: resolvedClassNames.thinkingIndicator, "data-slot": "thinking-indicator", children: "Thinking..." }) }) : null,
+    !isVirtualized ? /* @__PURE__ */ jsx("div", { ref: endRef, className: resolvedClassNames.endAnchor, "data-slot": "end-anchor" }) : null
+  ] });
+};
+
+// src/ChatComposer.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_CLASS_NAMES2 = {
+  root: "sa-chat-composer",
+  form: "sa-chat-composer-form",
+  input: "sa-chat-composer-input",
+  submit: "sa-chat-composer-submit",
+  submitContent: "sa-chat-composer-submit-content"
+};
+var cx2 = (...values) => values.filter(Boolean).join(" ");
+var mergeClassNames2 = (defaults, overrides) => ({
+  root: cx2(defaults.root, overrides?.root),
+  form: cx2(defaults.form, overrides?.form),
+  input: cx2(defaults.input, overrides?.input),
+  submit: cx2(defaults.submit, overrides?.submit),
+  submitContent: cx2(defaults.submitContent, overrides?.submitContent)
+});
+var ChatComposer = ({
+  message,
+  onMessageChange,
+  onSubmit,
+  onKeyDown,
+  placeholder,
+  disabled = false,
+  submitDisabled = false,
+  allowEmptySubmit = false,
+  submitLabel = "Send",
+  className,
+  classNames: classNameOverrides,
+  inputRef,
+  rows = 1,
+  textareaProps,
+  renderSubmitContent,
+  renderFooter
+}) => {
+  const resolvedClassNames = mergeClassNames2(DEFAULT_CLASS_NAMES2, classNameOverrides);
+  const isSubmitDisabled = disabled || submitDisabled || !allowEmptySubmit && message.trim().length === 0;
+  return /* @__PURE__ */ jsx2("div", { className: cx2(resolvedClassNames.root, className), "data-slot": "root", children: /* @__PURE__ */ jsxs2(
+    "form",
+    {
+      className: resolvedClassNames.form,
+      "data-slot": "form",
+      onSubmit: (event) => {
+        event.preventDefault();
+        if (!isSubmitDisabled) {
+          onSubmit();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: inputRef,
+            className: resolvedClassNames.input,
+            "data-slot": "input",
+            "data-disabled": disabled ? "true" : void 0,
+            "data-empty": message.trim().length === 0 ? "true" : void 0,
+            value: message,
+            onChange: (event) => onMessageChange(event.target.value),
+            onKeyDown,
+            placeholder,
+            rows,
+            disabled
+          }
+        ),
+        renderFooter?.(),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "submit",
+            className: resolvedClassNames.submit,
+            "data-slot": "submit",
+            "data-disabled": isSubmitDisabled ? "true" : void 0,
+            disabled: isSubmitDisabled,
+            "aria-label": submitLabel,
+            title: submitLabel,
+            children: /* @__PURE__ */ jsx2("span", { className: resolvedClassNames.submitContent, "data-slot": "submit-content", children: renderSubmitContent?.() ?? submitLabel })
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/AgentConversation.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_CLASS_NAMES3 = {
+  root: "sa-agent-conversation",
+  transcript: "sa-agent-conversation-transcript",
+  emptyState: "sa-agent-conversation-empty-state",
+  composer: "sa-agent-conversation-composer"
+};
+var cx3 = (...values) => values.filter(Boolean).join(" ");
+var mergeClassNames3 = (defaults, overrides) => ({
+  root: cx3(defaults.root, overrides?.root),
+  transcript: cx3(defaults.transcript, overrides?.transcript),
+  emptyState: cx3(defaults.emptyState, overrides?.emptyState),
+  composer: cx3(defaults.composer, overrides?.composer)
+});
+var AgentConversation = ({
+  entries,
+  className,
+  classNames: classNameOverrides,
+  emptyState,
+  transcriptClassName,
+  transcriptClassNames,
+  scrollRef,
+  composerClassName,
+  composerClassNames,
+  transcriptProps,
+  composerProps
+}) => {
+  const resolvedClassNames = mergeClassNames3(DEFAULT_CLASS_NAMES3, classNameOverrides);
+  const hasTranscriptContent = entries.length > 0 || Boolean(transcriptProps?.sessionError) || Boolean(transcriptProps?.eventError);
+  return /* @__PURE__ */ jsxs3("div", { className: cx3(resolvedClassNames.root, className), "data-slot": "root", children: [
+    hasTranscriptContent ? scrollRef ? /* @__PURE__ */ jsx3("div", { className: cx3(resolvedClassNames.transcript, transcriptClassName), "data-slot": "transcript", ref: scrollRef, children: /* @__PURE__ */ jsx3(AgentTranscript, { entries, classNames: transcriptClassNames, ...transcriptProps }) }) : /* @__PURE__ */ jsx3(
+      AgentTranscript,
+      {
+        entries,
+        className: cx3(resolvedClassNames.transcript, transcriptClassName),
+        classNames: transcriptClassNames,
+        ...transcriptProps
+      }
+    ) : emptyState ? /* @__PURE__ */ jsx3("div", { className: resolvedClassNames.emptyState, "data-slot": "empty-state", children: emptyState }) : null,
+    composerProps ? /* @__PURE__ */ jsx3(ChatComposer, { className: cx3(resolvedClassNames.composer, composerClassName), classNames: composerClassNames, ...composerProps }) : null
+  ] });
+};
+
+// src/ProcessTerminal.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var terminalTheme = {
   background: "#09090b",
   foreground: "#f4f4f5",
@@ -71,15 +852,17 @@ var ProcessTerminal = ({
   className,
   style,
   terminalStyle,
+  statusBarStyleOverride,
   height = 360,
+  showStatusBar = true,
   onExit,
   onError
 }) => {
-  const hostRef = useRef(null);
-  const [connectionState, setConnectionState] = useState("connecting");
-  const [statusMessage, setStatusMessage] = useState("Connecting to PTY...");
-  const [exitCode, setExitCode] = useState(null);
-  useEffect(() => {
+  const hostRef = useRef3(null);
+  const [connectionState, setConnectionState] = useState2("connecting");
+  const [statusMessage, setStatusMessage] = useState2("Connecting to PTY...");
+  const [exitCode, setExitCode] = useState2(null);
+  useEffect3(() => {
     let cancelled = false;
     let terminal = null;
     let fitAddon = null;
@@ -157,9 +940,7 @@ var ProcessTerminal = ({
           }
           setConnectionState("closed");
           setExitCode(frame.exitCode ?? null);
-          setStatusMessage(
-            frame.exitCode == null ? "Process exited." : `Process exited with code ${frame.exitCode}.`
-          );
+          setStatusMessage(frame.exitCode == null ? "Process exited." : `Process exited with code ${frame.exitCode}.`);
           onExit?.(frame);
         });
         nextSession.onError((error) => {
@@ -199,15 +980,15 @@ var ProcessTerminal = ({
       terminal?.dispose();
     };
   }, [client, onError, onExit, processId]);
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...shellStyle, ...style }, children: [
-    /* @__PURE__ */ jsxs("div", { style: statusBarStyle, children: [
-      /* @__PURE__ */ jsx("span", { style: { color: getStatusColor(connectionState) }, children: statusMessage }),
-      exitCode != null ? /* @__PURE__ */ jsxs("span", { style: exitCodeStyle, children: [
+  return /* @__PURE__ */ jsxs4("div", { className, style: { ...shellStyle, ...style }, children: [
+    showStatusBar ? /* @__PURE__ */ jsxs4("div", { style: { ...statusBarStyle, ...statusBarStyleOverride }, children: [
+      /* @__PURE__ */ jsx4("span", { style: { color: getStatusColor(connectionState) }, children: statusMessage }),
+      exitCode != null ? /* @__PURE__ */ jsxs4("span", { style: exitCodeStyle, children: [
         "exit=",
         exitCode
       ] }) : null
-    ] }),
-    /* @__PURE__ */ jsx(
+    ] }) : null,
+    /* @__PURE__ */ jsx4(
       "div",
       {
         ref: hostRef,
@@ -225,6 +1006,10 @@ var ProcessTerminal = ({
   ] });
 };
 export {
-  ProcessTerminal
+  AgentConversation,
+  AgentTranscript,
+  ChatComposer,
+  ProcessTerminal,
+  useTranscriptVirtualizer
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ProcessTerminal.tsx"],"sourcesContent":["\"use client\";\n\nimport type { FitAddon as GhosttyFitAddon, Terminal as GhosttyTerminal } from \"ghostty-web\";\nimport type { CSSProperties } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SandboxAgent, TerminalErrorStatus, TerminalExitStatus } from \"sandbox-agent\";\n\ntype ConnectionState = \"connecting\" | \"ready\" | \"closed\" | \"error\";\n\nexport type ProcessTerminalClient = Pick<SandboxAgent, \"connectProcessTerminal\">;\n\nexport interface ProcessTerminalProps {\n  client: ProcessTerminalClient;\n  processId: string;\n  className?: string;\n  style?: CSSProperties;\n  terminalStyle?: CSSProperties;\n  height?: number | string;\n  onExit?: (status: TerminalExitStatus) => void;\n  onError?: (error: TerminalErrorStatus | Error) => void;\n}\n\nconst terminalTheme = {\n  background: \"#09090b\",\n  foreground: \"#f4f4f5\",\n  cursor: \"#f97316\",\n  cursorAccent: \"#09090b\",\n  selectionBackground: \"#27272a\",\n  black: \"#18181b\",\n  red: \"#f87171\",\n  green: \"#4ade80\",\n  yellow: \"#fbbf24\",\n  blue: \"#60a5fa\",\n  magenta: \"#f472b6\",\n  cyan: \"#22d3ee\",\n  white: \"#e4e4e7\",\n  brightBlack: \"#3f3f46\",\n  brightRed: \"#fb7185\",\n  brightGreen: \"#86efac\",\n  brightYellow: \"#fde047\",\n  brightBlue: \"#93c5fd\",\n  brightMagenta: \"#f9a8d4\",\n  brightCyan: \"#67e8f9\",\n  brightWhite: \"#fafafa\",\n};\n\nconst shellStyle: CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  border: \"1px solid rgba(255, 255, 255, 0.1)\",\n  borderRadius: 10,\n  background: \"rgba(0, 0, 0, 0.3)\",\n};\n\nconst statusBarStyle: CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 12,\n  padding: \"8px 12px\",\n  borderBottom: \"1px solid rgba(255, 255, 255, 0.08)\",\n  background: \"rgba(0, 0, 0, 0.2)\",\n  color: \"rgba(244, 244, 245, 0.86)\",\n  fontSize: 11,\n  lineHeight: 1.4,\n};\n\nconst hostBaseStyle: CSSProperties = {\n  minHeight: 320,\n  padding: 10,\n  overflow: \"hidden\",\n};\n\nconst exitCodeStyle: CSSProperties = {\n  fontFamily: \"ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace\",\n  opacity: 0.72,\n};\n\nconst getStatusColor = (state: ConnectionState): string => {\n  switch (state) {\n    case \"ready\":\n      return \"#4ade80\";\n    case \"error\":\n      return \"#fb7185\";\n    case \"closed\":\n      return \"#fbbf24\";\n    default:\n      return \"rgba(244, 244, 245, 0.72)\";\n  }\n};\n\nexport const ProcessTerminal = ({\n  client,\n  processId,\n  className,\n  style,\n  terminalStyle,\n  height = 360,\n  onExit,\n  onError,\n}: ProcessTerminalProps) => {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const [connectionState, setConnectionState] = useState<ConnectionState>(\"connecting\");\n  const [statusMessage, setStatusMessage] = useState(\"Connecting to PTY...\");\n  const [exitCode, setExitCode] = useState<number | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    let terminal: GhosttyTerminal | null = null;\n    let fitAddon: GhosttyFitAddon | null = null;\n    let session: ReturnType<ProcessTerminalClient[\"connectProcessTerminal\"]> | null = null;\n    let resizeRaf = 0;\n    let removeDataListener: { dispose(): void } | null = null;\n    let removeResizeListener: { dispose(): void } | null = null;\n\n    setConnectionState(\"connecting\");\n    setStatusMessage(\"Connecting to PTY...\");\n    setExitCode(null);\n\n    const syncSize = () => {\n      if (!terminal || !session) {\n        return;\n      }\n\n      session.resize({\n        cols: terminal.cols,\n        rows: terminal.rows,\n      });\n    };\n\n    const connect = async () => {\n      try {\n        const ghostty = await import(\"ghostty-web\");\n        await ghostty.init();\n\n        if (cancelled || !hostRef.current) {\n          return;\n        }\n\n        terminal = new ghostty.Terminal({\n          allowTransparency: true,\n          cursorBlink: true,\n          cursorStyle: \"block\",\n          fontFamily: \"ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace\",\n          fontSize: 13,\n          smoothScrollDuration: 90,\n          theme: terminalTheme,\n        });\n        fitAddon = new ghostty.FitAddon();\n\n        terminal.open(hostRef.current);\n        const terminalRoot = hostRef.current.firstElementChild;\n        if (terminalRoot instanceof HTMLElement) {\n          terminalRoot.style.width = \"100%\";\n          terminalRoot.style.height = \"100%\";\n        }\n        terminal.loadAddon(fitAddon);\n        fitAddon.fit();\n        fitAddon.observeResize();\n        terminal.focus();\n\n        removeDataListener = terminal.onData((data) => {\n          session?.sendInput(data);\n        });\n\n        removeResizeListener = terminal.onResize(() => {\n          if (resizeRaf) {\n            window.cancelAnimationFrame(resizeRaf);\n          }\n          resizeRaf = window.requestAnimationFrame(syncSize);\n        });\n\n        const nextSession = client.connectProcessTerminal(processId);\n        session = nextSession;\n\n        nextSession.onReady((frame) => {\n          if (cancelled || frame.type !== \"ready\") {\n            return;\n          }\n\n          setConnectionState(\"ready\");\n          setStatusMessage(\"Connected\");\n          syncSize();\n        });\n\n        nextSession.onData((bytes) => {\n          if (cancelled || !terminal) {\n            return;\n          }\n          terminal.write(bytes);\n        });\n\n        nextSession.onExit((frame) => {\n          if (cancelled || frame.type !== \"exit\") {\n            return;\n          }\n\n          setConnectionState(\"closed\");\n          setExitCode(frame.exitCode ?? null);\n          setStatusMessage(\n            frame.exitCode == null ? \"Process exited.\" : `Process exited with code ${frame.exitCode}.`\n          );\n          onExit?.(frame);\n        });\n\n        nextSession.onError((error) => {\n          if (cancelled) {\n            return;\n          }\n\n          setConnectionState(\"error\");\n          setStatusMessage(error instanceof Error ? error.message : error.message);\n          onError?.(error);\n        });\n\n        nextSession.onClose(() => {\n          if (cancelled) {\n            return;\n          }\n\n          setConnectionState((current) => (current === \"error\" ? current : \"closed\"));\n          setStatusMessage((current) => (current === \"Connected\" ? \"Terminal disconnected.\" : current));\n        });\n      } catch (error) {\n        if (cancelled) {\n          return;\n        }\n\n        const nextError = error instanceof Error ? error : new Error(\"Failed to initialize terminal.\");\n        setConnectionState(\"error\");\n        setStatusMessage(nextError.message);\n        onError?.(nextError);\n      }\n    };\n\n    void connect();\n\n    return () => {\n      cancelled = true;\n      if (resizeRaf) {\n        window.cancelAnimationFrame(resizeRaf);\n      }\n      removeDataListener?.dispose();\n      removeResizeListener?.dispose();\n      session?.close();\n      terminal?.dispose();\n    };\n  }, [client, onError, onExit, processId]);\n\n  return (\n    <div className={className} style={{ ...shellStyle, ...style }}>\n      <div style={statusBarStyle}>\n        <span style={{ color: getStatusColor(connectionState) }}>{statusMessage}</span>\n        {exitCode != null ? <span style={exitCodeStyle}>exit={exitCode}</span> : null}\n      </div>\n      <div\n        ref={hostRef}\n        role=\"presentation\"\n        style={{\n          ...hostBaseStyle,\n          height,\n          ...terminalStyle,\n        }}\n        onClick={() => {\n          hostRef.current?.querySelector(\"textarea\")?.focus();\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/AgentTranscript.tsx","../src/useTranscriptVirtualizer.ts","../src/ChatComposer.tsx","../src/AgentConversation.tsx","../src/ProcessTerminal.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode, RefObject } from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranscriptVirtualizer } from \"./useTranscriptVirtualizer.ts\";\n\nexport type PermissionReply = \"once\" | \"always\" | \"reject\";\n\nexport type PermissionOption = {\n  optionId: string;\n  name: string;\n  kind: string;\n};\n\nexport type TranscriptEntry = {\n  id: string;\n  eventId?: string;\n  kind: \"message\" | \"tool\" | \"meta\" | \"reasoning\" | \"permission\";\n  time: string;\n  role?: \"user\" | \"assistant\";\n  text?: string;\n  toolName?: string;\n  toolInput?: string;\n  toolOutput?: string;\n  toolStatus?: string;\n  reasoning?: { text: string; visibility?: string };\n  meta?: { title: string; detail?: string; severity?: \"info\" | \"error\" };\n  permission?: {\n    permissionId: string;\n    title: string;\n    description?: string;\n    options: PermissionOption[];\n    resolved?: boolean;\n    selectedOptionId?: string;\n  };\n};\n\nexport interface AgentTranscriptClassNames {\n  root: string;\n  divider: string;\n  dividerLine: string;\n  dividerText: string;\n  message: string;\n  messageContent: string;\n  messageText: string;\n  error: string;\n  toolGroupSingle: string;\n  toolGroupContainer: string;\n  toolGroupHeader: string;\n  toolGroupIcon: string;\n  toolGroupLabel: string;\n  toolGroupChevron: string;\n  toolGroupBody: string;\n  toolItem: string;\n  toolItemConnector: string;\n  toolItemDot: string;\n  toolItemLine: string;\n  toolItemContent: string;\n  toolItemHeader: string;\n  toolItemIcon: string;\n  toolItemLabel: string;\n  toolItemSpinner: string;\n  toolItemLink: string;\n  toolItemChevron: string;\n  toolItemBody: string;\n  toolSection: string;\n  toolSectionTitle: string;\n  toolCode: string;\n  toolCodeMuted: string;\n  permissionPrompt: string;\n  permissionHeader: string;\n  permissionIcon: string;\n  permissionTitle: string;\n  permissionDescription: string;\n  permissionActions: string;\n  permissionButton: string;\n  permissionAutoResolved: string;\n  thinkingRow: string;\n  thinkingAvatar: string;\n  thinkingAvatarImage: string;\n  thinkingAvatarLabel: string;\n  thinkingIndicator: string;\n  thinkingDot: string;\n  endAnchor: string;\n}\n\nexport interface PermissionOptionRenderContext {\n  entry: TranscriptEntry;\n  option: PermissionOption;\n  label: string;\n  reply: PermissionReply;\n  selected: boolean;\n  dimmed: boolean;\n  resolved: boolean;\n}\n\nexport interface AgentTranscriptProps {\n  entries: TranscriptEntry[];\n  className?: string;\n  classNames?: Partial<AgentTranscriptClassNames>;\n  endRef?: RefObject<HTMLDivElement>;\n  scrollRef?: RefObject<HTMLDivElement>;\n  scrollToEntryId?: string | null;\n  sessionError?: string | null;\n  eventError?: string | null;\n  isThinking?: boolean;\n  agentId?: string;\n  virtualize?: boolean;\n  onAtBottomChange?: (atBottom: boolean) => void;\n  onEventClick?: (eventId: string) => void;\n  onPermissionReply?: (permissionId: string, reply: PermissionReply) => void;\n  isDividerEntry?: (entry: TranscriptEntry) => boolean;\n  canOpenEvent?: (entry: TranscriptEntry) => boolean;\n  getToolGroupSummary?: (entries: TranscriptEntry[]) => string;\n  renderMessageText?: (entry: TranscriptEntry) => ReactNode;\n  renderInlinePendingIndicator?: () => ReactNode;\n  renderThinkingState?: (context: { agentId?: string }) => ReactNode;\n  renderToolItemIcon?: (entry: TranscriptEntry) => ReactNode;\n  renderToolGroupIcon?: (entries: TranscriptEntry[], expanded: boolean) => ReactNode;\n  renderChevron?: (expanded: boolean) => ReactNode;\n  renderEventLinkContent?: (entry: TranscriptEntry) => ReactNode;\n  renderPermissionIcon?: (entry: TranscriptEntry) => ReactNode;\n  renderPermissionOptionContent?: (context: PermissionOptionRenderContext) => ReactNode;\n}\n\ntype GroupedEntries =\n  | { type: \"message\"; entries: TranscriptEntry[] }\n  | { type: \"tool-group\"; entries: TranscriptEntry[] }\n  | { type: \"divider\"; entries: TranscriptEntry[] }\n  | { type: \"permission\"; entries: TranscriptEntry[] };\n\nconst VIRTUAL_GROUP_GAP_PX = 12;\n\nconst DEFAULT_CLASS_NAMES: AgentTranscriptClassNames = {\n  root: \"sa-agent-transcript\",\n  divider: \"sa-agent-transcript-divider\",\n  dividerLine: \"sa-agent-transcript-divider-line\",\n  dividerText: \"sa-agent-transcript-divider-text\",\n  message: \"sa-agent-transcript-message\",\n  messageContent: \"sa-agent-transcript-message-content\",\n  messageText: \"sa-agent-transcript-message-text\",\n  error: \"sa-agent-transcript-error\",\n  toolGroupSingle: \"sa-agent-transcript-tool-group-single\",\n  toolGroupContainer: \"sa-agent-transcript-tool-group\",\n  toolGroupHeader: \"sa-agent-transcript-tool-group-header\",\n  toolGroupIcon: \"sa-agent-transcript-tool-group-icon\",\n  toolGroupLabel: \"sa-agent-transcript-tool-group-label\",\n  toolGroupChevron: \"sa-agent-transcript-tool-group-chevron\",\n  toolGroupBody: \"sa-agent-transcript-tool-group-body\",\n  toolItem: \"sa-agent-transcript-tool-item\",\n  toolItemConnector: \"sa-agent-transcript-tool-item-connector\",\n  toolItemDot: \"sa-agent-transcript-tool-item-dot\",\n  toolItemLine: \"sa-agent-transcript-tool-item-line\",\n  toolItemContent: \"sa-agent-transcript-tool-item-content\",\n  toolItemHeader: \"sa-agent-transcript-tool-item-header\",\n  toolItemIcon: \"sa-agent-transcript-tool-item-icon\",\n  toolItemLabel: \"sa-agent-transcript-tool-item-label\",\n  toolItemSpinner: \"sa-agent-transcript-tool-item-spinner\",\n  toolItemLink: \"sa-agent-transcript-tool-item-link\",\n  toolItemChevron: \"sa-agent-transcript-tool-item-chevron\",\n  toolItemBody: \"sa-agent-transcript-tool-item-body\",\n  toolSection: \"sa-agent-transcript-tool-section\",\n  toolSectionTitle: \"sa-agent-transcript-tool-section-title\",\n  toolCode: \"sa-agent-transcript-tool-code\",\n  toolCodeMuted: \"sa-agent-transcript-tool-code-muted\",\n  permissionPrompt: \"sa-agent-transcript-permission-prompt\",\n  permissionHeader: \"sa-agent-transcript-permission-header\",\n  permissionIcon: \"sa-agent-transcript-permission-icon\",\n  permissionTitle: \"sa-agent-transcript-permission-title\",\n  permissionDescription: \"sa-agent-transcript-permission-description\",\n  permissionActions: \"sa-agent-transcript-permission-actions\",\n  permissionButton: \"sa-agent-transcript-permission-button\",\n  permissionAutoResolved: \"sa-agent-transcript-permission-auto-resolved\",\n  thinkingRow: \"sa-agent-transcript-thinking-row\",\n  thinkingAvatar: \"sa-agent-transcript-thinking-avatar\",\n  thinkingAvatarImage: \"sa-agent-transcript-thinking-avatar-image\",\n  thinkingAvatarLabel: \"sa-agent-transcript-thinking-avatar-label\",\n  thinkingIndicator: \"sa-agent-transcript-thinking-indicator\",\n  thinkingDot: \"sa-agent-transcript-thinking-dot\",\n  endAnchor: \"sa-agent-transcript-end\",\n};\n\nconst DEFAULT_DIVIDER_TITLES = new Set([\"Session Started\", \"Turn Started\", \"Turn Ended\"]);\n\nconst cx = (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(\" \");\n\nconst mergeClassNames = (defaults: AgentTranscriptClassNames, overrides?: Partial<AgentTranscriptClassNames>): AgentTranscriptClassNames => ({\n  root: cx(defaults.root, overrides?.root),\n  divider: cx(defaults.divider, overrides?.divider),\n  dividerLine: cx(defaults.dividerLine, overrides?.dividerLine),\n  dividerText: cx(defaults.dividerText, overrides?.dividerText),\n  message: cx(defaults.message, overrides?.message),\n  messageContent: cx(defaults.messageContent, overrides?.messageContent),\n  messageText: cx(defaults.messageText, overrides?.messageText),\n  error: cx(defaults.error, overrides?.error),\n  toolGroupSingle: cx(defaults.toolGroupSingle, overrides?.toolGroupSingle),\n  toolGroupContainer: cx(defaults.toolGroupContainer, overrides?.toolGroupContainer),\n  toolGroupHeader: cx(defaults.toolGroupHeader, overrides?.toolGroupHeader),\n  toolGroupIcon: cx(defaults.toolGroupIcon, overrides?.toolGroupIcon),\n  toolGroupLabel: cx(defaults.toolGroupLabel, overrides?.toolGroupLabel),\n  toolGroupChevron: cx(defaults.toolGroupChevron, overrides?.toolGroupChevron),\n  toolGroupBody: cx(defaults.toolGroupBody, overrides?.toolGroupBody),\n  toolItem: cx(defaults.toolItem, overrides?.toolItem),\n  toolItemConnector: cx(defaults.toolItemConnector, overrides?.toolItemConnector),\n  toolItemDot: cx(defaults.toolItemDot, overrides?.toolItemDot),\n  toolItemLine: cx(defaults.toolItemLine, overrides?.toolItemLine),\n  toolItemContent: cx(defaults.toolItemContent, overrides?.toolItemContent),\n  toolItemHeader: cx(defaults.toolItemHeader, overrides?.toolItemHeader),\n  toolItemIcon: cx(defaults.toolItemIcon, overrides?.toolItemIcon),\n  toolItemLabel: cx(defaults.toolItemLabel, overrides?.toolItemLabel),\n  toolItemSpinner: cx(defaults.toolItemSpinner, overrides?.toolItemSpinner),\n  toolItemLink: cx(defaults.toolItemLink, overrides?.toolItemLink),\n  toolItemChevron: cx(defaults.toolItemChevron, overrides?.toolItemChevron),\n  toolItemBody: cx(defaults.toolItemBody, overrides?.toolItemBody),\n  toolSection: cx(defaults.toolSection, overrides?.toolSection),\n  toolSectionTitle: cx(defaults.toolSectionTitle, overrides?.toolSectionTitle),\n  toolCode: cx(defaults.toolCode, overrides?.toolCode),\n  toolCodeMuted: cx(defaults.toolCodeMuted, overrides?.toolCodeMuted),\n  permissionPrompt: cx(defaults.permissionPrompt, overrides?.permissionPrompt),\n  permissionHeader: cx(defaults.permissionHeader, overrides?.permissionHeader),\n  permissionIcon: cx(defaults.permissionIcon, overrides?.permissionIcon),\n  permissionTitle: cx(defaults.permissionTitle, overrides?.permissionTitle),\n  permissionDescription: cx(defaults.permissionDescription, overrides?.permissionDescription),\n  permissionActions: cx(defaults.permissionActions, overrides?.permissionActions),\n  permissionButton: cx(defaults.permissionButton, overrides?.permissionButton),\n  permissionAutoResolved: cx(defaults.permissionAutoResolved, overrides?.permissionAutoResolved),\n  thinkingRow: cx(defaults.thinkingRow, overrides?.thinkingRow),\n  thinkingAvatar: cx(defaults.thinkingAvatar, overrides?.thinkingAvatar),\n  thinkingAvatarImage: cx(defaults.thinkingAvatarImage, overrides?.thinkingAvatarImage),\n  thinkingAvatarLabel: cx(defaults.thinkingAvatarLabel, overrides?.thinkingAvatarLabel),\n  thinkingIndicator: cx(defaults.thinkingIndicator, overrides?.thinkingIndicator),\n  thinkingDot: cx(defaults.thinkingDot, overrides?.thinkingDot),\n  endAnchor: cx(defaults.endAnchor, overrides?.endAnchor),\n});\n\nconst getMessageVariant = (entry: TranscriptEntry) => {\n  if (entry.kind === \"tool\") return \"tool\";\n  if (entry.kind === \"meta\") return entry.meta?.severity === \"error\" ? \"error\" : \"system\";\n  if (entry.kind === \"reasoning\") return \"assistant\";\n  if (entry.kind === \"permission\") return \"system\";\n  if (entry.role === \"user\") return \"user\";\n  return \"assistant\";\n};\n\nconst getToolItemLabel = (entry: TranscriptEntry) => {\n  if (entry.kind === \"tool\") {\n    const statusLabel = entry.toolStatus && entry.toolStatus !== \"completed\" ? ` (${entry.toolStatus.replaceAll(\"_\", \" \")})` : \"\";\n    return `${entry.toolName ?? \"tool\"}${statusLabel}`;\n  }\n\n  if (entry.kind === \"reasoning\") {\n    return `Reasoning${entry.reasoning?.visibility ? ` (${entry.reasoning.visibility})` : \"\"}`;\n  }\n\n  return entry.meta?.title ?? \"Status\";\n};\n\nconst getDefaultToolItemIcon = (entry: TranscriptEntry) => {\n  if (entry.kind === \"tool\") return \"Tool\";\n  if (entry.kind === \"reasoning\") return \"Thought\";\n  return entry.meta?.severity === \"error\" ? \"Error\" : \"Info\";\n};\n\nconst getDefaultToolGroupSummary = (entries: TranscriptEntry[]) => {\n  const count = entries.length;\n  return `${count} Event${count === 1 ? \"\" : \"s\"}`;\n};\n\nconst getPermissionReplyForOption = (kind: string): PermissionReply => {\n  if (kind === \"allow_once\") return \"once\";\n  if (kind === \"allow_always\") return \"always\";\n  return \"reject\";\n};\n\nconst getPermissionOptionLabel = (option: PermissionOption) => {\n  if (option.name) return option.name;\n  if (option.kind === \"allow_once\") return \"Allow Once\";\n  if (option.kind === \"allow_always\") return \"Always Allow\";\n  if (option.kind === \"reject_once\") return \"Reject\";\n  if (option.kind === \"reject_always\") return \"Reject Always\";\n  return option.kind;\n};\n\nconst getPermissionOptionTone = (kind: string) => (kind.startsWith(\"allow\") ? \"allow\" : \"reject\");\n\nconst defaultRenderMessageText = (entry: TranscriptEntry) => entry.text;\nconst defaultRenderPendingIndicator = () => \"...\";\nconst defaultRenderChevron = (expanded: boolean) => (expanded ? \"▾\" : \"▸\");\nconst defaultRenderEventLinkContent = () => \"Open\";\nconst defaultRenderPermissionIcon = () => \"Permission\";\nconst defaultRenderPermissionOptionContent = ({ label }: PermissionOptionRenderContext) => label;\nconst defaultIsDividerEntry = (entry: TranscriptEntry) => entry.kind === \"meta\" && DEFAULT_DIVIDER_TITLES.has(entry.meta?.title ?? \"\");\n\nconst defaultCanOpenEvent = (entry: TranscriptEntry) => Boolean(entry.eventId);\n\nconst buildGroupedEntries = (entries: TranscriptEntry[], isDividerEntry: (entry: TranscriptEntry) => boolean): GroupedEntries[] => {\n  const groupedEntries: GroupedEntries[] = [];\n  let currentToolGroup: TranscriptEntry[] = [];\n\n  const flushToolGroup = () => {\n    if (currentToolGroup.length === 0) {\n      return;\n    }\n    groupedEntries.push({ type: \"tool-group\", entries: currentToolGroup });\n    currentToolGroup = [];\n  };\n\n  for (const entry of entries) {\n    if (isDividerEntry(entry)) {\n      flushToolGroup();\n      groupedEntries.push({ type: \"divider\", entries: [entry] });\n      continue;\n    }\n\n    if (entry.kind === \"permission\") {\n      flushToolGroup();\n      groupedEntries.push({ type: \"permission\", entries: [entry] });\n      continue;\n    }\n\n    if (entry.kind === \"tool\" || entry.kind === \"reasoning\" || entry.kind === \"meta\") {\n      currentToolGroup.push(entry);\n      continue;\n    }\n\n    flushToolGroup();\n    groupedEntries.push({ type: \"message\", entries: [entry] });\n  }\n\n  flushToolGroup();\n  return groupedEntries;\n};\n\nconst getGroupedEntryKey = (group: GroupedEntries, index: number): string => {\n  const firstEntry = group.entries[0];\n\n  if (group.type === \"tool-group\") {\n    return `tool-group:${firstEntry?.id ?? index}`;\n  }\n\n  return firstEntry?.id ?? `${group.type}:${index}`;\n};\n\nconst ToolItem = ({\n  entry,\n  isLast,\n  expanded,\n  onExpandedChange,\n  classNames,\n  onEventClick,\n  canOpenEvent,\n  renderInlinePendingIndicator,\n  renderToolItemIcon,\n  renderChevron,\n  renderEventLinkContent,\n}: {\n  entry: TranscriptEntry;\n  isLast: boolean;\n  expanded: boolean;\n  onExpandedChange: (expanded: boolean) => void;\n  classNames: AgentTranscriptClassNames;\n  onEventClick?: (eventId: string) => void;\n  canOpenEvent: (entry: TranscriptEntry) => boolean;\n  renderInlinePendingIndicator: () => ReactNode;\n  renderToolItemIcon: (entry: TranscriptEntry) => ReactNode;\n  renderChevron: (expanded: boolean) => ReactNode;\n  renderEventLinkContent: (entry: TranscriptEntry) => ReactNode;\n}) => {\n  const isTool = entry.kind === \"tool\";\n  const isReasoning = entry.kind === \"reasoning\";\n  const isMeta = entry.kind === \"meta\";\n  const isComplete = isTool && (entry.toolStatus === \"completed\" || entry.toolStatus === \"failed\");\n  const isFailed = isTool && entry.toolStatus === \"failed\";\n  const isInProgress = isTool && entry.toolStatus === \"in_progress\";\n  const hasContent = isTool\n    ? Boolean(entry.toolInput || entry.toolOutput)\n    : isReasoning\n      ? Boolean(entry.reasoning?.text?.trim())\n      : Boolean(entry.meta?.detail?.trim());\n  const showEventLink = Boolean(entry.eventId && onEventClick && canOpenEvent(entry));\n\n  return (\n    <div\n      className={cx(classNames.toolItem, isLast && \"last\", isFailed && \"failed\")}\n      data-slot=\"tool-item\"\n      data-kind={entry.kind}\n      data-state={entry.toolStatus}\n      data-last={isLast ? \"true\" : undefined}\n      data-failed={isFailed ? \"true\" : undefined}\n    >\n      <div className={classNames.toolItemConnector} data-slot=\"tool-item-connector\">\n        <div className={classNames.toolItemDot} data-slot=\"tool-item-dot\" />\n        {!isLast ? <div className={classNames.toolItemLine} data-slot=\"tool-item-line\" /> : null}\n      </div>\n      <div className={classNames.toolItemContent} data-slot=\"tool-item-content\">\n        <button\n          type=\"button\"\n          className={cx(classNames.toolItemHeader, expanded && \"expanded\")}\n          data-slot=\"tool-item-header\"\n          data-expanded={expanded ? \"true\" : undefined}\n          data-has-content={hasContent ? \"true\" : undefined}\n          disabled={!hasContent}\n          onClick={() => {\n            if (hasContent) {\n              onExpandedChange(!expanded);\n            }\n          }}\n        >\n          <span className={classNames.toolItemIcon} data-slot=\"tool-item-icon\">\n            {renderToolItemIcon(entry)}\n          </span>\n          <span className={classNames.toolItemLabel} data-slot=\"tool-item-label\">\n            {getToolItemLabel(entry)}\n          </span>\n          {isInProgress ? (\n            <span className={classNames.toolItemSpinner} data-slot=\"tool-item-spinner\">\n              {renderInlinePendingIndicator()}\n            </span>\n          ) : null}\n          {showEventLink ? (\n            <span\n              className={classNames.toolItemLink}\n              data-slot=\"tool-item-link\"\n              role=\"button\"\n              tabIndex={0}\n              onClick={(event) => {\n                event.stopPropagation();\n                onEventClick?.(entry.eventId!);\n              }}\n              onKeyDown={(event) => {\n                if (event.key === \"Enter\" || event.key === \" \") {\n                  event.preventDefault();\n                  event.stopPropagation();\n                  onEventClick?.(entry.eventId!);\n                }\n              }}\n            >\n              {renderEventLinkContent(entry)}\n            </span>\n          ) : null}\n          {hasContent ? (\n            <span className={classNames.toolItemChevron} data-slot=\"tool-item-chevron\">\n              {renderChevron(expanded)}\n            </span>\n          ) : null}\n        </button>\n        {expanded && hasContent ? (\n          <div className={classNames.toolItemBody} data-slot=\"tool-item-body\">\n            {isTool && entry.toolInput ? (\n              <div className={classNames.toolSection} data-slot=\"tool-section\" data-section=\"input\">\n                <div className={classNames.toolSectionTitle} data-slot=\"tool-section-title\">\n                  Input\n                </div>\n                <pre className={classNames.toolCode} data-slot=\"tool-code\">\n                  {entry.toolInput}\n                </pre>\n              </div>\n            ) : null}\n            {isTool && isComplete && entry.toolOutput ? (\n              <div className={classNames.toolSection} data-slot=\"tool-section\" data-section=\"output\">\n                <div className={classNames.toolSectionTitle} data-slot=\"tool-section-title\">\n                  Output\n                </div>\n                <pre className={classNames.toolCode} data-slot=\"tool-code\">\n                  {entry.toolOutput}\n                </pre>\n              </div>\n            ) : null}\n            {isReasoning && entry.reasoning?.text ? (\n              <div className={classNames.toolSection} data-slot=\"tool-section\" data-section=\"reasoning\">\n                <pre className={cx(classNames.toolCode, classNames.toolCodeMuted)} data-slot=\"tool-code\">\n                  {entry.reasoning.text}\n                </pre>\n              </div>\n            ) : null}\n            {isMeta && entry.meta?.detail ? (\n              <div className={classNames.toolSection} data-slot=\"tool-section\" data-section=\"meta\">\n                <pre className={classNames.toolCode} data-slot=\"tool-code\">\n                  {entry.meta.detail}\n                </pre>\n              </div>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nconst ToolGroup = ({\n  entries,\n  expanded,\n  onExpandedChange,\n  expandedItemIds,\n  onToolItemExpandedChange,\n  classNames,\n  onEventClick,\n  canOpenEvent,\n  getToolGroupSummary,\n  renderInlinePendingIndicator,\n  renderToolItemIcon,\n  renderToolGroupIcon,\n  renderChevron,\n  renderEventLinkContent,\n}: {\n  entries: TranscriptEntry[];\n  expanded: boolean;\n  onExpandedChange: (expanded: boolean) => void;\n  expandedItemIds: Record<string, boolean>;\n  onToolItemExpandedChange: (entryId: string, expanded: boolean) => void;\n  classNames: AgentTranscriptClassNames;\n  onEventClick?: (eventId: string) => void;\n  canOpenEvent: (entry: TranscriptEntry) => boolean;\n  getToolGroupSummary: (entries: TranscriptEntry[]) => string;\n  renderInlinePendingIndicator: () => ReactNode;\n  renderToolItemIcon: (entry: TranscriptEntry) => ReactNode;\n  renderToolGroupIcon: (entries: TranscriptEntry[], expanded: boolean) => ReactNode;\n  renderChevron: (expanded: boolean) => ReactNode;\n  renderEventLinkContent: (entry: TranscriptEntry) => ReactNode;\n}) => {\n  const hasFailed = entries.some((entry) => entry.kind === \"tool\" && entry.toolStatus === \"failed\");\n\n  if (entries.length === 1) {\n    return (\n      <div className={classNames.toolGroupSingle} data-slot=\"tool-group-single\">\n        <ToolItem\n          entry={entries[0]}\n          isLast={true}\n          expanded={Boolean(expandedItemIds[entries[0]!.id])}\n          onExpandedChange={(nextExpanded) => onToolItemExpandedChange(entries[0]!.id, nextExpanded)}\n          classNames={classNames}\n          onEventClick={onEventClick}\n          canOpenEvent={canOpenEvent}\n          renderInlinePendingIndicator={renderInlinePendingIndicator}\n          renderToolItemIcon={renderToolItemIcon}\n          renderChevron={renderChevron}\n          renderEventLinkContent={renderEventLinkContent}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(classNames.toolGroupContainer, hasFailed && \"failed\")} data-slot=\"tool-group\" data-failed={hasFailed ? \"true\" : undefined}>\n      <button\n        type=\"button\"\n        className={cx(classNames.toolGroupHeader, expanded && \"expanded\")}\n        data-slot=\"tool-group-header\"\n        data-expanded={expanded ? \"true\" : undefined}\n        onClick={() => onExpandedChange(!expanded)}\n      >\n        <span className={classNames.toolGroupIcon} data-slot=\"tool-group-icon\">\n          {renderToolGroupIcon(entries, expanded)}\n        </span>\n        <span className={classNames.toolGroupLabel} data-slot=\"tool-group-label\">\n          {getToolGroupSummary(entries)}\n        </span>\n        <span className={classNames.toolGroupChevron} data-slot=\"tool-group-chevron\">\n          {renderChevron(expanded)}\n        </span>\n      </button>\n      {expanded ? (\n        <div className={classNames.toolGroupBody} data-slot=\"tool-group-body\">\n          {entries.map((entry, index) => (\n            <ToolItem\n              key={entry.id}\n              entry={entry}\n              isLast={index === entries.length - 1}\n              expanded={Boolean(expandedItemIds[entry.id])}\n              onExpandedChange={(nextExpanded) => onToolItemExpandedChange(entry.id, nextExpanded)}\n              classNames={classNames}\n              onEventClick={onEventClick}\n              canOpenEvent={canOpenEvent}\n              renderInlinePendingIndicator={renderInlinePendingIndicator}\n              renderToolItemIcon={renderToolItemIcon}\n              renderChevron={renderChevron}\n              renderEventLinkContent={renderEventLinkContent}\n            />\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nconst PermissionPrompt = ({\n  entry,\n  classNames,\n  onPermissionReply,\n  renderPermissionIcon,\n  renderPermissionOptionContent,\n}: {\n  entry: TranscriptEntry;\n  classNames: AgentTranscriptClassNames;\n  onPermissionReply?: (permissionId: string, reply: PermissionReply) => void;\n  renderPermissionIcon: (entry: TranscriptEntry) => ReactNode;\n  renderPermissionOptionContent: (context: PermissionOptionRenderContext) => ReactNode;\n}) => {\n  const permission = entry.permission;\n  if (!permission) {\n    return null;\n  }\n\n  const resolved = Boolean(permission.resolved);\n  const selectedOptionId = permission.selectedOptionId;\n  const canReply = Boolean(onPermissionReply) && !resolved;\n\n  return (\n    <div className={cx(classNames.permissionPrompt, resolved && \"resolved\")} data-slot=\"permission-prompt\" data-resolved={resolved ? \"true\" : undefined}>\n      <div className={classNames.permissionHeader} data-slot=\"permission-header\">\n        <span className={classNames.permissionIcon} data-slot=\"permission-icon\">\n          {renderPermissionIcon(entry)}\n        </span>\n        <span className={classNames.permissionTitle} data-slot=\"permission-title\">\n          {permission.title}\n        </span>\n      </div>\n      {permission.description ? (\n        <div className={classNames.permissionDescription} data-slot=\"permission-description\">\n          {permission.description}\n        </div>\n      ) : null}\n      <div className={classNames.permissionActions} data-slot=\"permission-actions\">\n        {permission.options.map((option) => {\n          const reply = getPermissionReplyForOption(option.kind);\n          const label = getPermissionOptionLabel(option);\n          const selected = resolved && selectedOptionId === option.optionId;\n          const dimmed = resolved && !selected && selectedOptionId != null;\n          const tone = getPermissionOptionTone(option.kind);\n\n          return (\n            <button\n              key={option.optionId}\n              type=\"button\"\n              className={cx(classNames.permissionButton, tone, selected && \"selected\", dimmed && \"dimmed\")}\n              data-slot=\"permission-button\"\n              data-tone={tone}\n              data-selected={selected ? \"true\" : undefined}\n              data-dimmed={dimmed ? \"true\" : undefined}\n              disabled={!canReply}\n              onClick={() => onPermissionReply?.(permission.permissionId, reply)}\n            >\n              {renderPermissionOptionContent({\n                entry,\n                option,\n                label,\n                reply,\n                selected,\n                dimmed,\n                resolved,\n              })}\n            </button>\n          );\n        })}\n        {resolved && !selectedOptionId ? (\n          <span className={classNames.permissionAutoResolved} data-slot=\"permission-auto-resolved\">\n            Auto-resolved\n          </span>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n\nexport const AgentTranscript = ({\n  entries,\n  className,\n  classNames: classNameOverrides,\n  endRef,\n  scrollRef,\n  scrollToEntryId,\n  sessionError,\n  eventError,\n  isThinking,\n  agentId,\n  virtualize = false,\n  onAtBottomChange,\n  onEventClick,\n  onPermissionReply,\n  isDividerEntry = defaultIsDividerEntry,\n  canOpenEvent = defaultCanOpenEvent,\n  getToolGroupSummary = getDefaultToolGroupSummary,\n  renderMessageText = defaultRenderMessageText,\n  renderInlinePendingIndicator = defaultRenderPendingIndicator,\n  renderThinkingState,\n  renderToolItemIcon = getDefaultToolItemIcon,\n  renderToolGroupIcon = () => null,\n  renderChevron = defaultRenderChevron,\n  renderEventLinkContent = defaultRenderEventLinkContent,\n  renderPermissionIcon = defaultRenderPermissionIcon,\n  renderPermissionOptionContent = defaultRenderPermissionOptionContent,\n}: AgentTranscriptProps) => {\n  const resolvedClassNames = useMemo(() => mergeClassNames(DEFAULT_CLASS_NAMES, classNameOverrides), [classNameOverrides]);\n  const groupedEntries = useMemo(() => buildGroupedEntries(entries, isDividerEntry), [entries, isDividerEntry]);\n  const [expandedToolGroups, setExpandedToolGroups] = useState<Record<string, boolean>>({});\n  const [expandedToolItems, setExpandedToolItems] = useState<Record<string, boolean>>({});\n  const lastScrollTargetRef = useRef<string | null>(null);\n  const isVirtualized = virtualize && Boolean(scrollRef);\n  const { virtualizer, isFollowingRef } = useTranscriptVirtualizer(groupedEntries, isVirtualized ? scrollRef : undefined, onAtBottomChange);\n\n  useEffect(() => {\n    if (!scrollToEntryId) {\n      lastScrollTargetRef.current = null;\n      return;\n    }\n\n    if (!isVirtualized || scrollToEntryId === lastScrollTargetRef.current) {\n      return;\n    }\n\n    const targetIndex = groupedEntries.findIndex((group) => group.entries.some((entry) => entry.id === scrollToEntryId));\n    if (targetIndex < 0) {\n      return;\n    }\n\n    lastScrollTargetRef.current = scrollToEntryId;\n\n    const frameId = requestAnimationFrame(() => {\n      virtualizer.scrollToIndex(targetIndex, {\n        align: \"center\",\n        behavior: \"smooth\",\n      });\n    });\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [groupedEntries, isVirtualized, scrollToEntryId, virtualizer]);\n\n  useEffect(() => {\n    if (!isVirtualized || !scrollRef?.current || !isFollowingRef.current) {\n      return;\n    }\n\n    const scrollElement = scrollRef.current;\n    const frameId = requestAnimationFrame(() => {\n      scrollElement.scrollTo({ top: scrollElement.scrollHeight });\n    });\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [eventError, isFollowingRef, isThinking, isVirtualized, scrollRef, sessionError]);\n\n  const setToolGroupExpanded = (groupKey: string, expanded: boolean) => {\n    setExpandedToolGroups((current) => {\n      if (current[groupKey] === expanded) {\n        return current;\n      }\n      return { ...current, [groupKey]: expanded };\n    });\n  };\n\n  const setToolItemExpanded = (entryId: string, expanded: boolean) => {\n    setExpandedToolItems((current) => {\n      if (current[entryId] === expanded) {\n        return current;\n      }\n      return { ...current, [entryId]: expanded };\n    });\n  };\n\n  const renderGroup = (group: GroupedEntries, index: number) => {\n    if (group.type === \"divider\") {\n      const entry = group.entries[0];\n      const title = entry.meta?.title ?? \"Status\";\n      return (\n        <div key={entry.id} className={resolvedClassNames.divider} data-slot=\"divider\">\n          <div className={resolvedClassNames.dividerLine} data-slot=\"divider-line\" />\n          <span className={resolvedClassNames.dividerText} data-slot=\"divider-text\">\n            {title}\n          </span>\n          <div className={resolvedClassNames.dividerLine} data-slot=\"divider-line\" />\n        </div>\n      );\n    }\n\n    if (group.type === \"tool-group\") {\n      const groupKey = getGroupedEntryKey(group, index);\n\n      return (\n        <ToolGroup\n          key={groupKey}\n          entries={group.entries}\n          expanded={Boolean(expandedToolGroups[groupKey])}\n          onExpandedChange={(expanded) => setToolGroupExpanded(groupKey, expanded)}\n          expandedItemIds={expandedToolItems}\n          onToolItemExpandedChange={setToolItemExpanded}\n          classNames={resolvedClassNames}\n          onEventClick={onEventClick}\n          canOpenEvent={canOpenEvent}\n          getToolGroupSummary={getToolGroupSummary}\n          renderInlinePendingIndicator={renderInlinePendingIndicator}\n          renderToolItemIcon={renderToolItemIcon}\n          renderToolGroupIcon={renderToolGroupIcon}\n          renderChevron={renderChevron}\n          renderEventLinkContent={renderEventLinkContent}\n        />\n      );\n    }\n\n    if (group.type === \"permission\") {\n      const entry = group.entries[0];\n      return (\n        <PermissionPrompt\n          key={entry.id}\n          entry={entry}\n          classNames={resolvedClassNames}\n          onPermissionReply={onPermissionReply}\n          renderPermissionIcon={renderPermissionIcon}\n          renderPermissionOptionContent={renderPermissionOptionContent}\n        />\n      );\n    }\n\n    const entry = group.entries[0];\n    const messageVariant = getMessageVariant(entry);\n\n    return (\n      <div\n        key={entry.id}\n        className={cx(resolvedClassNames.message, messageVariant, \"no-avatar\")}\n        data-slot=\"message\"\n        data-kind={entry.kind}\n        data-role={entry.role}\n        data-variant={messageVariant}\n        data-severity={entry.meta?.severity}\n      >\n        <div className={resolvedClassNames.messageContent} data-slot=\"message-content\">\n          {entry.text ? (\n            <div className={resolvedClassNames.messageText} data-slot=\"message-text\">\n              {renderMessageText(entry)}\n            </div>\n          ) : (\n            <span className={resolvedClassNames.thinkingIndicator} data-slot=\"thinking-indicator\">\n              {renderInlinePendingIndicator()}\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  };\n\n  return (\n    <div className={cx(resolvedClassNames.root, className)} data-slot=\"root\" data-virtualized={isVirtualized ? \"true\" : undefined}>\n      {isVirtualized ? (\n        <div\n          data-slot=\"virtual-list\"\n          style={{\n            height: `${virtualizer.getTotalSize()}px`,\n            position: \"relative\",\n            width: \"100%\",\n          }}\n        >\n          {virtualizer.getVirtualItems().map((virtualItem) => {\n            const group = groupedEntries[virtualItem.index];\n            if (!group) {\n              return null;\n            }\n\n            return (\n              <div\n                key={getGroupedEntryKey(group, virtualItem.index)}\n                data-index={virtualItem.index}\n                ref={(node) => {\n                  if (node) {\n                    virtualizer.measureElement(node);\n                  }\n                }}\n                style={{\n                  left: 0,\n                  position: \"absolute\",\n                  top: 0,\n                  transform: `translateY(${virtualItem.start}px)`,\n                  width: \"100%\",\n                }}\n              >\n                <div style={{ paddingBottom: virtualItem.index === groupedEntries.length - 1 ? 0 : `${VIRTUAL_GROUP_GAP_PX}px` }}>\n                  {renderGroup(group, virtualItem.index)}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      ) : (\n        groupedEntries.map((group, index) => renderGroup(group, index))\n      )}\n      {sessionError ? (\n        <div className={resolvedClassNames.error} data-slot=\"error\" data-source=\"session\">\n          {sessionError}\n        </div>\n      ) : null}\n      {eventError ? (\n        <div className={resolvedClassNames.error} data-slot=\"error\" data-source=\"event\">\n          {eventError}\n        </div>\n      ) : null}\n      {isThinking\n        ? (renderThinkingState?.({ agentId }) ?? (\n            <div className={resolvedClassNames.thinkingRow} data-slot=\"thinking-row\">\n              <span className={resolvedClassNames.thinkingIndicator} data-slot=\"thinking-indicator\">\n                Thinking...\n              </span>\n            </div>\n          ))\n        : null}\n      {!isVirtualized ? <div ref={endRef} className={resolvedClassNames.endAnchor} data-slot=\"end-anchor\" /> : null}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { RefObject } from \"react\";\nimport { useEffect, useRef } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\n\nexport function useTranscriptVirtualizer<T>(items: T[], scrollElementRef?: RefObject<HTMLDivElement>, onAtBottomChange?: (atBottom: boolean) => void) {\n  const isFollowingRef = useRef(true);\n\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => scrollElementRef?.current ?? null,\n    estimateSize: () => 80,\n    measureElement: (element) => element.getBoundingClientRect().height,\n    overscan: 10,\n  });\n\n  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = () => isFollowingRef.current;\n\n  useEffect(() => {\n    const scrollElement = scrollElementRef?.current;\n    if (!scrollElement) {\n      return;\n    }\n\n    const updateFollowState = () => {\n      const atBottom = scrollElement.scrollHeight - scrollElement.scrollTop - scrollElement.clientHeight < 50;\n      isFollowingRef.current = atBottom;\n      onAtBottomChange?.(atBottom);\n    };\n\n    updateFollowState();\n    scrollElement.addEventListener(\"scroll\", updateFollowState, { passive: true });\n\n    return () => {\n      scrollElement.removeEventListener(\"scroll\", updateFollowState);\n    };\n  }, [onAtBottomChange, scrollElementRef]);\n\n  useEffect(() => {\n    if (!isFollowingRef.current || items.length === 0) {\n      return;\n    }\n\n    const frameId = requestAnimationFrame(() => {\n      virtualizer.scrollToIndex(items.length - 1, {\n        align: \"end\",\n        behavior: \"smooth\",\n      });\n    });\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [items.length, virtualizer]);\n\n  return { virtualizer, isFollowingRef };\n}\n","\"use client\";\n\nimport type { KeyboardEvent, ReactNode, Ref, TextareaHTMLAttributes } from \"react\";\n\nexport interface ChatComposerClassNames {\n  root: string;\n  form: string;\n  input: string;\n  submit: string;\n  submitContent: string;\n}\n\nexport interface ChatComposerProps {\n  message: string;\n  onMessageChange: (value: string) => void;\n  onSubmit: () => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  submitDisabled?: boolean;\n  allowEmptySubmit?: boolean;\n  submitLabel?: string;\n  className?: string;\n  classNames?: Partial<ChatComposerClassNames>;\n  inputRef?: Ref<HTMLTextAreaElement>;\n  rows?: number;\n  textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"className\" | \"disabled\" | \"onChange\" | \"onKeyDown\" | \"placeholder\" | \"rows\" | \"value\">;\n  renderSubmitContent?: () => ReactNode;\n  renderFooter?: () => ReactNode;\n}\n\nconst DEFAULT_CLASS_NAMES: ChatComposerClassNames = {\n  root: \"sa-chat-composer\",\n  form: \"sa-chat-composer-form\",\n  input: \"sa-chat-composer-input\",\n  submit: \"sa-chat-composer-submit\",\n  submitContent: \"sa-chat-composer-submit-content\",\n};\n\nconst cx = (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(\" \");\n\nconst mergeClassNames = (defaults: ChatComposerClassNames, overrides?: Partial<ChatComposerClassNames>): ChatComposerClassNames => ({\n  root: cx(defaults.root, overrides?.root),\n  form: cx(defaults.form, overrides?.form),\n  input: cx(defaults.input, overrides?.input),\n  submit: cx(defaults.submit, overrides?.submit),\n  submitContent: cx(defaults.submitContent, overrides?.submitContent),\n});\n\nexport const ChatComposer = ({\n  message,\n  onMessageChange,\n  onSubmit,\n  onKeyDown,\n  placeholder,\n  disabled = false,\n  submitDisabled = false,\n  allowEmptySubmit = false,\n  submitLabel = \"Send\",\n  className,\n  classNames: classNameOverrides,\n  inputRef,\n  rows = 1,\n  textareaProps,\n  renderSubmitContent,\n  renderFooter,\n}: ChatComposerProps) => {\n  const resolvedClassNames = mergeClassNames(DEFAULT_CLASS_NAMES, classNameOverrides);\n  const isSubmitDisabled = disabled || submitDisabled || (!allowEmptySubmit && message.trim().length === 0);\n\n  return (\n    <div className={cx(resolvedClassNames.root, className)} data-slot=\"root\">\n      <form\n        className={resolvedClassNames.form}\n        data-slot=\"form\"\n        onSubmit={(event) => {\n          event.preventDefault();\n          if (!isSubmitDisabled) {\n            onSubmit();\n          }\n        }}\n      >\n        <textarea\n          {...textareaProps}\n          ref={inputRef}\n          className={resolvedClassNames.input}\n          data-slot=\"input\"\n          data-disabled={disabled ? \"true\" : undefined}\n          data-empty={message.trim().length === 0 ? \"true\" : undefined}\n          value={message}\n          onChange={(event) => onMessageChange(event.target.value)}\n          onKeyDown={onKeyDown}\n          placeholder={placeholder}\n          rows={rows}\n          disabled={disabled}\n        />\n        {renderFooter?.()}\n        <button\n          type=\"submit\"\n          className={resolvedClassNames.submit}\n          data-slot=\"submit\"\n          data-disabled={isSubmitDisabled ? \"true\" : undefined}\n          disabled={isSubmitDisabled}\n          aria-label={submitLabel}\n          title={submitLabel}\n        >\n          <span className={resolvedClassNames.submitContent} data-slot=\"submit-content\">\n            {renderSubmitContent?.() ?? submitLabel}\n          </span>\n        </button>\n      </form>\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { ReactNode, RefObject } from \"react\";\nimport { AgentTranscript, type AgentTranscriptClassNames, type AgentTranscriptProps, type TranscriptEntry } from \"./AgentTranscript.tsx\";\nimport { ChatComposer, type ChatComposerClassNames, type ChatComposerProps } from \"./ChatComposer.tsx\";\n\nexport interface AgentConversationClassNames {\n  root: string;\n  transcript: string;\n  emptyState: string;\n  composer: string;\n}\n\nexport interface AgentConversationProps {\n  entries: TranscriptEntry[];\n  className?: string;\n  classNames?: Partial<AgentConversationClassNames>;\n  emptyState?: ReactNode;\n  transcriptClassName?: string;\n  transcriptClassNames?: Partial<AgentTranscriptClassNames>;\n  scrollRef?: RefObject<HTMLDivElement>;\n  composerClassName?: string;\n  composerClassNames?: Partial<ChatComposerClassNames>;\n  transcriptProps?: Omit<AgentTranscriptProps, \"entries\" | \"className\" | \"classNames\" | \"scrollRef\">;\n  composerProps?: Omit<ChatComposerProps, \"className\" | \"classNames\">;\n}\n\nconst DEFAULT_CLASS_NAMES: AgentConversationClassNames = {\n  root: \"sa-agent-conversation\",\n  transcript: \"sa-agent-conversation-transcript\",\n  emptyState: \"sa-agent-conversation-empty-state\",\n  composer: \"sa-agent-conversation-composer\",\n};\n\nconst cx = (...values: Array<string | false | null | undefined>) => values.filter(Boolean).join(\" \");\n\nconst mergeClassNames = (defaults: AgentConversationClassNames, overrides?: Partial<AgentConversationClassNames>): AgentConversationClassNames => ({\n  root: cx(defaults.root, overrides?.root),\n  transcript: cx(defaults.transcript, overrides?.transcript),\n  emptyState: cx(defaults.emptyState, overrides?.emptyState),\n  composer: cx(defaults.composer, overrides?.composer),\n});\n\nexport const AgentConversation = ({\n  entries,\n  className,\n  classNames: classNameOverrides,\n  emptyState,\n  transcriptClassName,\n  transcriptClassNames,\n  scrollRef,\n  composerClassName,\n  composerClassNames,\n  transcriptProps,\n  composerProps,\n}: AgentConversationProps) => {\n  const resolvedClassNames = mergeClassNames(DEFAULT_CLASS_NAMES, classNameOverrides);\n  const hasTranscriptContent = entries.length > 0 || Boolean(transcriptProps?.sessionError) || Boolean(transcriptProps?.eventError);\n\n  return (\n    <div className={cx(resolvedClassNames.root, className)} data-slot=\"root\">\n      {hasTranscriptContent ? (\n        scrollRef ? (\n          <div className={cx(resolvedClassNames.transcript, transcriptClassName)} data-slot=\"transcript\" ref={scrollRef}>\n            <AgentTranscript entries={entries} classNames={transcriptClassNames} {...transcriptProps} />\n          </div>\n        ) : (\n          <AgentTranscript\n            entries={entries}\n            className={cx(resolvedClassNames.transcript, transcriptClassName)}\n            classNames={transcriptClassNames}\n            {...transcriptProps}\n          />\n        )\n      ) : emptyState ? (\n        <div className={resolvedClassNames.emptyState} data-slot=\"empty-state\">\n          {emptyState}\n        </div>\n      ) : null}\n      {composerProps ? (\n        <ChatComposer className={cx(resolvedClassNames.composer, composerClassName)} classNames={composerClassNames} {...composerProps} />\n      ) : null}\n    </div>\n  );\n};\n","\"use client\";\n\nimport type { FitAddon as GhosttyFitAddon, Terminal as GhosttyTerminal } from \"ghostty-web\";\nimport type { CSSProperties } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type {\n  SandboxAgent,\n  TerminalErrorStatus,\n  TerminalExitStatus,\n  TerminalReadyStatus,\n} from \"sandbox-agent\";\n\ntype ConnectionState = \"connecting\" | \"ready\" | \"closed\" | \"error\";\n\nexport type ProcessTerminalClient = Pick<SandboxAgent, \"connectProcessTerminal\">;\n\nexport interface ProcessTerminalProps {\n  client: ProcessTerminalClient;\n  processId: string;\n  className?: string;\n  style?: CSSProperties;\n  terminalStyle?: CSSProperties;\n  statusBarStyleOverride?: CSSProperties;\n  height?: number | string;\n  showStatusBar?: boolean;\n  onExit?: (status: TerminalExitStatus) => void;\n  onError?: (error: TerminalErrorStatus | Error) => void;\n}\n\nconst terminalTheme = {\n  background: \"#09090b\",\n  foreground: \"#f4f4f5\",\n  cursor: \"#f97316\",\n  cursorAccent: \"#09090b\",\n  selectionBackground: \"#27272a\",\n  black: \"#18181b\",\n  red: \"#f87171\",\n  green: \"#4ade80\",\n  yellow: \"#fbbf24\",\n  blue: \"#60a5fa\",\n  magenta: \"#f472b6\",\n  cyan: \"#22d3ee\",\n  white: \"#e4e4e7\",\n  brightBlack: \"#3f3f46\",\n  brightRed: \"#fb7185\",\n  brightGreen: \"#86efac\",\n  brightYellow: \"#fde047\",\n  brightBlue: \"#93c5fd\",\n  brightMagenta: \"#f9a8d4\",\n  brightCyan: \"#67e8f9\",\n  brightWhite: \"#fafafa\",\n};\n\nconst shellStyle: CSSProperties = {\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  border: \"1px solid rgba(255, 255, 255, 0.1)\",\n  borderRadius: 10,\n  background: \"rgba(0, 0, 0, 0.3)\",\n};\n\nconst statusBarStyle: CSSProperties = {\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 12,\n  padding: \"8px 12px\",\n  borderBottom: \"1px solid rgba(255, 255, 255, 0.08)\",\n  background: \"rgba(0, 0, 0, 0.2)\",\n  color: \"rgba(244, 244, 245, 0.86)\",\n  fontSize: 11,\n  lineHeight: 1.4,\n};\n\nconst hostBaseStyle: CSSProperties = {\n  minHeight: 320,\n  padding: 10,\n  overflow: \"hidden\",\n};\n\nconst exitCodeStyle: CSSProperties = {\n  fontFamily: \"ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace\",\n  opacity: 0.72,\n};\n\nconst getStatusColor = (state: ConnectionState): string => {\n  switch (state) {\n    case \"ready\":\n      return \"#4ade80\";\n    case \"error\":\n      return \"#fb7185\";\n    case \"closed\":\n      return \"#fbbf24\";\n    default:\n      return \"rgba(244, 244, 245, 0.72)\";\n  }\n};\n\nexport const ProcessTerminal = ({\n  client,\n  processId,\n  className,\n  style,\n  terminalStyle,\n  statusBarStyleOverride,\n  height = 360,\n  showStatusBar = true,\n  onExit,\n  onError,\n}: ProcessTerminalProps) => {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const [connectionState, setConnectionState] = useState<ConnectionState>(\"connecting\");\n  const [statusMessage, setStatusMessage] = useState(\"Connecting to PTY...\");\n  const [exitCode, setExitCode] = useState<number | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    let terminal: GhosttyTerminal | null = null;\n    let fitAddon: GhosttyFitAddon | null = null;\n    let session: ReturnType<ProcessTerminalClient[\"connectProcessTerminal\"]> | null = null;\n    let resizeRaf = 0;\n    let removeDataListener: { dispose(): void } | null = null;\n    let removeResizeListener: { dispose(): void } | null = null;\n\n    setConnectionState(\"connecting\");\n    setStatusMessage(\"Connecting to PTY...\");\n    setExitCode(null);\n\n    const syncSize = () => {\n      if (!terminal || !session) {\n        return;\n      }\n\n      session.resize({\n        cols: terminal.cols,\n        rows: terminal.rows,\n      });\n    };\n\n    const connect = async () => {\n      try {\n        const ghostty = await import(\"ghostty-web\");\n        await ghostty.init();\n\n        if (cancelled || !hostRef.current) {\n          return;\n        }\n\n        terminal = new ghostty.Terminal({\n          allowTransparency: true,\n          cursorBlink: true,\n          cursorStyle: \"block\",\n          fontFamily: \"ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace\",\n          fontSize: 13,\n          smoothScrollDuration: 90,\n          theme: terminalTheme,\n        });\n        fitAddon = new ghostty.FitAddon();\n\n        terminal.open(hostRef.current);\n        const terminalRoot = hostRef.current.firstElementChild;\n        if (terminalRoot instanceof HTMLElement) {\n          terminalRoot.style.width = \"100%\";\n          terminalRoot.style.height = \"100%\";\n        }\n        terminal.loadAddon(fitAddon);\n        fitAddon.fit();\n        fitAddon.observeResize();\n        terminal.focus();\n\n        removeDataListener = terminal.onData((data) => {\n          session?.sendInput(data);\n        });\n\n        removeResizeListener = terminal.onResize(() => {\n          if (resizeRaf) {\n            window.cancelAnimationFrame(resizeRaf);\n          }\n          resizeRaf = window.requestAnimationFrame(syncSize);\n        });\n\n        const nextSession = client.connectProcessTerminal(processId);\n        session = nextSession;\n\n        nextSession.onReady((frame: TerminalReadyStatus) => {\n          if (cancelled || frame.type !== \"ready\") {\n            return;\n          }\n\n          setConnectionState(\"ready\");\n          setStatusMessage(\"Connected\");\n          syncSize();\n        });\n\n        nextSession.onData((bytes: Uint8Array) => {\n          if (cancelled || !terminal) {\n            return;\n          }\n          terminal.write(bytes);\n        });\n\n        nextSession.onExit((frame: TerminalExitStatus) => {\n          if (cancelled || frame.type !== \"exit\") {\n            return;\n          }\n\n          setConnectionState(\"closed\");\n          setExitCode(frame.exitCode ?? null);\n          setStatusMessage(frame.exitCode == null ? \"Process exited.\" : `Process exited with code ${frame.exitCode}.`);\n          onExit?.(frame);\n        });\n\n        nextSession.onError((error: TerminalErrorStatus | Error) => {\n          if (cancelled) {\n            return;\n          }\n\n          setConnectionState(\"error\");\n          setStatusMessage(error instanceof Error ? error.message : error.message);\n          onError?.(error);\n        });\n\n        nextSession.onClose(() => {\n          if (cancelled) {\n            return;\n          }\n\n          setConnectionState((current) => (current === \"error\" ? current : \"closed\"));\n          setStatusMessage((current) => (current === \"Connected\" ? \"Terminal disconnected.\" : current));\n        });\n      } catch (error) {\n        if (cancelled) {\n          return;\n        }\n\n        const nextError = error instanceof Error ? error : new Error(\"Failed to initialize terminal.\");\n        setConnectionState(\"error\");\n        setStatusMessage(nextError.message);\n        onError?.(nextError);\n      }\n    };\n\n    void connect();\n\n    return () => {\n      cancelled = true;\n      if (resizeRaf) {\n        window.cancelAnimationFrame(resizeRaf);\n      }\n      removeDataListener?.dispose();\n      removeResizeListener?.dispose();\n      session?.close();\n      terminal?.dispose();\n    };\n  }, [client, onError, onExit, processId]);\n\n  return (\n    <div className={className} style={{ ...shellStyle, ...style }}>\n      {showStatusBar ? (\n        <div style={{ ...statusBarStyle, ...statusBarStyleOverride }}>\n          <span style={{ color: getStatusColor(connectionState) }}>{statusMessage}</span>\n          {exitCode != null ? <span style={exitCodeStyle}>exit={exitCode}</span> : null}\n        </div>\n      ) : null}\n      <div\n        ref={hostRef}\n        role=\"presentation\"\n        style={{\n          ...hostBaseStyle,\n          height,\n          ...terminalStyle,\n        }}\n        onClick={() => {\n          hostRef.current?.querySelector(\"textarea\")?.focus();\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"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","names":["useEffect","useRef","useRef","useEffect","entry","jsx","jsxs","DEFAULT_CLASS_NAMES","cx","mergeClassNames","jsx","jsxs","DEFAULT_CLASS_NAMES","cx","mergeClassNames","useEffect","useRef","useState","jsx","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sandbox-agent/react",
-  "version": "0.3.1",
+  "version": "0.4.0-rc.1",
   "description": "React components for Sandbox Agent frontend integrations",
   "license": "Apache-2.0",
   "repository": {
@@ -24,6 +24,7 @@
     "sandbox-agent": "^0.2.2"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.22",
     "ghostty-web": "^0.4.0"
   },
   "devDependencies": {
@@ -31,7 +32,7 @@
     "react": "^18.3.1",
     "tsup": "^8.0.0",
     "typescript": "^5.7.0",
-    "sandbox-agent": "0.3.1"
+    "sandbox-agent": "0.4.0-rc.1"
   },
   "scripts": {
     "build": "tsup",