@norman-else/dsh-claude 0.1.35 → 0.1.37

package/lib/client.js

@@ -30,6 +30,10 @@ window.__ModuleLoader__.load({
 		function isClaudeRenderMode(value) {
 			return value === "plugin" || value === "native";
 		}
+		const DEFAULT_CLAUDE_PROSE_MODE = "plain";
+		function isClaudeProseMode(value) {
+			return value === "plain" || value === "enhanced";
+		}
 		//#endregion
 		//#region src/client/task-projection.ts
 		/** Tasks UI is reserved for detached work and genuine Claude subagents. */
@@ -270,6 +274,62 @@ window.__ModuleLoader__.load({
 			}
 			return failed ? `Failed to ${failedAction}` : completed;
 		}
+		/** The call id a task's own lifecycle pings were dispatched from. */
+		function taskParentToolUseId(activities, taskId) {
+			for (const activity of activities) {
+				if (activity.taskId !== taskId) continue;
+				const id = inputRecord(activity.detail)?.tool_use_id;
+				if (typeof id === "string" && id.length > 0) return id;
+			}
+		}
+		/**
+		* The tools one task ran, in the shape the transcript's tool cards take.
+		*
+		* The task's own activities are lifecycle pings whose detail is the raw
+		* protocol message -- useful to nobody reading a panel. The work is in the
+		* activities addressed to the call that dispatched the task: a subagent's
+		* nested calls carry it as `parentToolUseId`, and a backgrounded command IS
+		* that call. Both are folded here the way {@link transcriptItemsForStep} folds
+		* a step, so one card renderer serves the transcript and the task panel.
+		*/
+		function taskTools(activities, taskId) {
+			const parent = taskParentToolUseId(activities, taskId);
+			if (parent === void 0) return [];
+			const tools = /* @__PURE__ */ new Map();
+			const ordered = [...activities].sort((left, right) => left.ordinal - right.ordinal);
+			for (const activity of ordered) {
+				const own = activity.parentToolUseId === parent;
+				const isRoot = activity.parentToolUseId === void 0 && activity.toolUseId === parent;
+				if (!own && !isRoot) continue;
+				const toolUseId = activity.toolUseId;
+				if (toolUseId === void 0) continue;
+				const previous = tools.get(toolUseId);
+				if (previous === void 0) {
+					if (activity.toolName === void 0) continue;
+					const input = inputRecord(activity.detail);
+					tools.set(toolUseId, {
+						toolUseId,
+						toolName: activity.toolName,
+						description: toolDescription(activity.toolName, input),
+						...activity.summary === void 0 ? {} : { summary: activity.summary },
+						...activity.detail === void 0 ? {} : { input: activity.detail },
+						...activity.phase === void 0 ? {} : { phase: activity.phase },
+						...activity.isError === void 0 ? {} : { isError: activity.isError },
+						subcalls: []
+					});
+					continue;
+				}
+				const failed = activity.isError === true || activity.phase === "failed";
+				tools.set(toolUseId, {
+					...previous,
+					description: toolDescription(previous.toolName, inputRecord(previous.input), failed),
+					...activity.detail === void 0 ? {} : { output: activity.detail },
+					...activity.phase === void 0 ? {} : { phase: activity.phase },
+					...activity.isError === void 0 ? {} : { isError: activity.isError }
+				});
+			}
+			return [...tools.values()];
+		}
 		/** Whether the Host drew this step with DSH's own renderer.
 		*
 		*  The stamp rides on the records themselves rather than on a Client-side copy
@@ -342,6 +402,15 @@ window.__ModuleLoader__.load({
 					});
 					continue;
 				}
+				if (activity.kind === "usage" && activity.usage !== void 0) {
+					flushGroup();
+					items.push({
+						kind: "usage",
+						ordinal: activity.ordinal,
+						usage: activity.usage
+					});
+					continue;
+				}
 				if (activity.kind === "tool-call" && activity.toolUseId !== void 0 && activity.toolName !== void 0) {
 					group ??= {
 						ordinal: activity.ordinal,
@@ -1106,6 +1175,14 @@ window.__ModuleLoader__.load({
 			cursor: "pointer"
 		};
 		const taskActivitySection = { margin: "7px 0 0 27px" };
+		/** The task's tool cards. No inset panel of their own: each card already
+		*  carries its own surface, and nesting two would read as a box in a box. */
+		const taskToolList = {
+			display: "flex",
+			flexDirection: "column",
+			gap: 2,
+			marginTop: 7
+		};
 		const taskActivityList = {
 			display: "flex",
 			flexDirection: "column",
@@ -3352,626 +3429,265 @@ window.__ModuleLoader__.load({
 			lineHeight: "20px"
 		};
 		//#endregion
-		//#region src/client/token-format.ts
-		function formatTokenCount(tokens) {
-			if (tokens >= 1e6) return `${Number((tokens / 1e6).toFixed(tokens >= 1e7 ? 0 : 1))}M`;
-			if (tokens >= 1e3) return `${Number((tokens / 1e3).toFixed(tokens >= 1e5 ? 0 : 1))}K`;
-			return String(tokens);
-		}
-		//#endregion
-		//#region src/client/ClaudeTasksPanel.tsx
-		const STATUS_LABEL = {
-			running: "tasksRunning",
-			completed: "tasksCompleted",
-			failed: "tasksFailed",
-			stopped: "tasksStopped",
-			killed: "tasksKilled"
+		//#region src/client/markdown-theme.ts
+		/** Claude Code's code presentation over the Host's Markdown renderer.
+		*
+		*  This package renders no Markdown of its own — prose, fenced blocks and the
+		*  copy affordance all come from the Host's `MarkdownText` primitive. What it
+		*  can own is what that primitive reads: the palette (custom properties) and
+		*  the block's chrome (CSS over the primitive's own markup).
+		*
+		*  PARITY IS PARTIAL BY CONSTRUCTION. Both renderers highlight with shiki, but
+		*  Claude Code's desktop build loads a full TextMate theme (Pierre Dark /
+		*  Pierre Light Soft: 248 tokenColor rules over 424 scopes) and bakes the
+		*  resolved colour into every span, while the Host loads shiki's legacy
+		*  `css-variables` theme, which collapses every scope into the eleven buckets
+		*  below. Those eleven carry the colours that dominate a code block —
+		*  keywords, strings, comments, functions, numbers — and nothing here can
+		*  recover the rest: `constant.numeric` and `constant` are two different
+		*  colours in Pierre and one bucket here, and Pierre's string-coloured string
+		*  delimiters share this sheet's single punctuation bucket. Matching the rest
+		*  means this package running its own shiki, which is a different decision
+		*  with a different cost.
+		*
+		*  Every rule fails open the way `host-chrome` does: the palette is
+		*  declarations on this package's own wrapper, and the chrome rules match the
+		*  primitive's CSS Module local names, so a Host that renames either simply
+		*  stops matching and its stock presentation comes back.
+		*/
+		/** Wrapper class carrying the palette and scoping the chrome rules.
+		*  `display:contents` so the extra element generates no box — custom
+		*  properties inherit through it regardless. */
+		const CLAUDE_MARKDOWN_SCOPE = "dsh-claude-markdown";
+		/** Pierre mapped onto the Host's eleven buckets. Each entry names the theme
+		*  scope the value was taken from, because the mapping — not the colour — is
+		*  the part a reader has to check. */
+		const PIERRE_DARK = [
+			[
+				"--shiki-background",
+				"#1a1a19",
+				"UI surface (--cds-surface-2)"
+			],
+			[
+				"--shiki-foreground",
+				"#fafafa",
+				"editor.foreground"
+			],
+			[
+				"--shiki-token-comment",
+				"#737373",
+				"comment"
+			],
+			[
+				"--shiki-token-keyword",
+				"#ff678d",
+				"keyword, storage.type"
+			],
+			[
+				"--shiki-token-string",
+				"#5ecc71",
+				"string"
+			],
+			[
+				"--shiki-token-string-expression",
+				"#ffa359",
+				"punctuation.section.embedded"
+			],
+			[
+				"--shiki-token-function",
+				"#9d6afb",
+				"entity.name.function"
+			],
+			[
+				"--shiki-token-constant",
+				"#68cdf2",
+				"constant.numeric, constant.language"
+			],
+			[
+				"--shiki-token-parameter",
+				"#a3a3a3",
+				"variable.parameter"
+			],
+			[
+				"--shiki-token-punctuation",
+				"#636363",
+				"punctuation"
+			],
+			[
+				"--shiki-token-link",
+				"#ff678d",
+				"markup.underline.link.markdown"
+			]
+		];
+		const PIERRE_LIGHT = [
+			[
+				"--shiki-background",
+				"#ffffff",
+				"UI surface (--cds-surface-2)"
+			],
+			[
+				"--shiki-foreground",
+				"#525252",
+				"editor.foreground"
+			],
+			[
+				"--shiki-token-comment",
+				"#8a8a8a",
+				"comment"
+			],
+			[
+				"--shiki-token-keyword",
+				"#ff678d",
+				"keyword, storage.type"
+			],
+			[
+				"--shiki-token-string",
+				"#0dbe4e",
+				"string"
+			],
+			[
+				"--shiki-token-string-expression",
+				"#fe8c2c",
+				"punctuation.section.embedded"
+			],
+			[
+				"--shiki-token-function",
+				"#9d6afb",
+				"entity.name.function"
+			],
+			[
+				"--shiki-token-constant",
+				"#08c0ef",
+				"constant.numeric, constant.language"
+			],
+			[
+				"--shiki-token-parameter",
+				"#737373",
+				"variable.parameter"
+			],
+			[
+				"--shiki-token-punctuation",
+				"#737373",
+				"punctuation"
+			],
+			[
+				"--shiki-token-link",
+				"#ff678d",
+				"markup.underline.link.markdown"
+			]
+		];
+		/** Claude's brand clay (`--cds-hsl-clay`), its inline-code TEXT colour; the
+		*  emphasized ramp is the light-theme variant. The chip's fill is deliberately
+		*  NOT tinted with it — see {@link INLINE_FILL_DARK}. */
+		const CLAY = "#d97757";
+		const CLAY_EMPHASIZED = "#c8603f";
+		/** Prose colours for the body of a Claude answer.
+		*
+		*  These are NOT Pierre: the palette above exists to match Claude's desktop
+		*  build inside code blocks, and Claude paints prose in plain body text. This
+		*  block is a deliberate departure — headings, emphasis and links get their
+		*  own hues so a long answer is scannable, the way a Markdown-highlighting
+		*  editor shows it. Values are theme-independent by design (the same six read
+		*  acceptably on both surfaces); split them if the light theme ever needs its
+		*  own ramp.
+		*
+		*  The inline-code entry REPLACES {@link CLAY} rather than sitting beside it:
+		*  two colours on the same chip is not a choice a stylesheet can make. */
+		const PROSE = {
+			heading: "#7C9EFF",
+			bold: "#FFB454",
+			italic: "#5BD6C0",
+			inlineCode: "#FF7A93",
+			listMarker: "#F2C94C",
+			quote: "#9AA3B2",
+			link: "#4DA3FF",
+			codeBackground: "#0F1218",
+			codeBorder: "#2E3546"
 		};
-		function visibleTaskGroups(tasks, dismissedSettledIds) {
-			const projected = tasks.filter(isProjectedTask);
-			return {
-				running: projected.filter((task) => task.status === "running"),
-				finished: projected.filter((task) => task.status !== "running" && !dismissedSettledIds.has(task.taskId))
-			};
+		/** The inline-code chip fill: a neutral 4% wash (Claude's `--t1`), not a tint
+		*  of the text colour. A clay-tinted fill reads as a coloured box around every
+		*  identifier; the neutral one disappears into the surface and lets the text
+		*  carry the accent, which is what the chip is for. */
+		const INLINE_FILL_DARK = "hsl(0 0% 100% / .04)";
+		const INLINE_FILL_LIGHT = "hsl(0 0% 4.3% / .04)";
+		/** Block corner radius (Claude's `--r6`), against the Host's own 12px. */
+		const BLOCK_RADIUS = "8px";
+		/** @param banner - equal to `surface` on purpose: the bar is floated out of
+		*  the way below, so this colour is only reached if those chrome selectors
+		*  miss, and a bar that matches the block is the neutral fallback. */
+		function palette(entries, surface, banner, inlineFill) {
+			return [
+				...entries.map(([name, value]) => `${name}:${value};`),
+				`--dsw-alias-markdown-code-block:${surface};`,
+				`--dsw-alias-markdown-code-block-banner:${banner};`,
+				`--dsw-alias-markdown-inline-code:${inlineFill}`
+			].join("");
 		}
-		function activitiesForTask(activities, taskId) {
-			return activities.filter((activity) => activity.taskId === taskId);
+		const CLAUDE_MARKDOWN_THEME_CSS = [
+			`.${CLAUDE_MARKDOWN_SCOPE}{display:contents;`,
+			palette(PIERRE_LIGHT, "#ffffff", "#ffffff", INLINE_FILL_LIGHT),
+			"}",
+			`body[data-ds-dark-theme] .${CLAUDE_MARKDOWN_SCOPE}{`,
+			palette(PIERRE_DARK, "#1a1a19", "#1a1a19", INLINE_FILL_DARK),
+			"}",
+			`.${CLAUDE_MARKDOWN_SCOPE} :not(pre)>code{color:${CLAY_EMPHASIZED};border-radius:4px;padding:1px 2px;font-size:1.05em!important}`,
+			`body[data-ds-dark-theme] .${CLAUDE_MARKDOWN_SCOPE} :not(pre)>code{color:${CLAY}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} [class*="bannerWrap"]{position:absolute;top:0;right:0;z-index:7;background:transparent;border-radius:0}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} [class*="banner"]:not([class*="bannerWrap"]){background:transparent;padding:6px 8px}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} [class*="infostring"]{display:none}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} pre{white-space:pre;word-break:normal;overflow-x:auto}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} [class*="block"]{--dsl-code-block-border-radius:${BLOCK_RADIUS}}`
+		].join("");
+		/** The class the review-comment card puts on a rendered comment body. Declared
+		*  here rather than imported because it is a literal inside `styles.ts`'s CSS
+		*  string, not a constant; a rename there makes these rules miss and the
+		*  comment keeps its stock colours, which is the same fail-open the chrome
+		*  rules above rely on. */
+		const COMMENT_BODY_SCOPE = "dshClaudeDiffCommentBody";
+		/** Everything the `prose: 'enhanced'` setting adds, and nothing the base sheet
+		*  needs. Appended AFTER the base sheet so its rules win ties on source order —
+		*  see the note on the inline-code selector below. */
+		const CLAUDE_MARKDOWN_ENHANCED_CSS = [
+			`.${CLAUDE_MARKDOWN_SCOPE} :is(h1,h2,h3,h4,h5,h6){color:${PROSE.heading}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} strong{color:${PROSE.bold}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} em{color:${PROSE.italic}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} li::marker{color:${PROSE.listMarker}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} blockquote{border-left-color:${PROSE.quote};color:${PROSE.quote}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} a{color:${PROSE.link}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} :not(pre)>code,body[data-ds-dark-theme] .${CLAUDE_MARKDOWN_SCOPE} :not(pre)>code{color:${PROSE.inlineCode}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} [class*="block"]{background:${PROSE.codeBackground};box-shadow:0 0 0 1px ${PROSE.codeBorder}}`,
+			`.${CLAUDE_MARKDOWN_SCOPE} pre{background:${PROSE.codeBackground}}`,
+			`.${COMMENT_BODY_SCOPE} :is(h1,h2,h3,h4,h5,h6){color:${PROSE.heading}}`,
+			`.${COMMENT_BODY_SCOPE} strong{color:${PROSE.bold}}`,
+			`.${COMMENT_BODY_SCOPE} em{color:${PROSE.italic}}`,
+			`.${COMMENT_BODY_SCOPE} li::marker{color:${PROSE.listMarker}}`,
+			`.${COMMENT_BODY_SCOPE} blockquote{border-left-color:${PROSE.quote};color:${PROSE.quote}}`,
+			`.${COMMENT_BODY_SCOPE} a{color:${PROSE.link}}`,
+			`.${COMMENT_BODY_SCOPE} :not(pre)>code{color:${PROSE.inlineCode}}`
+		].join("");
+		/** Live reference to this package's sheet, and the mode it currently holds.
+		*  The mode is remembered so `ensureClaudeMarkdownTheme` — called on every
+		*  Markdown render — cannot undo a choice boot or the settings panel made. */
+		let styleTag = null;
+		let mode = DEFAULT_CLAUDE_PROSE_MODE;
+		function write() {
+			if (typeof document === "undefined") return;
+			if (styleTag === null || styleTag.parentNode === null) {
+				styleTag = document.createElement("style");
+				styleTag.dataset.dshClaudeMarkdownTheme = "";
+				document.head.appendChild(styleTag);
+			}
+			styleTag.textContent = mode === "enhanced" ? CLAUDE_MARKDOWN_THEME_CSS + CLAUDE_MARKDOWN_ENHANCED_CSS : CLAUDE_MARKDOWN_THEME_CSS;
 		}
-		function tasksForTurn(tasks, turn) {
-			return tasks.filter((task) => task.originTurn === turn && isProjectedTask(task));
+		/** Attach the sheet, keeping whatever mode is already set. Idempotent. */
+		function ensureClaudeMarkdownTheme() {
+			write();
 		}
-		function summarizeTurnTasks(tasks) {
-			if (tasks.length === 0) return void 0;
-			const running = tasks.filter((task) => task.status === "running").length;
-			const failed = tasks.filter((task) => task.status === "failed" || task.status === "stopped" || task.status === "killed").length;
-			const completed = tasks.filter((task) => task.status === "completed").length;
-			return {
-				state: running > 0 ? "running" : failed > 0 ? "failed" : "completed",
-				count: tasks.length,
-				running,
-				failed,
-				completed
-			};
-		}
-		function statusGlyph(status) {
-			if (status === "running") return "●";
-			if (status === "completed") return "✓";
-			if (status === "stopped") return "–";
-			return "×";
-		}
-		function formatDuration(ms) {
-			if (ms < 1e3) return String(Math.max(1, Math.round(ms))) + "ms";
-			const seconds = Math.round(ms / 1e3);
-			if (seconds < 60) return String(seconds) + "s";
-			const minutes = Math.floor(seconds / 60);
-			return String(minutes) + "m " + String(seconds % 60) + "s";
-		}
-		function taskMeta(task, t) {
-			const parts = [];
-			if (task.subagentType !== void 0) parts.push(task.subagentType);
-			else if (task.taskType !== void 0) parts.push(task.taskType);
-			if (task.usage?.durationMs !== void 0) parts.push(formatDuration(task.usage.durationMs));
-			if (task.usage?.totalTokens !== void 0) parts.push(t("tokens", { count: formatTokenCount(task.usage.totalTokens) }));
-			if (task.usage?.toolUses !== void 0) parts.push(t("tasksToolUses", { count: task.usage.toolUses }));
-			if (task.lastToolName !== void 0) parts.push(t("tasksLastTool", { tool: task.lastToolName }));
-			return parts;
-		}
-		function TaskActivity({ activity, t }) {
-			return /* @__PURE__ */ jsxs("li", {
-				style: taskActivityItem,
-				children: [/* @__PURE__ */ jsx("span", {
-					style: taskActivityGlyph,
-					"aria-hidden": "true",
-					children: activity.isError === true ? "×" : "›"
-				}), /* @__PURE__ */ jsxs("div", {
-					style: taskActivityBody,
-					children: [
-						/* @__PURE__ */ jsx("p", {
-							style: taskActivityTitle,
-							children: activity.title ?? activity.kind
-						}),
-						activity.summary === void 0 ? null : /* @__PURE__ */ jsx("p", {
-							style: taskActivitySummary,
-							children: activity.summary
-						}),
-						activity.detail === void 0 ? null : /* @__PURE__ */ jsxs("details", {
-							style: taskActivityDetail,
-							children: [/* @__PURE__ */ jsx("summary", {
-								style: taskActivityDetailSummary,
-								children: t("detail")
-							}), /* @__PURE__ */ jsx("pre", {
-								style: detailCode,
-								children: activity.detail
-							})]
-						})
-					]
-				})]
-			});
-		}
-		function TaskCard(props) {
-			const { task, activities, t } = props;
-			const [activityOpen, setActivityOpen] = useState(false);
-			const running = task.status === "running";
-			const failed = task.status === "failed" || task.status === "killed";
-			const meta = taskMeta(task, t);
-			return /* @__PURE__ */ jsxs("article", {
-				style: {
-					...taskCard,
-					...running ? taskCardRunning : {}
-				},
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						style: taskCardTop,
-						children: [/* @__PURE__ */ jsx("span", {
-							className: running ? "dsh-claude-act-running" : void 0,
-							style: {
-								...taskCardGlyph,
-								...running ? iconChipRunning : {},
-								...failed ? iconChipError : {}
-							},
-							"aria-hidden": "true",
-							children: statusGlyph(task.status)
-						}), /* @__PURE__ */ jsxs("div", {
-							style: taskCardBody,
-							children: [/* @__PURE__ */ jsx("p", {
-								style: {
-									...taskTitle,
-									...failed ? { color: "var(--dsw-alias-state-error-primary)" } : {}
-								},
-								children: task.description
-							}), /* @__PURE__ */ jsxs("p", {
-								style: taskStatusLine,
-								children: [/* @__PURE__ */ jsx("span", { children: t(STATUS_LABEL[task.status] ?? "tasksRunning") }), task.backgrounded === true ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-									"aria-hidden": "true",
-									children: " · "
-								}), /* @__PURE__ */ jsx("span", { children: t("tasksBackground") })] }) : null]
-							})]
-						})]
-					}),
-					meta.length === 0 ? null : /* @__PURE__ */ jsx("p", {
-						style: taskMeta$1,
-						children: meta.join(" · ")
-					}),
-					task.summary === void 0 || running ? null : /* @__PURE__ */ jsx("p", {
-						style: taskSummary,
-						children: task.summary
-					}),
-					activities.length === 0 ? null : /* @__PURE__ */ jsxs("div", {
-						style: taskActivitySection,
-						children: [/* @__PURE__ */ jsx("button", {
-							type: "button",
-							style: taskTextButton,
-							"aria-expanded": activityOpen,
-							onClick: () => setActivityOpen((value) => !value),
-							children: activityOpen ? t("tasksHideActivity") : t("tasksViewActivity")
-						}), activityOpen ? /* @__PURE__ */ jsx("ul", {
-							style: taskActivityList,
-							children: activities.map((activity) => /* @__PURE__ */ jsx(TaskActivity, {
-								activity,
-								t
-							}, `${activity.turn}:${activity.step}:${activity.ordinal}`))
-						}) : null]
-					})
-				]
-			});
-		}
-		function GroupHeading(props) {
-			const { label, count, collapsed, onToggle, action } = props;
-			const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
-				style: tasksGroupCount,
-				children: count
-			})] });
-			return /* @__PURE__ */ jsxs("div", {
-				style: tasksGroupHeading,
-				children: [onToggle === void 0 ? /* @__PURE__ */ jsx("div", {
-					style: tasksGroupTitle,
-					children: content
-				}) : /* @__PURE__ */ jsxs("button", {
-					type: "button",
-					style: tasksGroupToggle,
-					"aria-expanded": !collapsed,
-					onClick: onToggle,
-					children: [/* @__PURE__ */ jsx("span", {
-						style: {
-							...chevron,
-							...collapsed === true ? {} : chevronOpen
-						},
-						children: "›"
-					}), content]
-				}), action === void 0 ? null : /* @__PURE__ */ jsx("button", {
-					type: "button",
-					style: taskTextButton,
-					onClick: action.onClick,
-					children: action.label
-				})]
-			});
-		}
-		function ClaudeTasksPanel({ useClaudeProjection, t, closeDetails, turn }) {
-			const projection = useClaudeProjection((value) => value);
-			const tasks = useMemo(() => tasksForTurn(projection.tasks?.tasks ?? [], turn), [projection.tasks, turn]);
-			useEffect(() => {
-				if (!projection.owned || tasks.length === 0) closeDetails();
-			}, [
-				closeDetails,
-				projection.owned,
-				tasks.length
-			]);
-			const [finishedCollapsed, setFinishedCollapsed] = useState(false);
-			const [dismissedSettledIds, setDismissedSettledIds] = useState(() => /* @__PURE__ */ new Set());
-			const groups = useMemo(() => visibleTaskGroups(tasks, dismissedSettledIds), [tasks, dismissedSettledIds]);
-			const taskActivities = useMemo(() => new Map(tasks.map((task) => [task.taskId, activitiesForTask(projection.activities, task.taskId)])), [projection.activities, tasks]);
-			const clearFinished = () => setDismissedSettledIds((previous) => /* @__PURE__ */ new Set([...previous, ...tasks.filter((task) => task.status !== "running").map((task) => task.taskId)]));
-			if (!projection.owned) return null;
-			return /* @__PURE__ */ jsxs("div", {
-				className: detailsCardClass,
-				style: tasksPanel,
-				children: [
-					/* @__PURE__ */ jsxs("style", {
-						"data-dsh-claude-panel-icon-styles": true,
-						children: [detailsCardCss, panelIconButtonCss]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						style: tasksHeader,
-						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
-							style: tasksHeading,
-							children: t("tasksPanelTurn")
-						}), /* @__PURE__ */ jsx("span", {
-							style: tasksTurnMeta,
-							children: t("tasksTurnNumber", { turn })
-						})] }), /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: panelIconButtonClass,
-							"aria-label": t("tasksClose"),
-							onClick: closeDetails,
-							children: /* @__PURE__ */ jsx(IconCloseOutline16, {})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						style: tasksBody,
-						children: [/* @__PURE__ */ jsxs("section", {
-							"aria-label": t("tasksRunning"),
-							children: [/* @__PURE__ */ jsx(GroupHeading, {
-								label: t("tasksRunning"),
-								count: groups.running.length
-							}), groups.running.length === 0 ? /* @__PURE__ */ jsx("p", {
-								style: tasksGroupEmpty,
-								children: t("tasksNoneRunning")
-							}) : /* @__PURE__ */ jsx("div", {
-								style: taskCardList,
-								children: groups.running.map((task) => /* @__PURE__ */ jsx(TaskCard, {
-									task,
-									activities: taskActivities.get(task.taskId) ?? [],
-									t
-								}, task.taskId))
-							})]
-						}), /* @__PURE__ */ jsxs("section", {
-							"aria-label": t("tasksSettled"),
-							style: tasksFinishedSection,
-							children: [/* @__PURE__ */ jsx(GroupHeading, {
-								label: t("tasksSettled"),
-								count: groups.finished.length,
-								collapsed: finishedCollapsed,
-								onToggle: () => setFinishedCollapsed((value) => !value),
-								...groups.finished.length === 0 ? {} : { action: {
-									label: t("tasksClear"),
-									onClick: clearFinished
-								} }
-							}), finishedCollapsed || groups.finished.length === 0 ? null : /* @__PURE__ */ jsx("div", {
-								style: taskCardList,
-								children: groups.finished.map((task) => /* @__PURE__ */ jsx(TaskCard, {
-									task,
-									activities: taskActivities.get(task.taskId) ?? [],
-									t
-								}, task.taskId))
-							})]
-						})]
-					})
-				]
-			});
-		}
-		//#endregion
-		//#region src/client/ClaudeActivityTail.tsx
-		const MAX_HOVER_TASKS = 6;
-		function taskGlyph(status) {
-			if (status === "failed") return {
-				glyph: "×",
-				style: tasksHoverGlyphError
-			};
-			if (status === "completed") return {
-				glyph: "✓",
-				style: tasksHoverGlyphDone
-			};
-			return {
-				glyph: "●",
-				style: tasksHoverGlyphRunning
-			};
-		}
-		function ClaudeTaskLauncher({ turn, tasks, t, openTasks }) {
-			const [hovered, setHovered] = useState(false);
-			const closeTimer = useRef();
-			const turnTasks = useMemo(() => tasksForTurn(tasks, turn), [tasks, turn]);
-			const summary = useMemo(() => summarizeTurnTasks(turnTasks), [turnTasks]);
-			const open = () => {
-				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
-				closeTimer.current = void 0;
-				setHovered(true);
-			};
-			const scheduleClose = () => {
-				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
-				closeTimer.current = setTimeout(() => {
-					closeTimer.current = void 0;
-					setHovered(false);
-				}, 350);
-			};
-			useEffect(() => () => {
-				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
-			}, []);
-			if (summary === void 0) return null;
-			const label = summary.state === "running" ? t("tasksTurnRunning", { count: summary.running }) : summary.state === "failed" ? t("tasksTurnFailed", {
-				failed: summary.failed,
-				completed: summary.completed
-			}) : t("tasksTurnCompleted", { count: summary.completed });
-			const stateStyle = summary.state === "completed" ? tasksBadgeDone : {};
-			const dotStyle = summary.state === "failed" ? tasksBadgeDotError : summary.state === "completed" ? tasksBadgeDotDone : {};
-			return /* @__PURE__ */ jsx("div", {
-				"data-claude-task-launcher": turn,
-				style: tasksBadgeWrap,
-				children: /* @__PURE__ */ jsxs("span", {
-					style: tasksBadgeSeat,
-					onMouseEnter: open,
-					onMouseLeave: scheduleClose,
-					onFocus: open,
-					onBlur: (event) => {
-						if (!event.currentTarget.contains(event.relatedTarget)) scheduleClose();
-					},
-					children: [hovered ? /* @__PURE__ */ jsxs("span", {
-						role: "tooltip",
-						style: tasksHoverCard,
-						onMouseEnter: open,
-						onMouseLeave: scheduleClose,
-						children: [
-							/* @__PURE__ */ jsx("span", {
-								style: tasksHoverHeader,
-								children: label
-							}),
-							turnTasks.slice(0, MAX_HOVER_TASKS).map((task) => {
-								const { glyph, style } = taskGlyph(task.status);
-								return /* @__PURE__ */ jsxs("span", {
-									style: tasksHoverRow,
-									children: [
-										/* @__PURE__ */ jsx("span", {
-											className: task.status === "running" ? "dsh-claude-act-running" : void 0,
-											style: {
-												...tasksHoverGlyph,
-												...style
-											},
-											"aria-hidden": "true",
-											children: glyph
-										}),
-										/* @__PURE__ */ jsx("span", {
-											style: tasksHoverDesc,
-											title: task.description,
-											children: task.description
-										}),
-										task.subagentType === void 0 ? null : /* @__PURE__ */ jsx("span", {
-											style: tasksHoverType,
-											children: task.subagentType
-										})
-									]
-								}, task.taskId);
-							}),
-							turnTasks.length > MAX_HOVER_TASKS ? /* @__PURE__ */ jsxs("span", {
-								style: tasksHoverMore,
-								children: ["+", turnTasks.length - MAX_HOVER_TASKS]
-							}) : null,
-							/* @__PURE__ */ jsx("span", {
-								style: tasksHoverHint,
-								children: t("tasksOpen")
-							})
-						]
-					}) : null, /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						className: "dsh-claude-task-launcher",
-						style: {
-							...tasksTurnBadge,
-							...stateStyle,
-							...hovered ? tasksBadgeHovered : {}
-						},
-						"aria-label": `${label} — ${t("tasksOpen")}`,
-						onClick: () => openTasks(turn),
-						children: [/* @__PURE__ */ jsx("span", {
-							className: summary.state === "running" ? "dsh-claude-act-running" : void 0,
-							style: {
-								...tasksBadgeDot,
-								...dotStyle
-							},
-							"aria-hidden": "true"
-						}), /* @__PURE__ */ jsx("span", {
-							style: tasksBadgeLabel,
-							children: label
-						})]
-					})]
-				})
-			});
-		}
-		function ClaudeActivityTail({ matched, useClaudeProjection, t, openTasks }) {
-			const tasks = useClaudeProjection((value) => value.tasks?.tasks ?? []);
-			return /* @__PURE__ */ jsx(ClaudeTaskLauncher, {
-				turn: matched.turn,
-				tasks,
-				t,
-				openTasks
-			});
-		}
-		//#endregion
-		//#region src/client/ClaudeActiveTasksNode.tsx
-		const EMPTY_TASKS$1 = [];
-		/** Render the task launcher while the owning DSH turn is still open. */
-		function ClaudeActiveTasksNode({ node, useClaudeProjection, t, openTasks }) {
-			const tasks = useClaudeProjection((value) => value.tasks?.tasks ?? EMPTY_TASKS$1);
-			return /* @__PURE__ */ jsx(ClaudeTaskLauncher, {
-				turn: node.data.turn,
-				tasks,
-				t,
-				openTasks
-			});
-		}
-		//#endregion
-		//#region src/client/markdown-theme.ts
-		/** Claude Code's code presentation over the Host's Markdown renderer.
-		*
-		*  This package renders no Markdown of its own — prose, fenced blocks and the
-		*  copy affordance all come from the Host's `MarkdownText` primitive. What it
-		*  can own is what that primitive reads: the palette (custom properties) and
-		*  the block's chrome (CSS over the primitive's own markup).
-		*
-		*  PARITY IS PARTIAL BY CONSTRUCTION. Both renderers highlight with shiki, but
-		*  Claude Code's desktop build loads a full TextMate theme (Pierre Dark /
-		*  Pierre Light Soft: 248 tokenColor rules over 424 scopes) and bakes the
-		*  resolved colour into every span, while the Host loads shiki's legacy
-		*  `css-variables` theme, which collapses every scope into the eleven buckets
-		*  below. Those eleven carry the colours that dominate a code block —
-		*  keywords, strings, comments, functions, numbers — and nothing here can
-		*  recover the rest: `constant.numeric` and `constant` are two different
-		*  colours in Pierre and one bucket here, and Pierre's string-coloured string
-		*  delimiters share this sheet's single punctuation bucket. Matching the rest
-		*  means this package running its own shiki, which is a different decision
-		*  with a different cost.
-		*
-		*  Every rule fails open the way `host-chrome` does: the palette is
-		*  declarations on this package's own wrapper, and the chrome rules match the
-		*  primitive's CSS Module local names, so a Host that renames either simply
-		*  stops matching and its stock presentation comes back.
-		*/
-		/** Wrapper class carrying the palette and scoping the chrome rules.
-		*  `display:contents` so the extra element generates no box — custom
-		*  properties inherit through it regardless. */
-		const CLAUDE_MARKDOWN_SCOPE = "dsh-claude-markdown";
-		/** Pierre mapped onto the Host's eleven buckets. Each entry names the theme
-		*  scope the value was taken from, because the mapping — not the colour — is
-		*  the part a reader has to check. */
-		const PIERRE_DARK = [
-			[
-				"--shiki-background",
-				"#1a1a19",
-				"UI surface (--cds-surface-2)"
-			],
-			[
-				"--shiki-foreground",
-				"#fafafa",
-				"editor.foreground"
-			],
-			[
-				"--shiki-token-comment",
-				"#737373",
-				"comment"
-			],
-			[
-				"--shiki-token-keyword",
-				"#ff678d",
-				"keyword, storage.type"
-			],
-			[
-				"--shiki-token-string",
-				"#5ecc71",
-				"string"
-			],
-			[
-				"--shiki-token-string-expression",
-				"#ffa359",
-				"punctuation.section.embedded"
-			],
-			[
-				"--shiki-token-function",
-				"#9d6afb",
-				"entity.name.function"
-			],
-			[
-				"--shiki-token-constant",
-				"#68cdf2",
-				"constant.numeric, constant.language"
-			],
-			[
-				"--shiki-token-parameter",
-				"#a3a3a3",
-				"variable.parameter"
-			],
-			[
-				"--shiki-token-punctuation",
-				"#636363",
-				"punctuation"
-			],
-			[
-				"--shiki-token-link",
-				"#ff678d",
-				"markup.underline.link.markdown"
-			]
-		];
-		const PIERRE_LIGHT = [
-			[
-				"--shiki-background",
-				"#ffffff",
-				"UI surface (--cds-surface-2)"
-			],
-			[
-				"--shiki-foreground",
-				"#525252",
-				"editor.foreground"
-			],
-			[
-				"--shiki-token-comment",
-				"#8a8a8a",
-				"comment"
-			],
-			[
-				"--shiki-token-keyword",
-				"#ff678d",
-				"keyword, storage.type"
-			],
-			[
-				"--shiki-token-string",
-				"#0dbe4e",
-				"string"
-			],
-			[
-				"--shiki-token-string-expression",
-				"#fe8c2c",
-				"punctuation.section.embedded"
-			],
-			[
-				"--shiki-token-function",
-				"#9d6afb",
-				"entity.name.function"
-			],
-			[
-				"--shiki-token-constant",
-				"#08c0ef",
-				"constant.numeric, constant.language"
-			],
-			[
-				"--shiki-token-parameter",
-				"#737373",
-				"variable.parameter"
-			],
-			[
-				"--shiki-token-punctuation",
-				"#737373",
-				"punctuation"
-			],
-			[
-				"--shiki-token-link",
-				"#ff678d",
-				"markup.underline.link.markdown"
-			]
-		];
-		/** Claude's brand clay (`--cds-hsl-clay`), its inline-code TEXT colour; the
-		*  emphasized ramp is the light-theme variant. The chip's fill is deliberately
-		*  NOT tinted with it — see {@link INLINE_FILL_DARK}. */
-		const CLAY = "#d97757";
-		const CLAY_EMPHASIZED = "#c8603f";
-		/** The inline-code chip fill: a neutral 4% wash (Claude's `--t1`), not a tint
-		*  of the text colour. A clay-tinted fill reads as a coloured box around every
-		*  identifier; the neutral one disappears into the surface and lets the text
-		*  carry the accent, which is what the chip is for. */
-		const INLINE_FILL_DARK = "hsl(0 0% 100% / .04)";
-		const INLINE_FILL_LIGHT = "hsl(0 0% 4.3% / .04)";
-		/** Block corner radius (Claude's `--r6`), against the Host's own 12px. */
-		const BLOCK_RADIUS = "8px";
-		/** @param banner - equal to `surface` on purpose: the bar is floated out of
-		*  the way below, so this colour is only reached if those chrome selectors
-		*  miss, and a bar that matches the block is the neutral fallback. */
-		function palette(entries, surface, banner, inlineFill) {
-			return [
-				...entries.map(([name, value]) => `${name}:${value};`),
-				`--dsw-alias-markdown-code-block:${surface};`,
-				`--dsw-alias-markdown-code-block-banner:${banner};`,
-				`--dsw-alias-markdown-inline-code:${inlineFill}`
-			].join("");
-		}
-		const CLAUDE_MARKDOWN_THEME_CSS = [
-			`.${CLAUDE_MARKDOWN_SCOPE}{display:contents;`,
-			palette(PIERRE_LIGHT, "#ffffff", "#ffffff", INLINE_FILL_LIGHT),
-			"}",
-			`body[data-ds-dark-theme] .${CLAUDE_MARKDOWN_SCOPE}{`,
-			palette(PIERRE_DARK, "#1a1a19", "#1a1a19", INLINE_FILL_DARK),
-			"}",
-			`.${CLAUDE_MARKDOWN_SCOPE} :not(pre)>code{color:${CLAY_EMPHASIZED};border-radius:4px;padding:1px 2px}`,
-			`body[data-ds-dark-theme] .${CLAUDE_MARKDOWN_SCOPE} :not(pre)>code{color:${CLAY}}`,
-			`.${CLAUDE_MARKDOWN_SCOPE} [class*="bannerWrap"]{position:absolute;top:0;right:0;z-index:7;background:transparent;border-radius:0}`,
-			`.${CLAUDE_MARKDOWN_SCOPE} [class*="banner"]:not([class*="bannerWrap"]){background:transparent;padding:6px 8px}`,
-			`.${CLAUDE_MARKDOWN_SCOPE} [class*="infostring"]{display:none}`,
-			`.${CLAUDE_MARKDOWN_SCOPE} pre{white-space:pre;word-break:normal;overflow-x:auto}`,
-			`.${CLAUDE_MARKDOWN_SCOPE} [class*="block"]{--dsl-code-block-border-radius:${BLOCK_RADIUS}}`
-		].join("");
-		let injected = false;
-		/** Attach the sheet once per page. */
-		function ensureClaudeMarkdownTheme() {
-			if (injected || typeof document === "undefined") return;
-			injected = true;
-			const element = document.createElement("style");
-			element.dataset.dshClaudeMarkdownTheme = "";
-			element.textContent = CLAUDE_MARKDOWN_THEME_CSS;
-			document.head.appendChild(element);
+		/** Switch the prose palette. Rewriting one global sheet repaints every mounted
+		*  Markdown block at once, so no render state has to carry the setting. */
+		function applyClaudeMarkdownTheme(next) {
+			mode = next;
+			write();
 		}
 		//#endregion
 		//#region src/client/markdown-labels.tsx
@@ -4848,13 +4564,21 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
+		//#region src/client/token-format.ts
+		function formatTokenCount(tokens) {
+			if (tokens >= 1e6) return `${Number((tokens / 1e6).toFixed(tokens >= 1e7 ? 0 : 1))}M`;
+			if (tokens >= 1e3) return `${Number((tokens / 1e3).toFixed(tokens >= 1e5 ? 0 : 1))}K`;
+			return String(tokens);
+		}
+		//#endregion
 		//#region src/client/ClaudeActivityNode.tsx
-		const EMPTY_TASKS = [];
+		const EMPTY_TASKS$1 = [];
 		const ACTIVITY_CSS = [
 			".dsh-claude-flow{display:flex;flex-direction:column;gap:10px}",
 			".dsh-claude-transcript-text{color:var(--dsw-alias-label-primary);font-size:15px;line-height:24px;overflow-wrap:anywhere}",
 			".dsh-claude-tool-group-native{overflow:visible}",
 			".dsh-claude-tool-group-native>.dsh-claude-flow-row{padding:0}",
+			".dsh-claude-flow-row .dsh-claude-tool-stats{margin-left:8px}",
 			".dsh-claude-tool-list{max-height:min(420px,calc(100vh - 320px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-top:4px;border:1px solid var(--dsw-alias-border-l1, color-mix(in srgb, currentColor 12%, transparent));border-radius:10px;scrollbar-gutter:stable}",
 			".dsh-claude-tool-item{border-top:1px solid var(--dsw-alias-border-l1, color-mix(in srgb, currentColor 12%, transparent))}",
 			".dsh-claude-tool-item:first-child{border-top:0}",
@@ -4882,6 +4606,13 @@ window.__ModuleLoader__.load({
 			".dsh-claude-diff-delete{color:var(--dsw-alias-state-error-primary)}",
 			".dsh-claude-tool-name{font-size:14px;line-height:22px;color:var(--dsw-alias-label-primary)}",
 			".dsh-claude-tool-summary{margin-left:8px;color:var(--dsw-alias-label-tertiary)}",
+			".dsh-claude-turn-usage{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px;",
+			"color:var(--dsw-alias-label-tertiary);font-size:12px;line-height:18px}",
+			".dsh-claude-turn-usage-label{color:var(--dsw-alias-label-caption)}",
+			".dsh-claude-tool-terminal{display:flex;gap:8px;margin:6px 0 0;padding:8px 10px;max-height:220px;overflow:auto;",
+			"border-radius:8px;background:var(--dsw-alias-markdown-code-block);font:var(--dsw-font-markdown-code-block-small)}",
+			".dsh-claude-tool-prompt{flex:none;user-select:none;color:var(--dsw-alias-label-caption)}",
+			".dsh-claude-tool-command{min-width:0;margin:0;color:var(--dsw-alias-label-primary);white-space:pre-wrap;overflow-wrap:anywhere}",
 			".dsh-claude-tool-detail{margin:6px 0 0;padding:8px 10px;max-height:220px;overflow:auto;border-radius:8px;background:var(--dsw-alias-markdown-code-block);font:var(--dsw-font-markdown-code-block-small);white-space:pre-wrap;overflow-wrap:anywhere}",
 			".dsh-claude-flow-row{position:relative;overflow:hidden}",
 			".dsh-claude-flow-leading{flex-shrink:0}",
@@ -5057,6 +4788,21 @@ window.__ModuleLoader__.load({
 				}, index))
 			});
 		}
