@mcp-b/react-components 0.3.0 → 0.5.0

package/dist/{CodeBlock-C2Xjxu9M.js → CodeBlock-D-a84xBL.js}

@@ -1,6 +1,6 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
 import { Select, SelectContent, SelectItem, SelectList, SelectTrigger, SelectValue } from "./components/Select.js";
-import { t as CopyButton } from "./copy-button-Dd6DEhOm.js";
+import { t as CopyButton } from "./copy-button-BmJEAKuP.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createHighlighter } from "shiki";

package/dist/{FileTree-D0c9Yj9U.js → FileTree-D8rtTLgK.js}

@@ -1,5 +1,5 @@
 import { t as cx } from "./class-names-9UtZwb0J.js";
-import { _ as FolderOpenIcon, g as FolderIcon, h as FileIcon, l as ChevronRightIcon } from "./icons-DQC4Zw5R.js";
+import { c as ChevronRightIcon, g as FolderOpenIcon, h as FolderIcon, m as FileIcon } from "./icons-CZRH4FVH.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/_internal/use-file-tree-nav.ts

package/dist/attachment-preview-ChtC3HiU.js

@@ -0,0 +1,25 @@
+import { Dialog, DialogContent, DialogTrigger } from "./components/Dialog.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/_internal/attachment-preview.tsx
+/**
+* Click-to-zoom for image attachments: `children` is the thumbnail and
+* becomes the dialog trigger; the dialog shows the image full size. Shared by
+* the composer chips and message-side attachments.
+*/
+function AttachmentPreview({ url, filename, children }) {
+	return /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, { render: children }), /* @__PURE__ */ jsxs(DialogContent, {
+		className: "attachment-preview",
+		"aria-label": filename ?? "Attachment preview",
+		children: [/* @__PURE__ */ jsx("img", {
+			className: "attachment-preview__image",
+			src: url,
+			alt: filename ?? "Attachment"
+		}), filename ? /* @__PURE__ */ jsx("div", {
+			className: "attachment-preview__name",
+			children: filename
+		}) : null]
+	})] });
+}
+//#endregion
+export { AttachmentPreview as t };

package/dist/components/Activity.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { l as ChevronRightIcon } from "../icons-DQC4Zw5R.js";
+import { c as ChevronRightIcon } from "../icons-CZRH4FVH.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Activity.tsx

package/dist/components/AgentChat.d.ts

