@nextclaw/agent-chat-ui 0.5.4-beta.0 → 0.6.0

package/dist/index.js

@@ -399,6 +399,10 @@ const INPUT_SURFACE_PANEL_DESKTOP_SHRINK_RATIO = .82;
 const INPUT_SURFACE_PANEL_DESKTOP_MIN_WIDTH = 560;
 const INPUT_SURFACE_PANEL_MAX_HEIGHT = createChatPopoverAvailableHeightLimit("24rem");
 const INPUT_SURFACE_PANEL_MIN_HEIGHT = createChatPopoverAvailableHeightLimit("240px");
+function itemMatchesFilter(item, filter) {
+	if (!filter.sectionKeys || filter.sectionKeys.length === 0) return true;
+	return Boolean(item.sectionKey && filter.sectionKeys.includes(item.sectionKey));
+}
 const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref) {
 	const { Popover, PopoverAnchor, PopoverContent } = ChatUiPrimitives;
 	const { elementRef: anchorRef, width: panelWidth } = useElementWidth();
@@ -407,12 +411,30 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 		index: 0,
 		itemsSignature: ""
 	});
-	const { isOpen, isLoading, items, texts, onSelectItem, onOpenChange, onDetailsPointerDown } = props;
-	const itemsSignature = useMemo(() => items.map((item) => item.key).join(""), [items]);
-	const hasItemSections = useMemo(() => items.some((item) => Boolean(item.sectionLabel?.trim())), [items]);
+	const { isOpen, isLoading, filterOptions, items, texts, onSelectItem, onOpenChange, onDetailsPointerDown } = props;
+	const [activeFilterKey, setActiveFilterKey] = useState(filterOptions?.[0]?.key ?? null);
+	const resolvedActiveFilterKey = useMemo(() => {
+		if (!filterOptions?.length) return null;
+		return filterOptions.some((filter) => filter.key === activeFilterKey) ? activeFilterKey : filterOptions[0].key;
+	}, [activeFilterKey, filterOptions]);
+	const activeFilter = useMemo(() => filterOptions?.find((filter) => filter.key === resolvedActiveFilterKey) ?? null, [filterOptions, resolvedActiveFilterKey]);
+	const filterViews = useMemo(() => filterOptions?.map((filter) => ({
+		...filter,
+		count: items.filter((item) => itemMatchesFilter(item, filter)).length
+	})) ?? [], [filterOptions, items]);
+	const visibleItems = useMemo(() => activeFilter ? items.filter((item) => itemMatchesFilter(item, activeFilter)) : items, [activeFilter, items]);
+	const itemsSignature = useMemo(() => visibleItems.map((item) => item.key).join(""), [visibleItems]);
+	const hasItemSections = useMemo(() => visibleItems.some((item) => Boolean(item.sectionLabel?.trim())), [visibleItems]);
 	const activeIndex = activeState.itemsSignature === itemsSignature ? activeState.index : 0;
-	const activeIndexInRange = items.length === 0 ? 0 : Math.min(activeIndex, items.length - 1);
-	const activeItem = items[activeIndexInRange] ?? null;
+	const activeIndexInRange = visibleItems.length === 0 ? 0 : Math.min(activeIndex, visibleItems.length - 1);
+	const activeItem = visibleItems[activeIndexInRange] ?? null;
+	const handleFilterSelect = useCallback((filterKey) => {
+		setActiveFilterKey(filterKey);
+		setActiveState({
+			index: 0,
+			itemsSignature: ""
+		});
+	}, []);
 	const setActiveIndexForCurrentItems = useCallback((nextIndex) => {
 		setActiveState((currentState) => {
 			const currentIndex = currentState.itemsSignature === itemsSignature ? currentState.index : 0;
@@ -433,35 +455,35 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 			onOpenChange(false);
 			return true;
 		}
-		if (items.length === 0) return false;
+		if (visibleItems.length === 0) return false;
 		if (event.key === "ArrowDown") {
 			event.preventDefault();
-			setActiveIndexForCurrentItems((index) => (index + 1) % items.length);
+			setActiveIndexForCurrentItems((index) => (index + 1) % visibleItems.length);
 			return true;
 		}
 		if (event.key === "ArrowUp") {
 			event.preventDefault();
-			setActiveIndexForCurrentItems((index) => (index - 1 + items.length) % items.length);
+			setActiveIndexForCurrentItems((index) => (index - 1 + visibleItems.length) % visibleItems.length);
 			return true;
 		}
 		if (event.key === "Enter" && !event.shiftKey || event.key === "Tab") {
 			event.preventDefault();
-			onSelectItem(items[activeIndexInRange]);
+			onSelectItem(visibleItems[activeIndexInRange]);
 			return true;
 		}
 		return false;
 	} }), [
 		activeIndexInRange,
 		isOpen,
-		items,
 		onOpenChange,
 		onSelectItem,
-		setActiveIndexForCurrentItems
+		setActiveIndexForCurrentItems,
+		visibleItems
 	]);
 	useActiveItemScroll({
 		containerRef: listRef,
 		activeIndex: activeIndexInRange,
-		itemCount: items.length,
+		itemCount: visibleItems.length,
 		isEnabled: isOpen && !isLoading,
 		getItemSelector: (index) => `[data-input-surface-index="${index}"]`
 	});