+		/** The command as a shell prompt rather than a labelled field: it was typed
+		*  at one, and the prompt is what tells a reader that at a glance. */
+		function Terminal({ command }) {
+			return /* @__PURE__ */ jsxs("div", {
+				className: "dsh-claude-tool-terminal",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "dsh-claude-tool-prompt",
+					"aria-hidden": "true",
+					children: "$"
+				}), /* @__PURE__ */ jsx("pre", {
+					className: "dsh-claude-tool-command",
+					children: command
+				})]
+			});
+		}
 		function TextDetail({ title, value }) {
 			if (value === void 0 || value.length === 0) return null;
 			return /* @__PURE__ */ jsx(Section, {
@@ -5071,13 +4817,36 @@ window.__ModuleLoader__.load({
 			if (!Array.isArray(value)) return [];
 			return value.filter((item) => typeof item === "string");
 		}
+		/** The diff card's chrome, which primitives 0.1.2 moved onto the caller.
+		*
+		*  The card reads `labels.copy` while it builds, so omitting them throws
+		*  mid-render -- and React answers by tearing down the whole conversation, not
+		*  the one tool row.
+		*
+		*  The aria strings deliberately repeat the visible ones: both already say
+		*  exactly what the control does. */
+		function diffBlockLabels(t) {
+			const expand = (hidden) => t("diffCardExpand", { count: hidden });
+			return {
+				copy: t("markdownCopy"),
+				copied: t("markdownCopied"),
+				collapse: t("diffCardCollapse"),
+				collapseAria: t("diffCardCollapse"),
+				expand,
+				expandAria: expand,
+				files: (count) => t("diffCardFiles", { count })
+			};
+		}
 		function ToolPresentation({ tool, t }) {
 			const inputValue = parsedValue(tool.input);
 			const outputValue = parsedValue(tool.output);
 			const input = record$6(inputValue);
 			const output = record$6(outputValue);
 			const outputTitle = tool.isError === true ? t("toolError") : t("toolOutput");
-			if (tool.diffs !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DiffBlock, { diffs: [...tool.diffs] }), /* @__PURE__ */ jsx(TextDetail, {
+			if (tool.diffs !== void 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(DiffBlock, {
+				diffs: [...tool.diffs],
+				labels: diffBlockLabels(t)
+			}), /* @__PURE__ */ jsx(TextDetail, {
 				title: outputTitle,
 				value: typeof outputValue === "string" ? outputValue : void 0
 			})] });
@@ -5101,180 +4870,660 @@ window.__ModuleLoader__.load({
 							omit: ["file_path"]
 						})
 					}),
-					content === void 0 ? null : /* @__PURE__ */ jsx(Section, {
-						title: outputTitle,
-						children: /* @__PURE__ */ jsx(Source, {
-							content,
-							start: offset
-						})
-					})
-				] });
-			}
-			if (tool.toolName === "Grep" || tool.toolName === "Glob") {
-				const filenames = filenameList(output?.filenames);
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [input === void 0 ? /* @__PURE__ */ jsx(TextDetail, {
-					title: t("toolInput"),
-					value: typeof inputValue === "string" ? inputValue : void 0
-				}) : /* @__PURE__ */ jsx(Section, {
-					title: t("toolInput"),
-					children: /* @__PURE__ */ jsx(Fields, { value: input })
-				}), filenames.length === 0 ? /* @__PURE__ */ jsx(TextDetail, {
-					title: outputTitle,
-					value: typeof outputValue === "string" ? outputValue : output === void 0 ? void 0 : displayValue(output)
-				}) : /* @__PURE__ */ jsx(Section, {
-					title: outputTitle,
-					children: /* @__PURE__ */ jsx(Paths, { paths: filenames })
-				})] });
-			}
-			if (tool.toolName === "Bash" || tool.toolName === "PowerShell") {
-				const command = text$1(input?.command);
-				const terminal = [text$1(output?.stdout), text$1(output?.stderr)].filter((value) => value !== void 0).join("\n");
-				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsx(TextDetail, {
-						title: "Command",
-						value: command ?? (typeof inputValue === "string" ? inputValue : void 0)
+					content === void 0 ? null : /* @__PURE__ */ jsx(Section, {
+						title: outputTitle,
+						children: /* @__PURE__ */ jsx(Source, {
+							content,
+							start: offset
+						})
+					})
+				] });
+			}
+			if (tool.toolName === "Grep" || tool.toolName === "Glob") {
+				const filenames = filenameList(output?.filenames);
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [input === void 0 ? /* @__PURE__ */ jsx(TextDetail, {
+					title: t("toolInput"),
+					value: typeof inputValue === "string" ? inputValue : void 0
+				}) : /* @__PURE__ */ jsx(Section, {
+					title: t("toolInput"),
+					children: /* @__PURE__ */ jsx(Fields, { value: input })
+				}), filenames.length === 0 ? /* @__PURE__ */ jsx(TextDetail, {
+					title: outputTitle,
+					value: typeof outputValue === "string" ? outputValue : output === void 0 ? void 0 : displayValue(output)
+				}) : /* @__PURE__ */ jsx(Section, {
+					title: outputTitle,
+					children: /* @__PURE__ */ jsx(Paths, { paths: filenames })
+				})] });
+			}
+			if (tool.toolName === "Bash" || tool.toolName === "PowerShell") {
+				const command = text$1(input?.command);
+				const terminal = [text$1(output?.stdout), text$1(output?.stderr)].filter((value) => value !== void 0).join("\n");
+				const typed = command ?? (typeof inputValue === "string" ? inputValue : void 0);
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					typed === void 0 ? null : /* @__PURE__ */ jsx(Terminal, { command: typed }),
+					input === void 0 ? null : /* @__PURE__ */ jsx(Section, {
+						title: t("toolInput"),
+						children: /* @__PURE__ */ jsx(Fields, {
+							value: input,
+							omit: ["command", "description"]
+						})
+					}),
+					/* @__PURE__ */ jsx(TextDetail, {
+						title: outputTitle,
+						value: terminal || (typeof outputValue === "string" ? outputValue : void 0)
+					})
+				] });
+			}
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [input === void 0 ? /* @__PURE__ */ jsx(TextDetail, {
+				title: t("toolInput"),
+				value: typeof inputValue === "string" ? inputValue : void 0
+			}) : /* @__PURE__ */ jsx(Section, {
+				title: t("toolInput"),
+				children: /* @__PURE__ */ jsx(Fields, { value: input })
+			}), output === void 0 ? /* @__PURE__ */ jsx(TextDetail, {
+				title: outputTitle,
+				value: typeof outputValue === "string" ? outputValue : void 0
+			}) : /* @__PURE__ */ jsx(Section, {
+				title: outputTitle,
+				children: /* @__PURE__ */ jsx(Fields, { value: output })
+			})] });
+		}
+		function ClaudeTranscriptToolItem({ tool, t }) {
+			return /* @__PURE__ */ jsxs("details", {
+				className: "dsh-claude-tool-item",
+				children: [/* @__PURE__ */ jsxs("summary", {
+					className: "dsh-claude-tool-summary-row",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "dsh-claude-tool-label",
+							children: tool.toolName
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "dsh-claude-tool-description",
+							children: tool.description
+						}),
+						tool.additions === void 0 && tool.deletions === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+							className: "dsh-claude-tool-stats",
+							children: [/* @__PURE__ */ jsxs("span", {
+								className: "dsh-claude-diff-add",
+								children: ["+", tool.additions ?? 0]
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "dsh-claude-diff-delete",
+								children: ["−", tool.deletions ?? 0]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "dsh-claude-tool-content",
+					children: [tool.subcalls.length === 0 ? null : /* @__PURE__ */ jsx("div", {
+						className: "dsh-claude-flow-subcalls",
+						children: tool.subcalls.map((subcall) => /* @__PURE__ */ jsxs("div", { children: [
+							subcallGlyph(subcall),
+							" ",
+							subcall.toolName ?? t("subagent"),
+							subcall.summary === void 0 ? "" : ` · ${subcall.summary}`
+						] }, subcall.toolUseId))
+					}), /* @__PURE__ */ jsx(ToolPresentation, {
+						tool,
+						t
+					})]
+				})]
+			});
+		}
+		function ClaudeTranscriptToolGroup({ tools, additions, deletions, files: _files, t }) {
+			const [open, setOpen] = useState(false);
+			const failed = tools.some((tool) => tool.isError === true || tool.phase === "failed");
+			const running = tools.some((tool) => tool.phase === "started" || tool.phase === "updated");
+			const summary = tools.length === 1 ? t("usedTool") : t("usedTools", { count: tools.length });
+			return /* @__PURE__ */ jsxs("div", {
+				className: "dsh-claude-tool-group-native",
+				children: [/* @__PURE__ */ jsx(DisclosureRow, {
+					rowClassName: "dsh-claude-flow-row",
+					leadingClassName: "dsh-claude-flow-leading",
+					titleClassName: "dsh-claude-flow-title",
+					chevronClassName: "dsh-claude-flow-chevron",
+					icon: failed ? /* @__PURE__ */ jsx(StateDot, { state: "error" }) : running ? /* @__PURE__ */ jsx(StateDot, { state: "ongoing" }) : /* @__PURE__ */ jsx(IconApiOutline14, { size: 14 }),
+					title: summary,
+					open,
+					expandable: true,
+					expandOnRowClick: true,
+					keepContentWhenOpen: true,
+					onToggle: () => setOpen((value) => !value),
+					collapsedContent: additions !== void 0 || deletions !== void 0 ? /* @__PURE__ */ jsxs("span", {
+						className: "dsh-claude-tool-stats",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "dsh-claude-diff-add",
+							children: ["+", additions ?? 0]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "dsh-claude-diff-delete",
+							children: ["−", deletions ?? 0]
+						})]
+					}) : void 0
+				}), open ? /* @__PURE__ */ jsx("div", {
+					className: "dsh-claude-tool-list",
+					children: tools.map((tool) => /* @__PURE__ */ jsx(ClaudeTranscriptToolItem, {
+						tool,
+						t
+					}, tool.toolUseId))
+				}) : null]
+			});
+		}
+		/** Round a duration the way a reader reads one: no more precision than the
+		*  number deserves. */
+		function formatTurnDuration(ms) {
+			if (ms < 1e3) return `${Math.max(1, Math.round(ms))}ms`;
+			const seconds = ms / 1e3;
+			if (seconds < 60) return `${seconds < 10 ? seconds.toFixed(1) : String(Math.round(seconds))}s`;
+			const whole = Math.round(seconds);
+			return `${Math.floor(whole / 60)}m ${String(whole % 60).padStart(2, "0")}s`;
+		}
+		/** Share of the prompt that was served from cache.
+		*
+		*  Cache reads are counted against everything the prompt cost to assemble --
+		*  fresh input and cache writes included -- so a turn that read nothing scores
+		*  zero rather than dividing by nothing. */
+		function cacheHitRate(usage) {
+			const read = usage.cacheReadTokens ?? 0;
+			const total = read + (usage.cacheCreationTokens ?? 0) + (usage.inputTokens ?? 0);
+			return total === 0 ? void 0 : read / total;
+		}
+		/** The turn's accounting, in the order a reader wants it: size, then cost of
+		*  assembling it, then how long it took, then money. */
+		function turnUsageParts(usage, t) {
+			const tokens = (usage.inputTokens ?? 0) + (usage.outputTokens ?? 0) + (usage.cacheReadTokens ?? 0) + (usage.cacheCreationTokens ?? 0);
+			const cached = cacheHitRate(usage);
+			const parts = [];
+			if (tokens > 0) parts.push(t("turnUsageTokens", { count: formatTokenCount(tokens) }));
+			if (cached !== void 0) parts.push(t("turnUsageCache", { percent: (cached * 100).toFixed(1) }));
+			if (usage.durationMs !== void 0) parts.push(formatTurnDuration(usage.durationMs));
+			if (usage.ttftMs !== void 0) parts.push(t("turnUsageTtft", { duration: formatTurnDuration(usage.ttftMs) }));
+			if (usage.cumulativeCostUsd !== void 0) parts.push(t("turnUsageCost", { cost: usage.cumulativeCostUsd.toFixed(2) }));
+			return parts;
+		}
+		/** The footer the Host draws under its own assistant message, drawn here for
+		*  the steps the Host never had a message for. */
+		function ClaudeTurnUsage({ usage, t }) {
+			const parts = turnUsageParts(usage, t);
+			if (parts.length === 0) return null;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "dsh-claude-turn-usage",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "dsh-claude-turn-usage-label",
+						children: t("turnUsage")
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						children: "·"
+					}),
+					/* @__PURE__ */ jsx("span", { children: parts.join(" · ") })
+				]
+			});
+		}
+		function ClaudeActivityNode({ node, useClaudeProjection, t }) {
+			ensureCss$3();
+			const marker = node.data;
+			const activities = useClaudeProjection((value) => selectStepActivities(value, marker.turn, marker.step));
+			const tasks = useClaudeProjection((value) => value.tasks?.tasks ?? EMPTY_TASKS$1);
+			const items = useMemo(() => transcriptItemsForStep(activities, marker.turn, marker.step, tasks), [
+				activities,
+				marker.step,
+				marker.turn,
+				tasks
+			]);
+			const markdownLabels = useClaudeMarkdownLabels(t);
+			if (items.length === 0) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: "dsh-claude-flow",
+				children: items.map((item) => item.kind === "text" ? /* @__PURE__ */ jsx("div", {
+					className: "dsh-claude-transcript-text",
+					children: /* @__PURE__ */ jsx(ClaudeMarkdown, {
+						text: item.text,
+						labels: markdownLabels
+					})
+				}, `text:${item.ordinal}`) : item.kind === "compaction" ? /* @__PURE__ */ jsx(ClaudeCompactionDivider, {
+					compaction: item.compaction,
+					t
+				}, `compaction:${item.ordinal}`) : item.kind === "usage" ? /* @__PURE__ */ jsx(ClaudeTurnUsage, {
+					usage: item.usage,
+					t
+				}, `usage:${item.ordinal}`) : item.kind === "tools" ? /* @__PURE__ */ jsx(ClaudeTranscriptToolGroup, {
+					tools: item.tools,
+					...item.additions === void 0 ? {} : { additions: item.additions },
+					...item.deletions === void 0 ? {} : { deletions: item.deletions },
+					...item.files === void 0 ? {} : { files: item.files },
+					t
+				}, `tools:${item.ordinal}`) : /* @__PURE__ */ jsx(ActivityRow, {
+					row: item.row,
+					t
+				}, `activity:${item.ordinal}`))
+			});
+		}
+		//#endregion
+		//#region src/client/ClaudeTasksPanel.tsx
+		const STATUS_LABEL = {
+			running: "tasksRunning",
+			completed: "tasksCompleted",
+			failed: "tasksFailed",
+			stopped: "tasksStopped",
+			killed: "tasksKilled"
+		};
+		function visibleTaskGroups(tasks, dismissedSettledIds) {
+			const projected = tasks.filter(isProjectedTask);
+			return {
+				running: projected.filter((task) => task.status === "running"),
+				finished: projected.filter((task) => task.status !== "running" && !dismissedSettledIds.has(task.taskId))
+			};
+		}
+		function activitiesForTask(activities, taskId) {
+			return activities.filter((activity) => activity.taskId === taskId);
+		}
+		function tasksForTurn(tasks, turn) {
+			return tasks.filter((task) => task.originTurn === turn && isProjectedTask(task));
+		}
+		function summarizeTurnTasks(tasks) {
+			if (tasks.length === 0) return void 0;
+			const running = tasks.filter((task) => task.status === "running").length;
+			const failed = tasks.filter((task) => task.status === "failed" || task.status === "stopped" || task.status === "killed").length;
+			const completed = tasks.filter((task) => task.status === "completed").length;
+			return {
+				state: running > 0 ? "running" : failed > 0 ? "failed" : "completed",
+				count: tasks.length,
+				running,
+				failed,
+				completed
+			};
+		}
+		function statusGlyph(status) {
+			if (status === "running") return "●";
+			if (status === "completed") return "✓";
+			if (status === "stopped") return "–";
+			return "×";
+		}
+		function formatDuration(ms) {
+			if (ms < 1e3) return String(Math.max(1, Math.round(ms))) + "ms";
+			const seconds = Math.round(ms / 1e3);
+			if (seconds < 60) return String(seconds) + "s";
+			const minutes = Math.floor(seconds / 60);
+			return String(minutes) + "m " + String(seconds % 60) + "s";
+		}
+		function taskMeta(task, t) {
+			const parts = [];
+			if (task.subagentType !== void 0) parts.push(task.subagentType);
+			else if (task.taskType !== void 0) parts.push(task.taskType);
+			if (task.usage?.durationMs !== void 0) parts.push(formatDuration(task.usage.durationMs));
+			if (task.usage?.totalTokens !== void 0) parts.push(t("tokens", { count: formatTokenCount(task.usage.totalTokens) }));
+			if (task.usage?.toolUses !== void 0) parts.push(t("tasksToolUses", { count: task.usage.toolUses }));
+			if (task.lastToolName !== void 0) parts.push(t("tasksLastTool", { tool: task.lastToolName }));
+			return parts;
+		}
+		function TaskActivity({ activity, t }) {
+			return /* @__PURE__ */ jsxs("li", {
+				style: taskActivityItem,
+				children: [/* @__PURE__ */ jsx("span", {
+					style: taskActivityGlyph,
+					"aria-hidden": "true",
+					children: activity.isError === true ? "×" : "›"
+				}), /* @__PURE__ */ jsxs("div", {
+					style: taskActivityBody,
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							style: taskActivityTitle,
+							children: activity.title ?? activity.kind
+						}),
+						activity.summary === void 0 ? null : /* @__PURE__ */ jsx("p", {
+							style: taskActivitySummary,
+							children: activity.summary
+						}),
+						activity.detail === void 0 ? null : /* @__PURE__ */ jsxs("details", {
+							style: taskActivityDetail,
+							children: [/* @__PURE__ */ jsx("summary", {
+								style: taskActivityDetailSummary,
+								children: t("detail")
+							}), /* @__PURE__ */ jsx("pre", {
+								style: detailCode,
+								children: activity.detail
+							})]
+						})
+					]
+				})]
+			});
+		}
+		function TaskCard(props) {
+			const { task, activities, allActivities, t } = props;
+			const tools = useMemo(() => taskTools(allActivities, task.taskId), [allActivities, task.taskId]);
+			const [activityOpen, setActivityOpen] = useState(false);
+			const running = task.status === "running";
+			const failed = task.status === "failed" || task.status === "killed";
+			const meta = taskMeta(task, t);
+			return /* @__PURE__ */ jsxs("article", {
+				style: {
+					...taskCard,
+					...running ? taskCardRunning : {}
+				},
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						style: taskCardTop,
+						children: [/* @__PURE__ */ jsx("span", {
+							className: running ? "dsh-claude-act-running" : void 0,
+							style: {
+								...taskCardGlyph,
+								...running ? iconChipRunning : {},
+								...failed ? iconChipError : {}
+							},
+							"aria-hidden": "true",
+							children: statusGlyph(task.status)
+						}), /* @__PURE__ */ jsxs("div", {
+							style: taskCardBody,
+							children: [/* @__PURE__ */ jsx("p", {
+								style: {
+									...taskTitle,
+									...failed ? { color: "var(--dsw-alias-state-error-primary)" } : {}
+								},
+								children: task.description
+							}), /* @__PURE__ */ jsxs("p", {
+								style: taskStatusLine,
+								children: [/* @__PURE__ */ jsx("span", { children: t(STATUS_LABEL[task.status] ?? "tasksRunning") }), task.backgrounded === true ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									children: " · "
+								}), /* @__PURE__ */ jsx("span", { children: t("tasksBackground") })] }) : null]
+							})]
+						})]
+					}),
+					meta.length === 0 ? null : /* @__PURE__ */ jsx("p", {
+						style: taskMeta$1,
+						children: meta.join(" · ")
 					}),