@@ -1,4 +1,4 @@
-import { X as PromptInputMessage, dt as PromptInputStatus } from "../PromptInput-Dzn-fOPc.js";
+import { ExecutionApprovals, PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
 import * as React from "react";
 import { ChatAddToolApproveResponseFunction, UIMessage } from "ai";
 
@@ -30,12 +30,38 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
   emptyState?: React.ReactNode;
   /** Extra controls rendered in the composer toolbar. */
   composerTools?: React.ReactNode;
+  /**
+   * Transient status rendered between the transcript and the composer —
+   * e.g. a "Reconnecting…" pill. `ThinkChat.Messages` fills this from the
+   * hook's `isRecovering`/`connectionError` automatically.
+   */
+  notice?: React.ReactNode;
+  /**
+   * When set, the last assistant message gets a Retry action that calls this
+   * with its message id — pass to the AI SDK's `regenerate({ messageId })`.
+   */
+  onRegenerate?: (messageId: string) => void;
   /**
    * Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly.
    * When set and a tool call awaits approval, the composer becomes the
    * confirmation.
    */
   onApprovalResponse?: ChatAddToolApproveResponseFunction;
+  /**
+   * When set, paused codemode executions surface in the same composer
+   * confirmation as tool approvals. See {@link ExecutionApprovals}.
+   */
+  executionApprovals?: ExecutionApprovals;
+  /**
+   * When set, a Context ring in the composer footer shows how much of the
+   * model's window the conversation occupies. Used tokens come from the
+   * newest message carrying `metadata.usage` (the AI SDK `messageMetadata`
+   * convention; Think merges it into message metadata as turns finish).
+   */
+  contextWindow?: {
+    maxTokens: number;
+    modelId?: string;
+  };
   /** Override rendering per part; return `undefined` to fall back to the default part UI. */
   renderPart?: (context: AgentChatRenderPartContext<MessageT>) => React.ReactNode | undefined;
   /** Rendered after each message's parts — for actions, citations, and the like. */
@@ -60,7 +86,11 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
   disabled,
   emptyState,
   composerTools,
+  notice,
+  onRegenerate,
   onApprovalResponse,
+  executionApprovals,
+  contextWindow,
   renderPart,
   renderMessageAfter,
   ref

package/dist/components/AgentChat.js

@@ -1,28 +1,82 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
+import { D as RefreshIcon, E as PlusIcon } from "../icons-CZRH4FVH.js";
+import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Activity.js";
+import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
 import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
-import { Message, MessageContent, MessageResponse } from "./Message.js";
-import { PromptInput, PromptInputApproval, PromptInputBody, PromptInputFooter, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getPendingToolApprovals } from "./PromptInput.js";
+import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
+import { PromptInput, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
-import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "./Tool.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
+import { getToolName, isFileUIPart, isReasoningUIPart, isTextUIPart, isToolOrDynamicToolUIPart } from "ai";
 //#region src/components/AgentChat.tsx
+function AgentChatAttachButton() {
+	const attachments = usePromptInputAttachments();
+	return /* @__PURE__ */ jsx(PromptInputButton, {
+		tooltip: "Add photos or files",
+		onClick: () => attachments.openFileDialog(),
+		children: /* @__PURE__ */ jsx(PlusIcon, {})
+	});
+}
+function isCompactedPart(message, part, partIndex) {
+	const metadata = message.metadata;
+	if (isTextUIPart(part)) return Array.isArray(metadata?.compactedTextParts) && metadata.compactedTextParts.includes(partIndex);
+	if (isToolOrDynamicToolUIPart(part)) return Array.isArray(metadata?.compactedToolOutputs) && metadata.compactedToolOutputs.includes(part.toolCallId);
+	return false;
+}
 function getPartKey(part, partIndex) {
 	if (isToolOrDynamicToolUIPart(part)) return part.toolCallId;
 	if ("id" in part && typeof part.id === "string") return `${part.type}-${part.id}`;
 	return `${part.type}-${partIndex}`;
 }
+function summarizeToolInput(input) {
+	if (!input || typeof input !== "object") return null;
+	for (const value of Object.values(input)) if (typeof value === "string" && value.trim()) {
+		const line = value.trim().split("\n", 1)[0] ?? "";
+		return line.length > 64 ? `${line.slice(0, 64)}…` : line;
+	}
+	return null;
+}
+function isToolPartWorking(part) {
+	return part.state === "input-streaming" || part.state === "input-available" || part.state === "approval-requested";
+}
+function isToolPartFailed(part) {
+	return part.state === "output-error" || part.state === "output-denied";
+}
+function describeToolPart(part) {
+	const name = getToolName(part);
+	const verb = isToolPartFailed(part) ? `${name} failed` : isToolPartWorking(part) ? `Running ${name}` : `Ran ${name}`;
+	const detail = summarizeToolInput(part.input);
+	return detail ? `${verb} · ${detail}` : verb;
+}
+function formatToolValue(value) {
+	if (value === void 0) return void 0;
+	return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
+function renderToolActivity(part) {
+	const failed = isToolPartFailed(part);
+	const output = part.state === "output-error" ? part.errorText : part.state === "output-denied" ? part.approval.reason ?? "Denied" : formatToolValue("output" in part ? part.output : void 0);
+	return /* @__PURE__ */ jsxs(Activity, {
+		isStreaming: isToolPartWorking(part),
+		children: [/* @__PURE__ */ jsx(ActivityTrigger, { label: describeToolPart(part) }), /* @__PURE__ */ jsxs(ActivityContent, { children: [/* @__PURE__ */ jsx(ActivityPanel, {
+			label: getToolName(part),
+			text: formatToolValue(part.input)
+		}), output ? /* @__PURE__ */ jsx(ActivityPanel, {
+			label: "output",
+			text: output,
+			status: part.state === "output-denied" ? "denied" : failed ? "error" : void 0,
+			error: failed
+		}) : null] })]
+	});
+}
 function renderDefaultPart(part) {
 	if (isTextUIPart(part) && part.text) return /* @__PURE__ */ jsx(MessageResponse, { children: part.text });
+	if (isFileUIPart(part)) return /* @__PURE__ */ jsx(MessageAttachment, { part });
 	if (isReasoningUIPart(part) && part.text) return /* @__PURE__ */ jsxs(Reasoning, {
 		isStreaming: part.state === "streaming",
 		children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: part.text })]
 	});
-	if (isToolOrDynamicToolUIPart(part)) return /* @__PURE__ */ jsxs(Tool, {
-		part,
-		children: [/* @__PURE__ */ jsx(ToolHeader, {}), /* @__PURE__ */ jsxs(ToolContent, { children: [/* @__PURE__ */ jsx(ToolInput, {}), /* @__PURE__ */ jsx(ToolOutput, {})] })]
-	});
+	if (isToolOrDynamicToolUIPart(part)) return renderToolActivity(part);
 	return null;
 }
 /**
@@ -34,13 +88,49 @@ function renderDefaultPart(part) {
 * transport. Use it directly with plain AI SDK `useChat` or a read-only
 * transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
 */
