@agent-native/core 0.148.1 → 0.149.0

package/dist/cli/create.js

@@ -93,8 +93,9 @@ const COMMUNITY_OPTION = {
 /**
  * Main entry for `agent-native create [name]`.
  *
- * Default behavior: scaffold a workspace at <name>/ with a multi-select
- * template picker. Use --standalone for the single-app standalone flow.
+ * Default behavior: ask for a starting shape, with Chat and first-party
+ * templates creating a workspace at <name>/. Use --standalone for the
+ * single-app standalone flow.
  *
  * If run *inside* an existing workspace, falls through to the add-app
  * flow that scaffolds one new app under apps/<name>/.
@@ -126,8 +127,8 @@ export async function createApp(name, opts) {
     }
     // When exactly one template is specified explicitly, treat it as a
     // standalone scaffold (script-friendly, matches historic behavior).
-    // Use `--template a,b` or pass no --template to opt into the workspace
-    // flow with the multi-select picker.
+    // Use `--template a,b` to opt into the workspace flow with the multi-select
+    // picker. Bare `create` asks for the starting shape first.
     const parsed = parseTemplateList(opts?.template);
     // Headless can't live in a workspace, so reject it when more than one
     // template is requested or when workspace semantics are forced.
@@ -146,9 +147,8 @@ export async function createApp(name, opts) {
     // No template specified: ask what shape to start from before diving into
     // "which templates?". The on-ramp choice implies the project structure, so
     // we don't ask a separate "workspace or standalone?" question — Chat and
-    // Headless scaffold a single standalone app (the lightest starts; headless
-    // cannot live in a workspace), while Template continues into the workspace
-    // multi-select.
+    // Template creates a workspace, while Community and Headless scaffold a
+    // single standalone app.
     if (parsed.length === 0) {
         // The deprecated `create-workspace` alias forces workspace semantics, so
         // it must skip the start-shape prompt and scaffold a workspace directly.
@@ -157,10 +157,17 @@ export async function createApp(name, opts) {
             return;
         }
         const shape = await promptStartShape(clack);
-        if (shape === "headless" || shape === "chat") {
+        if (shape === "headless") {
             await createStandaloneApp(name, { ...opts, template: shape }, clack);
             return;
         }
+        if (shape === "chat") {
+            // Chat is the default workspace on-ramp. Keep the minimal chat app in
+            // the same workspace shape as every other first-party app so the next
+            // documented step, `add-app`, works immediately.
+            await createWorkspaceInteractive(name, { ...opts, template: shape }, clack);
+            return;
+        }
         if (shape === "community") {
             const template = await promptCommunityTemplate(clack);
             await createStandaloneApp(name, { ...opts, template }, clack);
@@ -178,12 +185,11 @@ export async function createApp(name, opts) {
  * choice made here implies the project structure, so we deliberately avoid a
  * separate "workspace or standalone?" question:
  *   - "template" → full app(s) in a workspace (the multi-select picker)
+ *   - "chat"     → a minimal Chat app in a workspace with Dispatch
  *   - "community" → a single standalone app from a public GitHub repository
- *   - "chat"     → a single standalone chat UI app
  *   - "headless" → a single standalone action-first app with no UI shell
- * Chat and headless are standalone on purpose: a monorepo is unnecessary
- * ceremony for the lightest on-ramps, and headless cannot be a workspace
- * member. Either can grow into a workspace later via `add-app`.
+ * Headless cannot be a workspace member. Use `--standalone --template chat`
+ * when a standalone Chat app is the intended shape.
  */
 async function promptStartShape(clack) {
     const choice = await clack.select(startShapePromptOptions());
@@ -201,7 +207,7 @@ function startShapePromptOptions() {
             {
                 value: "chat",
                 label: "Chat",
-                hint: "A single app with a minimal chat UI and the browser shell wired up",
+                hint: "A minimal chat app in a workspace with the browser shell wired up",
             },
             {
                 value: "template",
@@ -1420,20 +1426,9 @@ function postProcessStandalone(name, targetDir, templateName, resolution) {
                     }
                 }
             }
-            // Ensure pnpm.onlyBuiltDependencies is set so native packages
-            // (better-sqlite3, esbuild, node-pty) compile their postinstall scripts
-            // under pnpm 10+ without prompting for `pnpm approve-builds`.
             pkg.dependencies = pkg.dependencies ?? {};
             pkg.dependencies.postgres ??= POSTGRES_DEPENDENCY_VERSION;
             ensureReactRouterBuildDependencies(pkg);
-            const requiredBuilt = ["better-sqlite3", "esbuild", "node-pty"];
-            if (!pkg.pnpm || typeof pkg.pnpm !== "object") {
-                pkg.pnpm = {};
-            }
-            const existing = Array.isArray(pkg.pnpm.onlyBuiltDependencies)
-                ? pkg.pnpm.onlyBuiltDependencies
-                : [];
-            pkg.pnpm.onlyBuiltDependencies = Array.from(new Set([...existing, ...requiredBuilt]));
             fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
         }
         catch { }
@@ -1452,6 +1447,7 @@ function postProcessStandalone(name, targetDir, templateName, resolution) {
                 "better-sqlite3": "true",
                 esbuild: "true",
                 "node-pty": "true",
+                "tesseract.js": "true",
             },
         };
         if (templateName !== "headless") {

package/dist/client/AgentPanel.js

@@ -689,7 +689,11 @@ function AgentPanelInner({ defaultMode = "chat", className, style, apiUrl, empty
                     return (_jsx(ShareButton, { resourceType: "chat_thread", resourceId: activeTab.id, resourceTitle: activeTab.label || "Chat", shareUrl: getChatThreadShareUrl(activeTab.id), trigger: "icon", triggerClassName: "h-7 w-7" }));
                 })(), feedbackEnabled ? (_jsx(FeedbackButton, { variant: "icon", side: "bottom", align: "end", chatSessionId: activeChatSessionId, chatStorageKey: storageKey, open: feedbackOpen, onOpenChange: setFeedbackOpen, trigger: _jsx("button", { type: "button", tabIndex: -1, "aria-hidden": "true", className: "pointer-events-none absolute end-0 top-full h-px w-px opacity-0" }) })) : null, mode === "chat" && (_jsx(IconTooltip, { content: t("agentPanel.newChat"), children: _jsx("button", { onClick: addTab, "aria-label": t("agentPanel.newChat"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), !onCollapse && mode === "cli" && canUseCodeTools && (_jsx(IconTooltip, { content: t("agentPanel.newTerminal"), children: _jsx("button", { onClick: addCliTab, "aria-label": t("agentPanel.newTerminal"), className: "flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", children: _jsx(IconPlus, { size: 14 }) }) })), _jsxs(DropdownMenu, { open: headerMenuOpen, onOpenChange: setHeaderMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: cn("flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-accent/50", (headerMenuOpen || mode === "settings") &&
                                 "bg-accent text-foreground"), "aria-label": t("agentPanel.panelOptions"), children: _jsx(IconDotsVertical, { size: 14 }) }) }), _jsxs(DropdownMenuContent, { align: "end", sideOffset: 6, className: "w-48", children: [onCollapse && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: onCollapse, children: [_jsx(IconLayoutSidebarRightCollapse, { size: 14, className: "shrink-0" }), t("agentPanel.collapseSidebar"), _jsx(DropdownMenuShortcut, { children: toggleSidebarHint })] }), _jsx(DropdownMenuSeparator, {})] })), onCollapse && mode === "chat" && wideDrawerAction ? (_jsxs(DropdownMenuItem, { onSelect: wideDrawerAction, children: [_jsx(IconArrowsHorizontal, { size: 14, className: "shrink-0" }), wideDrawerLabel, _jsx(DropdownMenuShortcut, { children: widenChatHint })] })) : null, showFullViewAction && agentPageHref ? (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(Link, { to: agentPageHref, "aria-label": t("agentPanel.openFullView"), children: [_jsx(IconArrowsMaximize, { size: 14, className: "shrink-0" }), t("agentPanel.openFullView")] }) })) : null, (onCollapse && mode === "chat" && wideDrawerAction) ||