-					input === void 0 ? null : /* @__PURE__ */ jsx(Section, {
-						title: t("toolInput"),
-						children: /* @__PURE__ */ jsx(Fields, {
-							value: input,
-							omit: ["command"]
-						})
+					task.summary === void 0 || running ? null : /* @__PURE__ */ jsx("p", {
+						style: taskSummary,
+						children: task.summary
 					}),
-					/* @__PURE__ */ jsx(TextDetail, {
-						title: outputTitle,
-						value: terminal || (typeof outputValue === "string" ? outputValue : void 0)
+					activities.length === 0 && tools.length === 0 ? null : /* @__PURE__ */ jsxs("div", {
+						style: taskActivitySection,
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							style: taskTextButton,
+							"aria-expanded": activityOpen,
+							onClick: () => setActivityOpen((value) => !value),
+							children: activityOpen ? t("tasksHideActivity") : t("tasksViewActivity")
+						}), !activityOpen ? null : tools.length > 0 ? /* @__PURE__ */ jsx("div", {
+							style: taskToolList,
+							children: tools.map((tool) => /* @__PURE__ */ jsx(ClaudeTranscriptToolItem, {
+								tool,
+								t
+							}, tool.toolUseId))
+						}) : /* @__PURE__ */ jsx("ul", {
+							style: taskActivityList,
+							children: activities.map((activity) => /* @__PURE__ */ jsx(TaskActivity, {
+								activity,
+								t
+							}, `${activity.turn}:${activity.step}:${activity.ordinal}`))
+						})]
 					})
-				] });
-			}
-			return /* @__PURE__ */ jsxs(Fragment$1, { children: [input === void 0 ? /* @__PURE__ */ jsx(TextDetail, {
-				title: t("toolInput"),
-				value: typeof inputValue === "string" ? inputValue : void 0
-			}) : /* @__PURE__ */ jsx(Section, {
-				title: t("toolInput"),
-				children: /* @__PURE__ */ jsx(Fields, { value: input })
-			}), output === void 0 ? /* @__PURE__ */ jsx(TextDetail, {
-				title: outputTitle,
-				value: typeof outputValue === "string" ? outputValue : void 0
-			}) : /* @__PURE__ */ jsx(Section, {
-				title: outputTitle,
-				children: /* @__PURE__ */ jsx(Fields, { value: output })
+				]
+			});
+		}
+		function GroupHeading(props) {
+			const { label, count, collapsed, onToggle, action } = props;
+			const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx("span", {
+				style: tasksGroupCount,
+				children: count
 			})] });
