@parallelworks/ui 0.18.0 → 0.19.1

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

@@ -0,0 +1,721 @@
+import { CheckIcon, ChevronRightIcon, LoaderIcon } from "../../../icons.js";
+import { useCssIsDark } from "../../../components/useCssIsDark.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";
+import { languageForPath, tokenizeDiffLines } from "../../agent/diffHighlight.js";
+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 cx from "classnames";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ai/components/agent/AgentMessageParts.tsx
+var COLLAPSED_RESULT_LINES = 12;
+function LineSpans({ text, tokens, emphasis }) {
+	const pieces = tokens ?? [{ content: text }];
+	if (!emphasis || emphasis.length === 0) return /* @__PURE__ */ jsx(Fragment$1, { children: pieces.map((t, i) => /* @__PURE__ */ jsx("span", {
+		style: t.color ? { color: t.color } : void 0,
+		children: t.content
+	}, i)) });
+	const inEmphasis = (pos) => emphasis.some(([a, b]) => pos >= a && pos < b);
+	const out = [];
+	let offset = 0;
+	let key = 0;
+	for (const t of pieces) {
+		let start = 0;
+		while (start < t.content.length) {
+			const emphasized = inEmphasis(offset + start);
+			let end = start + 1;
+			while (end < t.content.length && inEmphasis(offset + end) === emphasized) end++;
+			out.push(/* @__PURE__ */ jsx("span", {
+				className: emphasized ? "bg-green-500/30 rounded-[2px]" : void 0,
+				style: t.color ? { color: t.color } : void 0,
+				children: t.content.slice(start, end)
+			}, key++));
+			start = end;
+		}
+		offset += t.content.length;
+	}
+	return /* @__PURE__ */ jsx(Fragment$1, { 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(() => {
+		if (!lang) {
+			setTokens(null);
+			return;
+		}
+		let live = true;
+		tokenizeDiffLines(lineKey.split("\n"), lang, isDark).then((t) => {
+			if (live) setTokens(t);
+		});
+		return () => {
+			live = false;
+		};
+	}, [
+		lang,
+		lineKey,
+		isDark
+	]);
+	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: 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",
+					children: row.kind === "gap" ? "⋯" : row.newNo ?? row.oldNo ?? ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "w-4 shrink-0 select-none text-center",
+					children: row.kind === "add" ? "+" : row.kind === "del" ? "-" : " "
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "pr-3",
+					children: row.kind === "gap" ? "" : /* @__PURE__ */ jsx(LineSpans, {
+						text: row.text,
+						tokens: tokens?.[i],
+						emphasis: row.kind === "add" ? row.emphasis : void 0
+					})
+				})
+			]
+		}, i))
+	});
+}
+function EditDiffBlock({ part }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	const a = parseEditArgs(part.args);
+	if (!a) return null;
+	const outcome = editSummary(part.name, part.args);
+	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",
+		children: [
+			outcome && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: outcome
+			}),
+			/* @__PURE__ */ jsx(DiffRows, {
+				rows: model.rows,
+				lang: languageForPath(a.path)
+			}),
+			model.truncated && /* @__PURE__ */ jsx("div", {
+				className: "text-xs theme-muted-text",
+				children: t.diffTruncated
+			})
+		]
+	});
+}
+function ResultBody({ part }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	const [showAll, setShowAll] = useState(false);
+	const result = part.result ?? "";
+	if (result.trim() === "") return /* @__PURE__ */ jsx("div", {
+		className: "text-xs theme-muted-text",
+		children: t.noOutput
+	});
+	if (part.name === "Bash") {
+		const [out] = bashExitCode(result.replace(/\n+$/, ""));
+		return /* @__PURE__ */ jsx("div", {
+			className: "rounded-md overflow-hidden border theme-border",
+			children: /* @__PURE__ */ jsx(LogViewer, {
+				log: out || result,
+				width: "100%",
+				height: "unset",
+				inline: true,
+				lineNumbers: false,
+				hideExpand: true
+			})
+		});
+	}
+	const lines = result.replace(/\n+$/, "").split("\n");
+	const shown = showAll ? lines : lines.slice(0, COLLAPSED_RESULT_LINES);
+	const hidden = lines.length - shown.length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [
+			/* @__PURE__ */ jsx("pre", {
+				className: "overflow-x-auto rounded-md border theme-border p-2 font-mono text-xs leading-5 whitespace-pre",
+				children: shown.join("\n")
+			}),
+			hidden > 0 && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setShowAll(true),
+				className: "text-xs text-(--theme-link) hover:underline",
+				children: t.moreLines.replace("{count}", String(hidden))
+			}),
+			showAll && lines.length > COLLAPSED_RESULT_LINES && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setShowAll(false),
+				className: "text-xs text-(--theme-link) hover:underline",
+				children: t.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 === "error") return /* @__PURE__ */ jsx("span", {
+		className: "text-red-500 leading-none",
+		children: "●"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-green-600 leading-none",
+		children: "●"
+	});
+}
+function ToolCallBlock({ part }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	const [expanded, setExpanded] = useState(false);
+	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);
+	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(ChevronRightIcon, { className: cx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
+				]
+			}),
+			!isDiff && /* @__PURE__ */ jsx("div", {
+				className: cx("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",
+				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 && /* @__PURE__ */ jsx("div", {
+				className: "ml-5",
+				children: /* @__PURE__ */ jsx(EditDiffBlock, { part })
+			})
+		]
+	});
+}
+/** Drawn the way the TUI draws a delegated Task: a tool-shaped header
+*  `Task(description)`, and under it the latest action while running or
+*  `Done (summary)` once finished. Expanding shows the whole activity feed. */
+function SubagentCard({ part }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	const [expanded, setExpanded] = useState(false);
+	const color = agentColorHex(part.color);
+	const label = part.agentType && part.agentType !== "default" ? part.agentType : t.subagent;
+	const actions = part.actions ?? [];
+	const latest = actions[actions.length - 1];
+	const canExpand = actions.length > 0 || !!part.report;
+	const outcome = part.status === "running" ? latest || t.running : `${part.status === "done" ? t.done : t.failed}${part.summary ? ` (${part.summary})` : ""}`;
+	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: cx("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(ChevronRightIcon, { className: cx("w-3.5 h-3.5 mt-1 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("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 })
+				})]
+			}) : outcome
+		})]
+	});
+}
+function ConfirmApproval({ part, onAnswer }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	const [feedback, setFeedback] = useState(null);
+	const answer = (a) => onAnswer?.(part.id, a);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		part.command && /* @__PURE__ */ jsx("pre", {
+			className: "overflow-x-auto rounded-md bg-(--theme-muted-panel-bg) p-2 font-mono text-xs whitespace-pre-wrap",
+			children: part.command
+		}),
+		part.reason && /* @__PURE__ */ jsx("div", {
+			className: "text-xs theme-muted-text",
+			children: part.reason
+		}),
+		!onAnswer ? /* @__PURE__ */ jsx("div", {
+			className: "text-xs theme-muted-text",
+			children: t.approvalPending
+		}) : feedback === null ? /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-2",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => answer({
+						kind: "confirm",
+						allowed: true
+					}),
+					className: "px-3 py-1 text-xs font-medium rounded-full bg-(--theme-element) text-(--theme-element-text)",
+					children: t.allowOnce
+				}),
+				part.canAllowDirectory !== false && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => answer({
+						kind: "confirm",
+						allowed: true,
+						allowDir: true
+					}),
+					className: "px-3 py-1 text-xs font-medium rounded-full border theme-border hover:theme-hover",
+					children: t.allowDirectory
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => answer({
+						kind: "confirm",
+						allowed: false
+					}),
+					className: "px-3 py-1 text-xs font-medium rounded-full border theme-border hover:theme-hover text-red-600",
+					children: t.deny
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => setFeedback(""),
+					className: "px-3 py-1 text-xs font-medium rounded-full border theme-border hover:theme-hover",
+					children: t.denyWithFeedback
+				})
+			]
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				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"
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: !feedback.trim(),
+				onClick: () => answer({
+					kind: "confirm",
+					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
+			})]
+		})
+	] });
+}
+function AskApproval({ part, onAnswer }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	const [own, setOwn] = useState(null);
+	const answer = (text) => onAnswer?.(part.id, {
+		kind: "ask",
+		text
+	});
+	if (!onAnswer) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		part.question && /* @__PURE__ */ jsx("div", {
+			className: "text-sm",
+			children: part.question
+		}),
+		(part.options ?? []).length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "text-xs theme-muted-text",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "font-medium",
+				children: [t.approvalOptions, ": "]
+			}), (part.options ?? []).map((o) => o.label).join(" · ")]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "text-xs theme-muted-text",
+			children: t.approvalPending
+		})
+	] });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [part.question && /* @__PURE__ */ jsx("div", {
+		className: "text-sm",
+		children: part.question
+	}), own === null ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-start gap-1.5",
+		children: [(part.options ?? []).map((o) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => answer(o.label),
+			className: "px-3 py-1 text-xs font-medium rounded-full border theme-border hover:theme-hover text-left",
+			title: o.description,
+			children: o.label
+		}, o.label)), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setOwn(""),
+			className: "px-3 py-1 text-xs rounded-full theme-muted-text hover:theme-hover",
+			children: t.writeOwnAnswer
+		})]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-2",
+		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"
+		}), /* @__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
+		})]
+	})] });
+}
+function ApprovalBlock({ part, onApprovalAnswer }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	if (part.resolved) return /* @__PURE__ */ jsxs("div", {
+		className: "my-1.5 rounded-lg border theme-border p-2.5 text-xs theme-muted-text space-y-1",
+		"data-testid": "approval-part",
+		children: [part.question && /* @__PURE__ */ jsx("div", {
+			className: "theme-text",
+			children: part.question
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			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",
+		"data-testid": "approval-part",
+		children: [(part.header || part.toolName) && /* @__PURE__ */ jsx("div", {
+			className: "text-xs font-semibold",
+			children: part.header ?? part.toolName
+		}), part.approvalKind === "confirm" ? /* @__PURE__ */ jsx(ConfirmApproval, {
+			part,
+			onAnswer: onApprovalAnswer
+		}) : part.approvalKind === "plan" ? /* @__PURE__ */ jsx(PlanApproval, { part }) : /* @__PURE__ */ jsx(AskApproval, {
+			part,
+			onAnswer: onApprovalAnswer
+		})]
+	});
+}
+function PlanApproval({ part }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		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)",
+		children: /* @__PURE__ */ jsx(Markdown, {
+			isStreaming: false,
+			children: part.plan
+		})
+	})] });
+}
+function TodoSnapshotBlock({ part }) {
+	const { strings } = useChatConfig();
+	const t = strings.agentTranscript;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "my-1.5 rounded-lg border theme-border p-2.5",
+		"data-testid": "todo-part",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs font-semibold theme-muted-text mb-1",
+			children: t.tasks
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "space-y-0.5 text-sm",
+			children: part.todos.map((todo) => /* @__PURE__ */ jsxs("li", {
+				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" ? "■" : "□"
+				}), /* @__PURE__ */ jsx("span", { children: todo.status === "in_progress" && todo.activeForm ? todo.activeForm : todo.content })]
+			}, todo.content))
+		})]
+	});
+}
+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", {
+			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", {
+					className: "min-w-0 flex-1 whitespace-pre-wrap",
+					children: part.text
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("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",
+				children: /* @__PURE__ */ jsx(Markdown, { children: part.detail })
+			})]
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		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: the body shows while it streams, then folds to its
+*  label and opens on request. The composer's activity line carries the
+*  live signal, so nothing here animates. */
+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 hasBody = part.text.trim() !== "";
+	const body = hasBody && /* @__PURE__ */ jsx("div", {
+		className: "ml-1 border-l theme-border pl-3 text-sm theme-muted-text",
+		"data-testid": "reasoning-body",
+		children: /* @__PURE__ */ jsx(Markdown, {
+			isStreaming: isStreaming ?? false,
+			children: part.text
+		})
+	});
+	if (isStreaming) return /* @__PURE__ */ jsx("div", {
+		className: "py-1.5",
+		"data-testid": "reasoning-part",
+		children: body
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "py-1.5",
+		"data-testid": "reasoning-part",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => hasBody && setExpanded((v) => !v),
+			"aria-expanded": expanded,
+			className: cx("flex min-h-6 items-center gap-x-1 text-sm theme-muted-text transition-colors", hasBody && "hover:theme-text"),
+			children: [/* @__PURE__ */ jsx("span", { children: label }), hasBody && /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-3.5 h-3.5 transition-transform", expanded && "rotate-90") })]
+		}), expanded && /* @__PURE__ */ jsx("div", {
+			className: "mt-1.5",
+			children: body
+		})]
+	});
+}
+function TextBlock({ part, isStreaming }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(chatProseClasses, "[&:not(:first-child)]:mt-4"),
+		children: /* @__PURE__ */ jsx(Markdown, {
+			isStreaming: isStreaming ?? false,
+			children: part.text
+		})
+	});
+}
+function PartDispatch(props) {
+	const { slots } = useChatConfig();
+	const Override = slots.partRenderers?.[props.part.kind];
+	if (Override) return /* @__PURE__ */ jsx(Override, { ...props });
+	const { part } = props;
+	switch (part.kind) {
+		case "text": return /* @__PURE__ */ jsx(TextBlock, {
+			part,
+			isStreaming: props.isStreaming ?? false
+		});
+		case "reasoning": return /* @__PURE__ */ jsx(ReasoningBlock, {
+			part,
+			isStreaming: props.isStreaming ?? false
+		});
+		case "tool_call": return /* @__PURE__ */ jsx(ToolCallBlock, { part });
+		case "subagent": return /* @__PURE__ */ jsx(SubagentCard, { part });
+		case "approval": return /* @__PURE__ */ jsx(ApprovalBlock, {
+			part,
+			onApprovalAnswer: props.onApprovalAnswer
+		});
+		case "notice":
+		case "warning":
+		case "error": return /* @__PURE__ */ jsx(NoticeBlock, { part });
+		case "todo_snapshot": return /* @__PURE__ */ jsx(TodoSnapshotBlock, { part });
+		default: return null;
+	}
+}
+function isReasoning(m) {
+	return m.part.kind === "reasoning";
+}
+/** Two thoughts with nothing visible between them read as one, not as a
+*  stack of identical lines. */
+function mergeReasoning(parts) {
+	const durationMs = parts.reduce((sum, p) => sum + (p.durationMs ?? 0), 0);
+	return {
+		kind: "reasoning",
+		text: parts.map((p) => p.text).join("\n\n"),
+		...durationMs > 0 ? { durationMs } : {}
+	};
+}
+function buildRenderItems(parts) {
+	const items = [];
+	let run = [];
+	const emitThoughts = (members) => {
+		if (members.length > 0) items.push({
+			kind: "reasoning",
+			parts: members.map((m) => m.part),
+			index: members[0]?.index ?? 0
+		});
+	};
+	const emitLoose = (members) => {
+		let thoughts = [];
+		for (const m of members) {
+			if (isReasoning(m)) {
+				thoughts.push(m);
+				continue;
+			}
+			emitThoughts(thoughts);
+			thoughts = [];
+			items.push({
+				kind: "single",
+				part: m.part,
+				index: m.index
+			});
+		}
+		emitThoughts(thoughts);
+	};
+	const flush = () => {
+		let start = 0;
+		while (start < run.length && isReasoning(run[start])) start++;
+		let end = run.length;
+		while (end > start && isReasoning(run[end - 1])) end--;
+		emitThoughts(run.slice(0, start));
+		const core = run.slice(start, end);
+		if (core.filter((m) => !isReasoning(m)).length >= 2) items.push({
+			kind: "rollup",
+			members: core
+		});
+		else emitLoose(core);
+		emitThoughts(run.slice(end));
+		run = [];
+	};
+	parts.forEach((part, index) => {
+		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && isGroupableTool(part.name)) {
+			run.push({
+				part,
+				index
+			});
+			return;
+		}
+		flush();
+		items.push({
+			kind: "single",
+			part,
+			index
+		});
+	});
+	flush();
+	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", {
+		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(ChevronRightIcon, { className: cx("w-3.5 h-3.5 shrink-0 theme-muted-text transition-transform", expanded && "rotate-90") })
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("ml-1.5 mt-0.5 rounded-md", expanded ? "bg-(--theme-muted-panel-bg)/40 px-2" : "hidden"),
+			children: members.map((m) => /* @__PURE__ */ jsx(PartDispatch, {
+				part: m.part,
+				message
+			}, m.index))
+		})]
+	});
+}
+function AgentMessageParts({ message, isStreaming, onApprovalAnswer }) {
+	const parts = message.parts ?? [];
+	const items = useMemo(() => buildRenderItems(parts), [parts]);
+	const lastIndex = parts.length - 1;
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		"data-testid": "agent-parts",
+		children: items.map((item) => item.kind === "rollup" ? /* @__PURE__ */ jsx(RollupGroup, {
+			members: item.members,
+			message
+		}, item.members[0]?.index ?? 0) : item.kind === "reasoning" ? /* @__PURE__ */ jsx(ReasoningBlock, {
+			part: mergeReasoning(item.parts),
+			isStreaming: (isStreaming ?? false) && item.index + item.parts.length - 1 === lastIndex
+		}, item.index) : /* @__PURE__ */ jsx(PartDispatch, {
+			part: item.part,
+			message,
+			isStreaming: (isStreaming ?? false) && item.index === lastIndex,
+			...onApprovalAnswer ? { onApprovalAnswer } : {}
+		}, item.index))
+	});
+}
+//#endregion
+export { ApprovalBlock, NoticeBlock, ReasoningBlock, SubagentCard, TodoSnapshotBlock, ToolCallBlock, buildRenderItems, AgentMessageParts as default, mergeReasoning };