@mcp-b/react-components 0.24.0 → 0.25.0

package/dist/components/SessionCompaction.js

@@ -0,0 +1,117 @@
+import * as React from "react";
+//#region src/components/SessionCompaction.ts
+/**
+* Client-side session-compaction plumbing for Think conversations.
+*
+* The Agents Session broadcasts `cf_agent_session` status frames to every
+* connected client: `phase` flips to `"compacting"` while a compaction runs
+* and back to `"idle"` when it settles, with a `compacted` payload on the
+* idle frame when an overlay was actually written. Think refreshes only its
+* server-side message cache after a compaction (`_syncMessages()` does not
+* push to clients), so a connected transcript keeps showing the uncompacted
+* history until its next `getMessages()`. `useSessionCompaction` closes that
+* gap: it tracks the live phase for a "Compacting context…" affordance and
+* reloads the transcript once a compaction lands — deferring the reload to
+* the end of the turn when one is streaming, so a mid-turn proactive
+* compaction never clobbers streamed state.
+*
+* The composer half is AgentChat's built-in `/compact` entry: pass the
+* app's compaction callable as its `onCompact` prop.
+*
+* This module is the "local adapter … documented runtime-only mirror" that
+* docs/think-session-ui.md calls for: upstream exports no payload types or
+* client hook for these frames. The doc records the complete frame shapes
+* (including `tokenEstimate` and `tokenThreshold`); this adapter deliberately
+* consumes only `phase`, the presence of `compacted`, and the error string of
+* `cf_agent_session_error` so an upstream field change cannot break the UI.
+* Per that doc,
+* `tokenThreshold` is the auto-compaction threshold, not the model context
+* window — never feed it to the `Context` ring.
+*
+* @see ../../docs/think-session-ui.md
+* @see https://github.com/cloudflare/agents/blob/main/docs/agents/sessions.md#compaction
+*/
+/**
+* Parse a raw websocket payload as a `cf_agent_session` status frame.
+* Returns null for every other frame on the connection.
+*/
+function parseSessionStatusFrame(data) {
+	if (typeof data !== "string") return null;
+	let message;
+	try {
+		message = JSON.parse(data);
+	} catch {
+		return null;
+	}
+	if (typeof message !== "object" || message === null || !("type" in message) || message.type !== "cf_agent_session" || !("phase" in message) || message.phase !== "idle" && message.phase !== "compacting") return null;
+	return {
+		phase: message.phase,
+		compacted: "compacted" in message && message.compacted != null
+	};
+}
+/**
+* Parse a raw websocket payload as a `cf_agent_session_error` frame,
+* returning its error text. Null for every other frame on the connection.
+*/
+function parseSessionErrorFrame(data) {
+	if (typeof data !== "string") return null;
+	let message;
+	try {
+		message = JSON.parse(data);
+	} catch {
+		return null;
+	}
+	if (typeof message !== "object" || message === null || !("type" in message) || message.type !== "cf_agent_session_error" || !("error" in message) || typeof message.error !== "string") return null;
+	return message.error;
+}
+function useSessionCompaction({ agent, chat, getMessages }) {
+	const [compacting, setCompacting] = React.useState(false);
+	const [refreshPending, setRefreshPending] = React.useState(false);
+	const [reloadError, setReloadError] = React.useState(null);
+	const [sessionError, setSessionError] = React.useState(null);
+	React.useEffect(() => {
+		setCompacting(false);
+		setSessionError(null);
+		const onMessage = (event) => {
+			const frame = parseSessionStatusFrame(event.data);
+			if (frame) {
+				setCompacting(frame.phase === "compacting");
+				if (frame.phase === "compacting") setSessionError(null);
+				if (frame.compacted) setRefreshPending(true);
+				return;
+			}
+			const error = parseSessionErrorFrame(event.data);
+			if (error !== null) {
+				setCompacting(false);
+				setSessionError(error);
+			}
+		};
+		agent.addEventListener("message", onMessage);
+		return () => agent.removeEventListener("message", onMessage);
+	}, [agent]);
+	const { status, setMessages } = chat;
+	React.useEffect(() => {
+		if (!refreshPending || status !== "ready") return;
+		let stale = false;
+		getMessages().then((messages) => {
+			if (stale) return;
+			setRefreshPending(false);
+			setReloadError(null);
+			setMessages(messages);
+		}, (error) => {
+			if (stale) return;
+			console.error("Transcript reload after compaction failed", error);
+			setReloadError(error);
+		});
+		return () => {
+			stale = true;
+		};
+	}, [refreshPending, status]);
+	return {
+		compacting,
+		reloadError,
+		sessionError
+	};
+}
+//#endregion
+export { parseSessionErrorFrame, parseSessionStatusFrame, useSessionCompaction };

