@parallelworks/ui 0.44.0 → 0.45.0

package/dist/ai/components/agent/ActivityLine.d.ts

@@ -1,10 +1,5 @@
 /** The agent status words: one is picked per turn and held until it ends. */
 export declare const activityWords: readonly ['Thinking', 'Cogitating', 'Pondering', 'Percolating', 'Ruminating', 'Noodling', 'Conjuring', 'Simmering', 'Marinating', 'Tinkering', 'Scheming', 'Brewing', 'Wrangling', 'Finagling', 'Spelunking', 'Puttering', 'Composing', 'Synthesizing', 'Deliberating', 'Mulling', 'Contemplating', 'Vibing', 'Whittling', 'Concocting', 'Formulating', 'Hatching', 'Herding', 'Ideating', 'Manifesting', 'Moseying', 'Musing', 'Percussing', 'Reticulating', 'Schlepping', 'Stewing', 'Transmuting', 'Wibbling', 'Crunching', 'Forging', 'Cooking'];
-/** Elapsed run time the way an agent status line prints it: 45s, 2m13s,
- *  1h2m3s. */
-export declare function formatElapsed(seconds: number): string;
-/** Token counts the way an agent status line prints them: 512, 1.2k, 3.4M. */
-export declare function compactCount(n: number): string;
 /** The terminal's "it's working" line for a running turn: spinner, status
  *  word, how long the turn has run, its token counts so far, and a way to
  *  stop it. */

package/dist/ai/components/agent/ActivityLine.js

@@ -1,10 +1,11 @@
-import { FaStop } from "../../../icons/fa/FaStop.js";
-import { LoaderIcon } from "../../../components/StatusIcons.js";
+import { cx } from "../../../cx.js";
+import { StopIcon } from "../../../icons.js";
+import { Loader } from "../../../components/Loader.js";
+import { formatCount, formatDuration } from "../../../format.js";
+import { useElapsed } from "../../../components/relativeTime.js";
 import { useChatConfig } from "../../core/config.js";
