@mcp-b/react-components 0.3.0 → 0.5.0

package/dist/components/ThinkChat.js

@@ -1,7 +1,7 @@
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityText, ActivityTrigger } from "./Activity.js";
 import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
-import { t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
 import { AgentChat } from "./AgentChat.js";
+import { t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { BrowserReplay } from "./BrowserReplay.js";
 import { WorkspaceExplorer, inferWorkspaceLanguage, useWorkspace } from "./WorkspaceExplorer.js";
@@ -13,7 +13,8 @@ import { useAgent } from "agents/react";
 //#region src/components/ThinkChat.tsx
 /**
 * Think-specific chat rendering: interprets a Think agent's UIMessage stream
-* (reasoning + workspace/skill/fetch/browser tool parts) into Activity blocks.
+* (reasoning + workspace/skill/fetch/browser/execute tool parts) into
+* Activity blocks.
 *
 * Every shape here mirrors an upstream contract — see docs/think-chat.md
 * ("Upstream source map" and the re-alignment checklist) for where each comes from,
@@ -55,6 +56,9 @@ const BROWSER_TOOL_NAMES = new Set([
 function isBrowserToolPart(part) {
 	return isToolUIPart(part) && BROWSER_TOOL_NAMES.has(getToolName(part));
 }
+function isExecuteToolPart(part) {
+	return isToolUIPart(part) && getToolName(part) === "execute";
+}
 const ThinkChatContext = React.createContext(null);
 function useThinkChatContext(component) {
 	const context = React.useContext(ThinkChatContext);
@@ -109,13 +113,17 @@ function ThinkChatRoot({ agent: agentOption, name, children }) {
 * inside the log) or `excludeTools` + your own `renderPart` (standalone
 * card) — see README "App-specific tools" and the Custom Tool Panel story.
 */
-function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, ...props }) {
+function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, executionApprovals, notice, ...props }) {
 	const chat = useThinkChatContext("ThinkChat.Messages");
 	const status = toAgentChatStatus(chat);
 	const defaultRenderPart = React.useMemo(() => createThinkChatActivityRenderer({
 		excludeTools,
 		toolRenderers
 	}), [excludeTools, toolRenderers]);
+	const connectionNotice = chat.isRecovering ? /* @__PURE__ */ jsx(Fragment, { children: "Reconnecting to the agent…" }) : chat.connectionError ? /* @__PURE__ */ jsxs("span", {
+		"data-tone": "danger",
+		children: ["Connection lost", chat.connectionError.reason ? ` — ${chat.connectionError.reason}` : ""]
+	}) : void 0;
 	return /* @__PURE__ */ jsx(AgentChat, {
 		...props,
 		renderPart: renderPart ?? defaultRenderPart,
@@ -123,9 +131,15 @@ function ThinkChatMessages({ renderPart, excludeTools, toolRenderers, ...props }
 		status,
 		onStop: chat.stop,
 		onApprovalResponse: chat.addToolApprovalResponse,
-		onSubmit: ({ text }) => {
+		executionApprovals,
+		notice: notice ?? connectionNotice,
+		onRegenerate: (messageId) => void chat.regenerate({ messageId }),
+		onSubmit: ({ text, files }) => {
 			const trimmed = text.trim();
-			if (trimmed) chat.sendMessage({ text: trimmed });
+			if (trimmed || files.length) chat.sendMessage({
+				text: trimmed,
+				files
+			});
 		}
 	});
 }
@@ -177,6 +191,7 @@ function describeThinkChatActivityPart(part, toolRenderers) {
 	if (isSkillToolPart(part)) return describeSkillToolPart(part);
 	if (isFetchToolPart(part)) return describeFetchToolPart(part);
 	if (isBrowserToolPart(part)) return describeBrowserToolPart(part);
+	if (isExecuteToolPart(part)) return describeExecuteToolPart(part);
 	if (isToolUIPart(part)) {
 		const name = getToolName(part);
 		const verb = isPartFailed(part) ? `${name} failed` : isPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
@@ -251,6 +266,14 @@ function describeBrowserToolPart(part) {
 	})();
 	return failed ? `${label} · failed` : label;
 }
+function describeExecuteToolPart(part) {
+	const output = part.state === "output-available" ? part.output : void 0;
+	if (isPartFailed(part) || output?.status === "error") return "Code failed";
+	if (output?.status === "paused") return "Code waiting for approval";
+	const label = isPartWorking(part) ? "Running code" : "Ran code";
+	const snippet = summarizeToolInput(part.input);
+	return snippet ? `${label} · ${snippet}` : label;
+}
 function describeFetchToolPart(part) {
 	const target = part.input?.url ?? part.input?.path ?? "";
 	const output = part.state === "output-available" ? part.output : void 0;
@@ -266,6 +289,7 @@ function summarizeActivitySteps(parts) {
 	let skillParts = 0;
 	let fetches = 0;
 	let browses = 0;
+	let codeRuns = 0;
 	for (const part of parts) if (isReasoningUIPart(part)) thoughts++;
 	else if (isWorkspaceToolPart(part)) {
 		const name = getToolName(part);
@@ -275,6 +299,7 @@ function summarizeActivitySteps(parts) {
 		if (typeof part.input?.name === "string") skillNames.add(part.input.name);
 	} else if (isFetchToolPart(part)) fetches++;
 	else if (isBrowserToolPart(part)) browses++;
+	else if (isExecuteToolPart(part)) codeRuns++;
 	else if (isToolUIPart(part)) otherTools.add(getToolName(part));
 	const count = (name) => byTool.get(name) ?? 0;
 	const files = (n) => n === 1 ? "a file" : `${n} files`;
@@ -292,6 +317,7 @@ function summarizeActivitySteps(parts) {
 	if (count("list") > 0) segments.push("listed files");
 	if (fetches > 0) segments.push(fetches === 1 ? "fetched a URL" : `fetched ${fetches} URLs`);
 	if (browses > 0) segments.push("used the browser");
+	if (codeRuns > 0) segments.push("ran code");
 	if (commands > 0) segments.push(commands === 1 ? "ran a command" : `ran ${commands} commands`);
 	for (const tool of otherTools) segments.push(`used ${tool}`);
 	if (segments.length === 0) return "Worked";
@@ -359,6 +385,10 @@ function ThinkChatActivityStep({ text, part, toolRenderers }) {
 		label: text,
 		children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
 	});
+	if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
+		label: text,
+		children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
+	});
 	return /* @__PURE__ */ jsx(ActivityItem, { children: text });
 }
 function renderDeniedPanel(label, reason) {
@@ -552,6 +582,50 @@ function findBrowserResultMedia(value, depth = 0) {
 	visit(value, depth);
 	return media;
 }
+function ExecuteCodeView({ code, output, hideResult }) {
+	const sections = [
+		output && "logs" in output && output.logs?.length ? output.logs.join("\n") : "",
+		output?.status === "error" ? output.error : "",
+		output?.status === "paused" ? formatPendingActions(output.pending) : "",
+		output?.status === "completed" && output.result !== void 0 && !hideResult ? typeof output.result === "string" ? output.result : JSON.stringify(output.result, null, 2) : ""
+	].filter(Boolean);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [code ? /* @__PURE__ */ jsx(CodeBlock, {
+		className: "activity__code-block",
+		code,
+		language: "ts"
+	}) : null, sections.length ? /* @__PURE__ */ jsx(ActivityOutput, { children: sections.join("\n\n") }) : null] });
+}
+function formatPendingActions(pending) {
+	return pending.map((action) => {
+		const args = action.args === void 0 ? "" : JSON.stringify(action.args);
+		return `awaiting approval: ${action.connector}.${action.method}(${args})`;
+	}).join("\n");
+}
+function executeStatusText(output) {
+	if (!output) return void 0;
+	return output.status === "paused" ? "paused · needs approval" : output.status;
+}
+/** The codemode execute tool as an activity panel: highlighted TypeScript
+plus logs, result, and the paused pending-approval list. */
+function ThinkChatExecutePanel({ part }) {
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Code",
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel("Code", part.approval.reason);
+	const output = part.state === "output-available" ? part.output : void 0;
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Code",
+		status: executeStatusText(output),
+		error: output?.status === "error",
+		children: /* @__PURE__ */ jsx(ExecuteCodeView, {
+			code: part.input?.code ?? "",
+			output
+		})
+	});
+}
 function ThinkChatBrowserPanel({ part }) {
 	const [seenAt] = React.useState(() => Date.now());
 	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
@@ -566,12 +640,6 @@ function ThinkChatBrowserPanel({ part }) {
 		const code = part.input?.code ?? "";
 		const media = output?.status === "completed" ? findBrowserResultMedia(output.result) : {};
 		const hasMedia = Boolean(media.liveViewUrl || media.screenshot);
-		const sections = [
-			output && "logs" in output && output.logs?.length ? output.logs.join("\n") : "",
-			output?.status === "error" ? output.error : "",
-			output?.status === "completed" && output.result !== void 0 && !hasMedia ? typeof output.result === "string" ? output.result : JSON.stringify(output.result, null, 2) : ""
-		].filter(Boolean);
-		const status = !output ? void 0 : output.status === "paused" ? "paused · needs approval" : output.status === "error" ? "error" : "completed";
 		const browserView = media.liveViewUrl ? /* @__PURE__ */ jsx(BrowserLiveView, {
 			url: media.liveViewUrl,
 			expiresAt: seenAt + (media.expiresInMs ?? 300 * 1e3),
@@ -584,16 +652,16 @@ function ThinkChatBrowserPanel({ part }) {
 			src: media.screenshot,
 			alt: "Browser screenshot"
 		}) : null;
-		const codeView = /* @__PURE__ */ jsxs(Fragment, { children: [code ? /* @__PURE__ */ jsx(CodeBlock, {
-			className: "activity__code-block",
+		const codeView = /* @__PURE__ */ jsx(ExecuteCodeView, {
 			code,
-			language: "js"
-		}) : null, sections.length ? /* @__PURE__ */ jsx(ActivityOutput, { children: sections.join("\n\n") }) : null] });
+			output,
+			hideResult: hasMedia
+		});
 		return /* @__PURE__ */ jsx(ActivityPanel, {
 			label: "Browser",
-			status,
+			status: executeStatusText(output),
 			error: output?.status === "error",
-			children: browserView && (code || sections.length) ? /* @__PURE__ */ jsxs(Tabs, {
+			children: browserView && code ? /* @__PURE__ */ jsxs(Tabs, {
 				className: "activity__browser-tabs",
 				defaultValue: "browser",
 				children: [
@@ -616,7 +684,7 @@ function ThinkChatBrowserPanel({ part }) {
 						children: codeView
 					})
 				]
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [browserView, code || sections.length ? codeView : null] })
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [browserView, codeView] })
 		});
 	}
 	const output = part.state === "output-available" ? part.output : void 0;
@@ -652,7 +720,7 @@ function ThinkChatActivityGroup({ message, parts, isTrailing, toolRenderers }) {
 * parts (reasoning + tool calls) into one collapsed Activity box. Everything
 * is derived from the UIMessage stream: part order, tool states, reasoning
 * state. Excluded tools split the run and return undefined so your own
-* renderPart (or the generic Tool card) takes over for them.
+* renderPart (or AgentChat's generic activity row) takes over for them.
 */
 function createThinkChatActivityRenderer({ excludeTools, toolRenderers } = {}) {
 	const excluded = excludeTools?.length ? new Set(excludeTools) : void 0;

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, n as ArrowLeftIcon, r as ArrowRightIcon, s as ChevronDownIcon } from "../icons-DQC4Zw5R.js";
+import { D as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/WorkspaceExplorer.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, h as FileIcon, k as SearchIcon, n as ArrowLeftIcon } from "../icons-DQC4Zw5R.js";
+import { D as RefreshIcon, O as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-D0c9Yj9U.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-D8rtTLgK.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/WorkspaceExplorer.tsx

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as SearchIcon, C as MinusIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MaximizeIcon, T as PauseIcon, _ as FolderOpenIcon, a as BrainIcon, b as InfoIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-ctdVxng0.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MinusIcon, T as PencilIcon, _ as IconProps, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-CmO7-pNY.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/components/icons.js

@@ -1,2 +1,2 @@
-import { A as SpinnerIcon, C as MonitorIcon, D as PlusIcon, E as PlayIcon, F as XIcon, M as TerminalIcon, N as WarningIcon, O as RefreshIcon, P as WrenchIcon, S as MinusIcon, T as PencilIcon, _ as FolderOpenIcon, a as BrainIcon, b as LinkIcon, c as ChevronLeftIcon, d as DotIcon, f as DownloadIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SquareIcon, k as SearchIcon, l as ChevronRightIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as CheckIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronDownIcon, t as ArrowDownIcon, u as CopyIcon, v as ImageIcon, w as PauseIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-DQC4Zw5R.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, BrainIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as SquareIcon, C as PauseIcon, D as RefreshIcon, E as PlusIcon, M as WarningIcon, N as WrenchIcon, O as SearchIcon, P as XIcon, S as MonitorIcon, T as PlayIcon, _ as ImageIcon, a as CheckIcon, b as MaximizeIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as TerminalIcon, k as SpinnerIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as InfoIcon, w as PencilIcon, x as MinusIcon, y as LinkIcon } from "../icons-CZRH4FVH.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };

package/dist/{copy-button-Dd6DEhOm.js → copy-button-BmJEAKuP.js}

@@ -1,4 +1,4 @@
-import { o as CheckIcon, u as CopyIcon } from "./icons-DQC4Zw5R.js";
+import { a as CheckIcon, l as CopyIcon } from "./icons-CZRH4FVH.js";
 import { Button } from "./components/Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./components/Tooltip.js";
 import * as React from "react";

package/dist/{icons-DQC4Zw5R.js → icons-CZRH4FVH.js}

@@ -29,20 +29,6 @@ const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M10 3.5L5.5 8L10 12.5" })
 });
-const BrainIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
-	viewBox: "0 0 24 24",
-	...props,
-	children: [
-		/* @__PURE__ */ jsx("path", { d: "M12 18V5" }),
-		/* @__PURE__ */ jsx("path", { d: "M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4" }),
-		/* @__PURE__ */ jsx("path", { d: "M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5" }),
-		/* @__PURE__ */ jsx("path", { d: "M17.997 5.125a4 4 0 0 1 2.526 5.77" }),
-		/* @__PURE__ */ jsx("path", { d: "M18 18a4 4 0 0 0 2-7.464" }),
-		/* @__PURE__ */ jsx("path", { d: "M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517" }),
-		/* @__PURE__ */ jsx("path", { d: "M6 18a4 4 0 0 1-2-7.464" }),
-		/* @__PURE__ */ jsx("path", { d: "M6.003 5.125a4 4 0 0 0-2.526 5.77" })
-	]
-});
 const CheckIcon = (props) => /* @__PURE__ */ jsx(Icon, {
 	...props,
 	children: /* @__PURE__ */ jsx("path", { d: "M3 8.5L6.5 12L13 4.5" })
@@ -262,4 +248,4 @@ const MaximizeIcon = (props) => /* @__PURE__ */ jsxs(Icon, {
 	]
 });
 //#endregion
-export { SpinnerIcon as A, MonitorIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MinusIcon as S, PencilIcon as T, FolderOpenIcon as _, BrainIcon as a, LinkIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };
+export { SquareIcon as A, PauseIcon as C, RefreshIcon as D, PlusIcon as E, WarningIcon as M, WrenchIcon as N, SearchIcon as O, XIcon as P, MonitorIcon as S, PlayIcon as T, ImageIcon as _, CheckIcon as a, MaximizeIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, TerminalIcon as j, SpinnerIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, InfoIcon as v, PencilIcon as w, MinusIcon as x, LinkIcon as y };

package/dist/{icons-ctdVxng0.d.ts → icons-CmO7-pNY.d.ts}

@@ -13,7 +13,6 @@ type IconProps = Omit<React.SVGAttributes<SVGSVGElement>, "width" | "height"> &
 declare const ChevronRightIcon: (props: IconProps) => React.JSX.Element;
 declare const ChevronDownIcon: (props: IconProps) => React.JSX.Element;
 declare const ChevronLeftIcon: (props: IconProps) => React.JSX.Element;
-declare const BrainIcon: (props: IconProps) => React.JSX.Element;
 declare const CheckIcon: (props: IconProps) => React.JSX.Element;
 declare const XIcon: (props: IconProps) => React.JSX.Element;
 declare const PencilIcon: (props: IconProps) => React.JSX.Element;
@@ -46,4 +45,4 @@ declare const ImageIcon: (props: IconProps) => React.JSX.Element;
 declare const MonitorIcon: (props: IconProps) => React.JSX.Element;
 declare const MaximizeIcon: (props: IconProps) => React.JSX.Element;
 //#endregion
-export { SearchIcon as A, MinusIcon as C, PlayIcon as D, PencilIcon as E, WrenchIcon as F, XIcon as I, SquareIcon as M, TerminalIcon as N, PlusIcon as O, WarningIcon as P, MaximizeIcon as S, PauseIcon as T, FolderOpenIcon as _, BrainIcon as a, InfoIcon as b, ChevronLeftIcon as c, DotIcon as d, DownloadIcon as f, FolderIcon as g, FileIcon as h, ArrowUpIcon as i, SpinnerIcon as j, RefreshIcon as k, ChevronRightIcon as l, EyeOffIcon as m, ArrowLeftIcon as n, CheckIcon as o, EyeIcon as p, ArrowRightIcon as r, ChevronDownIcon as s, ArrowDownIcon as t, CopyIcon as u, IconProps as v, MonitorIcon as w, LinkIcon as x, ImageIcon as y };
+export { SpinnerIcon as A, MonitorIcon as C, PlusIcon as D, PlayIcon as E, XIcon as F, TerminalIcon as M, WarningIcon as N, RefreshIcon as O, WrenchIcon as P, MinusIcon as S, PencilIcon as T, IconProps as _, CheckIcon as a, LinkIcon as b, ChevronRightIcon as c, DownloadIcon as d, EyeIcon as f, FolderOpenIcon as g, FolderIcon as h, ArrowUpIcon as i, SquareIcon as j, SearchIcon as k, CopyIcon as l, FileIcon as m, ArrowLeftIcon as n, ChevronDownIcon as o, EyeOffIcon as p, ArrowRightIcon as r, ChevronLeftIcon as s, ArrowDownIcon as t, DotIcon as u, ImageIcon as v, PauseIcon as w, MaximizeIcon as x, InfoIcon as y };

package/dist/styles/agent-chat.css

@@ -1,6 +1,5 @@
 .agent-chat {
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
+  position: relative;
   width: 100%;
   height: 100%;
   min-height: 0;
@@ -10,12 +9,46 @@
 }
 
 .agent-chat__conversation {
+  height: 100%;
   min-height: 0;
 }
 
+/* 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 .conversation__content {
+  padding-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+}
+
+.agent-chat .conversation__scroll-button {
+  inset-block-end: calc(var(--agent-chat-composer-size, 5rem) + 0.5rem);
+}
+
+/* Floating over the transcript: solid behind the controls, fading out
+   through the top padding so content slides under instead of hitting a bar. */
 .agent-chat__composer {
-  border-block-start: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-subtle);
-  padding: 0.75rem;
-  background-color: var(--sigvelo-color-surface);
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: 0.625rem;
+  padding-block-start: 1.5rem;
+  background: linear-gradient(
+    to top,
+    var(--sigvelo-color-surface) calc(100% - 1.5rem),
+    transparent
+  );
+}
+
+/* Transient status pill between transcript and composer (recovery, errors). */
+.agent-chat__notice {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-block-end: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.agent-chat__notice[data-tone="danger"],
+.agent-chat__notice [data-tone="danger"] {
+  color: var(--sigvelo-color-danger-text);
 }

package/dist/styles/attachment-preview.css

@@ -0,0 +1,21 @@
+/* Click-to-zoom lightbox for image attachments (composer chips + messages).
+   Scoped as .dialog__popup.attachment-preview so it beats the base dialog
+   sizing regardless of import order. */
+.dialog__popup.attachment-preview {
+  width: fit-content;
+  max-width: min(90vw, 56rem);
+}
+
+.attachment-preview__image {
+  display: block;
+  max-width: 100%;
+  max-height: 70vh;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+.attachment-preview__name {
+  margin-block-start: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--sigvelo-color-text-muted);
+  text-align: center;
+}

package/dist/styles/context.css

@@ -3,20 +3,19 @@
   font-family: var(--sigvelo-font-sans);
 }
 