@@ -487,59 +509,78 @@ const ChatInputSurfaceMenu = forwardRef(function ChatInputSurfaceMenu(props, ref
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "grid min-h-0 flex-1 grid-cols-[minmax(220px,300px)_minmax(0,1fr)]",
 				style: { minHeight: INPUT_SURFACE_PANEL_MIN_HEIGHT },
-				children: [/* @__PURE__ */ jsx("div", {
-					ref: listRef,
-					role: "listbox",
-					"aria-label": texts.sectionLabel,
-					className: "custom-scrollbar min-h-0 overflow-y-auto overscroll-contain border-r border-gray-200 p-2.5",
-					children: isLoading ? /* @__PURE__ */ jsx("div", {
-						className: "p-2 text-xs text-gray-500",
-						children: texts.loadingLabel
-					}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!hasItemSections ? /* @__PURE__ */ jsx("div", {
-						className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
-						children: texts.sectionLabel
-					}) : null, items.length === 0 ? /* @__PURE__ */ jsx("div", {
-						className: "px-2 text-xs text-gray-400",
-						children: texts.emptyLabel
-					}) : /* @__PURE__ */ jsx("div", {
-						className: "space-y-1",
-						children: items.map((item, index) => {
-							const { key, sectionKey, sectionLabel, title, subtitle } = item;
-							const isActive = index === activeIndexInRange;
-							const previousItem = items[index - 1];
-							return /* @__PURE__ */ jsxs("div", {
-								className: "space-y-1",
-								children: [hasItemSections && Boolean(sectionLabel?.trim()) && previousItem?.sectionKey !== sectionKey ? /* @__PURE__ */ jsx("div", {
-									className: "px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
-									children: sectionLabel
-								}) : null, /* @__PURE__ */ jsxs("button", {
-									type: "button",
-									role: "option",
-									"aria-selected": isActive,
-									"data-input-surface-index": index,
-									onPointerMove: (event) => {
-										if (event.pointerType !== "touch") setActiveIndexForCurrentItems(index);
-									},
-									onPointerDown: (event) => {
-										if (event.button > 0) return;
-										event.preventDefault();
-										onSelectItem(item);
-									},
-									onClick: (event) => {
-										if (event.detail === 0) onSelectItem(item);
-									},
-									className: `flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"}`,
-									children: [/* @__PURE__ */ jsx("span", {
-										className: "truncate text-xs font-semibold",
-										children: title
-									}), /* @__PURE__ */ jsx("span", {
-										className: "truncate text-xs text-gray-500",
-										children: subtitle
-									})]
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-h-0 flex-col border-r border-gray-200",
+					children: [!isLoading && filterViews.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "flex shrink-0 gap-1 overflow-x-auto px-2.5 pb-2 pt-2.5",
+						children: filterViews.map(({ count, key, label }) => {
+							const isActive = key === resolvedActiveFilterKey;
+							return /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								"aria-pressed": isActive,
+								onPointerDown: (event) => event.preventDefault(),
+								onClick: () => handleFilterSelect(key),
+								className: `inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-1 text-[11px] font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 ${isActive ? "border-primary/30 bg-primary/10 text-primary" : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"}`,
+								children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+									className: isActive ? "text-primary/70" : "text-gray-400",
+									children: count
 								})]
 							}, key);
 						})
-					})] })
+					}) : null, /* @__PURE__ */ jsx("div", {
+						ref: listRef,
+						role: "listbox",
+						"aria-label": texts.sectionLabel,
+						className: `custom-scrollbar min-h-0 flex-1 overflow-y-auto overscroll-contain ${!isLoading && filterViews.length > 0 ? "px-2.5 pb-2.5" : "p-2.5"}`,
+						children: isLoading ? /* @__PURE__ */ jsx("div", {
+							className: "p-2 text-xs text-gray-500",
+							children: texts.loadingLabel
+						}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!hasItemSections ? /* @__PURE__ */ jsx("div", {
+							className: "mb-2 px-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+							children: texts.sectionLabel
+						}) : null, visibleItems.length === 0 ? /* @__PURE__ */ jsx("div", {
+							className: "px-2 text-xs text-gray-400",
+							children: texts.emptyLabel
+						}) : /* @__PURE__ */ jsx("div", {
+							className: "space-y-1",
+							children: visibleItems.map((item, index) => {
+								const { key, sectionKey, sectionLabel, title, subtitle } = item;
+								const isActive = index === activeIndexInRange;
+								const previousItem = visibleItems[index - 1];
+								return /* @__PURE__ */ jsxs("div", {
+									className: "space-y-1",
+									children: [hasItemSections && Boolean(sectionLabel?.trim()) && previousItem?.sectionKey !== sectionKey ? /* @__PURE__ */ jsx("div", {
+										className: "px-2 pb-0.5 pt-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500",
+										children: sectionLabel
+									}) : null, /* @__PURE__ */ jsxs("button", {
+										type: "button",
+										role: "option",
+										"aria-selected": isActive,
+										"data-input-surface-index": index,
+										onPointerMove: (event) => {
+											if (event.pointerType !== "touch") setActiveIndexForCurrentItems(index);
+										},
+										onPointerDown: (event) => {
+											if (event.button > 0) return;
+											event.preventDefault();
+											onSelectItem(item);
+										},
+										onClick: (event) => {
+											if (event.detail === 0) onSelectItem(item);
+										},
+										className: `flex w-full items-start gap-2 rounded-lg px-2 py-1.5 text-left transition ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-700 hover:bg-gray-50"}`,
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "truncate text-xs font-semibold",
+											children: title
+										}), /* @__PURE__ */ jsx("span", {
+											className: "truncate text-xs text-gray-500",
+											children: subtitle
+										})]
+									})]
+								}, key);
+							})
+						})] })
+					})]
 				}), /* @__PURE__ */ jsx("div", {
 					className: "custom-scrollbar min-h-0 min-w-0 overflow-y-auto overscroll-contain p-2.5",
 					onPointerDown: onDetailsPointerDown,
@@ -634,6 +675,7 @@ function ChatInputSurfaceHost(props) {
 		ref: menuRef,
 		isOpen,
 		isLoading: inputSurface.isLoading,
+		filterOptions: inputSurface.filterOptions,
 		items: inputSurface.items,
 		texts: inputSurface.texts,
 		onSelectItem: (item) => {
@@ -775,7 +817,14 @@ function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canS
 			})] })]
 		}) : null, /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [contextWindow ? /* @__PURE__ */ jsx(ContextWindowIndicator, { contextWindow }) : null, isSending ? canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
+			children: [contextWindow ? /* @__PURE__ */ jsx(ContextWindowIndicator, { contextWindow }) : null, !isSending || !sendDisabled ? /* @__PURE__ */ jsx(ChatButton, {
+				size: "icon",
+				className: "h-8 w-8 rounded-full",
+				"aria-label": sendButtonLabel,
+				onClick: () => void onSend(),
+				disabled: sendDisabled,
+				children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-5 w-5" })
+			}) : canStopGeneration ? /* @__PURE__ */ jsx(ChatButton, {
 				size: "icon",
 				variant: "outline",
 				className: "h-8 w-8 rounded-full",
@@ -799,14 +848,7 @@ function ChatInputBarActions({ sendError, sendErrorDetailsLabel, isSending, canS
 					className: "text-xs",
 					children: stopHint
 				})
-			})] }) }) : /* @__PURE__ */ jsx(ChatButton, {
-				size: "icon",
-				className: "h-8 w-8 rounded-full",
-				"aria-label": sendButtonLabel,
-				onClick: () => void onSend(),
-				disabled: sendDisabled,
-				children: /* @__PURE__ */ jsx(ArrowUp, { className: "h-5 w-5" })
-			})]
+			})] }) })]
 		})]
 	});
 }