-function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, onApprovalResponse, renderPart, renderMessageAfter, ref }) {
+function AgentChat({ className, messages, status = "ready", onSubmit, onStop, placeholder = "Ask anything...", disabled, emptyState, composerTools, notice, onRegenerate, onApprovalResponse, executionApprovals, contextWindow, renderPart, renderMessageAfter, ref }) {
 	const handleSubmit = React.useCallback((message) => {
 		onSubmit?.(message);
 	}, [onSubmit]);
 	const [skippedApprovalIds, setSkippedApprovalIds] = React.useState([]);
-	const pendingApprovals = (onApprovalResponse ? getPendingToolApprovals(messages) : []).filter(({ part }) => part.state !== "approval-requested" || !skippedApprovalIds.includes(part.approval.id));
-	const pendingApproval = pendingApprovals[0];
+	const pendingApprovals = getPendingToolApprovals(messages, { pausedExecutions: Boolean(executionApprovals) }).filter(({ part }) => {
+		if (part.state === "approval-requested" && !onApprovalResponse) return false;
+		const id = getApprovalRequestId(part);
+		return Boolean(id) && !skippedApprovalIds.includes(id);
+	});
+	const approvalsWired = Boolean(onApprovalResponse || executionApprovals);
+	const [permissionMode, setPermissionMode] = React.useState("ask");
+	const autoApprovedIds = React.useRef(/* @__PURE__ */ new Set());
+	React.useEffect(() => {
+		if (permissionMode !== "bypass") return;
+		for (const { part } of pendingApprovals) {
+			const id = getApprovalRequestId(part);
+			if (!id || autoApprovedIds.current.has(id)) continue;
+			autoApprovedIds.current.add(id);
+			if (part.state === "approval-requested") onApprovalResponse?.({
+				id,
+				approved: true
+			});
+			else executionApprovals?.approve(id);
+		}
+	}, [
+		permissionMode,
+		messages,
+		onApprovalResponse,
+		executionApprovals
+	]);
+	const pendingApproval = permissionMode === "bypass" ? void 0 : pendingApprovals[0];
+	const contextUsage = contextWindow ? getContextUsage(messages) : void 0;
+	const lastAssistantIndex = onRegenerate && status !== "streaming" && status !== "submitted" ? messages.findLastIndex((message) => message.role === "assistant") : -1;
+	const composerRef = (el) => {
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const root = el.parentElement;
+		const observer = new ResizeObserver(() => {
+			root?.style.setProperty("--agent-chat-composer-size", `${el.offsetHeight}px`);
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("agent-chat", className),
@@ -51,42 +141,80 @@ function AgentChat({ className, messages, status = "ready", onSubmit, onStop, pl
 				description: "Ask the agent to inspect, plan, or build."
 			}) : null, messages.map((message, messageIndex) => /* @__PURE__ */ jsxs(Message, {
 				from: message.role,
-				children: [message.parts.map((part, partIndex) => {
-					const defaultRender = () => renderDefaultPart(part);
-					const custom = renderPart?.({
+				children: [
+					message.parts.map((part, partIndex) => {
+						const defaultRender = () => renderDefaultPart(part);
+						const custom = renderPart?.({
+							message,
+							part,
+							partIndex,
+							defaultRender
+						});
+						const rendered = custom === void 0 ? defaultRender() : custom;
+						return rendered ? /* @__PURE__ */ jsxs(MessageContent, { children: [rendered, isCompactedPart(message, part, partIndex) ? /* @__PURE__ */ jsx("div", {
+							className: "message__compacted",
+							children: "Output truncated for storage"
+						}) : null] }, getPartKey(part, partIndex)) : null;
+					}),
+					renderMessageAfter?.({
 						message,
-						part,
-						partIndex,
-						defaultRender
-					});
-					const rendered = custom === void 0 ? defaultRender() : custom;
-					return rendered ? /* @__PURE__ */ jsx(MessageContent, { children: rendered }, getPartKey(part, partIndex)) : null;
-				}), renderMessageAfter?.({
-					message,
-					messageIndex
-				})]
+						messageIndex
+					}),
+					onRegenerate && messageIndex === lastAssistantIndex ? /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
+						label: "Retry",
+						tooltip: "Regenerate response",
+						onClick: () => onRegenerate(message.id),
+						children: /* @__PURE__ */ jsx(RefreshIcon, { size: 14 })
+					}) }) : null
+				]
 			}, message.id ?? messageIndex))] }), /* @__PURE__ */ jsx(ConversationScrollButton, {})]