-import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { DateTime } from "luxon";
 //#region src/ai/components/agent/ActivityLine.tsx
 /** The agent status words: one is picked per turn and held until it ends. */
 var activityWords = [
@@ -52,41 +53,6 @@ var activityWords = [
 function randomActivityWord() {
 	return activityWords[Math.floor(Math.random() * activityWords.length)] ?? activityWords[0];
 }
-/** Elapsed run time the way an agent status line prints it: 45s, 2m13s,
-*  1h2m3s. */
-function formatElapsed(seconds) {
-	const total = Math.max(0, Math.floor(seconds));
-	const hours = Math.floor(total / 3600);
-	const minutes = Math.floor(total % 3600 / 60);
-	const rest = total % 60;
-	if (hours > 0) return `${hours}h${minutes}m${rest}s`;
-	if (minutes > 0) return `${minutes}m${rest}s`;
-	return `${rest}s`;
-}
-/** Token counts the way an agent status line prints them: 512, 1.2k, 3.4M. */
-function compactCount(n) {
-	if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
-	if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
-	return String(Math.floor(n));
-}
-function secondsSince(iso) {
-	return Math.max(0, DateTime.now().diff(DateTime.fromISO(iso)).as("seconds"));
-}
-/** Seconds since `startedAt`, re-read every second; null when there is no
-*  start to count from. */
-function useElapsedSeconds(startedAt) {
-	const [elapsed, setElapsed] = useState(() => startedAt ? secondsSince(startedAt) : null);
-	useEffect(() => {
-		if (!startedAt) {
-			setElapsed(null);
-			return;
-		}
-		setElapsed(secondsSince(startedAt));
-		const id = setInterval(() => setElapsed(secondsSince(startedAt)), 1e3);
-		return () => clearInterval(id);
-	}, [startedAt]);
-	return elapsed;
-}
 /** A status word held for the whole turn and re-rolled when a new one starts. */
 function useTurnWord(startedAt) {
 	const [word, setWord] = useState(randomActivityWord);
@@ -104,27 +70,24 @@ function useTurnWord(startedAt) {
 *  stop it. */
 function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping = false, word, testId }) {
 	const { strings } = useChatConfig();
-	const elapsed = useElapsedSeconds(startedAt);
+	const elapsed = useElapsed(startedAt);
 	const turnWord = useTurnWord(startedAt);
 	const meta = [];
-	if (elapsed !== null) meta.push(formatElapsed(elapsed));
-	if (inputTokens || outputTokens) meta.push(strings.activity.tokens(compactCount(inputTokens ?? 0), compactCount(outputTokens ?? 0)));
+	if (elapsed !== null) meta.push(formatDuration(elapsed));
+	if (inputTokens || outputTokens) meta.push(strings.activity.tokens(formatCount(inputTokens ?? 0), formatCount(outputTokens ?? 0)));
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": testId,
 		className: "flex min-h-8 items-center gap-2 px-1 text-sm",
 		children: [
-			/* @__PURE__ */ jsx(LoaderIcon, {
-				className: "h-3.5 w-3.5 shrink-0 animate-spin text-(--theme-element) motion-reduce:hidden",
-				"aria-hidden": "true"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "hidden shrink-0 leading-none text-(--theme-element) motion-reduce:inline",
-				"aria-hidden": "true",
-				children: "●"
+			/* @__PURE__ */ jsx(Loader, {
+				inline: true,
+				decorative: true,
+				size: 14,
+				color: "var(--theme-accent)"
 			}),
 			/* @__PURE__ */ jsxs("span", {
 				"data-testid": testId ? `${testId}-word` : void 0,
-				className: "min-w-0 truncate text-(--theme-element)",
+				className: "min-w-0 truncate text-(--theme-accent)",
 				children: [word ?? turnWord, "…"]
 			}),
 			meta.length > 0 && /* @__PURE__ */ jsxs("span", {
@@ -142,11 +105,11 @@ function ActivityLine({ startedAt, inputTokens, outputTokens, onStop, stopping =
 				disabled: stopping,
 				"aria-label": strings.input.stopGenerating,
 				title: strings.input.stopGenerating,
-				className: clsx("ml-auto inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs theme-muted-text transition-colors", "hover:theme-hover hover:theme-text disabled:cursor-not-allowed disabled:opacity-50"),
-				children: [/* @__PURE__ */ jsx(FaStop, { className: "h-3 w-3" }), strings.activity.stop]
+				className: cx("ml-auto inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs theme-muted-text transition-colors", "hover:theme-hover hover:theme-text disabled:cursor-not-allowed disabled:opacity-50"),
+				children: [/* @__PURE__ */ jsx(StopIcon, { className: "h-3 w-3" }), strings.activity.stop]
 			})
 		]
 	});
 }
 //#endregion
-export { activityWords, compactCount, ActivityLine as default, formatElapsed };
+export { activityWords, ActivityLine as default };

package/dist/ai/components/agent/AgentMessageParts.js

@@ -1,7 +1,10 @@
-import { FaCheck } from "../../../icons/fa/FaCheck.js";
-import { LuChevronRight } from "../../../icons/lu/LuChevronRight.js";
-import { LoaderIcon } from "../../../components/StatusIcons.js";
-import { useCssIsDark } from "../../../components/useCssIsDark.js";
+import { cx } from "../../../cx.js";
+import { CheckIcon } from "../../../icons.js";
+import { Loader } from "../../../components/Loader.js";
+import { useStrings } from "../../../components/Provider.js";
+import { fieldBox } from "../../../components/fieldBox.js";
+import { Disclosure } from "../../../components/Disclosure.js";
+import { formatDuration } from "../../../format.js";
 import { LogViewer } from "../../../logviewer/LogViewer.js";
 import { agentColorHex, bashExitCode, fullToolArgs, isGroupableTool, rollupSentence, summarizeToolArgs, toolHeaderFor, toolSummary } from "../../agent/toolfmt.js";
 import { computeEditDiff, computeWriteRows, editSummary, isEditDiffTool, parseEditArgs } from "../../agent/diff.js";
@@ -10,8 +13,7 @@ import { thinkingHeading } from "../../agent/transcript.js";
 import { useChatConfig } from "../../core/config.js";
 import Markdown from "../../ui/Markdown.js";
 import { chatProseClasses } from "../../ui/prose.js";
-import { ReasoningBody, ReasoningToggle } from "../Reasoning.js";
-import { clsx } from "clsx";
+import { Reasoning, ReasoningBody } from "../Reasoning.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 //#region src/ai/components/agent/AgentMessageParts.tsx
@@ -44,7 +46,6 @@ function LineSpans({ text, tokens, emphasis }) {
 	return /* @__PURE__ */ jsx(Fragment, { children: out });
 }
 function DiffRows({ rows, lang }) {
-	const isDark = useCssIsDark();
 	const [tokens, setTokens] = useState(null);
 	const lineKey = useMemo(() => rows.map((r) => r.kind === "gap" ? "" : r.text).join("\n"), [rows]);
 	useEffect(() => {
@@ -53,22 +54,18 @@ function DiffRows({ rows, lang }) {
 			return;
 		}
 		let live = true;
-		tokenizeDiffLines(lineKey.split("\n"), lang, isDark).then((t) => {
+		tokenizeDiffLines(lineKey.split("\n"), lang).then((t) => {
 			if (live) setTokens(t);
 		});
 		return () => {
 			live = false;
 		};
-	}, [
-		lang,
-		lineKey,
-		isDark
-	]);
+	}, [lang, lineKey]);
 	const numbered = rows.some((r) => r.oldNo !== void 0 || r.newNo !== void 0);
 	return /* @__PURE__ */ jsx("div", {
 		className: "overflow-x-auto rounded-md border theme-border font-mono text-xs leading-5",
 		children: rows.map((row, i) => /* @__PURE__ */ jsxs("div", {
-			className: clsx("flex whitespace-pre", row.kind === "add" && "bg-green-500/15", row.kind === "del" && "bg-red-500/15", row.kind === "gap" && "theme-muted-text"),
+			className: cx("flex whitespace-pre", row.kind === "add" && "bg-green-500/15", row.kind === "del" && "bg-red-500/15", row.kind === "gap" && "theme-muted-text"),
 			children: [
 				numbered && /* @__PURE__ */ jsx("span", {
 					className: "w-10 shrink-0 select-none text-right pr-2 theme-muted-text",
@@ -95,7 +92,7 @@ function EditDiffBlock({ part }) {
 	const t = strings.agentTranscript;
 	const a = parseEditArgs(part.args);
 	if (!a) return null;
-	const outcome = editSummary(part.name, part.args);
+	const outcome = editSummary(part.name, part.args, strings.tools);
 	const model = part.name === "EditFile" ? computeEditDiff(a.old_string ?? "", a.new_string ?? "", part.startLine) : computeWriteRows(a.content ?? "");
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mt-1.5 space-y-1",
@@ -117,6 +114,7 @@ function EditDiffBlock({ part }) {
 }
 function ResultBody({ part }) {
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.agentTranscript;
 	const [showAll, setShowAll] = useState(false);
 	const result = part.result ?? "";
@@ -158,13 +156,18 @@ function ResultBody({ part }) {
 				type: "button",
 				onClick: () => setShowAll(false),
 				className: "text-xs text-(--theme-link) hover:underline",
-				children: t.showLess
+				children: common.showLess
 			})
 		]
 	});
 }
 function ToolStatusDot({ part }) {
-	if (part.status === "running") return /* @__PURE__ */ jsx(LoaderIcon, { className: "w-3.5 h-3.5 animate-spin theme-muted-text" });
+	if (part.status === "running") return /* @__PURE__ */ jsx(Loader, {
+		inline: true,
+		decorative: true,
+		size: 14,
+		color: "var(--theme-muted-text-color)"
+	});
 	if (part.status === "error") return /* @__PURE__ */ jsx("span", {
 		className: "text-red-500 leading-none",
 		children: "●"
@@ -174,6 +177,8 @@ function ToolStatusDot({ part }) {
 		children: "●"
 	});
 }
+/** A part's toggle row: its status mark and name, across the transcript's width. */
+var rowSummaryClasses = "min-h-6 w-full";
 function ToolCallBlock({ part }) {
 	const { strings } = useChatConfig();
 	const t = strings.agentTranscript;
@@ -181,46 +186,43 @@ function ToolCallBlock({ part }) {
 	const header = toolHeaderFor(part.name);
 	const argSummary = summarizeToolArgs(header.arg, part.args);
 	const isDiff = isEditDiffTool(part.name);
-	const summary = part.status === "running" ? t.running : toolSummary(part.name, part.args, part.result ?? "", part.status === "error", editSummary);
+	const summary = part.status === "running" ? t.running : toolSummary(part.name, part.args, part.result ?? "", part.status === "error", {
+		editSummary,
+		strings: strings.tools
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5 text-sm",
 		"data-testid": "tool-call-part",
 		children: [
-			/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => setExpanded((v) => !v),
-				"aria-expanded": expanded,
-				className: "flex min-h-6 items-start gap-2 w-full text-left group/tool",
-				children: [
-					/* @__PURE__ */ jsx(ToolStatusDot, { part }),
-					/* @__PURE__ */ jsxs("span", {
-						className: "font-mono text-[13px] leading-5 min-w-0 truncate",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "font-semibold",
-							children: header.label
-						}), argSummary && /* @__PURE__ */ jsxs("span", {
-							className: "theme-muted-text",
-							children: [
-								"(",
-								argSummary,
-								")"
-							]
-						})]
-					}),
-					/* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
-				]
-			}),
-			!isDiff && /* @__PURE__ */ jsx("div", {
-				className: clsx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-red-600" : "theme-muted-text"),
-				children: expanded ? null : summary
-			}),
-			expanded && !isDiff && /* @__PURE__ */ jsxs("div", {
-				className: "ml-5 mt-1 space-y-1.5",
+			/* @__PURE__ */ jsxs(Disclosure, {
+				open: expanded,
+				onOpenChange: setExpanded,
+				disabled: isDiff,
+				summaryClassName: rowSummaryClasses,
+				summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ToolStatusDot, { part }), /* @__PURE__ */ jsxs("span", {
+					className: "font-mono text-[13px] leading-5 min-w-0 truncate",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-semibold",
+						children: header.label
+					}), argSummary && /* @__PURE__ */ jsxs("span", {
+						className: "theme-muted-text",
+						children: [
+							"(",
+							argSummary,
+							")"
+						]
+					})]
+				})] }),
+				panelClassName: "ml-5 mt-1 space-y-1.5",
 				children: [fullToolArgs(header.arg, part.args) && /* @__PURE__ */ jsx("pre", {
 					className: "overflow-x-auto rounded-md bg-(--theme-muted-panel-bg) p-2 font-mono text-xs whitespace-pre-wrap",
 					children: fullToolArgs(header.arg, part.args)
 				}), /* @__PURE__ */ jsx(ResultBody, { part })]
 			}),
+			!isDiff && !expanded && /* @__PURE__ */ jsx("div", {
+				className: cx("ml-5 mt-0.5 text-[13px]", part.status === "error" ? "text-(--theme-error)" : "theme-muted-text"),
+				children: summary
+			}),
 			isDiff && /* @__PURE__ */ jsx("div", {
 				className: "ml-5",
 				children: /* @__PURE__ */ jsx(EditDiffBlock, { part })
@@ -244,50 +246,54 @@ function SubagentCard({ part }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5 text-sm",
 		"data-testid": "subagent-part",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => canExpand && setExpanded((v) => !v),
-			"aria-expanded": expanded,
-			className: "flex min-h-6 items-start gap-2 w-full text-left",
-			children: [
-				part.status === "running" ? /* @__PURE__ */ jsx(LoaderIcon, { className: "w-3.5 h-3.5 mt-[3px] animate-spin theme-muted-text" }) : /* @__PURE__ */ jsx("span", {
-					className: clsx("leading-none", part.status === "failed" ? "text-red-500" : "text-green-600"),
-					style: color && part.status !== "failed" ? { color } : void 0,
-					children: "●"
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-mono text-[13px] leading-5 min-w-0 truncate",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-semibold",
-						children: label
-					}), part.description && /* @__PURE__ */ jsxs("span", {
-						className: "theme-muted-text",
-						children: [
-							"(",
-							part.description,
-							")"
-						]
-					})]
-				}),
-				canExpand && /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: clsx("ml-5 mt-0.5 text-[13px]", part.status === "failed" ? "text-red-600" : "theme-muted-text"),
-			children: expanded ? /* @__PURE__ */ jsxs("div", {
-				className: "space-y-1",
-				children: [actions.length > 0 && /* @__PURE__ */ jsxs("ul", {
-					className: "space-y-0.5",
-					children: [actions.map((a, i) => /* @__PURE__ */ jsx("li", { children: a }, i)), part.status !== "running" && /* @__PURE__ */ jsx("li", { children: outcome })]
-				}), part.report && /* @__PURE__ */ jsx("div", {
-					className: "border-l-2 theme-border pl-3 text-sm theme-muted-text",
-					children: /* @__PURE__ */ jsx(Markdown, { children: part.report })
+		children: [/* @__PURE__ */ jsxs(Disclosure, {
+			open: expanded,
+			onOpenChange: setExpanded,
+			disabled: !canExpand,
+			summaryClassName: rowSummaryClasses,
+			summary: /* @__PURE__ */ jsxs(Fragment, { children: [part.status === "running" ? /* @__PURE__ */ jsx("span", {
+				className: "mt-[3px]",
+				children: /* @__PURE__ */ jsx(Loader, {
+					inline: true,
+					decorative: true,
+					size: 14,
+					color: "var(--theme-muted-text-color)"
+				})
+			}) : /* @__PURE__ */ jsx("span", {
+				className: cx("leading-none", part.status === "failed" ? "text-(--theme-error)" : "text-(--theme-success)"),
+				style: color && part.status !== "failed" ? { color } : void 0,
+				children: "●"
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "font-mono text-[13px] leading-5 min-w-0 truncate",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-semibold",
+					children: label
+				}), part.description && /* @__PURE__ */ jsxs("span", {
+					className: "theme-muted-text",
+					children: [
+						"(",
+						part.description,
+						")"
+					]
 				})]
-			}) : outcome
+			})] }),
+			panelClassName: cx("ml-5 mt-0.5 space-y-1 text-[13px]", part.status === "failed" ? "text-(--theme-error)" : "theme-muted-text"),
+			children: [actions.length > 0 && /* @__PURE__ */ jsxs("ul", {
+				className: "space-y-0.5",
+				children: [actions.map((a, i) => /* @__PURE__ */ jsx("li", { children: a }, i)), part.status !== "running" && /* @__PURE__ */ jsx("li", { children: outcome })]
+			}), part.report && /* @__PURE__ */ jsx("div", {
+				className: "border-l-2 theme-border pl-3 text-sm theme-muted-text",
+				children: /* @__PURE__ */ jsx(Markdown, { children: part.report })
+			})]
+		}), !expanded && /* @__PURE__ */ jsx("div", {
+			className: cx("ml-5 mt-0.5 text-[13px]", part.status === "failed" ? "text-(--theme-error)" : "theme-muted-text"),
+			children: outcome
 		})]
 	});
 }
 function ConfirmApproval({ part, onAnswer }) {
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.agentTranscript;
 	const [feedback, setFeedback] = useState(null);
 	const answer = (a) => onAnswer?.(part.id, a);
@@ -318,7 +324,7 @@ function ConfirmApproval({ part, onAnswer }) {
 						kind: "confirm",
 						allowed: true
 					}),
-					className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-element) text-(--theme-element-text)",
+					className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-accent) text-(--theme-accent-text)",
 					children: allowLabel
 				}),
 				part.canAllowDirectory !== false && /* @__PURE__ */ jsx("button", {
@@ -353,7 +359,7 @@ function ConfirmApproval({ part, onAnswer }) {
 				value: feedback,
 				onChange: (e) => setFeedback(e.target.value),
 				placeholder: t.feedbackPlaceholder,
-				className: "flex-1 text-xs rounded-md border theme-border bg-(--theme-input-bg) px-2 py-1"
+				className: cx(fieldBox({ size: "sm" }), "flex-1")
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				disabled: !feedback.trim(),
@@ -362,14 +368,15 @@ function ConfirmApproval({ part, onAnswer }) {
 					allowed: false,
 					denyMessage: feedback.trim()
 				}),
-				className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-element) text-(--theme-element-text) disabled:opacity-50",
-				children: t.send
+				className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-accent) text-(--theme-accent-text) disabled:opacity-50",
+				children: common.send
 			})]
 		})
 	] });
 }
 function AskApproval({ part, onAnswer }) {
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.agentTranscript;
 	const [own, setOwn] = useState(null);
 	const answer = (text) => onAnswer?.(part.id, {
@@ -415,13 +422,13 @@ function AskApproval({ part, onAnswer }) {
 		children: [/* @__PURE__ */ jsx("input", {
 			value: own,
 			onChange: (e) => setOwn(e.target.value),
-			className: "flex-1 text-xs rounded-md border theme-border bg-(--theme-input-bg) px-2 py-1"
+			className: cx(fieldBox({ size: "sm" }), "flex-1")
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
 			disabled: !own.trim(),
 			onClick: () => answer(own.trim()),
-			className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-element) text-(--theme-element-text) disabled:opacity-50",
-			children: t.send
+			className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-accent) text-(--theme-accent-text) disabled:opacity-50",
+			children: common.send
 		})]
 	})] });
 }