@@ -1281,11 +1323,11 @@ function buildTokenClassName(tokenKind) {
 		"gap-1.5",
 		"rounded-lg",
 		"border",
-		"border-slate-200/80",
-		"bg-slate-50",
+		"border-border",
+		"bg-muted",
 		"px-2",
 		"align-baseline",
-		"text-slate-700",
+		"text-foreground",
 		"transition-[border-color,background-color,box-shadow,color]",
 		"duration-150"
 	].join(" ");
@@ -1310,7 +1352,7 @@ function buildTokenClassName(tokenKind) {
 }
 function ChatComposerTokenChip({ label, tokenKind }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-		className: tokenKind === "file" ? "inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-white text-slate-500 ring-1 ring-black/5" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70",
+		className: tokenKind === "file" ? "inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-card text-muted-foreground ring-1 ring-border" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70",
 		children: tokenKind === "file" ? /* @__PURE__ */ jsx(ImageIcon, {
 			"aria-hidden": "true",
 			className: "h-3 w-3"
@@ -1322,7 +1364,7 @@ function ChatComposerTokenChip({ label, tokenKind }) {
 			className: "h-3 w-3"
 		})
 	}), /* @__PURE__ */ jsx("span", {
-		className: tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate",
+		className: tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-foreground" : "truncate",
 		children: label
 	})] });
 }
@@ -1786,7 +1828,6 @@ function deleteChatComposerContent(params) {
 //#region src/components/chat/ui/chat-input-bar/lexical/chat-composer-lexical-controller.ts
 function resolveLexicalComposerKeyboardAction(params) {
 	const { canStopGeneration, isComposing, isSending, key, shiftKey } = params;
-	if (key === "Enter" && !shiftKey && isSending) return { type: "consume" };
 	if (key === "Escape") {
 		if (isSending && canStopGeneration) return { type: "stop-generation" };
 		return { type: "noop" };
@@ -1853,7 +1894,6 @@ function handleLexicalComposerKeyboardCommand(params) {
 	});
 	if (action.type !== "noop") nativeEvent.preventDefault();
 	switch (action.type) {
-		case "consume": return true;
 		case "stop-generation":
 			actions.onStop();
 			return true;
@@ -2269,10 +2309,11 @@ function InputBarHint({ hint }) {
 		})
 	});
 }