package/dist/components/Sources.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { k as LinkIcon, m as ChevronRightIcon } from "../icons-ua6f_GH3.js";
+import { k as LinkIcon, m as ChevronRightIcon } from "../icons-w5PpKGRz.js";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sources.tsx

package/dist/components/Stepper.js

@@ -1,5 +1,5 @@
 import { n as mergeBaseClassName, t as cx } from "../class-names-BiMDVpUo.js";
-import { d as CheckIcon, q as SpinnerIcon } from "../icons-ua6f_GH3.js";
+import { d as CheckIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import { Tabs } from "./Tabs.js";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/components/SubagentRunIndicator.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, Y as StopIcon, d as CheckIcon, q as SpinnerIcon } from "../icons-ua6f_GH3.js";
+import { Y as StopIcon, d as CheckIcon, et as WarningIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/SubagentRunIndicator.tsx

package/dist/components/Task.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { C as FileIcon, G as SearchIcon, m as ChevronRightIcon } from "../icons-ua6f_GH3.js";
+import { C as FileIcon, G as SearchIcon, m as ChevronRightIcon } from "../icons-w5PpKGRz.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Task.tsx

package/dist/components/Terminal.js

@@ -1,7 +1,7 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { Z as TerminalIcon, tt as XIcon } from "../icons-ua6f_GH3.js";
+import { Q as TerminalIcon, nt as XIcon } from "../icons-w5PpKGRz.js";
 import { IconButton } from "./IconButton.js";
-import { t as CopyButton } from "../copy-button-TWq8nZhc.js";
+import { t as CopyButton } from "../copy-button-Buxmtmp9.js";
 import { Badge } from "./Badge.js";
 import { ScrollArea } from "./ScrollArea.js";
 import * as React from "react";

package/dist/components/TestResults.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { Collapsible } from "./Collapsible.js";
-import { d as CheckIcon, m as ChevronRightIcon, q as SpinnerIcon, tt as XIcon } from "../icons-ua6f_GH3.js";
+import { d as CheckIcon, m as ChevronRightIcon, nt as XIcon, q as SpinnerIcon } from "../icons-w5PpKGRz.js";
 import { Progress } from "./Progress.js";
 import { Badge } from "./Badge.js";
 import * as React from "react";

package/dist/components/ThemeModeControl.js

@@ -1,4 +1,4 @@
-import { F as MonitorIcon, I as MoonIcon, X as SunIcon } from "../icons-ua6f_GH3.js";
+import { F as MonitorIcon, I as MoonIcon, X as SunIcon } from "../icons-w5PpKGRz.js";
 import { Radio, RadioGroup } from "./RadioGroup.js";
 import { useTheme } from "./ThemeProvider.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/ThinkChat.d.ts

@@ -1,11 +1,11 @@
 import { i as AgentMessageRenderPartContext } from "../AgentMessageParts-CyD2UB3V.js";
-import { r as AgentChatProps } from "../AgentChat-Bm1qYbOo.js";
+import { r as AgentChatProps } from "../AgentChat-DHxdTjwF.js";
 import { i as useOptionalAgentToolRuns, n as AgentToolRunsProvider, r as AgentToolRunsProviderProps, t as AgentToolEventsValue } from "../AgentToolRunsContext-BVe4stgw.js";
 import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
 import { u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-2BobmuvR.js";
-import { n as ThinkChatValue } from "../ThinkChatContext-DrsZqdaO.js";
-import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-DFIcG9UX.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-DMTHKWrI.js";
+import { i as ThinkChatValue } from "../ThinkChatContext-B-Nk84Wi.js";
+import { n as ThinkRecoveryNoticeProps, t as ThinkRecoveryNotice } from "../ThinkRecoveryNotice-D6gYcBbr.js";
 import { n as BrowserLiveViewProps, t as BrowserLiveView } from "../BrowserLiveView-BV5qgFgI.js";
 import { n as BrowserReplayProps, t as BrowserReplay } from "../BrowserReplay-xWvRjRAC.js";
 import { d as inferWorkspaceLanguage, i as WorkspaceFileState } from "../WorkspaceFile-DMtRMwVv.js";
@@ -59,6 +59,8 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   composerTools?: React.ReactNode;
   /** Host-owned slash-command catalog and selection policy. */
   slashCommands?: AgentChatProps<MessageT>["slashCommands"];
+  /** App compaction callable behind the built-in `/compact` slash entry. */
+  onCompact?: AgentChatProps<MessageT>["onCompact"];
   /** Controlled MCP catalog revealed by `@`; selections become composer references. */
   mentionCommands?: AgentChatProps<MessageT>["mentionCommands"];
   /** Controlled folder or working-context picker in the composer footer. */
@@ -79,8 +81,6 @@ interface ThinkChatMessagesProps<MessageT extends UIMessage = UIMessage> extends
   renderMessageAfter?: AgentChatProps<MessageT>["renderMessageAfter"];
   /** Per-message policy for AgentChat's built-in assistant copy/retry toolbar. */
   showAssistantActions?: AgentChatProps<MessageT>["showAssistantActions"];
-  /** Overrides which rows anchor at the top when added; user messages are the default. */
-  isMessageScrollAnchor?: AgentChatProps<MessageT>["isMessageScrollAnchor"];
   /**
    * Durable backend edit/resend operation. Think does not synchronize
    * `setMessages`, so wire this to an agent callable that creates the branch.

package/dist/components/ThinkChat.js

@@ -5,7 +5,7 @@ import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
 import { describeThinkChatActivityPart } from "./ThinkChatActivitySummary.js";
 import { ThinkChatActivity, createThinkChatActivityRenderer, renderThinkChatActivityPart } from "./ThinkChatActivity.js";
 import { ThinkRecoveryNotice } from "./ThinkRecoveryNotice.js";
-import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-E_HrfH76.js";
+import { a as thinkPendingExecutionApprovalsQueryOptions, i as ThinkChatRoot, n as ThinkChatMessages, o as useThinkChat, r as ThinkChatProvider, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../ThinkChat-DVhCEjq-.js";
 import { BrowserReplay } from "./BrowserReplay.js";
 import { useWorkspace, workspaceBinaryFileQueryOptions, workspaceDirectoryQueryOptions, workspaceFileAssetQueryOptions, workspaceFileStatQueryOptions, workspaceInfoQueryOptions, workspaceQueryKey, workspaceTextFileQueryOptions } from "./Workspace.js";
 import { WorkspaceExplorer } from "./WorkspaceExplorer.js";

package/dist/components/ThinkChatActivity.d.ts

@@ -1,4 +1,4 @@
 import { S as isThinkChatActivityPart } from "../ThinkChatToolParts-CSzVwMXf.js";
 import { u as describeThinkChatActivityPart } from "../ThinkChatActivitySummary-kr5fE0wg.js";
-import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-2BobmuvR.js";
+import { a as ThinkChatToolRenderers, i as ThinkChatToolRenderer, n as ThinkChatActivityProps, o as createThinkChatActivityRenderer, r as ThinkChatActivityRendererOptions, s as renderThinkChatActivityPart, t as ThinkChatActivity } from "../ThinkChatActivity-DMTHKWrI.js";
 export { ThinkChatActivity, ThinkChatActivityProps, ThinkChatActivityRendererOptions, ThinkChatToolRenderer, ThinkChatToolRenderers, createThinkChatActivityRenderer, describeThinkChatActivityPart, isThinkChatActivityPart, renderThinkChatActivityPart };

package/dist/components/ThinkChatActivity.js

@@ -1,10 +1,12 @@
+import { Button } from "./Button.js";
+import { useExpansionState } from "./ExpansionState.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityText, ActivityTrigger } from "./Activity.js";
 import { AgentActivityFavicon, AgentActivityIcon } from "./AgentActivity.js";
-import { f as MessageResponse } from "../Message-_-bEYLAO.js";
+import { f as MessageResponse } from "../Message-KlK8tlBZ.js";
 import { isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartWorking, isSessionContextToolPart, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart } from "./ThinkChatToolParts.js";
 import { useOptionalAgentToolRuns } from "./AgentToolRunsContext.js";
 import { SubagentRunList } from "./SubagentRunList.js";
-import { useOptionalThinkChatContext } from "./ThinkChatContext.js";
+import { useOptionalThinkChatLive } from "./ThinkChatContext.js";
 import { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSessionContextPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel } from "./ThinkChatToolPanels.js";
 import { activityPartIconKind, activityPartUrl, deriveThinkChatActivityHeader, describeThinkChatActivityPart } from "./ThinkChatActivitySummary.js";
 import * as React from "react";
@@ -22,7 +24,15 @@ function activityPartIcon(part) {
 * with per-tool panels. Normally reached through `ThinkChat.Messages`;
 * exported for apps that lay out messages themselves.
 */
-function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
+/**
+* An expanded run shows at most this many trailing steps before a "show
+* earlier" reveal. Steps inside the live message get new identities on every
+* streamed delta (the AI SDK clones the streaming message), so memoization
+* can't bound an open log — capping the mounted rows is what keeps a
+* thousands-of-tools run expandable.
+*/
+const VISIBLE_STEP_LIMIT = 100;
+function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers, stateKey }) {
 	const steps = parts.flatMap((part, index) => {
 		const description = describeThinkChatActivityPart(part, toolRenderers);
 		if (!description) return [];
@@ -32,7 +42,11 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 			part
 		}];
 	});