+			return /* @__PURE__ */ jsxs("div", {
+				style: tasksGroupHeading,
+				children: [onToggle === void 0 ? /* @__PURE__ */ jsx("div", {
+					style: tasksGroupTitle,
+					children: content
+				}) : /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					style: tasksGroupToggle,
+					"aria-expanded": !collapsed,
+					onClick: onToggle,
+					children: [/* @__PURE__ */ jsx("span", {
+						style: {
+							...chevron,
+							...collapsed === true ? {} : chevronOpen
+						},
+						children: "›"
+					}), content]
+				}), action === void 0 ? null : /* @__PURE__ */ jsx("button", {
+					type: "button",
+					style: taskTextButton,
+					onClick: action.onClick,
+					children: action.label
+				})]
+			});
 		}
-		function ClaudeTranscriptToolItem({ tool, t }) {
-			return /* @__PURE__ */ jsxs("details", {
-				className: "dsh-claude-tool-item",
-				children: [/* @__PURE__ */ jsxs("summary", {
-					className: "dsh-claude-tool-summary-row",
-					children: [
-						/* @__PURE__ */ jsx("span", {
-							className: "dsh-claude-tool-label",
-							children: tool.toolName
-						}),
-						/* @__PURE__ */ jsx("span", {
-							className: "dsh-claude-tool-description",
-							children: tool.description
-						}),
-						tool.additions === void 0 && tool.deletions === void 0 ? null : /* @__PURE__ */ jsxs("span", {
-							className: "dsh-claude-tool-stats",
-							children: [/* @__PURE__ */ jsxs("span", {
-								className: "dsh-claude-diff-add",
-								children: ["+", tool.additions ?? 0]
-							}), /* @__PURE__ */ jsxs("span", {
-								className: "dsh-claude-diff-delete",
-								children: ["−", tool.deletions ?? 0]
+		function ClaudeTasksPanel({ useClaudeProjection, t, closeDetails, turn }) {
+			const projection = useClaudeProjection((value) => value);
+			const tasks = useMemo(() => tasksForTurn(projection.tasks?.tasks ?? [], turn), [projection.tasks, turn]);
+			useEffect(() => {
+				if (!projection.owned || tasks.length === 0) closeDetails();
+			}, [
+				closeDetails,
+				projection.owned,
+				tasks.length
+			]);
+			const [finishedCollapsed, setFinishedCollapsed] = useState(false);
+			const [dismissedSettledIds, setDismissedSettledIds] = useState(() => /* @__PURE__ */ new Set());
+			const groups = useMemo(() => visibleTaskGroups(tasks, dismissedSettledIds), [tasks, dismissedSettledIds]);
+			const taskActivities = useMemo(() => new Map(tasks.map((task) => [task.taskId, activitiesForTask(projection.activities, task.taskId)])), [projection.activities, tasks]);
+			const clearFinished = () => setDismissedSettledIds((previous) => /* @__PURE__ */ new Set([...previous, ...tasks.filter((task) => task.status !== "running").map((task) => task.taskId)]));
+			if (!projection.owned) return null;
+			return /* @__PURE__ */ jsxs("div", {
+				className: detailsCardClass,
+				style: tasksPanel,
+				children: [
+					/* @__PURE__ */ jsxs("style", {
+						"data-dsh-claude-panel-icon-styles": true,
+						children: [detailsCardCss, panelIconButtonCss]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: tasksHeader,
+						children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", {
+							style: tasksHeading,
+							children: t("tasksPanelTurn")
+						}), /* @__PURE__ */ jsx("span", {
+							style: tasksTurnMeta,
+							children: t("tasksTurnNumber", { turn })
+						})] }), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: panelIconButtonClass,
+							"aria-label": t("tasksClose"),
+							onClick: closeDetails,
+							children: /* @__PURE__ */ jsx(IconCloseOutline16, {})
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						style: tasksBody,
+						children: [/* @__PURE__ */ jsxs("section", {
+							"aria-label": t("tasksRunning"),
+							children: [/* @__PURE__ */ jsx(GroupHeading, {
+								label: t("tasksRunning"),
+								count: groups.running.length
+							}), groups.running.length === 0 ? /* @__PURE__ */ jsx("p", {
+								style: tasksGroupEmpty,
+								children: t("tasksNoneRunning")
+							}) : /* @__PURE__ */ jsx("div", {
+								style: taskCardList,
+								children: groups.running.map((task) => /* @__PURE__ */ jsx(TaskCard, {
+									task,
+									activities: taskActivities.get(task.taskId) ?? [],
+									allActivities: projection.activities,
+									t
+								}, task.taskId))
+							})]
+						}), /* @__PURE__ */ jsxs("section", {
+							"aria-label": t("tasksSettled"),
+							style: tasksFinishedSection,
+							children: [/* @__PURE__ */ jsx(GroupHeading, {
+								label: t("tasksSettled"),
+								count: groups.finished.length,
+								collapsed: finishedCollapsed,
+								onToggle: () => setFinishedCollapsed((value) => !value),
+								...groups.finished.length === 0 ? {} : { action: {
+									label: t("tasksClear"),
+									onClick: clearFinished
+								} }
+							}), finishedCollapsed || groups.finished.length === 0 ? null : /* @__PURE__ */ jsx("div", {
+								style: taskCardList,
+								children: groups.finished.map((task) => /* @__PURE__ */ jsx(TaskCard, {
+									task,
+									activities: taskActivities.get(task.taskId) ?? [],
+									allActivities: projection.activities,
+									t
+								}, task.taskId))
 							})]
-						})
-					]
-				}), /* @__PURE__ */ jsxs("div", {
-					className: "dsh-claude-tool-content",
-					children: [tool.subcalls.length === 0 ? null : /* @__PURE__ */ jsx("div", {
-						className: "dsh-claude-flow-subcalls",
-						children: tool.subcalls.map((subcall) => /* @__PURE__ */ jsxs("div", { children: [
-							subcallGlyph(subcall),
-							" ",
-							subcall.toolName ?? t("subagent"),
-							subcall.summary === void 0 ? "" : ` · ${subcall.summary}`
-						] }, subcall.toolUseId))
-					}), /* @__PURE__ */ jsx(ToolPresentation, {
-						tool,
-						t
-					})]
-				})]
+						})]
+					})
+				]
 			});
 		}
-		function ClaudeTranscriptToolGroup({ tools, additions, deletions, files: _files, t }) {
-			const [open, setOpen] = useState(false);
-			const failed = tools.some((tool) => tool.isError === true || tool.phase === "failed");
-			const running = tools.some((tool) => tool.phase === "started" || tool.phase === "updated");
-			const summary = tools.length === 1 ? t("usedTool") : t("usedTools", { count: tools.length });
-			return /* @__PURE__ */ jsxs("div", {
-				className: "dsh-claude-tool-group-native",
-				children: [/* @__PURE__ */ jsx(DisclosureRow, {
-					rowClassName: "dsh-claude-flow-row",
-					leadingClassName: "dsh-claude-flow-leading",
-					titleClassName: "dsh-claude-flow-title",
-					chevronClassName: "dsh-claude-flow-chevron",
-					icon: failed ? /* @__PURE__ */ jsx(StateDot, { state: "error" }) : running ? /* @__PURE__ */ jsx(StateDot, { state: "ongoing" }) : /* @__PURE__ */ jsx(IconApiOutline14, { size: 14 }),
-					title: summary,
-					open,
-					expandable: true,
-					expandOnRowClick: true,
-					keepContentWhenOpen: true,
-					onToggle: () => setOpen((value) => !value),
-					collapsedContent: additions !== void 0 || deletions !== void 0 ? /* @__PURE__ */ jsxs("span", {
-						className: "dsh-claude-tool-stats",
-						children: [/* @__PURE__ */ jsxs("span", {
-							className: "dsh-claude-diff-add",
-							children: ["+", additions ?? 0]
-						}), /* @__PURE__ */ jsxs("span", {
-							className: "dsh-claude-diff-delete",
-							children: ["−", deletions ?? 0]
+		//#endregion
+		//#region src/client/ClaudeActivityTail.tsx
+		const MAX_HOVER_TASKS = 6;
+		function taskGlyph(status) {
+			if (status === "failed") return {
+				glyph: "×",
+				style: tasksHoverGlyphError
+			};
+			if (status === "completed") return {
+				glyph: "✓",
+				style: tasksHoverGlyphDone
+			};
+			return {
+				glyph: "●",
+				style: tasksHoverGlyphRunning
+			};
+		}
+		function ClaudeTaskLauncher({ turn, tasks, t, openTasks }) {
+			const [hovered, setHovered] = useState(false);
+			const closeTimer = useRef();
+			const turnTasks = useMemo(() => tasksForTurn(tasks, turn), [tasks, turn]);
+			const summary = useMemo(() => summarizeTurnTasks(turnTasks), [turnTasks]);
+			const open = () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+				closeTimer.current = void 0;
+				setHovered(true);
+			};
+			const scheduleClose = () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+				closeTimer.current = setTimeout(() => {
+					closeTimer.current = void 0;
+					setHovered(false);
+				}, 350);
+			};
+			useEffect(() => () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+			}, []);
+			if (summary === void 0) return null;
+			const label = summary.state === "running" ? t("tasksTurnRunning", { count: summary.running }) : summary.state === "failed" ? t("tasksTurnFailed", {
+				failed: summary.failed,
+				completed: summary.completed
+			}) : t("tasksTurnCompleted", { count: summary.completed });
+			const stateStyle = summary.state === "completed" ? tasksBadgeDone : {};
+			const dotStyle = summary.state === "failed" ? tasksBadgeDotError : summary.state === "completed" ? tasksBadgeDotDone : {};
+			return /* @__PURE__ */ jsx("div", {
+				"data-claude-task-launcher": turn,
+				style: tasksBadgeWrap,
+				children: /* @__PURE__ */ jsxs("span", {
+					style: tasksBadgeSeat,
+					onMouseEnter: open,
+					onMouseLeave: scheduleClose,
+					onFocus: open,
+					onBlur: (event) => {
+						if (!event.currentTarget.contains(event.relatedTarget)) scheduleClose();
+					},
+					children: [hovered ? /* @__PURE__ */ jsxs("span", {
+						role: "tooltip",
+						style: tasksHoverCard,
+						onMouseEnter: open,
+						onMouseLeave: scheduleClose,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								style: tasksHoverHeader,
+								children: label
+							}),
+							turnTasks.slice(0, MAX_HOVER_TASKS).map((task) => {
+								const { glyph, style } = taskGlyph(task.status);
+								return /* @__PURE__ */ jsxs("span", {
+									style: tasksHoverRow,
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: task.status === "running" ? "dsh-claude-act-running" : void 0,
+											style: {
+												...tasksHoverGlyph,
+												...style
+											},
+											"aria-hidden": "true",
+											children: glyph
+										}),
+										/* @__PURE__ */ jsx("span", {
+											style: tasksHoverDesc,
+											title: task.description,
+											children: task.description
+										}),
+										task.subagentType === void 0 ? null : /* @__PURE__ */ jsx("span", {
+											style: tasksHoverType,
+											children: task.subagentType
+										})
+									]
+								}, task.taskId);
+							}),
+							turnTasks.length > MAX_HOVER_TASKS ? /* @__PURE__ */ jsxs("span", {
+								style: tasksHoverMore,
+								children: ["+", turnTasks.length - MAX_HOVER_TASKS]
+							}) : null,
+							/* @__PURE__ */ jsx("span", {
+								style: tasksHoverHint,
+								children: t("tasksOpen")
+							})
+						]
+					}) : null, /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "dsh-claude-task-launcher",
+						style: {
+							...tasksTurnBadge,
+							...stateStyle,
+							...hovered ? tasksBadgeHovered : {}
+						},
+						"aria-label": `${label} — ${t("tasksOpen")}`,
+						onClick: () => openTasks(turn),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: summary.state === "running" ? "dsh-claude-act-running" : void 0,
+							style: {
+								...tasksBadgeDot,
+								...dotStyle
+							},
+							"aria-hidden": "true"
+						}), /* @__PURE__ */ jsx("span", {
+							style: tasksBadgeLabel,
+							children: label
 						})]
-					}) : void 0
-				}), open ? /* @__PURE__ */ jsx("div", {
-					className: "dsh-claude-tool-list",
-					children: tools.map((tool) => /* @__PURE__ */ jsx(ClaudeTranscriptToolItem, {
-						tool,
-						t
-					}, tool.toolUseId))
-				}) : null]
+					})]
+				})
 			});
 		}