-const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSurface, slashMenu, surface, toolbar: toolbarProps }, ref) {
+const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSurface, slashMenu, surface, toolbar: toolbarProps, topSlot }, ref) {
 	const composerRef = useRef(null);
 	const resolvedInputSurface = inputSurface ?? (slashMenu ? {
 		isLoading: slashMenu.isLoading,
+		filterOptions: slashMenu.filterOptions,
 		items: slashMenu.items,
 		onSelectItem: slashMenu.onSelectItem,
 		texts: {
@@ -2309,6 +2350,10 @@ const ChatInputBar = forwardRef(function ChatInputBar({ composer, hint, inputSur
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "overflow-hidden rounded-2xl border border-border bg-card shadow-card",
 				children: [
+					topSlot ? /* @__PURE__ */ jsx("div", {
+						className: "px-3 pb-0 pt-2 sm:px-4 sm:pt-2.5",
+						children: topSlot
+					}) : null,
 					/* @__PURE__ */ jsx("div", {
 						className: "relative",
 						children: /* @__PURE__ */ jsx(ChatInputSurfaceHost, {
@@ -2649,7 +2694,7 @@ var ChatCodeSyntaxHighlighter = class {
 const chatCodeSyntaxHighlighter = new ChatCodeSyntaxHighlighter();
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-code-block.tsx
-const CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
+const CODE_LANGUAGE_REGEX$1 = /language-([a-z0-9-]+)/i;
 function flattenNodeText(value) {
 	if (typeof value === "string" || typeof value === "number") return String(value);
 	if (Array.isArray(value)) return value.map(flattenNodeText).join("");
@@ -2660,7 +2705,7 @@ function normalizeCodeText(value) {
 	return content.endsWith("\n") ? content.slice(0, -1) : content;
 }
 function resolveCodeLanguage(className) {
-	return (className ? CODE_LANGUAGE_REGEX.exec(className) : null)?.[1]?.toLowerCase() || "text";
+	return (className ? CODE_LANGUAGE_REGEX$1.exec(className) : null)?.[1]?.toLowerCase() || "text";
 }
 function ChatCodeBlock({ className, children, texts }) {
 	const language = useMemo(() => resolveCodeLanguage(className), [className]);
@@ -2693,6 +2738,176 @@ function ChatCodeBlock({ className, children, texts }) {
 	});
 }
 //#endregion
+//#region src/components/chat/ui/chat-message-list/utils/chat-inline-display.utils.ts
+const INLINE_DISPLAY_LANGUAGE = "nextclaw-inline";
+const CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
+const FILE_PREVIEW_VIEWERS = new Set([
+	"auto",
+	"source",
+	"rendered"
+]);
+function isRecord$1(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function readString(value) {
+	return typeof value === "string" && value.trim().length > 0 ? value.trim() : void 0;
+}
+function readPositiveInteger(value) {
+	return Number.isInteger(value) && Number(value) > 0 ? Number(value) : void 0;
+}
+function readFilePreviewViewer(value) {
+	const viewer = readString(value);
+	return viewer && FILE_PREVIEW_VIEWERS.has(viewer) ? viewer : void 0;
+}
+function readTargetPayload(record) {
+	const { payload } = record;
+	return isRecord$1(payload) ? payload : null;
+}
+function readFileTarget(record) {
+	const payload = readTargetPayload(record);
+	if (!payload) return null;
+	const path = readString(payload.path);
+	if (!path) return null;
+	return {
+		type: "file",
+		payload: {
+			path,
+			line: readPositiveInteger(payload.line),
+			column: readPositiveInteger(payload.column),
+			viewer: readFilePreviewViewer(payload.viewer)
+		}
+	};
+}
+function readUrlTarget(record) {
+	const payload = readTargetPayload(record);
+	if (!payload) return null;
+	const url = readString(payload.url);
+	if (!url) return null;
+	return {
+		type: "url",
+		payload: { url }
+	};
+}
+function readPanelAppTarget(record) {
+	const payload = readTargetPayload(record);
+	if (!payload) return null;
+	const appId = readString(payload.appId);
+	if (!appId) return null;
+	return {
+		type: "panel_app",
+		payload: { appId }
+	};
+}
+function readJsonTarget(record) {
+	const payload = readTargetPayload(record);
+	if (!payload || !("value" in payload)) return null;
+	return {
+		type: "json",
+		payload: { value: payload.value }
+	};
+}
+function readInlineDisplayTarget(value) {
+	if (!isRecord$1(value)) return null;
+	const type = readString(value.type);
+	if (type === "file") return readFileTarget(value);
+	if (type === "url") return readUrlTarget(value);
+	if (type === "panel_app") return readPanelAppTarget(value);
+	if (type === "json") return readJsonTarget(value);
+	return null;
+}
+function isChatInlineDisplayLanguage(className) {
+	return (className ? CODE_LANGUAGE_REGEX.exec(className) : null)?.[1]?.toLowerCase() === INLINE_DISPLAY_LANGUAGE;
+}
+function parseChatInlineDisplayDirective(rawText) {
+	const text = rawText.endsWith("\n") ? rawText.slice(0, -1) : rawText;
+	let parsed;
+	try {
+		parsed = JSON.parse(text);
+	} catch {
+		return null;
+	}
+	if (!isRecord$1(parsed)) return null;
+	const target = readInlineDisplayTarget(parsed.target);
+	if (!target) return null;
+	return {
+		target,
+		title: readString(parsed.title),
+		description: readString(parsed.description)
+	};
+}
+function getChatInlineDisplayLabel(display) {
+	if (display.title) return display.title;
+	if (display.target.type === "file") {
+		const segments = display.target.payload.path.split("/").filter(Boolean);
+		return segments[segments.length - 1] ?? display.target.payload.path;
+	}
+	if (display.target.type === "url") return display.target.payload.url;
+	if (display.target.type === "panel_app") return display.target.payload.appId;
+	return "JSON";
+}
+function getChatInlineDisplayDetail(display) {
+	if (display.target.type === "file") return display.target.payload.path;
+	if (display.target.type === "url") return display.target.payload.url;
+	if (display.target.type === "panel_app") return display.target.payload.appId;
+	return JSON.stringify(display.target.payload.value, null, 2);
+}
+//#endregion
+//#region src/components/chat/ui/chat-message-list/chat-inline-display.tsx
+function ChatInlineDisplayIcon({ display }) {
+	const className = "h-3.5 w-3.5 shrink-0 text-muted-foreground";
+	if (display.target.type === "file") return /* @__PURE__ */ jsx(FileText, {
+		className,
+		"aria-hidden": true
+	});
+	if (display.target.type === "url") return /* @__PURE__ */ jsx(Globe, {
+		className,
+		"aria-hidden": true
+	});
+	if (display.target.type === "panel_app") return /* @__PURE__ */ jsx(AppWindow, {
+		className,
+		"aria-hidden": true
+	});
+	return /* @__PURE__ */ jsx(Code2, {
+		className,
+		"aria-hidden": true
+	});
+}
+function formatJsonDetail(value) {
+	return value.length > 1200 ? `${value.slice(0, 1200)}\n...` : value;
+}
+function ChatInlineDisplayFallback({ display }) {
+	const label = getChatInlineDisplayLabel(display);
+	const detail = getChatInlineDisplayDetail(display);
+	const formattedDetail = display.target.type === "json" ? formatJsonDetail(detail) : detail;
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("my-2 max-w-full border-l-2 border-border bg-muted/30 px-3 py-2", "text-xs leading-relaxed text-foreground"),
+		"data-nextclaw-inline-display": "true",
+		"data-nextclaw-inline-display-type": display.target.type,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [/* @__PURE__ */ jsx(ChatInlineDisplayIcon, { display }), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 truncate font-medium",
+					children: label
+				})]
+			}),
+			display.description ? /* @__PURE__ */ jsx("p", {
+				className: "mt-1 line-clamp-2 text-[12px] text-muted-foreground",
+				children: display.description
+			}) : null,
+			/* @__PURE__ */ jsx("pre", {
+				className: cn("mt-1 max-h-40 overflow-auto whitespace-pre-wrap break-words", "font-mono text-[11px] leading-relaxed text-muted-foreground"),
+				children: formattedDetail
+			})
+		]
+	});
+}
+function ChatInlineDisplay({ display, renderInlineDisplay }) {
+	const rendered = renderInlineDisplay?.(display);
+	if (rendered !== void 0 && rendered !== null) return /* @__PURE__ */ jsx(Fragment$1, { children: rendered });
+	return /* @__PURE__ */ jsx(ChatInlineDisplayFallback, { display });
+}
+//#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
 const MARKDOWN_MAX_CHARS = 14e4;
 const SAFE_LINK_PROTOCOLS = new Set([
@@ -2848,7 +3063,7 @@ function readStringProp(props, key) {
 	const value = props[key];
 	return typeof value === "string" && value.length > 0 ? value : null;
 }
-function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens, onFileOpen }) {
+function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens, onFileOpen, renderInlineDisplay }) {
 	const isUser = role === "user";
 	const remarkPlugins = useMemo(() => inlineTokens && inlineTokens.length > 0 ? [remarkGfm, createRemarkInlineTokenPlugin(inlineTokens)] : [remarkGfm], [inlineTokens]);
 	const markdownComponents = useMemo(() => ({
@@ -2869,7 +3084,7 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 				children
 			});
 		},
-		a: ({ href, children, ...rest }) => {
+		a: ({ node: _node, href, children, ...rest }) => {
 			const safeHref = resolveSafeHref(href);
 			if (!safeHref) return /* @__PURE__ */ jsx("span", {
 				className: "chat-link-invalid",
@@ -2892,14 +3107,14 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 				children
 			});
 		},
-		table: ({ children, ...rest }) => /* @__PURE__ */ jsx("div", {
+		table: ({ node: _node, children, ...rest }) => /* @__PURE__ */ jsx("div", {
 			className: "chat-table-wrap",
 			children: /* @__PURE__ */ jsx("table", {
 				...rest,
 				children
 			})
 		}),
-		input: ({ type, checked, ...rest }) => {
+		input: ({ node: _node, type, checked, ...rest }) => {
 			if (type !== "checkbox") return /* @__PURE__ */ jsx("input", {
 				...rest,
 				type
@@ -2913,7 +3128,7 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 				className: "chat-task-checkbox"
 			});
 		},
-		img: ({ src, alt, ...rest }) => {
+		img: ({ node: _node, src, alt, ...rest }) => {
 			const safeSrc = resolveSafeHref(src);
 			if (!safeSrc) return null;
 			return /* @__PURE__ */ jsx("img", {
@@ -2924,12 +3139,18 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 				decoding: "async"
 			});
 		},
-		code: ({ className, children, ...rest }) => {
-			if (!className && !String(children ?? "").includes("\n")) return /* @__PURE__ */ jsx("code", {
+		code: ({ node: _node, className, children, ...rest }) => {
+			const plainText = String(children ?? "");
+			if (!className && !plainText.includes("\n")) return /* @__PURE__ */ jsx("code", {
 				...rest,
 				className: cn("chat-inline-code", className),
 				children
 			});
+			const inlineDisplay = isChatInlineDisplayLanguage(className) ? parseChatInlineDisplayDirective(plainText) : null;
+			if (inlineDisplay) return /* @__PURE__ */ jsx(ChatInlineDisplay, {
+				display: inlineDisplay,
+				renderInlineDisplay
+			});
 			return /* @__PURE__ */ jsx(ChatCodeBlock, {
 				className,
 				texts,
@@ -2940,6 +3161,7 @@ function ChatMessageMarkdown({ text, role, texts, inline = false, inlineTokens,
 		inline,
 		isUser,
 		onFileOpen,
+		renderInlineDisplay,
 		texts
 	]);
 	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
@@ -3371,12 +3593,20 @@ function useReasoningBlockOpenState(params) {
 //#region src/components/chat/hooks/use-sticky-bottom-scroll.ts
 const DEFAULT_STICKY_THRESHOLD_PX = 10;
 function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey, scrollRef, stickyThresholdPx }) {
+	const [isAtBottom, setIsAtBottom] = useState(true);
 	const isStickyRef = useRef(true);
 	const isProgrammaticScrollRef = useRef(false);
 	const previousResetKeyRef = useRef(null);
 	const pendingInitialScrollRef = useRef(false);
 	const scheduledScrollFrameRef = useRef(null);
-	const queueScrollToBottom = useCallback(() => {
+	const updateStickyState = useCallback((nextIsAtBottom) => {
+		isStickyRef.current = nextIsAtBottom;
+		setIsAtBottom(nextIsAtBottom);
+	}, []);
+	const resolveIsAtBottom = useCallback((element) => {
+		return element.scrollHeight - element.scrollTop - element.clientHeight <= (stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
+	}, [stickyThresholdPx]);
+	const queueScrollToBottom = useCallback((behavior = "auto") => {
 		if (!scrollRef.current) return;
 		if (scheduledScrollFrameRef.current !== null) cancelAnimationFrame(scheduledScrollFrameRef.current);
 		scheduledScrollFrameRef.current = requestAnimationFrame(() => {
@@ -3384,24 +3614,36 @@ function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey
 			const currentElement = scrollRef.current;
 			if (!currentElement) return;
 			isProgrammaticScrollRef.current = true;
-			currentElement.scrollTop = currentElement.scrollHeight;
+			if (typeof currentElement.scrollTo === "function") currentElement.scrollTo({
+				top: currentElement.scrollHeight,
+				behavior
+			});
+			else currentElement.scrollTop = currentElement.scrollHeight;
 		});
 	}, [scrollRef]);
-	const onScroll = () => {
+	const scrollToBottom = useCallback(() => {
+		updateStickyState(true);
+		queueScrollToBottom();
+	}, [queueScrollToBottom, updateStickyState]);
+	const onScroll = useCallback(() => {
 		if (isProgrammaticScrollRef.current) {
 			isProgrammaticScrollRef.current = false;
 			return;
 		}
 		const element = scrollRef.current;
 		if (!element) return;
-		isStickyRef.current = element.scrollHeight - element.scrollTop - element.clientHeight <= (stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
-	};
+		updateStickyState(resolveIsAtBottom(element));
+	}, [
+		resolveIsAtBottom,
+		scrollRef,
+		updateStickyState
+	]);
 	useEffect(() => {
 		if (previousResetKeyRef.current === resetKey) return;
 		previousResetKeyRef.current = resetKey;
-		isStickyRef.current = true;
+		updateStickyState(true);
 		pendingInitialScrollRef.current = true;
-	}, [resetKey]);
+	}, [resetKey, updateStickyState]);
 	useEffect(() => {
 		return () => {
 			const scheduledScrollFrame = scheduledScrollFrameRef.current;
@@ -3432,7 +3674,11 @@ function useStickyBottomScroll({ contentVersion, hasContent, isLoading, resetKey
 		queueScrollToBottom,
 		scrollRef
 	]);
-	return { onScroll };
+	return {
+		isAtBottom,
+		onScroll,
+		scrollToBottom
+	};
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
@@ -3639,6 +3885,20 @@ function readLineNumberColumnWidth(block) {
 function readCodeColumnWidth(block) {
 	return `calc(${block.lines.reduce((currentMax, line) => Math.max(currentMax, Math.max(1, line.text.length)), 1)}ch + 1.25rem)`;
 }
+function readPathExtension(path) {
+	const fileName = path.split(/[\\/]/).filter(Boolean).pop() ?? path;
+	const cleanName = fileName.split(/[?#]/)[0] ?? fileName;
+	const extensionStart = cleanName.lastIndexOf(".");
+	if (extensionStart <= 0 || extensionStart === cleanName.length - 1) return null;
+	return cleanName.slice(extensionStart + 1).toLowerCase();
+}
+function readBlockLanguage(block) {
+	return block.languageHint?.trim() || readPathExtension(block.path) || "text";
+}
+function readLanguageClassName(language) {
+	const normalized = language.toLowerCase().replace(/[^a-z0-9-]/g, "-");
+	return normalized ? `language-${normalized}` : "language-text";
+}
 function getLineNumberTone(line) {
 	if (line.kind === "remove") return "border-r border-rose-200 bg-rose-50 text-rose-700";
 	if (line.kind === "add") return "border-r border-emerald-200 bg-emerald-50 text-emerald-700";
@@ -3660,14 +3920,17 @@ function FileOperationLineNumberCell({ layout, line, lineNumberColumnWidth }) {
 		children: readVisibleLineNumber(line)
 	});
 }
-function FileOperationCodeCell({ line }) {
+function FileOperationCodeCell({ language, line }) {
+	const highlightedCode = useMemo(() => chatCodeSyntaxHighlighter.highlight(line.text || " ", language), [language, line.text]);
 	return /* @__PURE__ */ jsx("span", {
 		"data-file-code-row": "true",
-		className: cn("block min-w-0 flex-1 whitespace-pre px-2.5", getCodeRowTone(line)),
-		children: line.text || " "
+		"data-file-code-language": highlightedCode.language,
+		"data-highlighted": highlightedCode.highlighted ? "true" : "false",
+		className: cn("chat-file-code-syntax hljs block min-w-0 flex-1 whitespace-pre px-2.5", readLanguageClassName(highlightedCode.language), getCodeRowTone(line)),
+		dangerouslySetInnerHTML: { __html: highlightedCode.html }
 	});
 }
-function FileOperationLineRow({ line, showLineNumbers, lineNumberColumnWidth }) {
+function FileOperationLineRow({ language, line, showLineNumbers, lineNumberColumnWidth }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-line-row": "true",
 		className: FILE_ROW_CLASS_NAME,
@@ -3675,13 +3938,17 @@ function FileOperationLineRow({ line, showLineNumbers, lineNumberColumnWidth })
 			layout: "compact",
 			line,
 			lineNumberColumnWidth
-		}) : null, /* @__PURE__ */ jsx(FileOperationCodeCell, { line })]
+		}) : null, /* @__PURE__ */ jsx(FileOperationCodeCell, {
+			language,
+			line
+		})]
 	});
 }
 function FileOperationWorkspaceSurface({ block }) {
 	const showLineNumbers = readHasBlockLineNumbers(block);
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
 	const codeColumnWidth = readCodeColumnWidth(block);
+	const language = readBlockLanguage(block);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "workspace",
@@ -3708,7 +3975,10 @@ function FileOperationWorkspaceSurface({ block }) {
 				children: block.lines.map((line, index) => /* @__PURE__ */ jsx("div", {
 					"data-file-code-canvas-row": "true",
 					className: FILE_ROW_CLASS_NAME,
-					children: /* @__PURE__ */ jsx(FileOperationCodeCell, { line })
+					children: /* @__PURE__ */ jsx(FileOperationCodeCell, {
+						language,
+						line
+					})
 				}, readLineKey("code", line, index)))
 			}), /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 bg-card" })]
 		})]
@@ -3720,6 +3990,7 @@ function FileOperationCodeSurface({ block, layout = "compact" }) {
 	const lineNumberColumnWidth = readLineNumberColumnWidth(block);
 	const codeColumnWidth = readCodeColumnWidth(block);
 	const surfaceMinWidth = showLineNumbers ? `calc(${lineNumberColumnWidth} + ${codeColumnWidth})` : codeColumnWidth;
+	const language = readBlockLanguage(block);
 	return /* @__PURE__ */ jsx("div", {
 		"data-file-code-surface": "true",
 		"data-file-code-surface-layout": "compact",
@@ -3729,6 +4000,7 @@ function FileOperationCodeSurface({ block, layout = "compact" }) {
 			className: "min-w-full",
 			style: { minWidth: surfaceMinWidth },
 			children: block.lines.map((line, index) => /* @__PURE__ */ jsx(FileOperationLineRow, {
+				language,
 				line,
 				showLineNumbers,
 				lineNumberColumnWidth
@@ -4039,20 +4311,21 @@ function GenericToolSection({ label, tone, children }) {
 function TerminalExecutionView({ card }) {
 	const output = normalizeTerminalOutput(card.output, card.outputData);
 	const isRunning = card.statusTone === "running";
-	const hasContent = !!(card.summary?.trim() || output.trim().length > 0);
+	const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
+	const hasOutput = output.trim().length > 0;
+	const canExpand = isRunning || hasOutput || Boolean(commandPart?.trim());
 	const { expanded, onToggle } = useToolCardExpandedState({
-		canExpand: output.trim().length > 0 || isRunning,
+		canExpand,
 		isRunning,
 		autoExpandWhileRunning: false,
-		expandOnError: hasContent,
+		expandOnError: canExpand,
 		statusTone: card.statusTone
 	});
-	const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
 	return /* @__PURE__ */ jsxs(ToolCardRoot, { children: [/* @__PURE__ */ jsx(ToolCardHeader, {
 		card,
 		icon: Terminal,
 		expanded,
-		canExpand: output.trim().length > 0 || isRunning,
+		canExpand,
 		onToggle
 	}), expanded && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar min-h-0 text-[12px]",
@@ -4069,10 +4342,13 @@ function TerminalExecutionView({ card }) {
 				}) : /* @__PURE__ */ jsx("div", { className: "h-3 w-32 bg-muted rounded animate-pulse mt-2" })
 			})]
 		})
-	}), output && /* @__PURE__ */ jsx(ToolCardContent, { children: /* @__PURE__ */ jsxs("pre", {
-		className: "font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed px-0",
-		children: [output, isRunning && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-primary/60 animate-pulse align-middle" })]
-	}) })] })] });
+	}), (hasOutput || !isRunning) && /* @__PURE__ */ jsx(ToolCardContent, {
+		className: hasOutput ? void 0 : "bg-muted/20 py-2",
+		children: /* @__PURE__ */ jsxs("pre", {
+			className: cn("font-mono text-[12px] text-muted-foreground whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar leading-relaxed", hasOutput ? "px-0" : "rounded-md border border-dashed border-border bg-card/70 px-3 py-2 italic"),
+			children: [hasOutput ? output : card.emptyLabel, isRunning && hasOutput && /* @__PURE__ */ jsx("span", { className: "inline-block w-1.5 h-3 ml-1 bg-primary/60 animate-pulse align-middle" })]
+		})
+	})] })] });
 }
 function FileOperationView({ card, onFileOpen }) {
 	const output = card.output?.trim() ?? "";
@@ -4218,75 +4494,130 @@ function ChatToolCard({ card, onToolAction, onFileOpen, renderToolAgent, renderP
 }
 //#endregion
 //#region src/components/chat/ui/chat-message-list/chat-message.tsx
-const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, onFileOpen, renderToolAgent, renderPanelAppCard }) {
+function isMessageInProgress(status) {
+	return status === "pending" || status === "streaming";
+}
+function isProcessPart(part) {
+	return part.type === "reasoning" || part.type === "tool-card";
+}
+function splitAssistantProcess(message) {
+	if (message.role !== "assistant" || !message.processSummary || isMessageInProgress(message.status)) return null;
+	let lastProcessPartIndex = -1;
+	for (let index = message.parts.length - 1; index >= 0; index -= 1) if (isProcessPart(message.parts[index])) {
+		lastProcessPartIndex = index;
+		break;
+	}
+	if (lastProcessPartIndex < 0 || lastProcessPartIndex >= message.parts.length - 1) return null;
+	return {
+		processParts: message.parts.slice(0, lastProcessPartIndex + 1),
+		finalParts: message.parts.slice(lastProcessPartIndex + 1)
+	};
+}
+function renderChatMessagePart({ index, isInProgress, isLastPart, isUser, onFileOpen, onToolAction, part, renderInlineDisplay, renderPanelAppCard, renderToolAgent, role, texts }) {
+	const { type } = part;
+	if (type === "markdown") {
+		const { inlineTokens, text } = part;
+		return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
+			text,
+			role,
+			texts,
+			inlineTokens,
+			onFileOpen,
+			renderInlineDisplay
+		}, `markdown-${index}`);
+	}
+	if (type === "reasoning") {
+		const { label, text } = part;
+		return /* @__PURE__ */ jsx(ChatReasoningBlock, {
+			label,
+			text,
+			isUser,
+			isInProgress: isInProgress && isLastPart
+		}, `reasoning-${index}`);
+	}
+	if (type === "tool-card") {
+		const { card } = part;
+		return /* @__PURE__ */ jsx("div", {
+			className: "mt-0.5",
+			children: /* @__PURE__ */ jsx(ChatToolCard, {
+				card,
+				onToolAction,
+				onFileOpen,
+				renderToolAgent,
+				renderPanelAppCard
+			})
+		}, `tool-${index}`);
+	}
+	if (type === "file") {
+		const { file } = part;
+		return /* @__PURE__ */ jsx(ChatMessageFile, {
+			file,
+			isUser,
+			texts
+		}, `file-${index}`);
+	}
+	if (type === "unknown") {
+		const { label, rawType, text } = part;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "rounded-lg border border-border bg-muted/60 px-2.5 py-2 text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "font-semibold text-foreground",
+				children: [
+					label,
+					": ",
+					rawType
+				]
+			}), text ? /* @__PURE__ */ jsx("pre", {
+				className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-muted-foreground",
+				children: text
+			}) : null]
+		}, `unknown-${index}`);
+	}
+	return null;
+}
+const ChatMessage = memo(function ChatMessage({ message, texts, onToolAction, onFileOpen, renderInlineDisplay, renderToolAgent, renderPanelAppCard }) {
 	const { role } = message;
 	const isUser = role === "user";
-	const isMessageInProgress = message.status === "pending" || message.status === "streaming";
+	const isInProgress = isMessageInProgress(message.status);
+	const processSplit = splitAssistantProcess(message);
+	const renderPart = (part, index) => renderChatMessagePart({
+		part,
+		index,
+		role,
+		isUser,
+		isInProgress,
+		isLastPart: index === message.parts.length - 1,
+		texts,
+		onToolAction,
+		onFileOpen,
+		renderInlineDisplay,
+		renderToolAgent,
+		renderPanelAppCard
+	});
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm", isUser ? "border-primary bg-primary py-3 text-primary-foreground" : role === "assistant" ? "border-border bg-card pb-3 pt-4 text-card-foreground" : "border-border bg-muted/45 py-3 text-foreground"),
+		className: cn("inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm has-[[data-chat-message-wide-content=true]]:w-full", isUser ? "border-primary bg-primary py-3 text-primary-foreground" : role === "assistant" ? "border-border bg-card pb-3 pt-4 text-card-foreground" : "border-border bg-muted/45 py-3 text-foreground"),
 		children: /* @__PURE__ */ jsx("div", {
 			className: "space-y-2",
-			children: message.parts.map((part, index) => {
-				const { type } = part;
-				if (type === "markdown") {
-					const { inlineTokens, text } = part;
-					return /* @__PURE__ */ jsx(ChatMessageMarkdown, {
-						text,
-						role,
-						texts,
-						inlineTokens,
-						onFileOpen
-					}, `markdown-${index}`);
-				}
-				if (type === "reasoning") {
-					const { label, text } = part;
-					return /* @__PURE__ */ jsx(ChatReasoningBlock, {
-						label,
-						text,
-						isUser,
-						isInProgress: isMessageInProgress && index === message.parts.length - 1
-					}, `reasoning-${index}`);
-				}
-				if (type === "tool-card") {
-					const { card } = part;
-					return /* @__PURE__ */ jsx("div", {
-						className: "mt-0.5",
-						children: /* @__PURE__ */ jsx(ChatToolCard, {
-							card,
-							onToolAction,
-							onFileOpen,
-							renderToolAgent,
-							renderPanelAppCard
-						})
-					}, `tool-${index}`);
-				}
-				if (type === "file") {
-					const { file } = part;
-					return /* @__PURE__ */ jsx(ChatMessageFile, {
-						file,
-						isUser,
-						texts
-					}, `file-${index}`);
-				}
-				if (type === "unknown") {
-					const { label, rawType, text } = part;
-					return /* @__PURE__ */ jsxs("div", {
-						className: "rounded-lg border border-border bg-muted/60 px-2.5 py-2 text-xs text-muted-foreground",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "font-semibold text-foreground",
-							children: [
-								label,
-								": ",
-								rawType
-							]
-						}), text ? /* @__PURE__ */ jsx("pre", {
-							className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-muted-foreground",
-							children: text
-						}) : null]
-					}, `unknown-${index}`);
-				}
-				return null;
-			})
+			children: processSplit ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("details", {
+				className: "group/process text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ jsxs("summary", {
+					className: "flex cursor-pointer list-none items-center gap-1.5 border-b border-border/60 pb-2 font-medium transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 [&::-webkit-details-marker]:hidden",
+					children: [
+						/* @__PURE__ */ jsx(ChevronRight, {
+							className: "h-3.5 w-3.5 group-open/process:hidden",
+							strokeWidth: 2.5
+						}),
+						/* @__PURE__ */ jsx(ChevronDown, {
+							className: "hidden h-3.5 w-3.5 group-open/process:block",
+							strokeWidth: 2.5
+						}),
+						/* @__PURE__ */ jsx("span", { children: message.processSummary?.label })
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "space-y-2 pt-2",
+					children: processSplit.processParts.map(renderPart)
+				})]
+			}), processSplit.finalParts.map((part, index) => renderPart(part, processSplit.processParts.length + index))] }) : message.parts.map(renderPart)
 		})
 	});
 });