+	const scope = `run:${stateKey ?? steps[0]?.key}`;
+	const [showAllSteps, setShowAllSteps] = useExpansionState(steps.length ? `${scope}:all-steps` : void 0, false);
 	if (steps.length === 0) return null;
+	const hiddenStepCount = showAllSteps ? 0 : Math.max(0, steps.length - VISIBLE_STEP_LIMIT);
+	const visibleSteps = hiddenStepCount ? steps.slice(hiddenStepCount) : steps;
 	const streaming = isStreaming ?? parts.some(isPartWorking);
 	const header = deriveThinkChatActivityHeader(parts, {
 		isStreaming: streaming,
@@ -42,18 +56,31 @@ function ThinkChatActivity({ parts, defaultOpen, isStreaming, toolRenderers }) {
 	return /* @__PURE__ */ jsxs(Activity, {
 		isStreaming: streaming,
 		defaultOpen,
+		stateKey: scope,
 		children: [/* @__PURE__ */ jsx(ActivityTrigger, {
 			icon: header.url ? /* @__PURE__ */ jsx(AgentActivityFavicon, { url: header.url }) : /* @__PURE__ */ jsx(AgentActivityIcon, { kind: header.iconKind }),
 			action: header.action,
 			detail: header.detail
-		}), /* @__PURE__ */ jsx(ActivityContent, { children: steps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
+		}), /* @__PURE__ */ jsxs(ActivityContent, { children: [hiddenStepCount > 0 ? /* @__PURE__ */ jsxs(Button, {
+			size: "sm",
+			variant: "ghost",
+			className: "activity__show-earlier",
+			onClick: () => setShowAllSteps(true),
+			children: [
+				"Show ",
+				hiddenStepCount,
+				" earlier ",
+				hiddenStepCount === 1 ? "step" : "steps"
+			]
+		}) : null, visibleSteps.map((step) => /* @__PURE__ */ jsx(ThinkChatActivityStep, {
+			stateKey: `${scope}:${step.key}`,
 			description: step.description,
 			part: step.part,
 			toolRenderers
-		}, step.key)) })]
+		}, step.key))] })]
 	});
 }