-		function ClaudeActivityNode({ node, useClaudeProjection, t }) {
-			ensureCss$3();
-			const marker = node.data;
-			const activities = useClaudeProjection((value) => selectStepActivities(value, marker.turn, marker.step));
+		function ClaudeActivityTail({ matched, useClaudeProjection, t, openTasks }) {
+			const tasks = useClaudeProjection((value) => value.tasks?.tasks ?? []);
+			return /* @__PURE__ */ jsx(ClaudeTaskLauncher, {
+				turn: matched.turn,
+				tasks,
+				t,
+				openTasks
+			});
+		}
+		//#endregion
+		//#region src/client/ClaudeActiveTasksNode.tsx
+		const EMPTY_TASKS = [];
+		/** Render the task launcher while the owning DSH turn is still open. */
+		function ClaudeActiveTasksNode({ node, useClaudeProjection, t, openTasks }) {
 			const tasks = useClaudeProjection((value) => value.tasks?.tasks ?? EMPTY_TASKS);
-			const items = useMemo(() => transcriptItemsForStep(activities, marker.turn, marker.step, tasks), [
-				activities,
-				marker.step,
-				marker.turn,
-				tasks
-			]);
-			const markdownLabels = useClaudeMarkdownLabels(t);
-			if (items.length === 0) return null;
-			return /* @__PURE__ */ jsx("div", {
-				className: "dsh-claude-flow",
-				children: items.map((item) => item.kind === "text" ? /* @__PURE__ */ jsx("div", {
-					className: "dsh-claude-transcript-text",
-					children: /* @__PURE__ */ jsx(ClaudeMarkdown, {
-						text: item.text,
-						labels: markdownLabels
-					})
-				}, `text:${item.ordinal}`) : item.kind === "compaction" ? /* @__PURE__ */ jsx(ClaudeCompactionDivider, {
-					compaction: item.compaction,
-					t
-				}, `compaction:${item.ordinal}`) : item.kind === "tools" ? /* @__PURE__ */ jsx(ClaudeTranscriptToolGroup, {
-					tools: item.tools,
-					...item.additions === void 0 ? {} : { additions: item.additions },
-					...item.deletions === void 0 ? {} : { deletions: item.deletions },
-					...item.files === void 0 ? {} : { files: item.files },
-					t
-				}, `tools:${item.ordinal}`) : /* @__PURE__ */ jsx(ActivityRow, {
-					row: item.row,
-					t
-				}, `activity:${item.ordinal}`))
+			return /* @__PURE__ */ jsx(ClaudeTaskLauncher, {
+				turn: node.data.turn,
+				tasks,
+				t,
+				openTasks
 			});
 		}
 		//#endregion
@@ -5394,6 +5643,7 @@ window.__ModuleLoader__.load({
 				if (typeof setting !== "object" || setting === null || Array.isArray(setting)) return false;
 				const item = setting;
 				if (typeof item.key !== "string" || typeof item.value !== "string" || ![
+					"immediate",
 					"new-session",
 					"next-turn",
 					"next-worktree",
@@ -5584,6 +5834,23 @@ window.__ModuleLoader__.load({
 			"seven_day_opus",
 			"seven_day_sonnet"
 		]);
+		/** The prose mode a settings payload carries, or the default when it carries
+		*  none — an older Host, or a response this Client does not fully understand,
+		*  leaves the palette alone rather than guessing. */
+		function proseModeOf(settings) {
+			const value = settings.find((setting) => setting.key === "prose")?.value;
+			return isClaudeProseMode(value) ? value : DEFAULT_CLAUDE_PROSE_MODE;
+		}
+		/** Settings whose row only makes sense under a particular value of another.
+		*  Filtering here rather than server-side keeps the descriptor list flat: the
+		*  server has no view of what the Client can paint. Fails OPEN — a payload
+		*  missing the setting a row depends on shows the row rather than hiding it,
+		*  so an older Host cannot make a setting unreachable. */
+		function visibleGlobalSettings(settings) {
+			const renderer = settings.find((setting) => setting.key === "renderer");
+			if (renderer === void 0 || renderer.value !== "native") return settings;
+			return settings.filter((setting) => setting.key !== "prose");
+		}
 		/** Per-setting label and the effect note that used to sit as a standalone
 		*  paragraph under the card; it now hangs off the label as a hover hint. */
 		const SETTING_COPY = {
@@ -5595,6 +5862,10 @@ window.__ModuleLoader__.load({
 				label: "renderer",
 				hint: "rendererEffect"
 			},
+			prose: {
+				label: "prose",
+				hint: "proseEffect"
+			},
 			worktreeBranchPrefix: {
 				label: "worktreeBranchPrefix",
 				hint: "worktreeBranchPrefixEffect"
@@ -5613,7 +5884,9 @@ window.__ModuleLoader__.load({
 		*  names) carry no entry and keep the label the route reported. */
 		const SETTING_OPTION_COPY = {
 			"renderer:plugin": "rendererPlugin",
-			"renderer:native": "rendererNative"
+			"renderer:native": "rendererNative",
+			"prose:plain": "prosePlain",
+			"prose:enhanced": "proseEnhanced"
 		};
 		function settingOptionLabel(settingKey, option, t) {
 			const key = SETTING_OPTION_COPY[`${settingKey}:${option.value}`];
@@ -5852,6 +6125,7 @@ window.__ModuleLoader__.load({
 					});
 					if (!isGlobalSettingsView(payload)) throw new Error("Invalid global settings response");
 					setGlobalSettings(payload);
+					applyClaudeMarkdownTheme(proseModeOf(payload.settings));
 				} catch (cause) {
 					setGlobalSettingsError(cardFailure(cause));
 				} finally {
@@ -5962,7 +6236,7 @@ window.__ModuleLoader__.load({
 							globalSettings === void 0 ? /* @__PURE__ */ jsx("p", {
 								style: notice,
 								children: t("globalSettingsLoading")
-							}) : globalSettings.settings.map((setting) => {
+							}) : visibleGlobalSettings(globalSettings.settings).map((setting) => {
 								const copy = SETTING_COPY[setting.key];
 								return /* @__PURE__ */ jsxs("div", {
 									style: diagnosticGrid,
@@ -6305,10 +6579,14 @@ window.__ModuleLoader__.load({
 		const HOST_STAGES = /* @__PURE__ */ new Set([
 			"inspecting",
 			"fetching",
+			"summarizing",
 			"creating-worktree",
 			"saving-worktree",
 			"switching-branch"
 		]);
+		/** The draft only has to describe the work; the host truncates it again before
+		*  summarizing, and the setup route caps the whole body at 16 KiB. */
+		const MAX_INTENT_CHARS = 2e3;
 		function record$3(value) {
 			return typeof value === "object" && value !== null && !Array.isArray(value) ? value : void 0;
 		}
@@ -6344,7 +6622,7 @@ window.__ModuleLoader__.load({
 				throw error;
 			}
 		}
-		async function prepareRepository(cwd, branch, worktree, branchName, onProgress = () => {}) {
+		async function prepareRepository(cwd, branch, worktree, branchName, onProgress = () => {}, intent) {
 			const carrier = new AbortController();
 			try {
 				const reader = await pluginNdjson(CLAUDE_REPOSITORY_SETUP_PATH, carrier.signal, {
@@ -6353,7 +6631,8 @@ window.__ModuleLoader__.load({
 						cwd,
 						branch,
 						worktree,
-						...branchName === void 0 ? {} : { branchName }
+						...branchName === void 0 ? {} : { branchName },
+						...intent === void 0 || intent.trim().length === 0 ? {} : { intent: intent.slice(0, MAX_INTENT_CHARS) }
 					}
 				});
 				const decoder = new TextDecoder();
@@ -6642,10 +6921,40 @@ window.__ModuleLoader__.load({
 		const CLAUDE_SCOPED_CSS_VARIABLES = ["--dsh-composer-card-max-width"];
 		/** Marks the bar the scoped-property probe measures. */
 		const CLAUDE_COMPOSER_BAR_ATTRIBUTE = "data-dsh-claude-composer-bar";
-		/** One line per service the Host no longer provides; empty when all resolve. */
-		function claudeBootCheckFindings(input) {
+		/** Methods this plugin calls on the Host services it injects.
+		*
+		*  A service that still resolves but has lost a method is the drift the
+		*  service list above cannot see: Desktop 0.1.2 moved `connectWorkspace` off
+		*  `workspaces` onto a new service, and the worktree flow went on registering
+		*  itself and only broke once a user ran it. Naming the methods here turns
+		*  that into a boot-time line. Methods with a runtime fallback stay out. */
+		const CLAUDE_REQUIRED_SERVICE_METHODS = {
+			sessions: [
+				"scope",
+				"open",
+				"binding"
+			],
+			workspaces: [
+				"create",
+				"delete",
+				"archiveSession"
+			],
+			uiConversation: ["binding"],
+			uiSession: ["provide"],
+			inputTriggers: ["registerSource"]
+		};
+		/** One line per service the Host no longer provides, or provides without a
+		*  method this plugin calls on it; empty when everything resolves. */
+		function claudeBootCheckFindings(input, methods = CLAUDE_REQUIRED_SERVICE_METHODS) {
 			const findings = [];
-			for (const name of input.services) if (input.resolve(name) === void 0) findings.push(`service "${name}" is declared in inject but the Host does not provide it`);
+			for (const name of input.services) {
+				const service = input.resolve(name);
+				if (service === void 0) {
+					findings.push(`service "${name}" is declared in inject but the Host does not provide it`);
+					continue;
+				}
+				for (const method of methods[name] ?? []) if (typeof service[method] !== "function") findings.push(`service "${name}" no longer provides ${method}(); the features calling it are broken`);
+			}
 			return findings;
 		}
 		/** One line per scoped custom property the measured element cannot see.
@@ -7578,9 +7887,15 @@ window.__ModuleLoader__.load({
 							style: repositoryRemote,
 							children: repositoryName$1(repository.remote)
 						}),
-						/* @__PURE__ */ jsx("span", {
-							style: repositoryBranch,
-							children: branch
+						/* @__PURE__ */ jsx(Tooltip, {
+							label: branch,
+							side: "top",
+							delayMs: 250,
+							maxWidth: 420,
+							children: /* @__PURE__ */ jsx("span", {
+								style: repositoryBranch,
+								children: branch
+							})
 						}),
 						repository.worktree === true ? /* @__PURE__ */ jsx("span", {
 							style: repositoryWorktree,
@@ -7772,7 +8087,9 @@ window.__ModuleLoader__.load({
 						children: comment.text
 					})]
 				}),
-				openDelayMs: 250
+				openDelayMs: 250,
+				copyLabel: t("markdownCopy"),
+				copiedLabel: t("markdownCopied")
 			});
 		}
 		/** Pending review comments docked above the composer; drained by the next user turn. */
@@ -13841,7 +14158,7 @@ window.__ModuleLoader__.load({
 		* @returns the preset id, or undefined when neither source carries one.
 		*/
 		function sessionRowPreset(row) {
-			return row?.agentPreset ?? row?.projectionValues?.agentPreset;
+			return row?.agentPreset ?? row?.projectionValues?.agentPreset ?? void 0;
 		}
 		//#endregion
 		//#region src/client/ClaudePullRequestsPanel.tsx
@@ -15072,10 +15389,15 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/client/ClaudeHeroRepositoryControls.tsx
+		/** The host composer was a textarea through rc.8 and is a Lexical
+		*  contenteditable from 0.1.2 on, so match the composer seat rather than the
+		*  element type: an element-type check silently stops intercepting Enter, and
+		*  the capsule's branch and Worktree choices go nowhere. */
 		function shouldInterceptKey(event) {
 			if (event.key !== "Enter" || event.shiftKey || event.repeat || event.isComposing) return false;
 			const target = event.target;
-			return target instanceof HTMLTextAreaElement && target.closest("[data-phase=\"hero\"]") !== null;
+			if (!(target instanceof Element)) return false;
+			return target.closest("textarea, [data-composer-input]") !== null && target.closest("[data-phase=\"hero\"]") !== null;
 		}
 		function shouldInterceptClick(event) {
 			const target = event.target;
@@ -15111,6 +15433,7 @@ window.__ModuleLoader__.load({
 		const WORKTREE_PROGRESS_STAGES = [
 			"inspecting",
 			"fetching",
+			"summarizing",
 			"creating-worktree",
 			"saving-worktree",
 			"creating-workspace",
@@ -15121,6 +15444,7 @@ window.__ModuleLoader__.load({
 		const PROGRESS_LABEL_KEYS = {
 			inspecting: "repositoryProgress_inspecting",
 			fetching: "repositoryProgress_fetching",
+			summarizing: "repositoryProgress_summarizing",
 			"creating-worktree": "repositoryProgress_creating-worktree",
 			"saving-worktree": "repositoryProgress_saving-worktree",
 			"switching-branch": "repositoryProgress_switching-branch",
@@ -16702,6 +17026,10 @@ window.__ModuleLoader__.load({
 			rendererPlugin: "插件渲染器",
 			rendererNative: "DSH 原生渲染器",
 			rendererEffect: "插件渲染器沿用本插件自带的转录视图：交错的正文、成组的工具卡片与活动行。DSH 原生渲染器改由 DSH 自身绘制：正文作为普通助手文本块，思考作为推理块，Claude 的顶层工具会镜像成原生工具卡片。修改从下一个回合起生效；已经产生的回合仍按记录时的渲染器显示，不会重绘。",
+			prose: "Markdown 彩色高亮",
+			prosePlain: "关闭",
+			proseEnhanced: "开启",
+			proseEffect: "开启后，正文的标题、加粗、斜体、行内代码、列表符号、引用与链接各自着色，代码块换成深色描边底。这会覆盖本插件默认对齐 Claude 桌面版的配色。仅在使用插件渲染器时有效，改动立即生效，无需等待下一回合。",
 			worktreeBranchPrefix: "Worktree 分支前缀",
 			worktreeBranchPrefixEffect: "分支前缀修改会应用于之后自动创建的 Worktree 分支；显式指定的完整分支名不会被修改。",
 			maxProcessesSetting: "Claude 进程上限",
@@ -16796,6 +17124,7 @@ window.__ModuleLoader__.load({
 			repositoryProgressDismiss: "关闭 Worktree 进度",
 			repositoryProgress_inspecting: "检查仓库和分支",
 			repositoryProgress_fetching: "刷新远程引用",
+			repositoryProgress_summarizing: "总结需求生成分支名",
 			"repositoryProgress_creating-worktree": "创建分支和 Worktree",
 			"repositoryProgress_saving-worktree": "保存 Worktree 状态",
 			"repositoryProgress_switching-branch": "切换本地分支",
@@ -16853,6 +17182,9 @@ window.__ModuleLoader__.load({
 			diffCommentNext: "下一条评论",
 			diffCommentPosition: "第 {index} 条，共 {total} 条",
 			diffCommentCounter: "{index}/{total}",
+			diffCardExpand: "展开其余 {count} 行",
+			diffCardCollapse: "收起",
+			diffCardFiles: "{count} 个文件",
 			diffExpandAll: "展开全部文件",
 			diffCollapseAll: "收起全部文件",
 			diffRestore: "还原 Diff 面板",
@@ -17014,7 +17346,12 @@ window.__ModuleLoader__.load({
 			rewindSubmitting: "回退中…",
 			rewindFailed: "回退失败（{code}）。",
 			rewindBusy: "这个会话正在运行，请等本轮结束后再回退。",
-			rewindStale: "宿主进程里的插件还是旧版本（没有回退接口）。重启 DSH 后再试。"
+			rewindStale: "宿主进程里的插件还是旧版本（没有回退接口）。重启 DSH 后再试。",
+			turnUsage: "本回合用量",
+			turnUsageTokens: "{count} tok",
+			turnUsageCache: "缓存命中 {percent}%",
+			turnUsageTtft: "首字 {duration}",
+			turnUsageCost: "累计 ${cost}"
 		};
 		const en = {
 			nav: "Claude Code",
@@ -17066,6 +17403,10 @@ window.__ModuleLoader__.load({
 			rendererPlugin: "Plugin renderer",
 			rendererNative: "DSH native renderer",
 			rendererEffect: "The plugin renderer keeps this package’s own transcript: interleaved prose, grouped tool cards, and activity rows. The DSH native renderer hands the same turn to DSH itself — prose as ordinary assistant text blocks, thinking as reasoning blocks, and root Claude tools mirrored into native tool cards. A change applies from the next turn; turns already recorded keep the renderer they were recorded with and are not redrawn.",
+			prose: "Markdown colour highlighting",
+			prosePlain: "Off",
+			proseEnhanced: "On",
+			proseEffect: "Gives headings, bold, italics, inline code, list markers, quotes and links their own colours, and paints the code block on a dark outlined surface. This overrides the Claude-desktop palette this package matches by default. Only applies under the plugin renderer, and takes effect immediately rather than on the next turn.",
 			worktreeBranchPrefix: "Worktree branch prefix",
 			worktreeBranchPrefixEffect: "Prefix changes apply to subsequently generated Worktree branches. Explicit full branch names remain unchanged.",
 			maxProcessesSetting: "Claude process limit",
@@ -17160,6 +17501,7 @@ window.__ModuleLoader__.load({
 			repositoryProgressDismiss: "Dismiss Worktree progress",
 			repositoryProgress_inspecting: "Checking repository and branch",
 			repositoryProgress_fetching: "Refreshing remote references",
+			repositoryProgress_summarizing: "Naming the branch after the request",
 			"repositoryProgress_creating-worktree": "Creating branch and Worktree",
 			"repositoryProgress_saving-worktree": "Saving Worktree state",
 			"repositoryProgress_switching-branch": "Switching local branch",
@@ -17217,6 +17559,9 @@ window.__ModuleLoader__.load({
 			diffCommentNext: "Next comment",
 			diffCommentPosition: "Comment {index} of {total}",
 			diffCommentCounter: "{index}/{total}",
+			diffCardExpand: "Show {count} more lines",
+			diffCardCollapse: "Show less",
+			diffCardFiles: "{count} files",
 			diffExpandAll: "Expand all files",
 			diffCollapseAll: "Collapse all files",
 			diffRestore: "Restore diff panel",
@@ -17378,7 +17723,12 @@ window.__ModuleLoader__.load({
 			rewindSubmitting: "Rewinding…",
 			rewindFailed: "The rewind failed ({code}).",
 			rewindBusy: "This session is running; wait for the turn to finish before rewinding.",
-			rewindStale: "The Host process is still running the previous plugin build, which has no rewind route. Restart DSH and try again."
+			rewindStale: "The Host process is still running the previous plugin build, which has no rewind route. Restart DSH and try again.",
+			turnUsage: "Turn usage",
+			turnUsageTokens: "{count} tok",
+			turnUsageCache: "Cache hit {percent}%",
+			turnUsageTtft: "TTFT {duration}",
+			turnUsageCost: "${cost} total"
 		};
 		//#endregion
 		//#region src/client/index.tsx
@@ -17412,6 +17762,17 @@ window.__ModuleLoader__.load({
 			"conversation",
 			"connection"
 		];
+		/** Resolve one session's composer facade.
+		*
+		*  `sessions.scope()` returns the client runtime's AgentContext, and the
+		*  conversation package -- a release ahead of the runtime in the graph the Host
+		*  itself ships -- types `input.for` against a Context whose `remote` has since
+		*  gained `$stream` and `$host`. It is the same object at runtime; only the two
+		*  declarations disagree, and they disagree inside the Host too, so the cast
+		*  lives here once instead of at all nine call sites. */
+		function sessionInput(conversation, scope) {
+			return conversation.input.for(scope);
+		}
 		function apply(ctx) {
 			const namespace = "settings.claude-code";
 			const diagnostics = createClaudeDiagnosticsReporter();
@@ -17428,12 +17789,17 @@ window.__ModuleLoader__.load({
 			}), "dsh-claude: client copy");
 			const t = ctx.locale.bind(namespace);
 			ctx.effect(() => restyleHostChrome(), "dsh-claude: Host chrome restyling");
+			pluginRead(CLAUDE_GLOBAL_SETTINGS_PATH, "fast").then((payload) => {
+				if (isGlobalSettingsView(payload)) applyClaudeMarkdownTheme(proseModeOf(payload.settings));
+			}).catch(() => {});
 			const projections = new ClaudeProjectionStore({ report: (kind, detail) => {
 				diagnostics.report(kind, detail);
 			} });
 			ctx.effect(() => ctx.inputTriggers.registerSource(createClaudeCommandSource(ctx, projections)), "dsh-claude: Claude slash source");
 			const sessions = ctx.get("sessions");
 			const workspaces = ctx.get("workspaces");
+			const uiWorkspace = ctx.get("uiWorkspace");
+			const connectWorkspace = uiWorkspace?.connectWorkspace?.bind(uiWorkspace) ?? (typeof workspaces?.connectWorkspace === "function" ? workspaces.connectWorkspace.bind(workspaces) : void 0);
 			const conversation = ctx.get("conversation");
 			const connection = ctx.get("connection");
 			const remote = ctx.get("remote");
@@ -17445,7 +17811,7 @@ window.__ModuleLoader__.load({
 				return (draft, mode = "append") => {
 					const scope = sessions.scope(sessionId);
 					if (scope === void 0) return false;
-					const input = conversation.input.for(scope);
+					const input = sessionInput(conversation, scope);
 					const current = input.state.getSnapshot().draft;
 					if (current.trim() === "") input.setDraft(draft);
 					else if (mode === "append") input.setDraft(`${current}\n\n${draft}`);
@@ -17691,7 +18057,7 @@ window.__ModuleLoader__.load({
 					...sessions === void 0 || conversation === void 0 ? {} : { submitWith: (fallbackDraft) => {
 						const scope = sessions.scope(sessionId);
 						if (scope === void 0) return;
-						const input = conversation.input.for(scope);
+						const input = sessionInput(conversation, scope);
 						if (input.state.getSnapshot().draft.trim() === "") input.setDraft(fallbackDraft);
 						input.submit();
 					} }
@@ -17729,7 +18095,7 @@ window.__ModuleLoader__.load({
 				...sessions === void 0 || conversation === void 0 ? {} : { insertIntoChat: (sessionId, text) => {
 					const scope = sessions.scope(sessionId);
 					if (scope === void 0) return;
-					const input = conversation.input.for(scope);
+					const input = sessionInput(conversation, scope);
 					const current = input.state.getSnapshot().draft;
 					input.setDraft(current.trim() === "" ? text : `${current}\n\n${text}`);
 				} }
@@ -17791,7 +18157,7 @@ window.__ModuleLoader__.load({
 					...conversation === void 0 ? {} : { setDraft: (sessionId, text) => {
 						const scope = sessions.scope(sessionId);
 						if (scope === void 0) return;
-						conversation.input.for(scope).setDraft(text);
+						sessionInput(conversation, scope).setDraft(text);
 					} }
 				};
 				ctx.slots.inject("shell.overlay", () => ctx.slots.register({
@@ -17813,12 +18179,12 @@ window.__ModuleLoader__.load({
 						t,
 						updateQueue: (itemId, action) => target.updateQueue(itemId, action),
 						notify: (level, text) => {
-							if (scope !== void 0) conversation.input.for(scope).notify(level, text);
+							if (scope !== void 0) sessionInput(conversation, scope).notify(level, text);
 						}
 					};
 				}
 			}, ClaudeQueueDock));
-			if (sessions !== void 0 && workspaces !== void 0 && conversation !== void 0 && connection !== void 0 && remote !== void 0) {
+			if (sessions !== void 0 && workspaces !== void 0 && connectWorkspace !== void 0 && conversation !== void 0 && connection !== void 0 && remote !== void 0) {
 				/** Attach a prepared worktree to its session without blocking the flow. */
 				const bindLease = (leaseId, targetSessionId) => {
 					if (leaseId === void 0) return;
@@ -17836,11 +18202,11 @@ window.__ModuleLoader__.load({
 						prepare: async (cwd, branch, useWorktree, onProgress, ticket) => {
 							const sourceScope = sessions.scope(sourceSessionId);
 							if (sourceScope === void 0) throw new Error(t("repositorySessionUnavailable"));
-							const sourceInput = conversation.input.for(sourceScope);
+							const sourceInput = sessionInput(conversation, sourceScope);
 							const rawDraft = sourceInput.state.getSnapshot().draft;
 							const draft = ticket === void 0 ? rawDraft : rawDraft.trim() === "" ? ticketPrompt(ticket) : `${rawDraft.trimEnd()}\n\n${ticketContext(ticket)}`;
 							const imageIds = sourceInput.state.getSnapshot().imageIds;
-							const prepared = await prepareRepository(cwd, branch, useWorktree, ticket?.key, onProgress);
+							const prepared = await prepareRepository(cwd, branch, useWorktree, ticket?.key, onProgress, ticket === void 0 ? draft : void 0);
 							if (ticket !== void 0) assignJiraTicket(ticket.key).catch((reason) => {
 								console.warn(`dsh-claude: could not assign ${ticket.key}: ${reason instanceof Error ? reason.message : String(reason)}`);
 							});
@@ -17852,13 +18218,13 @@ window.__ModuleLoader__.load({
 							onProgress("creating-workspace");
 							const workspace = await workspaces.create({ path: prepared.path });
 							onProgress("starting-session");
-							const targetSessionId = await workspaces.connectWorkspace(workspace.workspaceId);
+							const targetSessionId = await connectWorkspace(workspace.workspaceId);
 							const targetScope = sessions.scope(targetSessionId);
 							if (targetScope === void 0) throw new Error(t("repositorySessionUnavailable"));
 							const presetResponse = await remote.agentPresets.select(targetSessionId, "claude");
 							if (!presetResponse.ok) throw new Error(presetResponse.error.message);
-							sessions.noteAgentPreset(targetSessionId, presetResponse.value);
-							const targetInput = conversation.input.for(targetScope);
+							sessions.noteAgentPreset?.(targetSessionId, presetResponse.value);
+							const targetInput = sessionInput(conversation, targetScope);
 							onProgress("transferring-draft");
 							if (imageIds.length > 0 && !targetInput.addImages(imageIds)) throw new Error(t("repositoryDraftTransferFailed"));
 							if (draft !== "") targetInput.setDraft(draft);
@@ -17872,7 +18238,7 @@ window.__ModuleLoader__.load({
 						prepareMany: async (cwd, branch, tickets, onProgress) => {
 							const sourceScope = sessions.scope(sourceSessionId);
 							if (sourceScope === void 0) throw new Error(t("repositorySessionUnavailable"));
-							const sourceInput = conversation.input.for(sourceScope);
+							const sourceInput = sessionInput(conversation, sourceScope);
 							const rawDraft = sourceInput.state.getSnapshot().draft;
 							const failures = [];
 							for (const [index, ticket] of tickets.entries()) {
@@ -17893,13 +18259,13 @@ window.__ModuleLoader__.load({
 									report("creating-workspace");
 									const workspace = await workspaces.create({ path: prepared.path });
 									report("starting-session");
-									const targetSessionId = await workspaces.connectWorkspace(workspace.workspaceId);
+									const targetSessionId = await connectWorkspace(workspace.workspaceId);
 									const targetScope = sessions.scope(targetSessionId);
 									if (targetScope === void 0) throw new Error(t("repositorySessionUnavailable"));
 									const presetResponse = await remote.agentPresets.select(targetSessionId, "claude");
 									if (!presetResponse.ok) throw new Error(presetResponse.error.message);
-									sessions.noteAgentPreset(targetSessionId, presetResponse.value);
-									const targetInput = conversation.input.for(targetScope);
+									sessions.noteAgentPreset?.(targetSessionId, presetResponse.value);
+									const targetInput = sessionInput(conversation, targetScope);
 									report("transferring-draft");
 									targetInput.setDraft(rawDraft.trim() === "" ? ticketPrompt(ticket) : `${rawDraft.trimEnd()}\n\n${ticketContext(ticket)}`);
 									bindLease(prepared.leaseId, targetSessionId);