@@ -4386,7 +4717,7 @@ function ChatTypingIndicator({ label }) {
 		})]
 	});
 }
-function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAction, renderPanelAppCard, renderToolAgent, texts }) {
+function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAction, renderInlineDisplay, renderPanelAppCard, renderToolAgent, texts }) {
 	const visibleMessages = messages.filter(hasRenderableMessageContent);
 	const hasRenderableAssistantDraft = visibleMessages.some((message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending"));
 	return /* @__PURE__ */ jsxs("div", {
@@ -4399,12 +4730,13 @@ function ChatMessageList({ className, isSending, messages, onFileOpen, onToolAct
 				children: [
 					!isUser ? /* @__PURE__ */ jsx(ChatMessageAvatar, { role: message.role }) : null,
 					/* @__PURE__ */ jsxs("div", {
-						className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"),
+						className: cn("w-fit max-w-[92%] space-y-2 has-[[data-chat-message-wide-content=true]]:w-full", isUser && "flex flex-col items-end"),
 						children: [/* @__PURE__ */ jsx(ChatMessage, {
 							message,
 							texts,
 							onToolAction,
 							onFileOpen,
+							renderInlineDisplay,
 							renderToolAgent,
 							renderPanelAppCard
 						}), /* @__PURE__ */ jsx("div", {