-function ThinkChatActivityStep({ description, part, toolRenderers }) {
+function ThinkChatActivityStep({ description, part, stateKey, toolRenderers }) {
 	const icon = activityPartIcon(part);
 	const { action: text, detail } = description;
 	if (isToolUIPart(part)) {
@@ -67,6 +94,7 @@ function ThinkChatActivityStep({ description, part, toolRenderers }) {
 			action: text,
 			detail,
 			icon,
+			stateKey,
 			children: customPanel
 		});
 	}
@@ -74,42 +102,49 @@ function ThinkChatActivityStep({ description, part, toolRenderers }) {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ActivityText, { children: /* @__PURE__ */ jsx(MessageResponse, { children: part.text }) })
 	});
 	if (isWorkspaceToolPart(part) && part.type !== "tool-delete") return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ThinkChatWorkspacePanel, { part })
 	});
 	if (isSkillToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ThinkChatSkillPanel, { part })
 	});
 	if (isSessionContextToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ThinkChatSessionContextPanel, { part })
 	});
 	if (isFetchToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ThinkChatFetchPanel, { part })
 	});
 	if (isBrowserToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ThinkChatBrowserPanel, { part })
 	});
 	if (isExecuteToolPart(part)) return /* @__PURE__ */ jsx(ActivityItemGroup, {
 		action: text,
 		detail,
 		icon,
+		stateKey,
 		children: /* @__PURE__ */ jsx(ThinkChatExecutePanel, { part })
 	});
 	return /* @__PURE__ */ jsx(ActivityItem, {
@@ -118,9 +153,9 @@ function ThinkChatActivityStep({ description, part, toolRenderers }) {
 		children: text
 	});
 }