@@ -436,11 +443,11 @@ function ApprovalBlock({ part, onApprovalAnswer }) {
 			children: part.question
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsx(FaCheck, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ jsxs("span", { children: [t.answered, part.answer ? `: ${part.answer}` : ""] })]
+			children: [/* @__PURE__ */ jsx(CheckIcon, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ jsxs("span", { children: [t.answered, part.answer ? `: ${part.answer}` : ""] })]
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "my-1.5 rounded-lg border border-(--theme-element) p-3 space-y-2",
+		className: "my-1.5 rounded-lg border border-(--theme-accent) p-3 space-y-2",
 		"data-testid": "approval-part",
 		children: [(part.header || part.toolName) && /* @__PURE__ */ jsx("div", {
 			className: "text-xs font-semibold",
@@ -461,7 +468,7 @@ function PlanApproval({ part }) {
 		className: "text-xs theme-muted-text",
 		children: t.planPending
 	}), part.plan && /* @__PURE__ */ jsx("div", {
-		className: "prose prose-sm max-w-none rounded-md bg-(--theme-muted-panel-bg) p-2 text-(--theme-panel)",
+		className: "prose prose-sm max-w-none rounded-md bg-(--theme-muted-panel-bg) p-2 text-(--theme-app)",
 		children: /* @__PURE__ */ jsx(Markdown, {
 			isStreaming: false,
 			children: part.plan
@@ -480,7 +487,7 @@ function TodoSnapshotBlock({ part }) {
 		}), /* @__PURE__ */ jsx("ul", {
 			className: "space-y-0.5 text-sm",
 			children: part.todos.map((todo) => /* @__PURE__ */ jsxs("li", {
-				className: clsx("flex items-start gap-2", todo.status === "completed" && "line-through theme-muted-text", todo.status === "in_progress" && "font-semibold"),
+				className: cx("flex items-start gap-2", todo.status === "completed" && "line-through theme-muted-text", todo.status === "in_progress" && "font-semibold"),
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "select-none font-mono",
 					children: todo.status === "completed" ? "✔" : todo.status === "in_progress" ? "■" : "□"
@@ -490,43 +497,32 @@ function TodoSnapshotBlock({ part }) {
 	});
 }
 function NoticeBlock({ part }) {
-	const [expanded, setExpanded] = useState(false);
 	if (part.kind === "notice") {
 		if (!part.detail) return /* @__PURE__ */ jsx("div", {
 			className: "my-1.5 whitespace-pre-wrap text-[13px] theme-muted-text",
 			"data-testid": "notice-part",
 			children: part.text
 		});
-		return /* @__PURE__ */ jsxs("div", {
+		return /* @__PURE__ */ jsx("div", {
 			className: "my-1.5",
 			"data-testid": "notice-part",
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				onClick: () => setExpanded((v) => !v),
-				"aria-expanded": expanded,
-				className: "flex items-start gap-1.5 text-left text-[13px] theme-muted-text hover:theme-text",
-				children: [/* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsx(Disclosure, {
+				summary: /* @__PURE__ */ jsx("span", {
 					className: "min-w-0 flex-1 whitespace-pre-wrap",
 					children: part.text
-				}), /* @__PURE__ */ jsx(LuChevronRight, { className: clsx("mt-0.5 h-3.5 w-3.5 shrink-0 transition-transform", expanded && "rotate-90") })]
-			}), expanded && /* @__PURE__ */ jsx("div", {
-				className: "ml-4 mt-1 border-l-2 theme-border pl-3 text-sm theme-muted-text",
+				}),
+				summaryClassName: "w-full text-[13px] theme-muted-text hover:theme-text",
+				panelClassName: "ml-4 mt-1 border-l-2 theme-border pl-3 text-sm theme-muted-text",
 				children: /* @__PURE__ */ jsx(Markdown, { children: part.detail })
-			})]
+			})
 		});
 	}
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx("my-1 text-xs rounded-md px-2.5 py-1.5", part.kind === "error" ? "bg-red-500/10 text-red-700" : "bg-yellow-500/10 text-yellow-700"),
+		className: cx("my-1 text-xs rounded-md px-2.5 py-1.5", part.kind === "error" ? "bg-red-500/10 text-red-700" : "bg-yellow-500/10 text-yellow-700"),
 		"data-testid": `${part.kind}-part`,
 		children: part.text
 	});
 }
-function formatThinkingDuration(ms) {
-	const s = Math.round(ms / 1e3);
-	if (s < 1) return "<1s";
-	if (s < 60) return `${s}s`;
-	return `${Math.floor(s / 60)}m ${s % 60}s`;
-}
 /** The TUI's thought, drawn like a chat reply's: while it streams its label
 *  shimmers over the latest lines, then it folds to the label and opens in
 *  place on request. */
@@ -534,7 +530,7 @@ function ReasoningBlock({ part, isStreaming }) {
 	const { strings } = useChatConfig();
 	const t = strings.thinking;
 	const [expanded, setExpanded] = useState(false);
-	const label = thinkingHeading(part.text) || (part.durationMs ? t.thoughtFor(formatThinkingDuration(part.durationMs)) : t.label);
+	const label = thinkingHeading(part.text) || (part.durationMs ? t.thoughtFor(formatDuration(part.durationMs)) : t.label);
 	const hasBody = part.text.trim() !== "";
 	const markdown = /* @__PURE__ */ jsx(Markdown, {
 		isStreaming: isStreaming ?? false,
@@ -560,22 +556,23 @@ function ReasoningBlock({ part, isStreaming }) {
 		"data-testid": "reasoning-part",
 		children: label
 	});
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5",
 		"data-testid": "reasoning-part",
-		children: [/* @__PURE__ */ jsx(ReasoningToggle, {
+		children: /* @__PURE__ */ jsx(Reasoning, {
+			label,
 			open: expanded,
-			onToggle: () => setExpanded((v) => !v),
-			children: label
-		}), expanded && /* @__PURE__ */ jsx(ReasoningBody, { children: /* @__PURE__ */ jsx("div", {
-			"data-testid": "reasoning-body",
-			children: markdown
-		}) })]
+			onOpenChange: setExpanded,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-testid": "reasoning-body",
+				children: markdown
+			})
+		})
 	});
 }
 function TextBlock({ part, isStreaming }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: clsx(chatProseClasses, "[&:not(:first-child)]:mt-4"),
+		className: cx(chatProseClasses, "[&:not(:first-child)]:mt-4"),
 		children: /* @__PURE__ */ jsx(Markdown, {
 			isStreaming: isStreaming ?? false,
 			children: part.text
@@ -682,35 +679,28 @@ function buildRenderItems(parts) {
 	return items;
 }
 function RollupGroup({ members, message }) {
-	const [expanded, setExpanded] = useState(false);
-	const sentence = rollupSentence(members.flatMap((m) => m.part.kind === "tool_call" ? [m.part.name] : []));
-	return /* @__PURE__ */ jsxs("div", {
+	const { strings } = useChatConfig();
+	const sentence = rollupSentence(members.flatMap((m) => m.part.kind === "tool_call" ? [m.part.name] : []), strings.tools);
+	return /* @__PURE__ */ jsx("div", {
 		className: "py-1.5 text-sm",
 		"data-testid": "tool-rollup",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => setExpanded((v) => !v),
-			"aria-expanded": expanded,
-			className: "flex min-h-6 items-center gap-2 w-full text-left",
-			children: [
-				/* @__PURE__ */ jsx("span", {
-					className: "text-green-600 leading-none",
-					"aria-hidden": "true",
-					children: "●"
-				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "font-mono text-[13px] theme-muted-text min-w-0 truncate",
-					children: sentence
-				}),
-				/* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3.5 h-3.5 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
-			]
-		}), /* @__PURE__ */ jsx("div", {
-			className: clsx("ml-1.5 mt-0.5 rounded-md", expanded ? "bg-(--theme-muted-panel-bg)/40 px-2" : "hidden"),
+		children: /* @__PURE__ */ jsx(Disclosure, {
+			keepMounted: true,
+			summaryClassName: rowSummaryClasses,
+			summary: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-success) leading-none",
+				"aria-hidden": "true",
+				children: "●"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "font-mono text-[13px] theme-muted-text min-w-0 truncate",
+				children: sentence
+			})] }),
+			panelClassName: "ml-1.5 mt-0.5 rounded-md bg-(--theme-muted-panel-bg)/40 px-2",
 			children: members.map((m) => /* @__PURE__ */ jsx(PartDispatch, {
 				part: m.part,
 				message
 			}, m.index))
-		})]
+		})
 	});
 }
 function AgentMessageParts({ message, isStreaming, onApprovalAnswer }) {