-		}), /* @__PURE__ */ jsx("div", {
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: composerRef,
 			className: "agent-chat__composer",
-			children: /* @__PURE__ */ jsx(PromptInput, {
+			children: [notice ? /* @__PURE__ */ jsx("div", {
+				className: "agent-chat__notice",
+				children: notice
+			}) : null, /* @__PURE__ */ jsx(PromptInput, {
+				multiple: true,
 				onSubmit: handleSubmit,
-				children: pendingApproval && onApprovalResponse ? /* @__PURE__ */ jsx(PromptInputApproval, {
+				children: pendingApproval ? /* @__PURE__ */ jsx(PromptInputApproval, {
 					part: pendingApproval.part,
 					count: pendingApprovals.length,
 					onRespond: onApprovalResponse,
+					executionApprovals,
 					onSkip: () => {
-						const { part } = pendingApproval;
-						if (part.state === "approval-requested") setSkippedApprovalIds((previous) => [...previous, part.approval.id]);
+						const id = getApprovalRequestId(pendingApproval.part);
+						if (id) setSkippedApprovalIds((previous) => [...previous, id]);
 					}
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
-					"aria-label": "Message",
-					placeholder,
-					disabled
-				}) }), /* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsx(PromptInputTools, { children: composerTools }), /* @__PURE__ */ jsx(PromptInputSubmit, {
-					status,
-					onStop
-				})] })] })
-			})
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(PromptInputAttachments, {}),
+					/* @__PURE__ */ jsx(PromptInputBody, { children: /* @__PURE__ */ jsx(PromptInputTextarea, {
+						"aria-label": "Message",
+						placeholder,
+						disabled
+					}) }),
+					/* @__PURE__ */ jsxs(PromptInputFooter, { children: [/* @__PURE__ */ jsxs(PromptInputTools, { children: [
+						/* @__PURE__ */ jsx(AgentChatAttachButton, {}),
+						approvalsWired ? /* @__PURE__ */ jsx(PromptInputPermissionSelector, {
+							value: permissionMode,
+							onValueChange: setPermissionMode
+						}) : null,
+						composerTools
+					] }), /* @__PURE__ */ jsxs("div", {
+						className: "prompt-input__footer-end",
+						children: [contextWindow ? /* @__PURE__ */ jsxs(Context, {
+							usedTokens: getContextUsedTokens(contextUsage),
+							maxTokens: contextWindow.maxTokens,
+							usage: contextUsage,
+							modelId: contextWindow.modelId,
+							children: [/* @__PURE__ */ jsx(ContextTrigger, {}), /* @__PURE__ */ jsxs(ContextContent, { children: [/* @__PURE__ */ jsx(ContextContentHeader, {}), /* @__PURE__ */ jsx(ContextContentBody, {})] })]
+						}) : null, /* @__PURE__ */ jsx(PromptInputSubmit, {
+							status,
+							onStop
+						})]
+					})] })
+				] })
+			})]
 		})]
 	});
 }

