@norman-else/dsh-claude 0.1.28 → 0.1.29

package/lib/client.js

@@ -4,7 +4,7 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		module.exports;
 		var { Fragment, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } = require("react");
-		var { DiffBlock, DisclosureRow, HoverCard, IconApiOutline14, IconBranchOutline16, IconCheckOutline14, IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14, IconCloseOutline16, IconEditOutline16, IconFullscreenOutline16, IconQueueOutline14, IconSearchOutline16, IconSendOutline14, IconThinkOutline14, IconTrashOutline16, MarkdownText, Menu, Modal, StateDot, Tooltip } = require("@deepseek-ai/dsh-client-ui-primitives");
+		var { DiffBlock, DisclosureRow, HoverCard, IconAgentPresetOutline16, IconApiOutline14, IconBranchOutline16, IconCheckOutline14, IconCheckOutline16, IconChevronDownOutline14, IconChevronUpOutline14, IconCloseOutline16, IconEditOutline16, IconFullscreenOutline16, IconQueueOutline14, IconSearchOutline16, IconSendOutline14, IconThinkOutline14, IconTrashOutline16, MarkdownText, Menu, Modal, StateDot, Tooltip } = require("@deepseek-ai/dsh-client-ui-primitives");
 		var { Fragment: Fragment$1, jsx, jsxs } = require("react/jsx-runtime");
 		var { createPortal } = require("react-dom");
 		/** Claude's subagent dispatch tools; rendered as plugin-owned group cards
@@ -3857,10 +3857,10 @@ window.__ModuleLoader__.load({
 			".dsh-claude-act-running{animation:dsh-claude-act-pulse 1.2s ease-in-out infinite}",
 			"@keyframes dsh-claude-act-pulse{0%,100%{opacity:1}50%{opacity:.3}}"
 		].join("");
-		let cssInjected = false;
-		function ensureCss() {
-			if (cssInjected || typeof document === "undefined") return;
-			cssInjected = true;
+		let cssInjected$2 = false;
+		function ensureCss$2() {
+			if (cssInjected$2 || typeof document === "undefined") return;
+			cssInjected$2 = true;
 			const element = document.createElement("style");
 			element.dataset.dshClaudeActivity = "";
 			element.textContent = ACTIVITY_CSS;
@@ -4185,7 +4185,7 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function ClaudeActivityNode({ node, useClaudeProjection, t }) {
-			ensureCss();
+			ensureCss$2();
 			const marker = node.data;
 			const activities = useClaudeProjection((value) => selectStepActivities(value, marker.turn, marker.step));
 			const tasks = useClaudeProjection((value) => value.tasks?.tasks ?? EMPTY_TASKS);
@@ -9560,6 +9560,274 @@ window.__ModuleLoader__.load({
 			}), portal);
 		}
 		//#endregion
+		//#region src/client/ClaudeDiffHeaderAction.tsx
+		/** Quiet by default, lit on hover, press, keyboard focus, and for as long as
+		*  the panel it opened is on screen. The header action row sits on the app
+		*  background, so a resting background would read as a filled control. */
+		const ACTION_CSS = [
+			".dsh-claude-header-diff{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;",
+			"min-width:32px;height:32px;padding:0;border:0;border-radius:9px;background:transparent;",
+			"color:var(--dsw-alias-label-secondary);cursor:pointer;",
+			"font-family:var(--dsw-font-family);font-size:12px;line-height:20px;font-weight:650;",
+			"transition:background .12s ease,color .12s ease}",
+			".dsh-claude-header-diff[data-counts]{padding:0 10px 0 8px}",
+			".dsh-claude-header-diff:hover,.dsh-claude-header-diff:focus-visible,.dsh-claude-header-diff[aria-pressed=\"true\"]{",
+			"background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}",
+			".dsh-claude-header-diff:active{background:var(--dsw-alias-interactive-bg-active)}",
+			".dsh-claude-header-diff:focus-visible{outline:none}",
+			".dsh-claude-header-diff>*{flex:none}",
+			".dsh-claude-header-diff>svg.dsh-claude-header-diff-glyph{",
+			"width:18px;height:18px;display:block;overflow:visible;opacity:1;",
+			"fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round}",
+			".dsh-claude-header-diff-add,.dsh-claude-header-diff-del{line-height:1}",
+			".dsh-claude-header-diff-add{color:var(--dsw-alias-state-success-primary)}",
+			".dsh-claude-header-diff-del{color:var(--dsw-alias-state-error-primary)}"
+		].join("");
+		let cssInjected$1 = false;
+		function ensureCss$1() {
+			if (cssInjected$1 || typeof document === "undefined") return;
+			cssInjected$1 = true;
+			const element = document.createElement("style");
+			element.dataset.dshClaudeHeaderDiff = "";
+			element.textContent = ACTION_CSS;
+			document.head.appendChild(element);
+		}
+		/** Plus over minus: the diff glyph. Drawn inline because the primitives icon
+		*  set ships no diff icon.
+		*
+		*  The ink spans y 3.5 to 14.5 — symmetric about the box's own centre line, so
+		*  `align-items:center` lands the drawn shape on the centre rather than the
+		*  bounding box that happens to contain it. */
+		function DiffGlyph() {
+			return /* @__PURE__ */ jsx("svg", {
+				className: "dsh-claude-header-diff-glyph",
+				width: "18",
+				height: "18",
+				viewBox: "0 0 18 18",
+				fill: "none",
+				"aria-hidden": "true",
+				focusable: "false",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M9 3.5v5.5M6.25 6.25h5.5M6.25 14.5h5.5",
+					stroke: "currentColor",
+					strokeWidth: "2.1",
+					strokeLinecap: "round"
+				})
+			});
+		}
+		function ClaudeDiffHeaderAction({ t, sessionId, toggleDiff, diffOpen, useClaudeProjection }) {
+			const owned = useClaudeProjection((projection) => projection.owned);
+			const additions = useClaudeProjection((projection) => projection.repository?.diff?.additions ?? 0);
+			const deletions = useClaudeProjection((projection) => projection.repository?.diff?.deletions ?? 0);
+			const open = useSyncExternalStore(diffOpen.subscribe, diffOpen.getSnapshot, diffOpen.getSnapshot);
+			if (!owned) return null;
+			ensureCss$1();
+			const hasCounts = additions > 0 || deletions > 0;
+			const label = t(open ? "diffClose" : "diffOpen");
+			return /* @__PURE__ */ jsx(Tooltip, {
+				label,
+				side: "bottom",
+				delayMs: 250,
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: "dsh-claude-header-diff",
+					"aria-label": label,
+					"aria-pressed": open,
+					"data-counts": hasCounts || void 0,
+					"data-session": sessionId,
+					onClick: toggleDiff,
+					children: [/* @__PURE__ */ jsx(DiffGlyph, {}), hasCounts ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+						className: "dsh-claude-header-diff-add",
+						children: ["+", additions]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "dsh-claude-header-diff-del",
+						children: ["−", deletions]
+					})] }) : null]
+				})
+			});
+		}
+		//#endregion
+		//#region src/client/claude-mark.ts
+		/** The Claude wordmark glyph, lifted verbatim from the brand SVG.
+		*
+		*  Kept as raw geometry rather than a component because its only consumer
+		*  paints it through a CSS `background-image`: the Host draws the agent-preset
+		*  icon itself, so the swap has to happen in CSS, not in JSX. */
+		const MARK_PATH = "M 233.959793 800.214905 L 468.644287 668.536987 L 472.590637 657.100647 L 468.644287 650.738403 L 457.208069 650.738403 L 417.986633 648.322144 L 283.892639 644.69812 L 167.597321 639.865845 L 54.926208 633.825623 L 26.577238 627.785339 L 3.3e-05 592.751709 L 2.73832 575.27533 L 26.577238 559.248352 L 60.724873 562.228149 L 136.187973 567.382629 L 249.422867 575.194763 L 331.570496 580.026978 L 453.261841 592.671082 L 472.590637 592.671082 L 475.328857 584.859009 L 468.724915 580.026978 L 463.570557 575.194763 L 346.389313 495.785217 L 219.543671 411.865906 L 153.100723 363.543762 L 117.181267 339.060425 L 99.060455 316.107361 L 91.248367 266.01355 L 123.865784 230.093994 L 167.677887 233.073853 L 178.872513 236.053772 L 223.248367 270.201477 L 318.040283 343.570496 L 441.825592 434.738342 L 459.946411 449.798706 L 467.194672 444.64447 L 468.080597 441.020203 L 459.946411 427.409485 L 392.617493 305.718323 L 320.778564 181.932983 L 288.80542 130.630859 L 280.348999 99.865845 C 277.369171 87.221436 275.194641 76.590698 275.194641 63.624268 L 312.322174 13.20813 L 332.8591 6.604126 L 382.389313 13.20813 L 403.248352 31.328979 L 434.013519 101.71814 L 483.865753 212.537048 L 561.181274 363.221497 L 583.812134 407.919434 L 595.892639 449.315491 L 600.40271 461.959839 L 608.214783 461.959839 L 608.214783 454.711609 L 614.577271 369.825623 L 626.335632 265.61084 L 637.771851 131.516846 L 641.718201 93.745117 L 660.402832 48.483276 L 697.530334 24.000122 L 726.52356 37.852417 L 750.362549 72 L 747.060486 94.067139 L 732.886047 186.201416 L 705.100708 330.52356 L 686.979919 427.167847 L 697.530334 427.167847 L 709.61084 415.087341 L 758.496704 350.174561 L 840.644348 247.490051 L 876.885925 206.738342 L 919.167847 161.71814 L 946.308838 140.29541 L 997.61084 140.29541 L 1035.38269 196.429626 L 1018.469849 254.416199 L 965.637634 321.422852 L 921.825562 378.201538 L 859.006714 462.765259 L 819.785278 530.41626 L 823.409424 535.812073 L 832.75177 534.92627 L 974.657776 504.724915 L 1051.328979 490.872559 L 1142.818848 475.167786 L 1184.214844 494.496582 L 1188.724854 514.147644 L 1172.456421 554.335693 L 1074.604126 578.496765 L 959.838989 601.449829 L 788.939636 641.879272 L 786.845764 643.409485 L 789.261841 646.389343 L 866.255127 653.637634 L 899.194702 655.409424 L 979.812134 655.409424 L 1129.932861 666.604187 L 1169.154419 692.537109 L 1192.671265 724.268677 L 1188.724854 748.429688 L 1128.322144 779.194641 L 1046.818848 759.865845 L 856.590759 714.604126 L 791.355774 698.335754 L 782.335693 698.335754 L 782.335693 703.731567 L 836.69812 756.885986 L 936.322205 846.845581 L 1061.073975 962.81897 L 1067.436279 991.490112 L 1051.409424 1014.120911 L 1034.496704 1011.704712 L 924.885986 929.234924 L 882.604126 892.107544 L 786.845764 811.48999 L 780.483276 811.48999 L 780.483276 819.946289 L 802.550415 852.241699 L 919.087341 1027.409424 L 925.127625 1081.127686 L 916.671204 1098.604126 L 886.469849 1109.154419 L 853.288696 1103.114136 L 785.073914 1007.355835 L 714.684631 899.516785 L 657.906067 802.872498 L 650.979858 806.81897 L 617.476624 1167.704834 L 601.771851 1186.147705 L 565.530212 1200 L 535.328857 1177.046997 L 519.302124 1139.919556 L 535.328857 1066.550537 L 554.657776 970.792053 L 570.362488 894.68457 L 584.536926 800.134277 L 592.993347 768.724976 L 592.429626 766.630859 L 585.503479 767.516968 L 514.22821 865.369263 L 405.825531 1011.865906 L 320.053711 1103.677979 L 299.516815 1111.812256 L 263.919525 1093.369263 L 267.221497 1060.429688 L 287.114136 1031.114136 L 405.825531 880.107361 L 477.422913 786.52356 L 523.651062 732.483276 L 523.328918 724.671265 L 520.590698 724.671265 L 205.288605 929.395935 L 149.154434 936.644409 L 124.993355 914.01355 L 127.973183 876.885986 L 139.409409 864.80542 L 234.201385 799.570435 L 233.879227 799.8927 Z";
+		const MARK_COLOR = "#d97757";
+		/** The mark as a CSS `url()` value.
+		*  @returns a percent-encoded `data:` URI, safe to inline in a stylesheet. */
+		function claudeMarkUrl() {
+			return `url("data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><path fill="${MARK_COLOR}" d="${MARK_PATH}"/></svg>`)}")`;
+		}
+		//#endregion
+		//#region src/client/agent-preset-roster.ts
+		/** Locale keys the Host uses for the presets it ships, mirrored so a shadowed
+		*  label still shows their translated copy instead of a bare id. Every entry is
+		*  a lookup into the Host's own `settings.agentPreset` namespace; an id absent
+		*  here (this plugin's preset included) falls through to file metadata, which
+		*  is what the Host does too. */
+		const BUILT_IN_KEYS = {
+			standard: {
+				name: "presetStandardName",
+				description: "presetStandardDescription"
+			},
+			code: {
+				name: "presetCodeName",
+				description: "presetCodeDescription"
+			},
+			minimal: {
+				name: "presetMinimalName",
+				description: "presetMinimalDescription"
+			},
+			cordis: {
+				name: "presetCordisName",
+				description: "presetCordisDescription"
+			}
+		};
+		/**
+		* Resolve one preset's display copy the way the Host does: translated copy for
+		* a preset it ships, file metadata otherwise.
+		* @param row - the roster row, or undefined when the roster has not arrived.
+		* @param presetId - the id recorded on the session.
+		* @param hostT - lookup bound to the Host's preset namespace.
+		* @returns the name to render and the description to put in the tooltip.
+		*/
+		function presetDisplayText(row, presetId, hostT) {
+			const keys = row?.trust === "system" ? BUILT_IN_KEYS[row.id] : void 0;
+			if (keys !== void 0) {
+				const name = hostT(keys.name);
+				const description = hostT(keys.description);
+				if (name !== keys.name) return {
+					name,
+					...description === keys.description ? {} : { description }
+				};
+			}
+			return {
+				name: row?.name ?? presetId,
+				...row?.description === void 0 ? {} : { description: row.description }
+			};
+		}
+		var AgentPresetRoster = class {
+			#api;
+			#listeners = /* @__PURE__ */ new Set();
+			#rows = [];
+			#inflight;
+			constructor(api) {
+				this.#api = api;
+			}
+			/** Read the roster once. Concurrent calls share the in-flight read, and a
+			*  failed read leaves the previous rows in place — the label falls back to
+			*  the session's preset id, never to an empty header. */
+			load() {
+				if (this.#inflight !== void 0) return;
+				this.#inflight = (async () => {
+					try {
+						const response = await this.#api.list({});
+						if (!response.result.ok) return;
+						this.#rows = response.result.value.presets;
+						for (const listener of this.#listeners) listener();
+					} catch {} finally {
+						this.#inflight = void 0;
+					}
+				})();
+			}
+			subscribe = (listener) => {
+				this.#listeners.add(listener);
+				return () => {
+					this.#listeners.delete(listener);
+				};
+			};
+			getSnapshot = () => this.#rows;
+		};
+		//#endregion
+		//#region src/client/ClaudeAgentPresetLabel.tsx
+		/** Reproduces the Host label's own metrics — it sits in the same action row
+		*  beside the title, so it has to read as the same piece of chrome. */
+		const LABEL_CSS = [
+			".dsh-claude-preset-label{display:inline-flex;align-items:center;gap:4px;max-width:220px;height:22px;",
+			"padding:0 2px 0 0;border-radius:6px;overflow:hidden;white-space:nowrap;",
+			"color:var(--dsw-alias-label-secondary);font-family:var(--dsw-font-family);font-size:12px;line-height:22px}",
+			".dsh-claude-preset-label>*{flex:none}",
+			".dsh-claude-preset-name{min-width:0;overflow:hidden;text-overflow:ellipsis}",
+			".dsh-claude-preset-icon{opacity:.7}",
+			`.dsh-claude-preset-mark{width:14px;height:14px;background:${claudeMarkUrl()} center/contain no-repeat}`
+		].join("");
+		let cssInjected = false;
+		function ensureCss() {
+			if (cssInjected || typeof document === "undefined") return;
+			cssInjected = true;
+			const element = document.createElement("style");
+			element.dataset.dshClaudePresetLabel = "";
+			element.textContent = LABEL_CSS;
+			document.head.appendChild(element);
+		}
+		function ClaudeAgentPresetLabel({ t, hostT, roster, sessionId, useSessions }) {
+			const preset = useSessions((state) => state.byId[sessionId]?.agentPreset);
+			const rows = useSyncExternalStore(roster.subscribe, roster.getSnapshot, roster.getSnapshot);
+			const { load } = roster;
+			useEffect(() => {
+				if (preset !== void 0) load();
+			}, [preset, load]);
+			if (preset === void 0) return null;
+			ensureCss();
+			const text = presetDisplayText(rows.find((row) => row.id === preset), preset, hostT);
+			return /* @__PURE__ */ jsx(Tooltip, {
+				label: text.description ?? t("presetHeaderHint"),
+				side: "bottom",
+				delayMs: 250,
+				maxWidth: 280,
+				children: /* @__PURE__ */ jsxs("span", {
+					className: "dsh-claude-preset-label",
+					children: [preset === "claude" ? /* @__PURE__ */ jsx("span", {
+						className: "dsh-claude-preset-mark",
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx(IconAgentPresetOutline16, {
+						size: 14,
+						className: "dsh-claude-preset-icon"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "dsh-claude-preset-name",
+						children: text.name
+					})]
+				})
+			});
+		}
+		//#endregion
+		//#region src/client/diff-open-store.ts
+		var DiffOpenStore = class {
+			#sessionId;
+			#listeners = /* @__PURE__ */ new Set();
+			/** Mark the diff panel open for one session, replacing any previous holder. */
+			open(sessionId) {
+				this.#set(sessionId);
+			}
+			/** Mark the diff panel closed. */
+			close() {
+				this.#set(void 0);
+			}
+			/** Whether the diff panel is currently open for this session. */
+			isOpen(sessionId) {
+				return this.#sessionId === sessionId;
+			}
+			/** A per-session snapshot source for `useSyncExternalStore`. */
+			sourceFor(sessionId) {
+				return {
+					subscribe: (listener) => {
+						this.#listeners.add(listener);
+						return () => {
+							this.#listeners.delete(listener);
+						};
+					},
+					getSnapshot: () => this.isOpen(sessionId)
+				};
+			}
+			#set(sessionId) {
+				if (this.#sessionId === sessionId) return;
+				this.#sessionId = sessionId;
+				for (const listener of this.#listeners) listener();
+			}
+		};
+		//#endregion
 		//#region src/client/claude-command-source.ts
 		const SOURCE_NAME = "Claude Code";
 		function commandsFor(store, session) {
@@ -9642,6 +9910,81 @@ window.__ModuleLoader__.load({
 			}
 		}
 		//#endregion
+		//#region src/client/preset-seat-mark.ts
+		/** Flags the Host's agent-preset seat while it names the Claude preset.
+		*
+		*  The seat is a `single` slot whose occupant owns the whole picker — menu,
+		*  staging, the intro animation. Shadowing it to change one glyph would mean
+		*  reimplementing all of that, so the glyph is swapped in CSS instead. CSS
+		*  cannot read the seat's text, though, and the seat names whichever preset is
+		*  currently staged, so the brand mark would otherwise land on `standard` or
+		*  `cordis` too. This bridge supplies the one bit CSS is missing.
+		*
+		*  Keyed on the seat icon's CSS Module local name plus `aria-haspopup`, both of
+		*  which fail open: a Host rename leaves the attribute unset and the stock
+		*  glyph in place.
+		*/
+		/** Attribute the stylesheet keys the mark swap off. */
+		const CLAUDE_SEAT_ATTRIBUTE = "data-dsh-claude-preset";
+		const SEAT_SELECTOR = "button[aria-haspopup=\"menu\"]";
+		const SEAT_ICON_SELECTOR = "[class*=\"seatIcon\"]";
+		/**
+		* Set or clear the flag on every preset seat currently in the tree.
+		* @param root - subtree to sweep; the document by default.
+		*/
+		function markClaudePresetSeats(root) {
+			for (const icon of root.querySelectorAll(SEAT_ICON_SELECTOR)) {
+				const seat = icon.closest(SEAT_SELECTOR);
+				if (seat === null) continue;
+				if (isClaudePresetText(seat.textContent ?? "")) seat.setAttribute(CLAUDE_SEAT_ATTRIBUTE, "");
+				else seat.removeAttribute(CLAUDE_SEAT_ATTRIBUTE);
+			}
+		}
+		/** Keep the flag in step with the Host's own re-renders.
+		*  @returns a disposer that stops observing and clears every flag it set. */
+		function trackClaudePresetSeats() {
+			if (typeof document === "undefined" || typeof window === "undefined" || typeof MutationObserver === "undefined") return () => {};
+			let frame;
+			const schedule = () => {
+				if (frame !== void 0) return;
+				frame = window.requestAnimationFrame(() => {
+					frame = void 0;
+					markClaudePresetSeats(document);
+				});
+			};
+			const observer = new MutationObserver(schedule);
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
+			markClaudePresetSeats(document);
+			return () => {
+				observer.disconnect();
+				if (frame !== void 0) window.cancelAnimationFrame(frame);
+				for (const seat of document.querySelectorAll(`[${CLAUDE_SEAT_ATTRIBUTE}]`)) seat.removeAttribute(CLAUDE_SEAT_ATTRIBUTE);
+			};
+		}
+		const HOST_CHROME_CSS = `button[class*="sessionLogButton"]{display:none}${["header:has(.dsh-claude-header-diff)>[role=\"tablist\"]{display:none}", "header:has(.dsh-claude-header-diff){padding-bottom:10px}"].join("")}${[
+			`button[${CLAUDE_SEAT_ATTRIBUTE}]>[class*="seatIcon"]{display:none}`,
+			`button[${CLAUDE_SEAT_ATTRIBUTE}]::before{content:"";flex:none;width:16px;height:16px;`,
+			`background:${claudeMarkUrl()} center/contain no-repeat}`
+		].join("")}`;
+		/** Install the stylesheet and the one DOM flag it depends on.
+		*  @returns a disposer that removes both again. */
+		function restyleHostChrome() {
+			if (typeof document === "undefined") return () => {};
+			const element = document.createElement("style");
+			element.dataset.dshClaudeHostChrome = "";
+			element.textContent = HOST_CHROME_CSS;
+			document.head.appendChild(element);
+			const untrack = trackClaudePresetSeats();
+			return () => {
+				untrack();
+				element.remove();
+			};
+		}
+		//#endregion
 		//#region src/client/details-resize.ts
 		const DETAILS_MIN_WIDTH = 300;
 		const DETAILS_DEFAULT_WIDTH = 720;
@@ -9980,6 +10323,7 @@ window.__ModuleLoader__.load({
 			no: "否",
 			diffOpen: "查看分支改动",
 			diffClose: "关闭 Diff 面板",
+			presetHeaderHint: "当前会话运行的 Agent 预设",
 			diffWorkingTree: "分支改动",
 			diffFiles: "{count} 个已修改文件",
 			diffFilesShort: "{count} 个文件",
@@ -10296,6 +10640,7 @@ window.__ModuleLoader__.load({
 			no: "No",
 			diffOpen: "View branch changes",
 			diffClose: "Close diff panel",
+			presetHeaderHint: "The agent preset this session runs",
 			diffWorkingTree: "Branch changes",
 			diffFiles: "{count} modified file(s)",
 			diffFilesShort: "{count} files",
@@ -10475,6 +10820,7 @@ window.__ModuleLoader__.load({
 				en
 			}), "dsh-claude: client copy");
 			const t = ctx.locale.bind(namespace);
+			ctx.effect(() => restyleHostChrome(), "dsh-claude: Host chrome restyling");
 			const projections = new ClaudeProjectionStore();
 			ctx.effect(() => ctx.inputTriggers.registerSource(createClaudeCommandSource(ctx, projections)), "dsh-claude: Claude slash source");
 			const sessions = ctx.get("sessions");
@@ -10516,6 +10862,7 @@ window.__ModuleLoader__.load({
 			let disposeDiffOverlay;
 			let disposeExpandedDetailsResize;
 			let detailsSessionId;
+			const diffOpen = new DiffOpenStore();
 			const restoreDiff = () => {
 				if (disposeDiffOverlay === void 0) return;
 				disposeDiffOverlay();
@@ -10532,6 +10879,7 @@ window.__ModuleLoader__.load({
 				disposePluginDetails?.();
 				disposePluginDetails = void 0;
 				detailsSessionId = void 0;
+				diffOpen.close();
 				layout?.closeDetails();
 			};
 			ctx.effect(() => ctx.slots.onEntryError((key, entry) => {
@@ -10641,6 +10989,7 @@ window.__ModuleLoader__.load({
 					detailsSessionId = void 0;
 					return;
 				}
+				diffOpen.open(sessionId);
 				disposeExpandedDetailsResize = enableExpandedDetailsResize();
 			};
 			ctx.effect(() => {
@@ -10672,6 +11021,40 @@ window.__ModuleLoader__.load({
 					openTasks: (turn) => openTasksPanel(sessionId, turn)
 				})
 			}, ClaudeActivityTail));
+			if (connection !== void 0) {
+				const roster = new AgentPresetRoster(connection.api.agentPresets);
+				const hostT = ctx.locale.bind("settings.agentPreset");
+				ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
+					name: "conversation.session.header.actions",
+					id: "agent-preset",
+					order: -10,
+					priority: -10,
+					locale: namespace,
+					inject: () => ({
+						t,
+						hostT: (key) => hostT(key),
+						roster: {
+							subscribe: roster.subscribe,
+							getSnapshot: roster.getSnapshot,
+							load: () => roster.load()
+						}
+					})
+				}, ClaudeAgentPresetLabel));
+			}
+			ctx.slots.inject("conversation.session.header.utilities", () => ctx.slots.register({
+				name: "conversation.session.header.utilities",
+				id: "claude-diff",
+				order: 30,
+				locale: namespace,
+				inject: (sessionId) => ({
+					t,
+					toggleDiff: () => {
+						if (diffOpen.isOpen(sessionId)) closePluginDetails();
+						else openDiffPanel(sessionId);
+					},
+					diffOpen: diffOpen.sourceFor(sessionId)
+				})
+			}, ClaudeDiffHeaderAction));
 			ctx.slots.inject("conversation.input.dock", () => ctx.slots.register({
 				name: "conversation.input.dock",
 				id: "claude-review-comments",