-function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, toolRenderers }) {
-	const chat = useOptionalThinkChatContext();
-	const chatStillWorking = isTrailing && Boolean(chat?.isStreaming) && chat?.messages.at(-1)?.id === message.id;
+function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrailing, toolRenderers, stateKey }) {
+	const live = useOptionalThinkChatLive();
+	const streaming = isTrailing && (live ? live.isStreaming && live.lastMessageId === message.id : parts.some(isPartWorking));
 	const agentTools = useOptionalAgentToolRuns();
 	const runs = React.useMemo(() => {
 		if (!agentTools || !renderAgentToolRunLink) return [];
@@ -132,8 +167,9 @@ function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrai
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ThinkChatActivity, {
 		parts,
-		isStreaming: parts.some(isPartWorking) || chatStillWorking,
-		toolRenderers
+		isStreaming: streaming,
+		toolRenderers,
+		stateKey
 	}), runs.length && renderAgentToolRunLink ? /* @__PURE__ */ jsx(SubagentRunList, {
 		className: "subagent-run__list--adjacent",
 		"aria-label": "Delegated agent runs",
@@ -151,17 +187,35 @@ function ThinkChatActivityGroup({ message, parts, renderAgentToolRunLink, isTrai
 function createThinkChatActivityRenderer({ excludeTools, renderAgentToolRunLink, toolRenderers } = {}) {
 	const excluded = excludeTools?.length ? new Set(excludeTools) : void 0;
 	const isActivity = (part) => isThinkChatActivityPart(part, excluded);
+	const runStartsCache = /* @__PURE__ */ new WeakMap();
+	const runStartsFor = (parts) => {
+		let starts = runStartsCache.get(parts);
+		if (!starts) {
+			starts = Array.from({ length: parts.length }, () => -1);
+			let runStart = -1;
+			for (let index = 0; index < parts.length; index++) if (isActivity(parts[index])) {
+				if (runStart === -1) runStart = index;
+				starts[index] = runStart;
+			} else {
+				starts[index] = -1;
+				runStart = -1;
+			}
+			runStartsCache.set(parts, starts);
+		}
+		return starts;
+	};
 	return (context) => {
 		const { message, part, partIndex } = context;
 		if (!isActivity(part)) return void 0;
-		let start = partIndex;
-		while (start > 0 && isActivity(message.parts[start - 1])) start--;
+		const runStarts = runStartsFor(message.parts);
+		const start = runStarts[partIndex] ?? partIndex;
 		if (partIndex !== start) return null;
 		let end = partIndex;
-		while (end + 1 < message.parts.length && isActivity(message.parts[end + 1])) end++;
+		while (end + 1 < message.parts.length && runStarts[end + 1] === start) end++;
 		return /* @__PURE__ */ jsx(ThinkChatActivityGroup, {
 			message,
 			parts: message.parts.slice(start, end + 1),
+			stateKey: `${message.id}:${start}`,
 			isTrailing: end === message.parts.length - 1,
 			toolRenderers,
 			renderAgentToolRunLink

package/dist/components/ThinkChatContext.d.ts

@@ -1,2 +1,2 @@
-import { i as useThinkChatContext, n as ThinkChatValue, r as useOptionalThinkChatContext, t as ThinkChatContext } from "../ThinkChatContext-DrsZqdaO.js";
-export { ThinkChatContext, ThinkChatValue, useOptionalThinkChatContext, useThinkChatContext };
+import { a as useOptionalThinkChatContext, i as ThinkChatValue, n as ThinkChatLiveContext, o as useOptionalThinkChatLive, r as ThinkChatLiveValue, s as useThinkChatContext, t as ThinkChatContext } from "../ThinkChatContext-B-Nk84Wi.js";
+export { ThinkChatContext, ThinkChatLiveContext, ThinkChatLiveValue, ThinkChatValue, useOptionalThinkChatContext, useOptionalThinkChatLive, useThinkChatContext };

package/dist/components/ThinkChatContext.js

@@ -13,5 +13,9 @@ function useThinkChatContext(component) {
 	if (!context) throw new Error(`${component} must be used inside <ThinkChat.Provider> or <ThinkChat.Root>.`);
 	return context;
 }
+const ThinkChatLiveContext = React.createContext(null);
+function useOptionalThinkChatLive() {
+	return React.useContext(ThinkChatLiveContext);
+}
 //#endregion
-export { ThinkChatContext, useOptionalThinkChatContext, useThinkChatContext };
+export { ThinkChatContext, ThinkChatLiveContext, useOptionalThinkChatContext, useOptionalThinkChatLive, useThinkChatContext };

package/dist/components/ThinkChatToolPanels.js

@@ -1,7 +1,7 @@
 import { ActivityOutput, ActivityPanel } from "./Activity.js";
 import { displayUrl, isSessionContextToolFailure } from "./ThinkChatToolParts.js";
 import { Tabs } from "./Tabs.js";
-import { t as CodeBlock } from "../CodeBlock-Cp67Njo3.js";
+import { t as CodeBlock } from "../CodeBlock-B3RLU3ez.js";
 import { BrowserLiveView } from "./BrowserLiveView.js";
 import { inferWorkspaceLanguage } from "./WorkspaceFile.js";
 import * as React from "react";

package/dist/components/ThinkExecutionDetail.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { C as FileIcon, O as InfoIcon, W as RefreshIcon, Z as TerminalIcon, d as CheckIcon, n as ArrowDownIcon, tt as XIcon } from "../icons-ua6f_GH3.js";
+import { C as FileIcon, O as InfoIcon, Q as TerminalIcon, W as RefreshIcon, d as CheckIcon, n as ArrowDownIcon, nt as XIcon } from "../icons-w5PpKGRz.js";
 import { Activity, ActivityContent, ActivityItem, ActivityItemGroup, ActivityOutput, ActivityPanel, ActivityTrigger } from "./Activity.js";
 import { formatThinkExecutionRunProgress, formatThinkExecutionStatus, formatThinkExecutionTimestamp, getThinkExecutionRunError, getThinkExecutionRunId, getThinkExecutionRunProgressedAt, getThinkExecutionRunProgressedLabel, getThinkExecutionRunStatus, getThinkExecutionRunTitle, isThinkSubmissionRun } from "./ThinkExecutionRun.js";
 import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";

package/dist/components/ThinkExecutionStatus.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
-import { O as InfoIcon, d as CheckIcon, q as SpinnerIcon, tt as XIcon, z as PauseIcon } from "../icons-ua6f_GH3.js";
+import { O as InfoIcon, d as CheckIcon, nt as XIcon, q as SpinnerIcon, z as PauseIcon } from "../icons-w5PpKGRz.js";
 import { Tooltip } from "./Tooltip.js";
 import { formatThinkExecutionStatus, getThinkExecutionRunStatus, getThinkExecutionRunStatusTone } from "./ThinkExecutionRun.js";
 import "react";

package/dist/components/ThinkExecutionWorkbench.d.ts

@@ -1,6 +1,6 @@
 import { t as ThinkExecutionRun } from "../ThinkExecutionRun-ChhWhOoU.js";
 import * as React from "react";
-import { DataTag, UndefinedInitialDataOptions } from "@tanstack/react-query";
+import { DataTag, UnusedSkipTokenOptions } from "@tanstack/react-query";
 import { Think, ThinkSubmissionInspection } from "@cloudflare/think";
 import { AgentStub } from "agents/client";
 import { WorkflowPage } from "agents/workflows";
@@ -29,7 +29,7 @@ interface ThinkExecutionRunsData {
 type ThinkExecutionRunsQueryKey = readonly ["think", sourceKey: string, "execution-runs", {
   readonly limit: number;
 }];
-type ThinkExecutionRunsQueryOptions = UndefinedInitialDataOptions<ThinkExecutionRunsData, Error, ThinkExecutionRunsData, ThinkExecutionRunsQueryKey> & {
+type ThinkExecutionRunsQueryOptions = UnusedSkipTokenOptions<ThinkExecutionRunsData, Error, ThinkExecutionRunsData, ThinkExecutionRunsQueryKey> & {
   queryKey: DataTag<ThinkExecutionRunsQueryKey, ThinkExecutionRunsData, Error>;
 };
 /**
@@ -39,7 +39,8 @@ declare function thinkExecutionRunsQueryOptions(source: AgentStub<Think>, source
 /**
  * Unified execution history for native Think submissions and Agents workflows.
  * The workbench reads and acts through the whole upstream agent stub; it does
- * not normalize execution records or own workflow authoring.
+ * not normalize execution records or own workflow authoring. Its first
+ * uncached list read suspends to the consuming route's Suspense boundary.
  */
 declare function ThinkExecutionWorkbench({
   backButton,

package/dist/components/ThinkExecutionWorkbench.js

@@ -1,6 +1,6 @@
 import { t as cx } from "../class-names-BiMDVpUo.js";
 import { buttonVariants } from "./Button.js";
-import { W as RefreshIcon, b as EllipsisIcon } from "../icons-ua6f_GH3.js";
+import { W as RefreshIcon, b as EllipsisIcon } from "../icons-w5PpKGRz.js";
 import { t as NavigationLink } from "../navigation-link-Cob7KBlM.js";
 import { IconButton } from "./IconButton.js";
 import { EmptyState } from "./EmptyState.js";
@@ -11,7 +11,7 @@ import { ThinkExecutionStatus } from "./ThinkExecutionStatus.js";
 import { ThinkExecutionDetail } from "./ThinkExecutionDetail.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { queryOptions, useMutation, useQuery } from "@tanstack/react-query";
+import { queryOptions, useMutation, useSuspenseQuery } from "@tanstack/react-query";
 //#region src/components/ThinkExecutionWorkbench.tsx
 const executionPanelPageSize = 20;
 function getErrorMessage(error) {
@@ -116,13 +116,14 @@ function thinkExecutionRunsQueryOptions(source, sourceKey, pageSize = executionP
 /**
 * Unified execution history for native Think submissions and Agents workflows.
 * The workbench reads and acts through the whole upstream agent stub; it does
-* not normalize execution records or own workflow authoring.
+* not normalize execution records or own workflow authoring. Its first
+* uncached list read suspends to the consuming route's Suspense boundary.
 */
 function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPanelPageSize, ref, renderRunLink, selectedRun, source, sourceKey, title = "Execution", ...props }) {
 	const runsId = React.useId();
 	const runsOptions = thinkExecutionRunsQueryOptions(source, sourceKey, pageSize);
 	const runsQueryKey = thinkExecutionRunsScopeQueryKey(sourceKey);
-	const runsQuery = useQuery(runsOptions);
+	const runsQuery = useSuspenseQuery(runsOptions);
 	const actionMutation = useMutation({
 		mutationFn: ({ action }) => action(),
 		onSuccess: (_result, action, _onMutateResult, context) => context.client.invalidateQueries({ queryKey: action.runsQueryKey })
@@ -131,7 +132,7 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 	const actionIsPending = currentAction !== null && actionMutation.isPending;
 	const busyAction = actionIsPending ? currentAction.key : runsQuery.isFetching ? "refresh" : null;
 	const error = currentAction && actionMutation.isError ? actionMutation.error : runsQuery.error;
-	const runs = React.useMemo(() => [...runsQuery.data?.submissions ?? [], ...runsQuery.data?.workflows.workflows ?? []].sort((first, second) => Number(second.createdAt) - Number(first.createdAt)), [runsQuery.data]);
+	const runs = React.useMemo(() => [...runsQuery.data.submissions, ...runsQuery.data.workflows.workflows].sort((first, second) => Number(second.createdAt) - Number(first.createdAt)), [runsQuery.data]);
 	const runAction = (key, action) => {
 		actionMutation.mutate({
 			action,
@@ -182,11 +183,7 @@ function ThinkExecutionWorkbench({ backButton, className, pageSize = executionPa
 							id: runsId,
 							children: "Runs"
 						})
-					}), runsQuery.isPending && runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
-						className: "think-execution-workbench__empty",
-						role: "status",
-						description: "Loading runs..."
-					}) : runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
+					}), runs.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
 						className: "think-execution-workbench__empty",
 						description: "No runs yet."
 					}) : /* @__PURE__ */ jsx("ul", {