package/dist/components/AgentConnection.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { b as LinkIcon } from "../icons-DQC4Zw5R.js";
-import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-C2Xjxu9M.js";
+import { y as LinkIcon } from "../icons-CZRH4FVH.js";
 import { Popover } from "./Popover.js";
+import { Button } from "./Button.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D-a84xBL.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/AgentConnection.tsx

package/dist/components/Artifact.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { F as XIcon } from "../icons-DQC4Zw5R.js";
+import { P as XIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import "react";

package/dist/components/BrowserLiveView.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, x as MaximizeIcon } from "../icons-DQC4Zw5R.js";
+import { b as MaximizeIcon, k as SpinnerIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
-import { Badge } from "./Badge.js";
 import { Dialog, DialogContent, DialogTitle } from "./Dialog.js";
+import { Badge } from "./Badge.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/BrowserLiveView.tsx

package/dist/components/BrowserReplay.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { E as PlayIcon, w as PauseIcon } from "../icons-DQC4Zw5R.js";
+import { C as PauseIcon, T as PlayIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Slider, SliderControl, SliderIndicator, SliderThumb, SliderTrack } from "./Slider.js";
 import * as React from "react";

package/dist/components/ChainOfThought.d.ts

@@ -1,5 +1,5 @@
 import { CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps } from "./Collapsible.js";
-import { v as IconProps } from "../icons-ctdVxng0.js";
+import { _ as IconProps } from "../icons-CmO7-pNY.js";
 import * as React from "react";
 
 //#region src/components/ChainOfThought.d.ts

package/dist/components/ChainOfThought.js

@@ -1,6 +1,6 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { A as SpinnerIcon, d as DotIcon, l as ChevronRightIcon, o as CheckIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, c as ChevronRightIcon, k as SpinnerIcon, u as DotIcon } from "../icons-CZRH4FVH.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ChainOfThought.tsx

package/dist/components/CodeBlock.js

@@ -1,2 +1,2 @@
-import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-C2Xjxu9M.js";
+import { a as CodeBlockCopyButton, c as CodeBlockLanguageSelector, d as CodeBlockLanguageSelectorTrigger, f as CodeBlockLanguageSelectorValue, h as CODE_BLOCK_LANGUAGES, i as CodeBlockContent, l as CodeBlockLanguageSelectorContent, m as highlightCode, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock, u as CodeBlockLanguageSelectorItem } from "../CodeBlock-D-a84xBL.js";
 export { CODE_BLOCK_LANGUAGES, CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode };

package/dist/components/Commit.js

@@ -1,10 +1,10 @@
 import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "./Collapsible.js";
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { h as FileIcon, l as ChevronRightIcon, o as CheckIcon, u as CopyIcon } from "../icons-DQC4Zw5R.js";
+import { a as CheckIcon, c as ChevronRightIcon, l as CopyIcon, m as FileIcon } from "../icons-CZRH4FVH.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
-import { Badge } from "./Badge.js";
 import { Avatar } from "./Avatar.js";
+import { Badge } from "./Badge.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Commit.tsx

package/dist/components/Context.d.ts

@@ -1,31 +1,21 @@
-import { r as ButtonProps } from "../Button-Ct5I6aTu.js";
-import { PopoverProps } from "./Popover.js";
+import { PopoverPositionerProps, PopoverProps } from "./Popover.js";
 import * as React from "react";
+import { LanguageModelUsage, UIMessage } from "ai";
 
 //#region src/components/Context.d.ts
-interface ContextUsageCategory {
-  label: string;
-  tokens: number;
-  costUsd?: number;
-}
-interface ContextUsage {
-  input?: number;
-  inputTokens?: number;
-  output?: number;
-  outputTokens?: number;
-  reasoning?: number;
-  reasoningTokens?: number;
-  cache?: number;
-  cachedInputTokens?: number;
-  categories?: ContextUsageCategory[];
-}
+/**
+ * The AI SDK's `LanguageModelUsage`, taken whole. `Partial` only relaxes the
+ * required-but-`undefined`able keys for fixtures/JSX literals — key names and
+ * meanings are upstream's.
+ */
+type ContextTokenUsage = Partial<LanguageModelUsage>;
 interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Tokens currently used. */
   usedTokens: number;
   /** Maximum context window size. */
   maxTokens: number;
   /** Optional usage breakdown. */
-  usage?: ContextUsage;
+  usage?: ContextTokenUsage;
   /** Optional model identifier shown in the header. */
   modelId?: string;
   /** Optional total cost in USD. */
@@ -36,8 +26,8 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Displays token / context usage with a hover card breakdown. The trigger is
- * a button showing a compact percentage indicator; hovering or clicking opens
- * a popover with category rows and total cost.
+ * a bare progress ring; clicking it opens a popover (upward by default) with
+ * category rows and total cost.
  *
  * @example
  * ```tsx
@@ -45,7 +35,7 @@ interface ContextProps extends React.HTMLAttributes<HTMLDivElement> {
  *   usedTokens={42_300}
  *   maxTokens={200_000}
  *   modelId="claude-opus-4-6"
- *   usage={{ input: 30000, output: 12300 }}
+ *   usage={{ inputTokens: 30000, outputTokens: 12300 }}
  *   totalCostUsd={0.42}
  * >
  *   <ContextTrigger />
@@ -73,17 +63,19 @@ declare function Context({
 }: ContextProps & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
-interface ContextTriggerProps extends Omit<ButtonProps, "variant" | "color" | "className"> {
-  className?: string;
-}
+interface ContextTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 declare function ContextTrigger({
   className,
   children,
   ...props
 }: ContextTriggerProps): React.JSX.Element;
-interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+interface ContextContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The trigger usually sits in a composer at the bottom, so default "top". */
+  side?: PopoverPositionerProps["side"];
+}
 declare function ContextContent({
   className,
+  side,
   children,
   ...props
 }: ContextContentProps): React.JSX.Element;
@@ -125,5 +117,14 @@ declare function ContextInputUsage(props: ContextInputUsageProps): React.JSX.Ele
 declare function ContextOutputUsage(props: ContextOutputUsageProps): React.JSX.Element;
 declare function ContextReasoningUsage(props: ContextReasoningUsageProps): React.JSX.Element;
 declare function ContextCacheUsage(props: ContextCacheUsageProps): React.JSX.Element;
+/**
+ * Latest `metadata.usage` in a transcript — the AI SDK convention for token
+ * accounting (`toUIMessageStreamResponse({ messageMetadata })`), which Think
+ * merges into `message.metadata` as turns finish. Structural: any message
+ * whose metadata carries a `usage` object qualifies.
+ */
+declare function getContextUsage(messages: readonly UIMessage[]): LanguageModelUsage | undefined;
+/** Tokens occupying the context window: `totalTokens`, or input + output. */
+declare function getContextUsedTokens(usage: LanguageModelUsage | undefined): number;
 //#endregion
-export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTrigger, ContextTriggerProps, ContextUsage, ContextUsageCategory, ContextUsageRowProps };
+export { Context, ContextCacheUsage, ContextCacheUsageProps, ContextContent, ContextContentBody, ContextContentBodyProps, ContextContentFooter, ContextContentFooterProps, ContextContentHeader, ContextContentHeaderProps, ContextContentProps, ContextInputUsage, ContextInputUsageProps, ContextOutputUsage, ContextOutputUsageProps, ContextProps, ContextReasoningUsage, ContextReasoningUsageProps, ContextTokenUsage, ContextTrigger, ContextTriggerProps, ContextUsageRowProps, getContextUsage, getContextUsedTokens };