@mcp-b/react-components 0.24.0 → 0.25.0

package/dist/components/ThinkFullApp.js

@@ -1,15 +1,14 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Button } from "./Button.js";
-import { C as FileIcon, Z as TerminalIcon, c as BoxIcon, f as ChevronDownIcon } from "../icons-ua6f_GH3.js";
+import { C as FileIcon, Q as TerminalIcon, c as BoxIcon, f as ChevronDownIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../WorkspaceLink-BYYeTQLf.js";
 import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { AppTopBar } from "./AppTopBar.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-E_HrfH76.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-DVhCEjq-.js";
 import { useWorkspace } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";
 import { ScrollArea } from "./ScrollArea.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
-import { n as runViewTransition } from "../view-transitions-DyUP0lSg.js";
 import { ResizableSidePanel } from "./ResizableSidePanel.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
@@ -49,8 +48,8 @@ function PluginsPanel({ config }) {
 /** Combines ThinkChat with an optional resizable workbench shell. */
 function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat, className, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun, showAgentTools = true, showExecutionWorkbench = true, showMobileViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
 	const appRef = React.useRef(null);
-	const viewScopeRef = React.useRef(null);
 	const workbenchPanelRef = React.useRef(null);
+	const pendingPanelFocusRef = React.useRef(null);
 	const approvals = useThinkPendingExecutionApprovals(agent.stub, sourceKey, `${chat.messages.length}:${chat.status}`, messages?.approvalsEnabled !== false);
 	const resolvedMessages = React.useMemo(() => {
 		const approvalProps = resolveThinkApprovalProps({
@@ -91,10 +90,7 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		onMobileViewChange?.(next);
 	}, [mobileView, onMobileViewChange]);
 	const updateAppView = React.useCallback((update) => {
-		return runViewTransition({
-			scope: viewScopeRef.current,
-			update
-		});
+		React.startTransition(update);
 	}, []);
 	const panelContext = React.useMemo(() => ({
 		agent,
@@ -116,12 +112,20 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		id: "execution",
 		label: "Execution",
 		icon: /* @__PURE__ */ jsx(TerminalIcon, {}),
-		render: ({ agent }) => /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
-			source: agent.stub,
-			sourceKey,
-			title: "Execution",
-			selectedRun: selectedExecutionRun,
-			renderRunLink: renderExecutionRunLink
+		render: ({ agent }) => /* @__PURE__ */ jsx(React.Suspense, {
+			fallback: /* @__PURE__ */ jsx("div", {
+				className: "think-full-app__workbench",
+				role: "status",
+				"aria-label": "Loading execution",
+				children: /* @__PURE__ */ jsx(SpinnerIcon, {})
+			}),
+			children: /* @__PURE__ */ jsx(ThinkExecutionWorkbench, {
+				source: agent.stub,
+				sourceKey,
+				title: "Execution",
+				selectedRun: selectedExecutionRun,
+				renderRunLink: renderExecutionRunLink
+			})
 		})
 	});
 	if (plugins) availableWorkbenchPanels.push({
@@ -139,20 +143,21 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 	const workbenchViews = availableWorkbenchPanels;
 	const shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasWorkbench);
 	const hasAppBarRow = shouldRenderInlineAppBar;
+	React.useLayoutEffect(() => {
+		const pendingFocus = pendingPanelFocusRef.current;
+		if (!pendingFocus || pendingFocus.id !== activeWorkbenchView) return;
+		pendingPanelFocusRef.current = null;
+		Array.from(workbenchPanelRef.current?.querySelectorAll("button") ?? []).find((button) => button.getAttribute("aria-label") === pendingFocus.label)?.focus({ preventScroll: true });
+	}, [activeWorkbenchView]);
 	const updateWorkbenchPanel = (next) => {
 		const activeElement = document.activeElement;
 		const restorePanelSwitchFocus = activeElement instanceof HTMLElement && workbenchPanelRef.current?.contains(activeElement);
 		const nextLabel = availableWorkbenchPanels.find((panel) => panel.id === next)?.label;
-		const restoreFocus = () => {
-			if (!restorePanelSwitchFocus || !nextLabel) return;
-			Array.from(workbenchPanelRef.current?.querySelectorAll("button") ?? []).find((button) => button.getAttribute("aria-label") === nextLabel)?.focus({ preventScroll: true });
-		};
-		const transition = runViewTransition({
-			scope: workbenchPanelRef.current,
-			update: () => setWorkbenchView(next)
-		});
-		if (transition) transition.updateCallbackDone.then(restoreFocus, restoreFocus);
-		else requestAnimationFrame(restoreFocus);
+		pendingPanelFocusRef.current = restorePanelSwitchFocus && nextLabel ? {
+			id: next,
+			label: nextLabel
+		} : null;
+		React.startTransition(() => setWorkbenchView(next));
 	};
 	const renderAppTopBar = (sidebarControls) => /* @__PURE__ */ jsxs(AppTopBar.Root, {
 		className: "think-full-app__app-bar",
@@ -230,42 +235,48 @@ function ThinkFullApp({ agent, appBarActions, appBarLeading, appBarTitle, chat,
 		...props,
 		children: [
 			shouldRenderInlineAppBar ? renderAppTopBar() : null,
-			/* @__PURE__ */ jsxs("div", {
-				ref: viewScopeRef,
-				className: "think-full-app__view-scope",
-				"data-recipe": "application-plane",
-				children: [/* @__PURE__ */ jsx("section", {
-					className: "think-full-app__chat-surface",
-					"data-workspace-restoration-scope": "chat",
-					"aria-label": "Chat",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__chat",
+			/* @__PURE__ */ jsx(React.ViewTransition, {
+				default: "sigvelo-layout-transition",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "think-full-app__view-scope",
+					"data-recipe": "application-plane",
+					"data-mobile-view": activeMobileView,
+					children: [/* @__PURE__ */ jsx("section", {
+						className: "think-full-app__chat-surface",
+						"data-workspace-restoration-scope": "chat",
+						"aria-label": "Chat",
 						children: /* @__PURE__ */ jsx("div", {
-							className: "think-full-app__chat-inner",
-							children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
-								chat,
-								agentTools,
-								children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
-									...resolvedMessages,
-									renderAgentToolRunLink: showAgentTools ? renderAgentToolRunLink : void 0
+							className: "think-full-app__chat",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "think-full-app__chat-inner",
+								children: /* @__PURE__ */ jsx(ThinkChat.Provider, {
+									chat,
+									agentTools,
+									children: /* @__PURE__ */ jsx(ThinkChat.Messages, {
+										...resolvedMessages,
+										renderAgentToolRunLink: showAgentTools ? renderAgentToolRunLink : void 0
+									})
 								})
 							})
 						})
-					})
-				}), activePanel ? /* @__PURE__ */ jsx("aside", {
-					className: "think-full-app__aside",
-					"aria-label": "Workbench",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-full-app__workbench-slot",
+					}), activePanel ? /* @__PURE__ */ jsx("aside", {
+						className: "think-full-app__aside",
+						"aria-label": "Workbench",
 						children: /* @__PURE__ */ jsx("div", {
-							ref: workbenchPanelRef,
-							className: "think-full-app__workbench-panel",
-							"data-view": activeWorkbenchView,
-							tabIndex: -1,
-							children: activePanel.render(panelContext)
+							className: "think-full-app__workbench-slot",
+							children: /* @__PURE__ */ jsx(React.ViewTransition, {
+								default: "sigvelo-layout-transition",
+								children: /* @__PURE__ */ jsx("div", {
+									ref: workbenchPanelRef,
+									className: "think-full-app__workbench-panel",
+									"data-view": activeWorkbenchView,
+									tabIndex: -1,
+									children: activePanel.render(panelContext)
+								})
+							})
 						})
-					})
-				}) : null]
+					}) : null]
+				})
 			}),
 			activePanel ? /* @__PURE__ */ jsx(ResizableSidePanel.Handle, { className: "think-full-app__resizer" }) : null
 		]

package/dist/components/ThinkRecoveryNotice.d.ts

@@ -1,2 +1,2 @@
-import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-DFIcG9UX.js";
+import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-D6gYcBbr.js";
 export { ThinkRecoveryNotice, ThinkRecoveryNoticeProps };

package/dist/components/ThinkRoutineBrowser.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { buttonVariants } from "./Button.js";
-import { H as PlusIcon } from "../icons-ua6f_GH3.js";
+import { H as PlusIcon } from "../icons-w5PpKGRz.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Tooltip } from "./Tooltip.js";
 import { t as capitalize } from "../format-S6uWyoSb.js";

package/dist/components/ThinkRoutineForm.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Button, buttonVariants } from "./Button.js";
-import { q as SpinnerIcon } from "../icons-ua6f_GH3.js";
+import { q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Select } from "./Select.js";
 import { Field } from "./Field.js";

package/dist/components/ThinkRoutineLibrary.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Button, buttonVariants } from "./Button.js";
-import { $ as WarningIcon, V as PlayIcon, b as EllipsisIcon, f as ChevronDownIcon, q as SpinnerIcon } from "../icons-ua6f_GH3.js";
+import { V as PlayIcon, b as EllipsisIcon, et as WarningIcon, f as ChevronDownIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { Menu } from "./Menu.js";
 import { AppTopBar } from "./AppTopBar.js";

package/dist/components/ThinkThreadPicker.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Button, buttonVariants } from "./Button.js";
-import { $ as WarningIcon, H as PlusIcon, q as SpinnerIcon, t as ArchiveIcon, v as DotIcon } from "../icons-ua6f_GH3.js";
+import { H as PlusIcon, et as WarningIcon, q as SpinnerIcon, t as ArchiveIcon, v as DotIcon } from "../icons-w5PpKGRz.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { EmptyState } from "./EmptyState.js";
 import { SearchField } from "./SearchField.js";

package/dist/components/Toast.js

@@ -1,6 +1,6 @@
 import { n as mergeBaseClassName } from "../class-names-BiMDVpUo.js";
 import { buttonVariants } from "./Button.js";
-import { tt as XIcon } from "../icons-ua6f_GH3.js";
+import { nt as XIcon } from "../icons-w5PpKGRz.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import { Toast as Toast$1 } from "@base-ui/react/toast";

package/dist/components/ToolInvocation.d.ts

@@ -8,6 +8,12 @@ interface ToolInvocationProps {
   part: ToolInvocationPart;
   /** Render the existing Activity disclosure expanded initially. */
   defaultOpen?: boolean;
+  /**
+   * Overrides the part-derived shimmer. Callers that know the run has settled
+   * pass false so a part stuck in a working state (denied approval, aborted
+   * stream) doesn't shimmer forever.
+   */
+  isStreaming?: boolean;
 }
 /**
  * Read-only generic disclosure for one upstream AI SDK tool invocation.
@@ -20,7 +26,8 @@ interface ToolInvocationProps {
  */
 declare function ToolInvocation({
   part,
-  defaultOpen
+  defaultOpen,
+  isStreaming
 }: ToolInvocationProps): import("react").JSX.Element;
 //#endregion
 export { ToolInvocation, ToolInvocationPart, ToolInvocationProps };

package/dist/components/ToolInvocation.js

@@ -45,7 +45,7 @@ function describeToolPart(part) {
 * transcript renderer. ThinkChat may replace this fallback with richer panels
 * for known workspace, browser, fetch, session, skill, and execute tools.
 */
-function ToolInvocation({ part, defaultOpen }) {
+function ToolInvocation({ part, defaultOpen, isStreaming }) {
 	const state = getToolPartState(part);
 	const failed = isToolPartFailed(part);
 	const deniedReason = part.state === "output-denied" ? part.approval.reason : void 0;
@@ -53,8 +53,9 @@ function ToolInvocation({ part, defaultOpen }) {
 	const inputStatus = part.state === "approval-requested" ? "awaiting approval" : part.state === "approval-responded" ? part.approval.approved ? "approved" : "denied" : void 0;
 	const outputStatus = state === "denied" ? "denied" : failed ? "error" : part.state === "output-available" && part.preliminary ? "preliminary" : void 0;
 	return /* @__PURE__ */ jsxs(Activity, {
-		isStreaming: isToolPartWorking(part),
+		isStreaming: isStreaming ?? isToolPartWorking(part),
 		defaultOpen,
+		stateKey: part.toolCallId,
 		children: [/* @__PURE__ */ jsx(ActivityTrigger, { action: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
 			label: part.title ?? getToolName(part),
 			text: formatToolValue(getToolInput(part)),

package/dist/components/WebPreview.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../icons-ua6f_GH3.js";
+import { W as RefreshIcon, f as ChevronDownIcon, i as ArrowRightIcon, r as ArrowLeftIcon } from "../icons-w5PpKGRz.js";
 import { IconButton } from "./IconButton.js";
 import { Badge } from "./Badge.js";
 import { Input } from "./Input.js";

package/dist/components/WorkspaceBrowser.js

@@ -1,4 +1,4 @@
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-DW60q1w7.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-CYr5og0q.js";
 import { SearchField } from "./SearchField.js";
 import { WorkspaceHeader } from "./WorkspaceHeader.js";
 import * as React from "react";

package/dist/components/WorkspaceExplorer.js

@@ -3,7 +3,7 @@ import { a as WorkspaceNavigationRestorationBoundary, n as WorkspaceNavigationPr
 import { n as mergeRefs } from "../merge-refs-DF_7w2x_.js";
 import { inferWorkspaceLanguage, inferWorkspaceMedia, isWorkspaceMarkdownPath, isWorkspaceMediaPath, isWorkspaceSkillPath, parseWorkspaceSkill } from "./WorkspaceFile.js";
 import { WorkspaceBrowser } from "./WorkspaceBrowser.js";
-import { t as WorkspaceFileView } from "../WorkspaceFileView-rUEN2iox.js";
+import { t as WorkspaceFileView } from "../WorkspaceFileView-CuMjXYQn.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryOptions, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/WorkspaceFileView.js

@@ -1,2 +1,2 @@
-import { t as WorkspaceFileView } from "../WorkspaceFileView-rUEN2iox.js";
+import { t as WorkspaceFileView } from "../WorkspaceFileView-CuMjXYQn.js";
 export { WorkspaceFileView };

package/dist/components/WorkspaceHeader.js

@@ -1,4 +1,4 @@
-import { W as RefreshIcon } from "../icons-ua6f_GH3.js";
+import { W as RefreshIcon } from "../icons-w5PpKGRz.js";
 import { AppTopBar } from "./AppTopBar.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { $ as TerminalIcon, A as InfoIcon, B as PaperclipIcon, C as EyeOffIcon, D as HashIcon, E as FolderOpenIcon, F as MicrophoneIcon, G as QueueIcon, H as PencilIcon, I as MinusIcon, J as SidebarIcon, K as RefreshIcon, L as MonitorIcon, M as MaximizeIcon, N as McpIcon, O as IconProps, P as MessageSquareIcon, Q as SunIcon, R as MoonIcon, S as EyeIcon, T as FolderIcon, U as PlayIcon, V as PauseIcon, W as PlusIcon, X as SquareIcon, Y as SpinnerIcon, Z as StopIcon, _ as CopyIcon, a as ArrowUpIcon, b as DownloadIcon, c as BoxIcon, d as CalendarIcon, et as TrashIcon, f as CheckIcon, g as CodeIcon, h as ChevronRightIcon, i as ArrowRightIcon, j as LinkIcon, k as ImageIcon, l as BrainIcon, m as ChevronLeftIcon, n as ArrowDownIcon, nt as WrenchIcon, o as ArrowUpRightIcon, p as ChevronDownIcon, q as SearchIcon, r as ArrowLeftIcon, rt as XIcon, s as BookmarkIcon, t as ArchiveIcon, tt as WarningIcon, u as BrandIconProps, v as DiscordIcon, w as FileIcon, x as EllipsisIcon, y as DotIcon, z as MoveToFrontIcon } from "../icons-wP1yFUXF.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, BrandIconProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as TargetIcon, A as InfoIcon, B as PaperclipIcon, C as EyeOffIcon, D as HashIcon, E as FolderOpenIcon, F as MicrophoneIcon, G as QueueIcon, H as PencilIcon, I as MinusIcon, J as SidebarIcon, K as RefreshIcon, L as MonitorIcon, M as MaximizeIcon, N as McpIcon, O as IconProps, P as MessageSquareIcon, Q as SunIcon, R as MoonIcon, S as EyeIcon, T as FolderIcon, U as PlayIcon, V as PauseIcon, W as PlusIcon, X as SquareIcon, Y as SpinnerIcon, Z as StopIcon, _ as CopyIcon, a as ArrowUpIcon, b as DownloadIcon, c as BoxIcon, d as CalendarIcon, et as TerminalIcon, f as CheckIcon, g as CodeIcon, h as ChevronRightIcon, i as ArrowRightIcon, it as XIcon, j as LinkIcon, k as ImageIcon, l as BrainIcon, m as ChevronLeftIcon, n as ArrowDownIcon, nt as WarningIcon, o as ArrowUpRightIcon, p as ChevronDownIcon, q as SearchIcon, r as ArrowLeftIcon, rt as WrenchIcon, s as BookmarkIcon, t as ArchiveIcon, tt as TrashIcon, u as BrandIconProps, v as DiscordIcon, w as FileIcon, x as EllipsisIcon, y as DotIcon, z as MoveToFrontIcon } from "../icons-Cih3W-zM.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, BrandIconProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { $ as WarningIcon, A as MaximizeIcon, B as PencilIcon, C as FileIcon, D as ImageIcon, E as HashIcon, F as MonitorIcon, G as SearchIcon, H as PlusIcon, I as MoonIcon, J as SquareIcon, K as SidebarIcon, L as MoveToFrontIcon, M as MessageSquareIcon, N as MicrophoneIcon, O as InfoIcon, P as MinusIcon, Q as TrashIcon, R as PaperclipIcon, S as EyeOffIcon, T as FolderOpenIcon, U as QueueIcon, V as PlayIcon, W as RefreshIcon, X as SunIcon, Y as StopIcon, Z as TerminalIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CheckIcon, et as WrenchIcon, f as ChevronDownIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, j as McpIcon, k as LinkIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, o as ArrowUpRightIcon, p as ChevronLeftIcon, q as SpinnerIcon, r as ArrowLeftIcon, s as BookmarkIcon, t as ArchiveIcon, tt as XIcon, u as CalendarIcon, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PauseIcon } from "../icons-ua6f_GH3.js";
-export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };
+import { $ as TrashIcon, A as MaximizeIcon, B as PencilIcon, C as FileIcon, D as ImageIcon, E as HashIcon, F as MonitorIcon, G as SearchIcon, H as PlusIcon, I as MoonIcon, J as SquareIcon, K as SidebarIcon, L as MoveToFrontIcon, M as MessageSquareIcon, N as MicrophoneIcon, O as InfoIcon, P as MinusIcon, Q as TerminalIcon, R as PaperclipIcon, S as EyeOffIcon, T as FolderOpenIcon, U as QueueIcon, V as PlayIcon, W as RefreshIcon, X as SunIcon, Y as StopIcon, Z as TargetIcon, _ as DiscordIcon, a as ArrowUpIcon, b as EllipsisIcon, c as BoxIcon, d as CheckIcon, et as WarningIcon, f as ChevronDownIcon, g as CopyIcon, h as CodeIcon, i as ArrowRightIcon, j as McpIcon, k as LinkIcon, l as BrainIcon, m as ChevronRightIcon, n as ArrowDownIcon, nt as XIcon, o as ArrowUpRightIcon, p as ChevronLeftIcon, q as SpinnerIcon, r as ArrowLeftIcon, s as BookmarkIcon, t as ArchiveIcon, tt as WrenchIcon, u as CalendarIcon, v as DotIcon, w as FolderIcon, x as EyeIcon, y as DownloadIcon, z as PauseIcon } from "../icons-w5PpKGRz.js";
+export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpRightIcon, BookmarkIcon, BoxIcon, BrainIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CodeIcon, CopyIcon, DiscordIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, HashIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, McpIcon, MessageSquareIcon, MicrophoneIcon, MinusIcon, MonitorIcon, MoonIcon, MoveToFrontIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, QueueIcon, RefreshIcon, SearchIcon, SidebarIcon, SpinnerIcon, SquareIcon, StopIcon, SunIcon, TargetIcon, TerminalIcon, TrashIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-TWq8nZhc.js → copy-button-Buxmtmp9.js}

@@ -1,4 +1,4 @@
-import { d as CheckIcon, g as CopyIcon } from "./icons-ua6f_GH3.js";
+import { d as CheckIcon, g as CopyIcon } from "./icons-w5PpKGRz.js";
 import { IconButton } from "./components/IconButton.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/{icons-wP1yFUXF.d.ts → icons-Cih3W-zM.d.ts}

@@ -281,10 +281,15 @@ declare const SunIcon: ({
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
+declare const TargetIcon: ({
+  size,
+  strokeWidth,
+  ...props
+}: IconProps) => import("react").JSX.Element;
 declare const MaximizeIcon: ({
   size,
   strokeWidth,
   ...props
 }: IconProps) => import("react").JSX.Element;
 //#endregion
-export { TerminalIcon as $, InfoIcon as A, PaperclipIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MicrophoneIcon as F, QueueIcon as G, PencilIcon as H, MinusIcon as I, SidebarIcon as J, RefreshIcon as K, MonitorIcon as L, MaximizeIcon as M, McpIcon as N, IconProps as O, MessageSquareIcon as P, SunIcon as Q, MoonIcon as R, EyeIcon as S, FolderIcon as T, PlayIcon as U, PauseIcon as V, PlusIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, CopyIcon as _, ArrowUpIcon as a, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, TrashIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, LinkIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, WrenchIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SearchIcon as q, ArrowLeftIcon as r, XIcon as rt, BookmarkIcon as s, ArchiveIcon as t, WarningIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoveToFrontIcon as z };
+export { TargetIcon as $, InfoIcon as A, PaperclipIcon as B, EyeOffIcon as C, HashIcon as D, FolderOpenIcon as E, MicrophoneIcon as F, QueueIcon as G, PencilIcon as H, MinusIcon as I, SidebarIcon as J, RefreshIcon as K, MonitorIcon as L, MaximizeIcon as M, McpIcon as N, IconProps as O, MessageSquareIcon as P, SunIcon as Q, MoonIcon as R, EyeIcon as S, FolderIcon as T, PlayIcon as U, PauseIcon as V, PlusIcon as W, SquareIcon as X, SpinnerIcon as Y, StopIcon as Z, CopyIcon as _, ArrowUpIcon as a, DownloadIcon as b, BoxIcon as c, CalendarIcon as d, TerminalIcon as et, CheckIcon as f, CodeIcon as g, ChevronRightIcon as h, ArrowRightIcon as i, XIcon as it, LinkIcon as j, ImageIcon as k, BrainIcon as l, ChevronLeftIcon as m, ArrowDownIcon as n, WarningIcon as nt, ArrowUpRightIcon as o, ChevronDownIcon as p, SearchIcon as q, ArrowLeftIcon as r, WrenchIcon as rt, BookmarkIcon as s, ArchiveIcon as t, TrashIcon as tt, BrandIconProps as u, DiscordIcon as v, FileIcon as w, EllipsisIcon as x, DotIcon as y, MoveToFrontIcon as z };

package/dist/{icons-ua6f_GH3.js → icons-w5PpKGRz.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-BiMDVpUo.js";
 import { jsx } from "react/jsx-runtime";
-import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
+import { Archive, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ArrowUpRight, Bookmark, Box, Brain, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, CircleStop, CodeXml, Copy, CornerDownRight, Dot, Download, Ellipsis, Eye, EyeOff, File, Folder, FolderOpen, Hash, Image, Info, Link2, ListRestart, LoaderCircle, Maximize2, MessageSquare, Mic, Minus, Monitor, Moon, PanelLeft, Paperclip, Pause, Pencil, Play, Plus, RefreshCw, Search, Square, Sun, Target, Terminal, Trash2, TriangleAlert, Wrench, X } from "lucide-react";
 import { SiDiscord, SiModelcontextprotocol } from "react-icons/si";
 //#region src/components/_internal/icons.tsx
 function icon(Component) {
@@ -87,6 +87,7 @@ const McpIcon = brandIcon(SiModelcontextprotocol);
 const DiscordIcon = brandIcon(SiDiscord);
 const MoonIcon = icon(Moon);
 const SunIcon = icon(Sun);
+const TargetIcon = icon(Target);
 const MaximizeIcon = icon(Maximize2);
 //#endregion
-export { WarningIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SquareIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, InfoIcon as O, MinusIcon as P, TrashIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, SunIcon as X, StopIcon as Y, TerminalIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, WrenchIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, ArrowUpRightIcon as o, ChevronLeftIcon as p, SpinnerIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, XIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };
+export { TrashIcon as $, MaximizeIcon as A, PencilIcon as B, FileIcon as C, ImageIcon as D, HashIcon as E, MonitorIcon as F, SearchIcon as G, PlusIcon as H, MoonIcon as I, SquareIcon as J, SidebarIcon as K, MoveToFrontIcon as L, MessageSquareIcon as M, MicrophoneIcon as N, InfoIcon as O, MinusIcon as P, TerminalIcon as Q, PaperclipIcon as R, EyeOffIcon as S, FolderOpenIcon as T, QueueIcon as U, PlayIcon as V, RefreshIcon as W, SunIcon as X, StopIcon as Y, TargetIcon as Z, DiscordIcon as _, ArrowUpIcon as a, EllipsisIcon as b, BoxIcon as c, CheckIcon as d, WarningIcon as et, ChevronDownIcon as f, CopyIcon as g, CodeIcon as h, ArrowRightIcon as i, McpIcon as j, LinkIcon as k, BrainIcon as l, ChevronRightIcon as m, ArrowDownIcon as n, XIcon as nt, ArrowUpRightIcon as o, ChevronLeftIcon as p, SpinnerIcon as q, ArrowLeftIcon as r, BookmarkIcon as s, ArchiveIcon as t, WrenchIcon as tt, CalendarIcon as u, DotIcon as v, FolderIcon as w, EyeIcon as x, DownloadIcon as y, PauseIcon as z };

package/dist/styles/activity.css

@@ -85,6 +85,12 @@
   padding-inline: var(--sigvelo-spacing-2);
 }
 
+/* Reveal row for step logs capped at the trailing window. */
+.activity__show-earlier {
+  align-self: flex-start;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .activity__item {
   display: flex;
   align-items: baseline;

package/dist/styles/agent-chat.css

@@ -1,5 +1,6 @@
 .agent-chat {
   --agent-chat-content-max-inline-size: 64rem;
+  --agent-chat-composer-scrim-fade: 2.5rem;
 
   container: agent-chat / inline-size;
   position: relative;
@@ -21,13 +22,20 @@
 /* Room for the last message to scroll clear of the floating composer.
    --agent-chat-composer-size is set from a ResizeObserver in AgentChat. */
 .agent-chat__transcript-content {
-  gap: var(--sigvelo-spacing-3);
+  /* Also the virtual rows' block-start offset — keep padding and rows in
+     lockstep (see .message-scroller__virtual-item). Row spacing is NOT css
+     gap: rows are absolutely positioned, so the virtualizer's JS gap option
+     owns it (see VirtualMessageScroller). */
+  --message-scroller-virtual-block-start: var(--sigvelo-spacing-8);
+
   min-inline-size: 0;
   max-inline-size: 100%;
   inline-size: min(100%, var(--agent-chat-content-max-inline-size));
   margin-inline: auto;
-  padding-block: var(--sigvelo-spacing-8)
-    calc(var(--agent-chat-composer-size, 5rem) + var(--sigvelo-spacing-2));
+  /* Clearance = composer + its scrim band, so a transcript resting at the
+     bottom never sits inside the fade. */
+  padding-block: var(--message-scroller-virtual-block-start)
+    calc(var(--agent-chat-composer-size, 5rem) + var(--agent-chat-composer-scrim-fade));
   padding-inline: var(--sigvelo-spacing-4);
 }
 
@@ -272,13 +280,21 @@
   padding: 0 var(--sigvelo-spacing-6) var(--sigvelo-spacing-6);
 }
 
+/* Solid behind the composer itself, dissolving upward so passing transcript
+   content fades into the surface instead of hitting a hard edge (Codex and
+   Claude both ship an equivalent bottom fade band). */
 .agent-chat__composer::after {
   position: absolute;
   z-index: -1;
   inset: 0;
+  inset-block-start: calc(-1 * var(--agent-chat-composer-scrim-fade));
   content: "";
   pointer-events: none;
-  background-color: var(--sigvelo-color-surface);
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--sigvelo-color-surface) var(--agent-chat-composer-scrim-fade)
+  );
 }
 
 .agent-chat__composer > .prompt-input {

package/dist/styles/composition-motion.css

@@ -52,32 +52,22 @@
   }
 }
 
-/*
- * Native snapshot motion uses the major-layout rhythm instead of Chrome's UA
- * default. Element-scoped pseudo-trees attach to their transition root, while
- * the :root selector also covers the document fallback.
- */
-:where(
-  :root,
-  .workspace-explorer,
-  .responsive-sidebar-shell__frame,
-  .think-execution-workbench,
-  .think-routine-library,
-  .think-full-app__view-scope,
-  .think-full-app__workbench-panel
-)::view-transition {
+/* React owns native snapshots; the class comes from <ViewTransition>. */
+::view-transition {
   pointer-events: none;
 }
 
-:where(
-  :root,
-  .workspace-explorer,
-  .responsive-sidebar-shell__frame,
-  .think-execution-workbench,
-  .think-routine-library,
-  .think-full-app__view-scope,
-  .think-full-app__workbench-panel
-)::view-transition-group(*) {
+::view-transition-group(.sigvelo-layout-transition) {
   animation-duration: var(--sigvelo-motion-duration-layout);
   animation-timing-function: var(--sigvelo-motion-ease-change);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(.sigvelo-layout-transition) {
+    animation: none !important;
+  }
+}
+
+:root[data-motion="reduce"]::view-transition-group(.sigvelo-layout-transition) {
+  animation: none !important;
+}

package/dist/styles/goal.css

@@ -0,0 +1,57 @@
+.goal {
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  min-block-size: var(--sigvelo-spacing-6);
+  gap: var(--sigvelo-spacing-1-5);
+  padding-block: var(--sigvelo-spacing-1);
+  padding-inline: var(--sigvelo-spacing-2-5);
+  color: var(--sigvelo-color-text);
+  font-size: var(--sigvelo-text-compact);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.goal__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.goal__content {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  gap: 0 var(--sigvelo-spacing-1);
+  align-items: baseline;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.goal__title {
+  min-inline-size: 0;
+  font-weight: var(--sigvelo-font-weight-semibold);
+}
+
+.goal__objective {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.goal__meta {
+  min-inline-size: 0;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.goal__objective + .goal__meta::before,
+.goal__title + .goal__meta::before {
+  content: "\00b7";
+  margin-inline-end: var(--sigvelo-spacing-1);
+}
+
+.goal__actions {
+  display: inline-flex;
+  flex: none;
+  gap: var(--sigvelo-spacing-1);
+  align-items: center;
+  margin-inline-start: auto;
+}

package/dist/styles/index.css

@@ -98,6 +98,7 @@
 @import "./codex-model-selector.css" layer(components);
 @import "./environment-variables.css" layer(components);
 @import "./file-tree.css" layer(components);
+@import "./goal.css" layer(components);
 @import "./inline-citation.css" layer(components);
 @import "./message.css" layer(components);
 @import "./model-selector.css" layer(components);

package/dist/styles/message-scroller.css

@@ -41,6 +41,31 @@
 .message-scroller__item {
   min-width: 0;
   flex-shrink: 0;
+  /* Off-screen rows skip layout/paint entirely (Codex ships the same pair on
+     turn content). `auto` keeps the last rendered size once measured; 15rem is
+     only the pre-first-render estimate, so scroll math stays sane. */
+  content-visibility: auto;
+  contain-intrinsic-size: auto 15rem;
+}
+
+/* Virtualized variant: rows are windowed and absolutely positioned by
+   TanStack Virtual, so no gap/content-visibility here — the window itself
+   bounds DOM cost, and translateY replaces flow layout. */
+.message-scroller__virtual-content {
+  position: relative;
+  width: 100%;
+}
+
+/* Absolutely positioned rows resolve against the wrapper's padding box, so
+   its padding never insets them. Rows inherit the inline padding to restore
+   the gutters, and start below the block-start padding via the variable the
+   padded wrapper re-exports (0 when the wrapper is unpadded). */
+.message-scroller__virtual-item {
+  position: absolute;
+  inset-block-start: var(--message-scroller-virtual-block-start, 0px);
+  inset-inline: 0;
+  min-width: 0;
+  padding-inline: inherit;
 }
 
 .message-scroller__button {

package/dist/styles/responsive-sidebar-shell.css

@@ -92,6 +92,18 @@
 }
 
 @container responsive-sidebar-shell (inline-size <= 56rem) {
+  /* Narrow hosts flatten the application plane: no desktop chrome remains
+     around it, so margins and elevation would read as a card in a frame. */
+  .responsive-sidebar-shell__main {
+    margin: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .responsive-sidebar-shell > .app-top-bar {
+    background: var(--sigvelo-color-surface);
+  }
+
   .responsive-sidebar-shell__frame {
     grid-template-columns: minmax(0, 1fr);
   }