+/* Bare ring icon — undo the popover__trigger pill chrome. */
 .context__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  font-variant-numeric: tabular-nums;
-}
-
-.context__trigger-ring {
-  display: inline-flex;
+  justify-content: center;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  border-radius: var(--sigvelo-radius-sm);
 }
 
-.context__trigger-label {
-  font-size: 0.75rem;
-  color: var(--sigvelo-color-text-muted);
+.context__trigger:hover {
+  background-color: color-mix(in oklab, transparent, var(--sigvelo-color-text) 5%);
 }
 
 .context__content {
@@ -98,7 +97,7 @@
 
 .context__row {
   display: grid;
-  grid-template-columns: 1fr auto auto;
+  grid-template-columns: 1fr auto;
   gap: 0.75rem;
   font-size: 0.75rem;
   align-items: baseline;
@@ -113,13 +112,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-.context__row-cost {
-  color: var(--sigvelo-color-text-muted);
-  font-family: var(--sigvelo-font-mono);
-  font-size: 0.6875rem;
-  font-variant-numeric: tabular-nums;
-}
-
 .context__footer {
   display: flex;
   flex-direction: column;

package/dist/styles/conversation.css

@@ -21,9 +21,9 @@
 .conversation__content {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
-  padding-block: 1.25rem;
-  padding-inline: 1.25rem;
+  gap: 0.875rem;
+  padding-block: 1rem;
+  padding-inline: 1rem;
   min-height: 100%;
 }
 

package/dist/styles/index.css

@@ -12,6 +12,7 @@
 @import "./agent-connection.css" layer(components);
 @import "./agent-chat.css" layer(components);
 @import "./alert-dialog.css" layer(components);
+@import "./attachment-preview.css" layer(components);
 @import "./autocomplete.css" layer(components);
 @import "./avatar.css" layer(components);
 @import "./badge.css" layer(components);
@@ -73,7 +74,6 @@
 @import "./task.css" layer(components);
 @import "./terminal.css" layer(components);
 @import "./test-results.css" layer(components);
-@import "./tool.css" layer(components);
 @import "./web-preview.css" layer(components);
 @import "./workspace-explorer.css" layer(components);
 

package/dist/styles/message.css

@@ -20,8 +20,8 @@
 .message__content {
   display: inline-block;
   max-width: min(42rem, 85%);
-  padding-block: 0.625rem;
-  padding-inline: 0.875rem;
+  padding-block: 0.5rem;
+  padding-inline: 0.75rem;
   border-radius: var(--sigvelo-radius-lg);
   font-size: var(--sigvelo-text-sm);
   line-height: 1.55;
@@ -57,6 +57,54 @@
   overflow: auto;
 }
 
+.message__attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  max-width: 100%;
+  font-size: 0.8125rem;
+  color: inherit;
+  text-decoration: none;
+}
+
+.message__attachment:hover .message__attachment-name {
+  text-decoration: underline;
+}
+
+.message__attachment-icon {
+  flex-shrink: 0;
+}
+
+.message__attachment-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message__attachment-zoom {
+  display: block;
+  max-width: 100%;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: zoom-in;
+}
+
+.message__attachment-image {
+  display: block;
+  max-width: 16rem;
+  max-height: 16rem;
+  border-radius: var(--sigvelo-radius-md);
+}
+
+/* Quiet annotation under a part whose stored content was compacted. */
+.message__compacted {
+  margin-block-start: 0.25rem;
+  font-size: var(--sigvelo-text-xs);
+  font-style: italic;
+  color: var(--sigvelo-color-text-muted);
+}
+
 .message__actions {
   display: inline-flex;
   align-items: center;