@parallelworks/ui 0.44.0 → 0.46.0

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 }) {

package/dist/ai/components/conversationActions.js

@@ -1,7 +1,6 @@
-import { BiSolidTrashAlt } from "../../icons/bi/BiSolidTrashAlt.js";
-import { FaCloudDownloadAlt } from "../../icons/fa/FaCloudDownloadAlt.js";
-import { FaEdit } from "../../icons/fa/FaEdit.js";
-import { PiShareBold } from "../../icons/pi/PiShareBold.js";
+import { DownloadIcon, RenameIcon, ShareIcon, TrashIcon } from "../../icons.js";
+import { toast } from "../../components/Toast.js";
+import { useStrings } from "../../components/Provider.js";
 import { useContextMenu } from "../../components/ContextMenu.js";
 import { useChatConfig } from "../core/config.js";
 import { useChat } from "../core/ChatProvider.js";
@@ -37,19 +36,20 @@ function groupConversationsByDate(conversations) {
 *  conversations. Render `overlays` once beside the list. */
 function useConversationActions() {
 	const { strings } = useChatConfig();
+	const { common } = useStrings();
 	const t = strings.sidebar;
-	const { adapter, notify, deleteConversation, updateConversationTitle } = useChat();
+	const { adapter, deleteConversation, updateConversationTitle } = useChat();
 	const { openMenu, contextMenu } = useContextMenu();
 	const [sharing, setSharing] = useState(null);
 	const { requestDelete, requestRename, dialogs } = useRowDialogs({
 		strings: {
 			deleteTitle: t.deleteTitle,
 			deleteBody: () => t.deleteBody,
-			deleteAction: t.deleteAction,
+			deleteAction: common.delete,
 			renameTitle: t.renameTitle,
 			renameLabel: t.renameLabel,
 			renamePlaceholder: t.renamePlaceholder,
-			renameAction: t.renameAction
+			renameAction: common.rename
 		},
 		nameOf: (conv) => conv.title || t.untitled,
 		onDelete: (conv) => deleteConversation(conv.id),
@@ -60,28 +60,28 @@ function useConversationActions() {
 			const conversation = await adapter.conversations.get(id);
 			downloadText(exportFilename(conversation.title), conversationToMarkdown(conversation));
 		} catch {
-			notify.error(strings.chrome.exportError);
+			toast.error(strings.chrome.exportError);
 		}
 	};
 	const menuItems = (conv) => [
 		{
-			label: t.rename,
-			icon: /* @__PURE__ */ jsx(FaEdit, {}),
+			label: common.rename,
+			icon: /* @__PURE__ */ jsx(RenameIcon, {}),
 			onClick: () => requestRename(conv)
 		},
 		...adapter.sharing && conv.isOwner !== false ? [{
-			label: t.share,
-			icon: /* @__PURE__ */ jsx(PiShareBold, {}),
+			label: common.share,
+			icon: /* @__PURE__ */ jsx(ShareIcon, {}),
 			onClick: () => setSharing(conv.id)
 		}] : [],
 		{
-			label: strings.chrome.download,
-			icon: /* @__PURE__ */ jsx(FaCloudDownloadAlt, {}),
+			label: common.download,
+			icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
 			onClick: () => void download(conv.id)
 		},
 		{
-			label: t.delete,
-			icon: /* @__PURE__ */ jsx(BiSolidTrashAlt, {}),
+			label: common.delete,
+			icon: /* @__PURE__ */ jsx(TrashIcon, {}),
 			destructive: true,
 			onClick: () => requestDelete(conv)
 		}

package/dist/ai/core/ChatProvider.d.ts

@@ -1,13 +1,12 @@
 import { type ReactNode } from 'react';
 import type { ChatAdapter } from '../adapter/types.js';
-import type { AttachmentMeta, ChatModel, ChatNavigation, ChatNotify, ChatUser, Conversation, ConversationSummary, ChatMessage as Message, MessagePart, ProviderInfo, ProviderIssue, UnreachableSession } from '../types.js';
+import type { AttachmentMeta, ChatModel, ChatNavigation, ChatUser, Conversation, ConversationSummary, ChatMessage as Message, MessagePart, ProviderInfo, ProviderIssue, UnreachableSession } from '../types.js';
 import { type ChatUIConfig } from './config.js';
 import { type SidebarPresentation, type SidebarState } from './sidebarState.js';
 interface ChatContextValue {
     adapter: ChatAdapter;
     currentUser: ChatUser;
     navigation: ChatNavigation;
-    notify: ChatNotify;
     activeConversationId: string | null;
     conversations: ConversationSummary[];
     currentConversation: Conversation | null;
@@ -63,7 +62,6 @@ export interface ChatProviderProps {
     adapter: ChatAdapter;
     currentUser: ChatUser;
     navigation: ChatNavigation;
-    notify: ChatNotify;
     activeConversationId?: string | null;
     config?: ChatUIConfig;
     /** Owns the sidebar's state. Omit to leave it to the reader, remembered
@@ -76,5 +74,5 @@ export interface ChatProviderProps {
     onDrawerOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function ChatProvider({ adapter, currentUser, navigation, notify, activeConversationId, config, sidebar: sidebarProp, onSidebarChange, drawerOpen: drawerOpenProp, onDrawerOpenChange, children, }: ChatProviderProps): import("react").JSX.Element;
+export declare function ChatProvider({ adapter, currentUser, navigation, activeConversationId, config, sidebar: sidebarProp, onSidebarChange, drawerOpen: drawerOpenProp, onDrawerOpenChange, children, }: ChatProviderProps): import("react").JSX.Element;
 export {};