-                                showFullViewAction ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse && mode === "chat" && (_jsxs(DropdownMenuItem, { onSelect: addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), t("agentPanel.newChat")] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: toggleHistory, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
+                                showFullViewAction ? (_jsx(DropdownMenuSeparator, {})) : null, onCollapse && mode === "chat" && (_jsxs(DropdownMenuItem, { onSelect: addTab, children: [_jsx(IconPlus, { size: 14, className: "shrink-0" }), t("agentPanel.newChat")] })), mode === "chat" && toggleHistory && (_jsxs(DropdownMenuItem, { onSelect: () => {
+                                    // Let the menu finish restoring focus before mounting the
+                                    // history popover; otherwise Radix dismisses the new overlay.
+                                    setTimeout(() => toggleHistory(), 0);
+                                }, children: [_jsx(IconHistory, { size: 14, className: "shrink-0" }), showHistory
                                         ? t("agentPanel.hideChats")
                                         : t("agentPanel.allChats")] })), mode === "chat" && (_jsx(RunsTrayMenuItem, { pollMs: 0, limit: 12, showRecent: true, onOpenThread: openRunThread })), mode === "chat" && _jsx(DropdownMenuSeparator, {}), mode === "cli" && availableClis.length > 0 && (_jsxs(_Fragment, { children: [availableClis.map((cli) => (_jsxs(DropdownMenuItem, { onSelect: () => selectCli(cli.command), className: cn(cli.command === selectedCli
                                             ? "font-medium"
@@ -942,7 +946,7 @@ const SIDEBAR_OVERLAY_Z_INDEX = 70;
 const SIDEBAR_DRAWER_Z_INDEX = 80;
 const SIDEBAR_DRAWER_VIEW_TRANSITION_NAME = "agent-native-sidebar-drawer";
 /** Shared max width of the centered fullscreen chat column and composer. */
-const FULLSCREEN_CHAT_COLUMN_MAX_PX = 684;
+const FULLSCREEN_CHAT_COLUMN_MAX_PX = 750;
 export function getActiveTabScrollDelta(containerRect, tabRect, margin = 24) {
     if (tabRect.left < containerRect.left + margin) {
         return tabRect.left - containerRect.left - margin;
@@ -1842,7 +1846,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
     }
     // Mount the live chat surface only while visible or actively needed. Keeping
     // it mounted while closed starts app-state polling on every public page view.
-    const sidebar = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS, mobileAnimationEnabled && "shadow-2xl"), "data-agent-sidebar-animation": wideDrawerEnabled
+    const sidebar = shouldRenderPanel ? (_jsxs(_Fragment, { children: [showResizeHandle && !isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd })), _jsx("div", { className: cn("agent-sidebar-panel flex shrink-0 flex-col overflow-hidden text-[13px] leading-[1.2] antialiased", chatViewTransition && AGENT_CHAT_VIEW_TRANSITION_CLASS), "data-agent-sidebar-animation": wideDrawerEnabled
                     ? "drawer"
                     : mobileAnimationEnabled
                         ? "mobile"
@@ -1851,7 +1855,7 @@ export function AgentSidebar({ children, emptyStateText = "How can I help you?",
                             : undefined, "data-agent-sidebar-layout": panelLayout, "data-agent-sidebar-position": position, "data-agent-sidebar-state": panelOpen ? "open" : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, "data-agent-sidebar-chat-handoff": chatViewTransitionHandoff ? "true" : undefined, style: chatViewTransition
                     ? getAgentChatViewTransitionStyle(panelStyle)
                     : panelStyle, inert: sidebarAnimationEnabled && !panelOpen ? true : undefined, "aria-hidden": sidebarAnimationEnabled && !panelOpen ? true : undefined, children: _jsx("div", { className: "agent-sidebar-panel-inner flex min-h-0 flex-1 flex-col", children: _jsx(AgentPanel, { emptyStateText: emptyStateText, suggestions: suggestions, dynamicSuggestions: dynamicSuggestions, composerToolbarSlot: composerToolbarSlot, composerSlot: composerSlot, onComposerTextChange: onComposerTextChange, imageModelMenu: imageModelMenu, threadFooterSlot: threadFooterSlot, missingApiKeySetupLayout: "sidebar", onCollapse: () => setOpenPersisted(false), onSnapTo75Percent: isMobile ? undefined : snapTo75Percent, isWideDrawer: isMobile ? false : isWideDrawer, onExitWideDrawer: isMobile ? undefined : exitWideDrawer, storageKey: storageKey, scope: scope, showScopeBadge: showScopeBadge, browserTabId: browserTabId, threadUrlSync: threadUrlSync, agentPageHref: agentPageHref, allowSettingsMode: false, chatOnly: true }) }) }), showResizeHandle && isLeft && (_jsx(ResizeHandle, { position: position, onDrag: handleDrag, onResizeStart: handleResizeStart, onResizeEnd: handleResizeEnd }))] })) : null;
-    const drawerPlaceholder = wideDrawerEnabled && !presentationMode && shouldRenderPanel ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-drawer-placeholder shrink-0", "data-agent-sidebar-placeholder": "true", style: { width: drawerPlaceholderWidth + 1 } })) : null;
+    const drawerPlaceholder = wideDrawerEnabled && !presentationMode && panelOpen ? (_jsx("div", { "aria-hidden": "true", className: "agent-sidebar-drawer-placeholder shrink-0", "data-agent-sidebar-placeholder": "true", style: { width: drawerPlaceholderWidth + 1 } })) : null;
     return (_jsx(AgentSidebarOnboardingContext.Provider, { value: true, children: _jsxs(RealtimeVoiceModeProvider, { browserTabId: browserTabId, children: [showFirstRunOnboarding && (_jsx(Suspense, { fallback: null, children: _jsx(FirstRunOnboarding, {}) })), _jsxs("div", { className: "agent-sidebar-shell flex min-w-0 flex-1 h-screen overflow-hidden", "data-agent-sidebar-position": position, "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: [isMobile &&
                             !presentationMode &&
                             (mobileAnimationEnabled ? shouldRenderPanel : open) && (_jsx("div", { className: cn("agent-sidebar-backdrop fixed inset-0 bg-foreground/40", mobileAnimationEnabled && !panelOpen && "pointer-events-none"), "data-agent-sidebar-animation": mobileAnimationEnabled ? "mobile" : undefined, "data-agent-sidebar-state": panelOpen ? "open" : "closed", style: { zIndex: SIDEBAR_OVERLAY_Z_INDEX - 1 }, onClick: () => setOpenPersisted(false) })), shouldMountPanel ? _jsx(URLSync, { browserTabId: browserTabId }) : null, isLeft && !presentationMode ? sidebar : null, isLeft && !presentationMode ? drawerPlaceholder : null, _jsx("div", { className: "agent-sidebar-main-surface flex flex-1 flex-col overflow-auto min-w-0", "data-agent-sidebar-main-position": position, "data-agent-sidebar-main-state": !isMobile && !presentationMode && panelOpen ? "open" : "closed", "data-agent-sidebar-resizing": isResizing ? "true" : undefined, children: _jsx(ScreenRefreshBoundary, { children: children }) }), !isLeft && !presentationMode ? drawerPlaceholder : null, !isLeft && !presentationMode ? sidebar : null] })] }) }));

package/dist/client/AssistantChat.js

@@ -1346,6 +1346,9 @@ export function useAutoResumeStatus(tabId, forceStopped) {
     }, [clearAutoResume, forceStopped]);
     return { isAutoResuming, clearAutoResume };
 }
+function approvalResolutionIdentity(approvalKey, toolCallId) {
+    return `${toolCallId ?? ""}\u0000${approvalKey}`;
+}
 const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateText, suggestions, dynamicSuggestions, threadFooterSlot, emptyStateAddon, showHeader = true, onSwitchToCli, className, apiUrl, tabId, browserTabId, threadId, contextScope, isActiveComposer = true, onMessageCountChange, onSaveThread, onGenerateTitle, composerSlot, onComposerTextChange, composerAreaClassName, composerPlaceholder, missingApiKeySetupLayout = "default", composerLayoutVariant = "default", centerComposerWhenEmpty = false, emptyStateDisplay = "default", composerToolbarSlot, composerExtraActionButton, composerDisabled = false, composerDisabledPlaceholder, isNewThread, isThreadStateLoading, onSlashCommand, execMode, onExecModeChange, approvalActions, planModeDisabled, planModeDisabledReason, selectedModel, defaultModel, selectedEngine, selectedEffort, availableModels, modelListLoading, onModelChange, onEffortChange, imageModelMenu, onForkChat, onConnectProvider, onConnectLocalRuntime, plusMenuMode = "full", providerStatusChecksEnabled = true, loadHistoryRepository, historyReloadKey, externalStreaming = false, agentChatSurface = "app", }, ref) {
     const thread = useThread();
     const threadRuntime = useThreadRuntime();
@@ -3974,11 +3977,34 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         composerContextItems.length > 0 ||
         showPlanModeCallout ||
         showInlineMissingKeySetup);
+    const approvalResolutionScope = threadId ?? tabId ?? "default";
+    const [approvalResolutionState, setApprovalResolutionState] = useState(() => ({
+        scope: approvalResolutionScope,
+        byIdentity: new Map(),
+    }));
+    const getApprovalResolution = useCallback((approvalKey, toolCallId) => {
+        if (approvalResolutionState.scope !== approvalResolutionScope) {
+            return null;
+        }
+        return (approvalResolutionState.byIdentity.get(approvalResolutionIdentity(approvalKey, toolCallId)) ?? null);
+    }, [approvalResolutionScope, approvalResolutionState]);
+    const recordApprovalResolution = useCallback((approvalKey, resolution, toolCallId) => {
+        setApprovalResolutionState((previous) => {
+            const byIdentity = previous.scope === approvalResolutionScope
+                ? previous.byIdentity
+                : new Map();
+            const next = new Map(byIdentity);
+            next.set(approvalResolutionIdentity(approvalKey, toolCallId), resolution);
+            return { scope: approvalResolutionScope, byIdentity: next };
+        });
+    }, [approvalResolutionScope]);
     // Human-in-the-loop approvals: when the user approves a paused `needsApproval`
     // tool call, re-issue the turn carrying the call's approval key so the server
     // gate lets that specific call run. Reuses the same append path as recovery /
     // queued messages (no hand-written fetch).
     const approvalCtx = useMemo(() => ({
+        getApprovalResolution,
+        onApprovalResolved: recordApprovalResolution,
         onApprove: (approvalKey) => {
             markOptimisticRunning();
             appendThreadMessage({
@@ -4000,7 +4026,14 @@ const AssistantChatInner = forwardRef(function AssistantChatInner({ emptyStateTe
         ...(approvalActions?.onAlwaysAllow
             ? { onAlwaysAllow: approvalActions.onAlwaysAllow }
             : {}),
-    }), [appendThreadMessage, execMode, markOptimisticRunning, approvalActions]);
+    }), [
+        appendThreadMessage,
+        execMode,
+        getApprovalResolution,
+        markOptimisticRunning,
+        approvalActions,
+        recordApprovalResolution,
+    ]);
     return (_jsx(CheckpointContext.Provider, { value: checkpointCtx, children: _jsx(MessageActionsContext.Provider, { value: messageActionsCtx, children: _jsx(ApprovalContext.Provider, { value: approvalCtx, children: _jsx(ChatRunDurationContext.Provider, { value: lastChatRunDurationMs, children: _jsx(ServerRunActiveContext.Provider, { value: serverRunActive, children: _jsx(ChatRunningContext.Provider, { value: showRunningInUI, children: _jsx(TextStreamingContext.Provider, { value: textStreaming, children: _jsxs("div", { "data-agent-empty-state": centeredEmptyState
                                         ? "centered"
                                         : compactMissingKeyEmptyState

package/dist/client/agent-chat-adapter.d.ts

@@ -13,6 +13,7 @@ export type AgentChatSurfaceKind =
  | "dev-frame"
 /** Chat hosted by Desktop for a local app with explicit code access. */
  | "desktop";
+export declare const BACKGROUND_FOLLOW_ATTACH_WATCHDOG_MS = 90000;
 export declare const BACKGROUND_FOLLOW_IDLE_TIMEOUT_MS = 210000;
 export declare const MAX_FOLLOWED_BACKGROUND_RUNS = 24;
 export declare const MAX_BACKGROUND_FOLLOW_WALL_TIME_MS: number;

package/dist/client/agent-chat-adapter.js

@@ -96,6 +96,10 @@ const STARTUP_RESPONSE_TIMEOUT_MS = 45_000;
 // reports that the self-dispatch itself failed before a successor claimed the
 // run, the existing client auto-continue POST remains the fallback.
 const BACKGROUND_FOLLOW_POLL_INTERVAL_MS = 1_000;
+// This watchdog belongs to a read-only reattach, not to the server run. A
+// shorter reader window lets the follow loop re-poll `/runs/active` while a
+// completed run is still inside the server's terminal replay window.
+export const BACKGROUND_FOLLOW_ATTACH_WATCHDOG_MS = 90_000;
 // How long the follow loop tolerates seeing NO active run for this turn before
 // treating the turn as ended. The server pre-inserts the successor row before
 // the old chunk completes, so a healthy chain never shows an idle gap; allow a
@@ -1691,11 +1695,12 @@ export function createAgentChatAdapter(options) {
                 preparingActionStatesByRun.set(id, state);
                 return state;
             };
-            const currentSSEOptions = () => ({
+            const currentSSEOptions = (overrides = {}) => ({
                 durableBackgroundRun: currentRunDispatchMode?.startsWith("background") === true,
                 ...(runId
                     ? { preparingActionState: preparingActionStateForRun(runId) }
                     : {}),
+                ...overrides,
             });
             const captureChatClientError = (error, phase, extra = {}) => {
                 captureError(error, {
@@ -2102,7 +2107,10 @@ export function createAgentChatAdapter(options) {
                             rememberRunSeq(seq);
                             if (threadId)
                                 updateActiveRunSeq(seq);
-                        }, runId, currentSSEOptions())) {
+                        }, runId, currentSSEOptions({
+                            noProgressTimeoutMs: BACKGROUND_FOLLOW_ATTACH_WATCHDOG_MS,
+                            actionPreparationStallTimeoutMs: BACKGROUND_FOLLOW_ATTACH_WATCHDOG_MS,
+                        }))) {
                             yield withRequestModeMetadata(result);
                         }
                         // readSSEStream returned normally: a terminal done/error was

package/dist/client/chat/markdown-renderer.d.ts

@@ -31,6 +31,7 @@ export declare function markdownUrlTransform(value: string): string;
 export declare function extractCodeText(child: React.ReactNode): string;
 export declare const markdownComponents: {
     a(props: React.AnchorHTMLAttributes<HTMLAnchorElement>): React.JSX.Element;
+    table(props: React.TableHTMLAttributes<HTMLTableElement>): React.JSX.Element;
     pre(props: React.HTMLAttributes<HTMLPreElement>): React.JSX.Element;
 };
 export declare function renderMarkdownToClipboardHtml(markdown: string): string | null;

package/dist/client/chat/markdown-renderer.js

@@ -158,6 +158,10 @@ export const markdownComponents = {
         }
         return (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", className: cn(CTA_BUTTON_CLASSES, className), ...rest, children: [_jsx("span", { children: children }), _jsx(IconExternalLink, { size: 13, strokeWidth: 2, "aria-hidden": "true" })] }));
     },
+    table(props) {
+        const { children, ...rest } = props;
+        return (_jsx("div", { className: "agent-markdown-table-wrap", children: _jsx("table", { ...rest, children: children }) }));
+    },
     pre(props) {
         const { children, ...rest } = props;
         if (React.isValidElement(children)) {

package/dist/client/chat/message-components.d.ts

@@ -97,6 +97,7 @@ export declare function shouldShowAssistantWorkSummary({ isLast, isComplete, has
     hasUnresolvedTool: boolean;
     chatRunning: boolean;
 }): boolean;
+export declare function getAssistantWorkSummaryDurationMs(durationMs: number | null | undefined, groupStartIndex: number, firstWorkPartIndex: number): number | null | undefined;
 export declare function isAlwaysVisibleAssistantTool(part: {
     type?: unknown;
     toolName?: unknown;

package/dist/client/chat/message-components.js

@@ -667,6 +667,9 @@ export function shouldShowAssistantWorkSummary({ isLast, isComplete, hasCollapsi
     // disclosure state to the default-open value on every new submission.
     return isComplete || !isLast;
 }
+export function getAssistantWorkSummaryDurationMs(durationMs, groupStartIndex, firstWorkPartIndex) {
+    return groupStartIndex === firstWorkPartIndex ? durationMs : null;
+}
 function ReasoningMessagePart() {
     const part = useMessagePartReasoning();
     const partRuntime = useMessagePartRuntime();
@@ -958,6 +961,11 @@ export function AssistantMessage() {
         msgContent.some((p, index) => !isCallAgentToolCallShadowed(msgContent, index) &&
             (p.type !== "tool-call" || p.activity !== true) &&
             isCollapsibleAssistantWorkPart(p));
+    const firstWorkPartIndex = Array.isArray(msgContent)
+        ? msgContent.findIndex((p, index) => !isCallAgentToolCallShadowed(msgContent, index) &&
+            (p.type !== "tool-call" || p.activity !== true) &&
+            isCollapsibleAssistantWorkPart(p))
+        : -1;
     const shadowedToolCallIds = Array.isArray(msgContent)
         ? shadowedCallAgentToolCallIds(msgContent)
         : new Set();
@@ -979,7 +987,7 @@ export function AssistantMessage() {
                                         });
                                         if (!showSummary)
                                             return _jsx(_Fragment, { children: children });
-                                        return (_jsx(WorkedForSummary, { durationMs: capturedDurationMs ?? persistedDurationMs, defaultOpen: hasCustomUi, autoCollapse: animateCollapse && !hasCustomUi, children: children }));
+                                        return (_jsx(WorkedForSummary, { durationMs: getAssistantWorkSummaryDurationMs(capturedDurationMs ?? persistedDurationMs, part.indices[0] ?? -1, firstWorkPartIndex), defaultOpen: hasCustomUi, autoCollapse: animateCollapse && !hasCustomUi, children: children }));
                                     }
                                     case "group-ran-tools": {
                                         const toolCount = part.indices.filter((index) => msgContent?.[index]?.type === "tool-call").length;

package/dist/client/chat/tool-call-display.d.ts

@@ -24,9 +24,17 @@ export declare function ToolCallStackMotion({ children, className, }: {
  * provided, and "Always allow" only renders when `onAlwaysAllow` is provided
  * — both are additive so existing action-approval consumers are unaffected.
  */
+export type ApprovalResolution = "approved" | "denied";
 export type ApprovalContextValue = {
     /** Re-issue the turn so the server runs the approved call. */
     onApprove: (approvalKey: string) => void;
+    /**
+     * Keep the visible resolution stable while the chat repository refreshes or
+     * remounts the message containing this approval card.
+     */
+    onApprovalResolved?: (approvalKey: string, resolution: ApprovalResolution, toolCallId?: string) => void;
+    /** Read a resolution retained by the owning chat surface. */
+    getApprovalResolution?: (approvalKey: string, toolCallId?: string) => ApprovalResolution | null;
     /**
      * Optional host hook invoked in addition to the local "denied" state, e.g.
      * so a Code session can also resolve its own pending approval as denied.

package/dist/client/chat/tool-call-display.js

@@ -75,6 +75,7 @@ function prepareToolStackExitClone(clone, snapshot) {
 export function ToolCallStackMotion({ children, className, }) {
     const stackRef = useRef(null);
     const previousRef = useRef(new Map());
+    const previousStructureRef = useRef([]);
     const activeMotionsRef = useRef(new Map());
     const exitAnimationsRef = useRef(new Map());
     useLayoutEffect(() => {
@@ -104,6 +105,11 @@ export function ToolCallStackMotion({ children, className, }) {
         }
         exitAnimationsRef.current.clear();
         const elements = Array.from(stack.querySelectorAll("[data-agent-tool-call-id], [data-agent-tool-summary]"));
+        const structure = elements.map((element, index) => toolStackMotionKey(element, index));
+        const previousStructure = previousStructureRef.current;
+        const structureChanged = structure.length !== previousStructure.length ||
+            structure.some((key, index) => key !== previousStructure[index]);
+        previousStructureRef.current = structure;
         const current = new Map();
         for (const [index, element] of elements.entries()) {
             const rect = element.getBoundingClientRect();
@@ -116,7 +122,11 @@ export function ToolCallStackMotion({ children, className, }) {
             });
         }
         previousRef.current = current;
-        if (previous.size === 0 || prefersReducedMotionForToolStack())
+        // Entry motion changes the measured transform without changing the stack
+        // structure. Do not turn that animation's cleanup into a second FLIP pass.
+        if (previous.size === 0 ||
+            !structureChanged ||
+            prefersReducedMotionForToolStack())
             return;
         const summary = elements.find((element) => element.dataset.agentToolSummary !== undefined);
         const summaryRect = summary?.getBoundingClientRect();
@@ -227,13 +237,6 @@ export function ToolActivityPresentation({ toolName, isRunning, isActiveTail, to
     // Presentation follows the active chat tail rather than execution state so
     // that newly revealed completed tools still get their entrance motion.
     const [animateEntry, setAnimateEntry] = useState(isActiveTail);
-    const previousActiveTailRef = useRef(isActiveTail);
-    useEffect(() => {
-        if (isActiveTail && !previousActiveTailRef.current) {
-            setAnimateEntry(true);
-        }
-        previousActiveTailRef.current = isActiveTail;
-    }, [isActiveTail]);
     useEffect(() => {
         if (!animateEntry)
             return;
@@ -438,29 +441,35 @@ export function AnimatedCollapse({ open, children, }) {
  * turn. Approve re-issues the turn with the call's `approvalKey`; Deny dismisses
  * the prompt locally (the action stays un-run).
  */
-function ApprovalAffordance({ toolName, approval, }) {
+function ApprovalAffordance({ toolName, toolCallId, approval, }) {
     const ctx = React.useContext(ApprovalContext);
-    const [approved, setApproved] = useState(false);
-    const [denied, setDenied] = useState(false);
-    // Once approved, the turn is re-issued; collapse to a quiet note so the user
-    // can't double-fire the approval.
-    if (approved) {
+    const [localResolution, setLocalResolution] = useState(null);
+    const retainedResolution = ctx?.getApprovalResolution?.(approval.approvalKey, toolCallId) ?? null;
+    const resolution = retainedResolution ??
+        localResolution ??
+        (approval.dismissed === true ? "denied" : null);
+    // Once resolved, collapse to a quiet note so a repository refresh cannot
+    // restore the action buttons while the continuation is running.
+    if (resolution === "approved") {
         return (_jsxs("div", { className: "mt-1.5 text-xs text-muted-foreground", children: ["Approved. Re-running ", toolName, "..."] }));
     }
     // Deny defaults to local-only (the action simply stays un-run). When the
     // host also provided `onDeny` (e.g. a Code session resolving its own
     // pending approval), it fires alongside the local state.
-    if (denied) {
+    if (resolution === "denied") {
         return (_jsxs("div", { className: "mt-1.5 text-xs text-muted-foreground", children: ["Denied. ", toolName, " did not run."] }));
     }
     return (_jsxs("div", { className: "mt-1.5 flex items-center gap-2 rounded-md border border-border bg-muted/40 px-2.5 py-1.5", children: [_jsx(IconShieldCheck, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "mr-auto text-xs text-muted-foreground", children: ["Approve to run ", toolName, "?"] }), ctx && (_jsxs("button", { type: "button", onClick: () => {
-                    setApproved(true);
+                    setLocalResolution("approved");
+                    ctx.onApprovalResolved?.(approval.approvalKey, "approved", toolCallId);
                     ctx.onApprove(approval.approvalKey);
                 }, className: cn("inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium transition-colors", "bg-foreground text-background hover:bg-foreground/90"), children: [_jsx(IconCheck, { className: "h-3.5 w-3.5" }), "Approve"] })), ctx?.onAlwaysAllow && (_jsxs("button", { type: "button", onClick: () => {
-                    setApproved(true);
+                    setLocalResolution("approved");
+                    ctx.onApprovalResolved?.(approval.approvalKey, "approved", toolCallId);
                     ctx.onAlwaysAllow?.(approval.approvalKey);
                 }, title: "Approve and always allow this exact command", className: cn("inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconShieldCheck, { className: "h-3.5 w-3.5" }), "Always allow"] })), _jsxs("button", { type: "button", onClick: () => {
-                    setDenied(true);
+                    setLocalResolution("denied");
+                    ctx?.onApprovalResolved?.(approval.approvalKey, "denied", toolCallId);
                     ctx?.onDeny?.(approval.approvalKey);
                 }, className: cn("inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium transition-colors", "text-foreground hover:bg-muted"), children: [_jsx(IconX, { className: "h-3.5 w-3.5" }), "Deny"] })] }));
 }
@@ -481,9 +490,9 @@ export function ToolCallDisplay({ toolName, toolCallId, argsText, args, result,
     if (toolKind === "write") {
         return wrapToolDisplay(_jsx(WriteCell, { meta: structuredMeta, isRunning: isRunning }));
     }
-    return wrapToolDisplay(_jsx(ToolCallDisplayGeneric, { toolName: toolName, argsText: argsText, args: args, result: result, mcpApp: mcpApp, chatUI: chatUI, isRunning: isRunning, outcome: outcome, isActiveTail: showActiveTail, structuredMeta: structuredMeta, approval: approval, repeatCount: repeatCount }));
+    return wrapToolDisplay(_jsx(ToolCallDisplayGeneric, { toolName: toolName, toolCallId: toolCallId, argsText: argsText, args: args, result: result, mcpApp: mcpApp, chatUI: chatUI, isRunning: isRunning, outcome: outcome, isActiveTail: showActiveTail, structuredMeta: structuredMeta, approval: approval, repeatCount: repeatCount }));
 }
-function ToolCallDisplayGeneric({ toolName, argsText, args, result, mcpApp, chatUI, isRunning, outcome, isActiveTail, structuredMeta, approval, repeatCount, }) {
+function ToolCallDisplayGeneric({ toolName, toolCallId, argsText, args, result, mcpApp, chatUI, isRunning, outcome, isActiveTail, structuredMeta, approval, repeatCount, }) {
     const isRawCallAgent = toolName === "call-agent";
     const isAgentCall = toolName.startsWith("agent:") || isRawCallAgent;
     const [expanded, setExpanded] = useState(isAgentCall);
@@ -585,7 +594,7 @@ function ToolCallDisplayGeneric({ toolName, argsText, args, result, mcpApp, chat
                 ? structuredMeta.agentDurationMs
                 : agentActivity?.durationMs }));
     }
-    return (_jsxs("div", { className: "group/tool my-0.5 w-full overflow-hidden", children: [mcpApp && _jsx(McpAppRenderer, { app: mcpApp, className: "mb-1.5" }), _jsxs("button", { type: "button", onClick: () => canExpand && setExpanded(!isExpanded), "aria-expanded": canExpand ? isExpanded : undefined, className: cn("flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground transition-colors", canExpand && "hover:text-foreground", isRunning && "text-muted-foreground"), children: [_jsx("span", { className: "relative flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "size-3.5 text-destructive" })) : isUnknownOutcome ? (_jsx(IconAlertTriangle, { className: "size-3.5 text-muted-foreground" })) : (_jsxs(_Fragment, { children: [_jsx(ToolIcon, { className: cn("size-3.5 transition-opacity", canExpand && "group-hover/tool:opacity-0") }), canExpand && (_jsx(IconChevronRight, { className: cn("absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100", isExpanded && "rotate-90") }))] })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: displayName }), repeatCount && repeatCount > 1 && (_jsxs("span", { className: "shrink-0 rounded border border-border/60 px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground", title: `Repeated ${repeatCount} times`, children: [repeatCount, "x"] }))] }), _jsx(AnimatedCollapse, { open: isExpanded && !isAgentCall && (hasArgs || result !== undefined), children: _jsxs("div", { className: "mt-1 space-y-2 pl-5", children: [inputPayload && (_jsx(SimpleCodeViewer, { text: inputPayload.text, lang: inputPayload.lang })), resultPayload && (_jsx(ToolOutputPopover, { open: outputOpen, onOpenChange: setOutputOpen, title: outputTitle, payload: resultPayload, children: _jsx("button", { type: "button", "aria-label": `View ${toolName} output`, className: "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground", children: _jsx(IconCode, { className: "size-3.5" }) }) }))] }) }), isUnknownOutcome && (_jsx("p", { role: "status", className: "ps-5 text-xs text-muted-foreground", children: "Interrupted before this finished reporting \u2014 it may or may not have completed. Check before retrying." })), approval && (_jsx(ApprovalAffordance, { toolName: toolName, approval: approval }))] }));
+    return (_jsxs("div", { className: "group/tool my-0.5 w-full overflow-hidden", children: [mcpApp && _jsx(McpAppRenderer, { app: mcpApp, className: "mb-1.5" }), _jsxs("button", { type: "button", onClick: () => canExpand && setExpanded(!isExpanded), "aria-expanded": canExpand ? isExpanded : undefined, className: cn("flex w-full items-center gap-1.5 rounded-md py-0.5 text-left text-[13px] text-muted-foreground transition-colors", canExpand && "hover:text-foreground", isRunning && "text-muted-foreground"), children: [_jsx("span", { className: "relative flex size-4 shrink-0 items-center justify-center", children: isRunning ? (_jsx(IconLoader2, { className: "size-3.5 animate-spin" })) : isAgentError ? (_jsx(IconCircleX, { className: "size-3.5 text-destructive" })) : isUnknownOutcome ? (_jsx(IconAlertTriangle, { className: "size-3.5 text-muted-foreground" })) : (_jsxs(_Fragment, { children: [_jsx(ToolIcon, { className: cn("size-3.5 transition-opacity", canExpand && "group-hover/tool:opacity-0") }), canExpand && (_jsx(IconChevronRight, { className: cn("absolute size-3.5 opacity-0 transition-[opacity,transform] group-hover/tool:opacity-100", isExpanded && "rotate-90") }))] })) }), _jsx("span", { className: cn("min-w-0 truncate font-normal", isActiveTail && "agent-running-shimmer"), children: displayName }), repeatCount && repeatCount > 1 && (_jsxs("span", { className: "shrink-0 rounded border border-border/60 px-1.5 py-0.5 text-[10px] leading-none text-muted-foreground", title: `Repeated ${repeatCount} times`, children: [repeatCount, "x"] }))] }), _jsx(AnimatedCollapse, { open: isExpanded && !isAgentCall && (hasArgs || result !== undefined), children: _jsxs("div", { className: "mt-1 space-y-2 pl-5", children: [inputPayload && (_jsx(SimpleCodeViewer, { text: inputPayload.text, lang: inputPayload.lang })), resultPayload && (_jsx(ToolOutputPopover, { open: outputOpen, onOpenChange: setOutputOpen, title: outputTitle, payload: resultPayload, children: _jsx("button", { type: "button", "aria-label": `View ${toolName} output`, className: "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground", children: _jsx(IconCode, { className: "size-3.5" }) }) }))] }) }), isUnknownOutcome && (_jsx("p", { role: "status", className: "ps-5 text-xs text-muted-foreground", children: "Interrupted before this finished reporting \u2014 it may or may not have completed. Check before retrying." })), approval && (_jsx(ApprovalAffordance, { toolName: toolName, toolCallId: toolCallId, approval: approval }))] }));
 }
 function AgentCallCell({ agentName, activity, progress, responseText, isRunning, isError, durationMs, }) {
     const t = useT();

package/dist/client/chat-first/app-pane.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from "@agent-native/toolkit/ui";
 import { defaultChatFirstCopy } from "./copy.js";
 export function ChatFirstAppPane({ app, status, embedUrl, errorMessage, onRetry, renderEmbed, copy = defaultChatFirstCopy, }) {
-    return (_jsx("section", { "data-chat-first-app-pane": true, className: "flex h-full min-h-0 w-full flex-col overflow-hidden bg-background", "aria-label": app ? `${app.name} app` : copy("appUnavailable"), children: status === "loading" ? (_jsxs("div", { className: "space-y-3 p-4", children: [_jsx(Skeleton, { className: "h-5 w-40" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-2/3" })] })) : status === "ready" && app && embedUrl ? (_jsx("div", { className: "relative min-h-0 flex-1 overflow-hidden", children: renderEmbed({ url: embedUrl, title: app.name }) })) : status === "error" ? (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: errorMessage || copy("appUnavailable") }), onRetry ? (_jsx("button", { type: "button", className: "rounded-md border border-border px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: onRetry, children: copy("retry") })) : null] })) : (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground", children: copy("appUnavailable") })) }));
+    return (_jsx("section", { "data-chat-first-app-pane": true, className: "flex h-full min-h-0 w-full flex-col overflow-hidden bg-background", "aria-label": app ? `${app.name} app` : copy("appUnavailable"), children: status === "loading" ? (_jsxs("div", { className: "space-y-3 p-4", children: [_jsx(Skeleton, { className: "h-5 w-40" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-2/3" })] })) : status === "ready" && app && embedUrl ? (_jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: renderEmbed({ url: embedUrl, title: app.name }) })) : status === "error" ? (_jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: errorMessage || copy("appUnavailable") }), onRetry ? (_jsx("button", { type: "button", className: "rounded-md border border-border px-3 py-1.5 text-xs text-foreground hover:bg-accent", onClick: onRetry, children: copy("retry") })) : null] })) : (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground", children: copy("appUnavailable") })) }));
 }

package/dist/client/chat-first/apps-rail.d.ts

@@ -1,2 +1,2 @@
 import type { ChatFirstAppRailProps } from "./types.js";
-export declare function ChatFirstAppsRail({ apps, activeAppId, loading, error, collapsed, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onOpenAllApps, onCreateApp, createAppTrigger, renderIcon, copy, }: ChatFirstAppRailProps): import("react").JSX.Element;
+export declare const ChatFirstAppsRail: import("react").MemoExoticComponent<({ apps, activeAppId, loading, error, collapsed, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onOpenAllApps, onCreateApp, createAppTrigger, renderIcon, copy, }: ChatFirstAppRailProps) => import("react").JSX.Element>;

package/dist/client/chat-first/apps-rail.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, Skeleton, Tooltip, TooltipContent, TooltipTrigger, } from "@agent-native/toolkit/ui";
 import { IconApps, IconChevronDown, IconChevronUp, IconPin, IconPlus, } from "@tabler/icons-react";
-import { useMemo, useState } from "react";
+import { memo, useMemo, useState } from "react";
 import { orderChatFirstAppIds, readChatFirstAppLayout, writeChatFirstAppLayout, } from "../chat-first.js";
 import { cn } from "../utils.js";
 import { defaultChatFirstCopy } from "./copy.js";
@@ -11,16 +11,16 @@ function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, on
     const orderedApps = orderedIds
         .map((id) => appsById.get(id))
         .filter((app) => Boolean(app));
-    return (_jsx("ul", { className: "space-y-px", children: orderedApps.map((app) => {
+    return (_jsx("ul", { className: "space-y-1", children: orderedApps.map((app) => {
             const active = activeAppId === app.id;
             const pinned = layout.pinnedIds.includes(app.id);
             const index = orderedApps.indexOf(app);
-            return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("li", { draggable: true, "data-chat-first-app": true, "data-app-id": app.id, className: cn("group flex h-6 w-full min-w-0 items-center gap-1 rounded-md px-1 text-sm transition-colors", active
+            return (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs("li", { draggable: true, "data-chat-first-app": true, "data-app-id": app.id, className: cn("group flex h-8 w-full min-w-0 items-center gap-1 rounded-md px-1 text-sm", active
                                 ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
                                 : "text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onDragStart: (event) => {
                                 event.dataTransfer.effectAllowed = "move";
                                 onDragStart(app.id);
-                            }, onDragOver: (event) => event.preventDefault(), onDrop: () => onDrop(app.id), onDragEnd: onDragEnd, children: [_jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-2 px-1 text-start", onClick: () => onOpenApp(app), onKeyDown: (event) => {
+                            }, onDragOver: (event) => event.preventDefault(), onDrop: () => onDrop(app.id), onDragEnd: onDragEnd, children: [_jsxs("button", { type: "button", className: "flex h-full min-w-0 flex-1 items-center gap-2 px-1 text-start", onClick: () => onOpenApp(app), onKeyDown: (event) => {
                                         if (!event.altKey)
                                             return;
                                         if (event.key === "ArrowUp") {
@@ -31,12 +31,12 @@ function AppRows({ apps, activeAppId, layout, onDragStart, onDrop, onDragEnd, on
                                             event.preventDefault();
                                             onMove(app.id, 1);
                                         }
-                                    }, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown", "aria-label": copy("openApp", { name: app.name }), title: app.name, children: [renderIcon(app), _jsx("span", { className: "truncate", children: app.name })] }), _jsx("button", { type: "button", className: cn("flex size-6 shrink-0 items-center justify-center rounded text-sidebar-foreground/45 opacity-0 transition-opacity hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100 focus-visible:opacity-100", pinned && "text-sidebar-foreground/70 opacity-100"), "aria-label": copy(pinned ? "unpinApp" : "pinApp", {
+                                    }, "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown", "aria-label": copy("openApp", { name: app.name }), children: [renderIcon(app), _jsx("span", { className: "truncate", children: app.name })] }), _jsx("button", { type: "button", className: cn("flex size-6 shrink-0 items-center justify-center rounded text-sidebar-foreground/45 opacity-0 hover:bg-sidebar-accent hover:text-sidebar-foreground group-hover:opacity-100 focus-visible:opacity-100", pinned && "text-sidebar-foreground/70 opacity-100"), "aria-label": copy(pinned ? "unpinApp" : "pinApp", {
                                         name: app.name,
-                                    }), "aria-pressed": pinned, title: pinned ? copy("removePinned") : copy("pinTop"), onClick: () => onTogglePinned(app.id), children: _jsx(IconPin, { size: 13, strokeWidth: pinned ? 2.2 : 1.6, "aria-hidden": "true" }) }), _jsx("span", { className: "sr-only", children: `${index + 1} of ${orderedApps.length}` })] }) }), _jsxs(ContextMenuContent, { children: [_jsxs(ContextMenuItem, { onSelect: () => onTogglePinned(app.id), children: [_jsx(IconPin, { size: 14, "aria-hidden": "true" }), pinned ? copy("removePinned") : copy("pinTop")] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: index === 0, onSelect: () => onMove(app.id, -1), children: [_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" }), copy("moveUp")] }), _jsxs(ContextMenuItem, { disabled: index === orderedApps.length - 1, onSelect: () => onMove(app.id, 1), children: [_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), copy("moveDown")] })] })] }, app.id));
+                                    }), "aria-pressed": pinned, onClick: () => onTogglePinned(app.id), children: _jsx(IconPin, { size: 13, strokeWidth: pinned ? 2.2 : 1.6, "aria-hidden": "true" }) }), _jsx("span", { className: "sr-only", children: `${index + 1} of ${orderedApps.length}` })] }) }), _jsxs(ContextMenuContent, { children: [_jsxs(ContextMenuItem, { onSelect: () => onTogglePinned(app.id), children: [_jsx(IconPin, { size: 14, "aria-hidden": "true" }), pinned ? copy("removePinned") : copy("pinTop")] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: index === 0, onSelect: () => onMove(app.id, -1), children: [_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" }), copy("moveUp")] }), _jsxs(ContextMenuItem, { disabled: index === orderedApps.length - 1, onSelect: () => onMove(app.id, 1), children: [_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }), copy("moveDown")] })] })] }, app.id));
         }) }));
 }
-export function ChatFirstAppsRail({ apps, activeAppId, loading = false, error, collapsed = false, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onOpenAllApps, onCreateApp, createAppTrigger, renderIcon, copy = defaultChatFirstCopy, }) {
+export const ChatFirstAppsRail = memo(function ChatFirstAppsRail({ apps, activeAppId, loading = false, error, collapsed = false, layout: controlledLayout, onLayoutChange, onLayoutError, onRetry, onOpenApp, onOpenAllApps, onCreateApp, createAppTrigger, renderIcon, copy = defaultChatFirstCopy, }) {
     const [localLayout, setLocalLayout] = useState(() => readChatFirstAppLayout());
     const layout = controlledLayout ?? localLayout;
     const [draggedAppId, setDraggedAppId] = useState(null);
@@ -95,9 +95,9 @@ export function ChatFirstAppsRail({ apps, activeAppId, loading = false, error, c
     if (collapsed) {
         return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "flex flex-col items-center gap-1 px-1.5 pt-2", "aria-label": copy("workspaceApps"), children: [createTrigger, loading && apps.length === 0
                     ? [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "size-9 rounded-md" }, index)))
-                    : visibleApps.map((app) => (_jsx("button", { type: "button", "data-chat-first-app": true, "data-app-id": app.id, className: cn("flex size-9 items-center justify-center rounded-md transition-colors", activeAppId === app.id
+                    : visibleApps.map((app) => (_jsx("button", { type: "button", "data-chat-first-app": true, "data-app-id": app.id, className: cn("flex size-9 items-center justify-center rounded-md", activeAppId === app.id
                             ? "bg-sidebar-accent text-sidebar-accent-foreground"
-                            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: renderIcon(app) }, app.id))), onOpenAllApps ? (_jsx("button", { type: "button", "data-chat-first-all-apps": true, className: "flex size-9 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: onOpenAllApps, "aria-label": copy("allApps"), title: copy("allApps"), children: _jsx(IconApps, { size: 16, "aria-hidden": "true" }) })) : null, error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
+                            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"), onClick: () => onOpenApp(app), "aria-label": copy("openApp", { name: app.name }), title: app.name, children: renderIcon(app) }, app.id))), onOpenAllApps ? (_jsx("button", { type: "button", "data-chat-first-all-apps": true, className: "flex size-9 items-center justify-center rounded-md text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", onClick: onOpenAllApps, "aria-label": copy("allApps"), title: copy("allApps"), children: _jsx(IconApps, { size: 16, "aria-hidden": "true" }) })) : null, error ? (_jsx("span", { className: "size-1.5 rounded-full bg-destructive", title: error, "aria-label": error })) : null] }));
     }
-    return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-2 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-1 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-1", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-7 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-1", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-6 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, onOpenAllApps ? (_jsx("div", { className: "mt-1 border-t border-sidebar-border/60 pt-1", children: _jsxs("button", { type: "button", "data-chat-first-all-apps": true, className: "flex h-7 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onOpenAllApps, children: [_jsx(IconApps, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: copy("allApps") })] }) })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-1 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
-}
+    return (_jsxs("section", { "data-chat-first-apps-rail": true, className: "mt-3 px-2 pb-2 pt-2", "aria-label": copy("workspaceApps"), children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 px-1 text-[11px] font-medium text-sidebar-foreground/50", children: [_jsx("span", { children: copy("workspaceApps") }), _jsx("span", { className: "ml-auto", children: createTrigger })] }), loading && apps.length === 0 ? (_jsx("div", { className: "space-y-0.5 px-1", children: [0, 1, 2].map((index) => (_jsx(Skeleton, { className: "h-8 w-full rounded-md" }, index))) })) : apps.length === 0 ? (_jsxs("div", { className: "px-1", children: [_jsx("p", { className: "text-xs text-sidebar-foreground/55", children: copy("noWorkspaceApps") }), createAppTrigger ? (createTrigger) : onCreateApp ? (_jsxs("button", { type: "button", className: "mt-1 inline-flex h-6 items-center gap-1.5 rounded-md border border-sidebar-border px-2 text-xs text-sidebar-foreground/75 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onCreateApp, children: [_jsx(IconPlus, { size: 13, "aria-hidden": "true" }), copy("createApp")] })) : (createTrigger)] })) : (_jsx(AppRows, { apps: visibleApps, activeAppId: activeAppId, layout: layout, onDragStart: setDraggedAppId, onDrop: reorderApps, onDragEnd: () => setDraggedAppId(null), onOpenApp: onOpenApp, onTogglePinned: togglePinned, onMove: moveApp, renderIcon: renderIcon, copy: copy })), hasMoreApps || showAllApps ? (_jsxs("button", { type: "button", className: "mt-0.5 flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/50 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: () => setShowAllApps((value) => !value), children: [showAllApps ? (_jsx(IconChevronUp, { size: 14, "aria-hidden": "true" })) : (_jsx(IconChevronDown, { size: 14, "aria-hidden": "true" })), showAllApps ? copy("showLess") : copy("showMore")] })) : null, onOpenAllApps ? (_jsx("div", { className: "mt-1 border-t border-sidebar-border/60 pt-1", children: _jsxs("button", { type: "button", "data-chat-first-all-apps": true, className: "flex h-8 w-full items-center gap-2 rounded-md px-2 text-xs text-sidebar-foreground/55 hover:bg-sidebar-accent hover:text-sidebar-foreground", onClick: onOpenAllApps, children: [_jsx(IconApps, { size: 14, "aria-hidden": "true" }), _jsx("span", { children: copy("allApps") })] }) })) : null, error ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "mt-1 flex items-center gap-1 px-1 text-[10px] text-destructive/80", onClick: onRetry, "aria-label": error, children: [_jsx("span", { className: "size-1.5 rounded-full bg-destructive" }), onRetry ? copy("retry") : copy("appsLoadError")] }) }), _jsx(TooltipContent, { side: "right", children: error })] })) : null] }));
+});

package/dist/client/chat-first/chat-history.d.ts

@@ -9,4 +9,4 @@ export interface ChatFirstChatHistoryProps extends Omit<ChatHistoryListProps, "i
  * host. Hosts still own thread fetching and actions, but row rhythm and the
  * Chats section treatment stay identical.
  */
-export declare function ChatFirstChatHistory({ items, label, className, ...props }: ChatFirstChatHistoryProps): import("react").JSX.Element;
+export declare function ChatFirstChatHistory({ items, label, className, ...props }: ChatFirstChatHistoryProps): import("react").JSX.Element | null;

package/dist/client/chat-first/chat-history.js

@@ -6,5 +6,7 @@ import { ChatHistoryList, } from "../chat/ChatHistoryList.js";
  * Chats section treatment stay identical.
  */
 export function ChatFirstChatHistory({ items, label = "Chats", className, ...props }) {
+    if (items.length === 0)
+        return null;
     return (_jsxs("section", { "data-chat-first-chat-history": true, className: ["min-h-0 min-w-0", className].filter(Boolean).join(" "), children: [_jsx("p", { className: "mb-1 px-2 text-[11px] font-medium text-sidebar-foreground/50", children: label }), _jsx(ChatHistoryList, { ...props, items: items, variant: "rail", className: "min-w-0" })] }));
 }