@xia-sc/dsh-git 0.5.3 → 0.6.1

package/lib/client.js

@@ -38,6 +38,7 @@ window.__ModuleLoader__.load({
 			"panel.title": "Git",
 			"panel.collapse": "收起",
 			"refresh.aria": "刷新 Git 状态",
+			"refresh.busy": "刷新中…",
 			"branch.aria": "当前 Git 分支",
 			"switch.aria": "切换分支",
 			"switch.dirtyWarn": "有 {count} 个未提交文件（如 {paths}），切换分支可能被 git 拒绝，请先提交或暂存",
@@ -75,10 +76,16 @@ window.__ModuleLoader__.load({
 			"generate.truncated": "模型还没写出提交信息就用完了 token 上限（思考模型会先花掉这份预算），再点一次通常即可",
 			"generate.cancelled": "生成已取消",
 			"generate.failed": "生成失败",
+			"generate.failedDetail": "生成失败：{message}",
+			"generate.failedRoute": "生成失败：{message}（模型路由 {provider} / {model}）",
 			"commit.placeholder": "提交信息（可多行，Ctrl+Enter 提交）…",
 			"commit.empty": "请输入提交信息",
-			"changes.title": "变更（{count}）",
+			"changes.title": "变更",
 			"changes.none": "工作区干净",
+			// Section footer: the list previews its first N rows and this says how
+			// many more there are, instead of a bare "▾ 13".
+			"section.more": "显示全部 {count} 项",
+			"section.less": "只看前几项",
 			"diff.title": "差异",
 			"diff.open": "查看差异",
 			"diff.close": "关闭差异",
@@ -137,6 +144,7 @@ window.__ModuleLoader__.load({
 			"panel.title": "Git",
 			"panel.collapse": "Collapse",
 			"refresh.aria": "Refresh Git status",
+			"refresh.busy": "Refreshing…",
 			"branch.aria": "Current git branch",
 			"switch.aria": "Switch branch",
 			"switch.dirtyWarn": "{count} uncommitted file(s) (e.g. {paths}) may block the switch — commit or stash first",
@@ -174,10 +182,14 @@ window.__ModuleLoader__.load({
 			"generate.truncated": "The model hit its token cap before writing anything (a reasoning model spends that budget thinking first) — trying again usually works",
 			"generate.cancelled": "Draft cancelled",
 			"generate.failed": "Draft failed",
+			"generate.failedDetail": "Draft failed: {message}",
+			"generate.failedRoute": "Draft failed: {message} (route {provider} / {model})",
 			"commit.placeholder": "Commit message (multi-line allowed, Ctrl+Enter commits)…",
 			"commit.empty": "Enter a commit message",
-			"changes.title": "Changes ({count})",
+			"changes.title": "Changes",
 			"changes.none": "Working tree clean",
+			"section.more": "Show all {count}",
+			"section.less": "Show fewer",
 			"diff.title": "Diff",
 			"diff.open": "View diff",
 			"diff.close": "Close diff",
@@ -243,7 +255,12 @@ window.__ModuleLoader__.load({
 			panel: {
 				position: "fixed",
 				// Sit above the composer card so the expanded panel never covers
-				// the input box (the input.left pill sits in the tool row).
+				// the input box. 168px is a measurement of the composer stack
+				// (card + tool row + the dock band), not a published contract:
+				// ui-conversation keeps that geometry in its own module CSS
+				// (`--dsh-composer-stack-gap` etc.). If the composer grows or
+				// shrinks, re-measure here and in DIFF_PANEL_HEIGHT below — the
+				// panel is anchored by `bottom`, so both move together.
 				bottom: 168,
 				left: "50%",
 				transform: "translateX(-50%)",
@@ -269,8 +286,8 @@ window.__ModuleLoader__.load({
 				display: "flex",
 				alignItems: "center",
 				gap: 8,
-				padding: "8px 12px",
-				borderBottom: "1px solid var(--dsw-alias-border-l2, rgba(127,127,127,0.2))",
+				padding: "8px 10px",
+				borderBottom: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.22))",
 				flex: "none",
 				cursor: "move",
 				userSelect: "none",
@@ -284,11 +301,39 @@ window.__ModuleLoader__.load({
 				fontSize: 13,
 				fontWeight: 600,
 				color: "var(--dsw-alias-label-primary, #e5e7eb)",
+				flex: "none",
+				whiteSpace: "nowrap"
+			},
+			// The workspace path takes the header's slack: it is the one field whose
+			// truncation must never move the buttons beside it.
+			cwdPath: {
 				flex: "1",
 				minWidth: 0,
 				overflow: "hidden",
 				textOverflow: "ellipsis",
-				whiteSpace: "nowrap"
+				whiteSpace: "nowrap",
+				fontSize: 11,
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
+				textAlign: "right"
+			},
+			// Square ghost icon button: the panel's own chrome (refresh / collapse).
+			iconButton: {
+				flex: "none",
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: 24,
+				height: 24,
+				padding: 0,
+				border: "1px solid transparent",
+				borderRadius: 6,
+				background: "transparent",
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
+				font: "inherit",
+				fontSize: 13,
+				lineHeight: "20px",
+				boxSizing: "border-box",
+				cursor: "pointer"
 			},
 			body: {
 				flex: "1",
@@ -299,9 +344,36 @@ window.__ModuleLoader__.load({
 			row: {
 				display: "flex",
 				alignItems: "center",
-				gap: 8,
+				gap: 6,
 				margin: "6px 0"
 			},
+			// One action row inside a card: the gap is owned by the card, not the row.
+			rowTight: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				minWidth: 0
+			},
+			// Equal-width action buttons: a row of auto-width labels was the messy
+			// part of the old layout — every group now shares the row evenly.
+			grow: {
+				flex: "1 1 0",
+				minWidth: 0,
+				padding: "0 6px",
+				textAlign: "center"
+			},
+			// Card grouping the whole commit flow (stage → draft → message → commit).
+			card: {
+				margin: "6px 0",
+				padding: 8,
+				display: "flex",
+				flexDirection: "column",
+				gap: 6,
+				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.22))",
+				borderRadius: 8,
+				background: "var(--dsw-alias-bg-layer-1, rgba(127,127,127,0.06))",
+				minWidth: 0
+			},
 			warn: {
 				display: "flex",
 				alignItems: "center",
@@ -309,18 +381,22 @@ window.__ModuleLoader__.load({
 				margin: "6px 0",
 				padding: "6px 8px",
 				borderRadius: 8,
-				background: "var(--dsw-alias-state-warning-tertiary, rgba(245,158,11,0.14))",
-				border: "1px solid var(--dsw-alias-state-warning-secondary, rgba(245,158,11,0.4))",
-				color: "var(--dsw-alias-state-warning-primary, #f59e0b)",
+				background: "color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f0a020) 14%, transparent)",
+				border: "1px solid color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f0a020) 40%, transparent)",
+				color: "var(--dsw-alias-state-warn-primary, #f0a020)",
 				fontSize: 12,
 				lineHeight: "16px"
 			},
+			// The branch chip — only for the detached-HEAD notice, so it carries the
+			// warning colour rather than the accent.
 			chip: {
-				background: "var(--dsw-alias-surface-tertiary, rgba(127,127,127,0.12))",
-				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
-				borderRadius: 999,
+				flex: "none",
+				maxWidth: "62%",
 				padding: "0 8px",
-				fontWeight: 500,
+				borderRadius: 6,
+				background: "color-mix(in srgb, var(--dsw-alias-state-warn-primary, #f0a020) 16%, transparent)",
+				color: "var(--dsw-alias-state-warn-primary, #f0a020)",
+				fontWeight: 600,
 				fontSize: 12,
 				lineHeight: "20px",
 				overflow: "hidden",
@@ -328,40 +404,58 @@ window.__ModuleLoader__.load({
 				whiteSpace: "nowrap"
 			},
 			dirty: {
+				flex: "none",
 				color: "var(--dsw-alias-state-warn-primary, #f0a020)",
 				fontWeight: 600,
 				fontSize: 12
 			},
 			meta: {
-				color: "var(--dsw-alias-label-quaternary, #6b7280)",
-				fontSize: 12
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
+				fontSize: 11
 			},
 			button: {
-				background: "var(--dsw-alias-interactive-bg-hover-solid, rgba(127,127,127,0.14))",
+				background: "color-mix(in srgb, var(--dsw-alias-label-primary, #e5e7eb) 8%, transparent)",
 				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.3))",
-				borderRadius: 8,
-				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
+				borderRadius: 7,
+				color: "var(--dsw-alias-label-primary, #e5e7eb)",
 				font: "inherit",
 				fontSize: 12,
-				lineHeight: "22px",
+				lineHeight: "24px",
+				height: 26,
 				padding: "0 10px",
+				boxSizing: "border-box",
 				cursor: "pointer",
-				flex: "none"
+				flex: "none",
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
 			},
 			buttonPrimary: {
-				background: "var(--dsw-alias-state-business-primary, #4f8cff)",
+				// The harness's own primary button: the label token IS the fill, with
+				// `label-primary-foreground` as the text on top. It reads near-black on
+				// light and near-white on dark (an inverted contrast button).
+				// `--dsw-alias-brand-primary` is that same contrast colour, NOT an
+				// accent — pairing it with `#fff` text made 推送 a white block with
+				// invisible text in the dark theme, and 提交 an empty grey box.
+				background: "var(--dsw-alias-button-primary-fill, var(--dsw-alias-label-primary, #e5e7eb))",
 				border: "1px solid transparent",
-				borderRadius: 8,
-				color: "#fff",
+				borderRadius: 7,
+				color: "var(--dsw-alias-label-primary-foreground, var(--dsw-alias-bg-base, #1e1e1e))",
 				font: "inherit",
 				fontSize: 12,
-				lineHeight: "22px",
+				fontWeight: 600,
+				lineHeight: "24px",
+				height: 26,
 				padding: "0 10px",
+				boxSizing: "border-box",
 				cursor: "pointer",
-				flex: "none"
+				flex: "none",
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				textOverflow: "ellipsis"
 			},
 			buttonDisabled: {
-				opacity: 0.5,
+				opacity: 0.4,
 				cursor: "default"
 			},
 			select: {
@@ -369,14 +463,16 @@ window.__ModuleLoader__.load({
 				// theme (dark list on dark pages) instead of the OS default
 				// white; option/optgroup styles above reinforce it.
 				colorScheme: "light dark",
-				background: "var(--dsw-alias-bg-layer-1, rgba(127,127,127,0.1))",
-				border: "1px solid var(--dsw-alias-separator-primary, rgba(127,127,127,0.25))",
-				borderRadius: 8,
-				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
+				background: "var(--dsw-alias-bg-layer-2, rgba(127,127,127,0.1))",
+				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.3))",
+				borderRadius: 7,
+				color: "var(--dsw-alias-label-primary, #e5e7eb)",
 				font: "inherit",
 				fontSize: 12,
-				lineHeight: "20px",
-				padding: "2px 8px",
+				lineHeight: "24px",
+				height: 26,
+				padding: "0 6px",
+				boxSizing: "border-box",
 				maxWidth: 220,
 				cursor: "pointer",
 				flex: "1",
@@ -384,14 +480,16 @@ window.__ModuleLoader__.load({
 				outline: "none"
 			},
 			input: {
-				background: "transparent",
-				border: "1px solid var(--dsw-alias-separator-primary, rgba(127,127,127,0.25))",
-				borderRadius: 8,
+				background: "var(--dsw-alias-bg-layer-2, rgba(127,127,127,0.1))",
+				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.3))",
+				borderRadius: 7,
 				color: "var(--dsw-alias-label-primary, #e5e7eb)",
 				font: "inherit",
 				fontSize: 12,
-				lineHeight: "20px",
-				padding: "2px 8px",
+				lineHeight: "24px",
+				height: 26,
+				padding: "0 8px",
+				boxSizing: "border-box",
 				flex: "1",
 				minWidth: 0,
 				outline: "none"
@@ -400,47 +498,123 @@ window.__ModuleLoader__.load({
 			// silently strips every line feed, so a drafted subject+body would lose
 			// its body before the request was ever sent.
 			textarea: {
-				background: "transparent",
-				border: "1px solid var(--dsw-alias-separator-primary, rgba(127,127,127,0.25))",
-				borderRadius: 8,
+				background: "var(--dsw-alias-bg-layer-2, rgba(127,127,127,0.1))",
+				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.3))",
+				borderRadius: 7,
 				color: "var(--dsw-alias-label-primary, #e5e7eb)",
 				font: "inherit",
 				fontSize: 12,
-				lineHeight: "18px",
+				lineHeight: "17px",
 				padding: "4px 8px",
+				minHeight: 46,
 				flex: "1",
 				minWidth: 0,
+				boxSizing: "border-box",
 				outline: "none",
 				resize: "vertical",
 				overflowY: "auto"
 			},
-			sectionTitle: {
+			// ── list sections (changes / recent commits) ─────────────────────
+			// A section is a card: a full-width header toggle (chevron + label +
+			// count) and its rows. Collapsing hides the rows outright — the old
+			// header doubled as "show more" for a preview, so its chevron pointed
+			// the wrong way for a list that was already on screen.
+			section: {
+				marginTop: 8,
+				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.22))",
+				borderRadius: 8,
+				background: "var(--dsw-alias-bg-layer-1, rgba(127,127,127,0.06))",
+				overflow: "hidden"
+			},
+			sectionHeader: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				width: "100%",
+				padding: "6px 8px",
+				background: "transparent",
+				border: "none",
+				color: "var(--dsw-alias-label-primary, #e5e7eb)",
+				font: "inherit",
 				fontSize: 12,
 				fontWeight: 600,
-				color: "var(--dsw-alias-label-tertiary, #9aa0a6)",
-				margin: "10px 0 4px",
+				lineHeight: "18px",
+				boxSizing: "border-box",
+				cursor: "pointer",
+				textAlign: "left"
+			},
+			sectionChevron: {
+				flex: "none",
+				width: 10,
+				fontSize: 10,
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)"
+			},
+			sectionLabel: {
+				flex: "1",
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			sectionCount: {
+				flex: "none",
+				padding: "0 6px",
+				borderRadius: 999,
+				background: "color-mix(in srgb, var(--dsw-alias-label-primary, #e5e7eb) 10%, transparent)",
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
+				fontSize: 11,
+				fontWeight: 500,
+				lineHeight: "16px"
+			},
+			sectionBody: {
+				padding: "0 4px 4px"
+			},
+			sectionEmpty: {
+				padding: "2px 6px 6px",
+				fontSize: 12,
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)"
+			},
+			sectionMore: {
+				display: "block",
+				width: "100%",
+				padding: "2px 0 4px",
+				background: "transparent",
+				border: "none",
+				color: "var(--dsw-alias-link, #4f8cff)",
+				font: "inherit",
+				fontSize: 11,
 				cursor: "pointer",
-				userSelect: "none"
+				textAlign: "center"
 			},
 			changeRow: {
 				display: "flex",
 				alignItems: "center",
 				gap: 8,
 				fontSize: 12,
-				lineHeight: "20px",
-				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
-				padding: "1px 6px",
-				margin: "0 -6px",
+				lineHeight: "18px",
+				padding: "3px 6px",
 				borderRadius: 6,
 				minWidth: 0,
 				cursor: "pointer"
 			},
 			changePath: {
+				flex: "1",
+				minWidth: 0,
 				overflow: "hidden",
 				textOverflow: "ellipsis",
 				whiteSpace: "nowrap",
-				flex: "1",
-				minWidth: 0
+				fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+				color: "var(--dsw-alias-label-primary, #e5e7eb)"
+			},
+			// Per-status chip; `color-mix(currentColor)` gives every status the same
+			// tint shape from whichever state colour it carries.
+			changeTag: {
+				flex: "none",
+				padding: "0 6px",
+				borderRadius: 4,
+				fontSize: 11,
+				lineHeight: "16px",
+				background: "color-mix(in srgb, currentColor 15%, transparent)"
 			},
 			// A change row is the diff viewer's navigation: it has to read as a
 			// control, and to show which file the right-hand pane is showing.
@@ -449,14 +623,12 @@ window.__ModuleLoader__.load({
 				alignItems: "center",
 				gap: 8,
 				fontSize: 12,
-				lineHeight: "20px",
-				color: "var(--dsw-alias-label-primary, #e5e7eb)",
-				padding: "1px 6px",
-				margin: "0 -6px",
+				lineHeight: "18px",
+				padding: "3px 6px",
 				borderRadius: 6,
 				minWidth: 0,
 				cursor: "pointer",
-				background: "var(--dsw-alias-interactive-bg-hover-solid, rgba(127,127,127,0.18))"
+				background: "color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8cff) 15%, transparent)"
 			},
 			// ── two-pane (changes + diff) layout ────────────────────────────
 			// `bodySplit` replaces `body` while a file is selected: the left pane
@@ -528,9 +700,9 @@ window.__ModuleLoader__.load({
 				lineHeight: "18px",
 				padding: "0 8px",
 				borderRadius: 999,
-				border: "1px solid var(--dsw-alias-separator-primary, rgba(127,127,127,0.25))",
+				border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.25))",
 				background: "transparent",
-				color: "var(--dsw-alias-label-tertiary, #9aa0a6)",
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
 				font: "inherit",
 				fontSize: 11,
 				cursor: "pointer"
@@ -541,7 +713,7 @@ window.__ModuleLoader__.load({
 				padding: "0 8px",
 				borderRadius: 999,
 				border: "1px solid transparent",
-				background: "var(--dsw-alias-surface-tertiary, rgba(127,127,127,0.18))",
+				background: "color-mix(in srgb, var(--dsw-alias-state-business-primary, #4f8cff) 16%, transparent)",
 				color: "var(--dsw-alias-label-primary, #e5e7eb)",
 				font: "inherit",
 				fontSize: 11,
@@ -571,7 +743,7 @@ window.__ModuleLoader__.load({
 				width: 34,
 				textAlign: "right",
 				paddingRight: 6,
-				color: "var(--dsw-alias-label-quaternary, #6b7280)",
+				color: "var(--dsw-alias-label-tertiary, #6b7280)",
 				userSelect: "none",
 				WebkitUserSelect: "none"
 			},
@@ -595,7 +767,7 @@ window.__ModuleLoader__.load({
 				color: "var(--dsw-alias-state-business-primary, #4f8cff)"
 			},
 			diffMetaRow: {
-				color: "var(--dsw-alias-label-quaternary, #6b7280)"
+				color: "var(--dsw-alias-label-tertiary, #6b7280)"
 			},
 			diffNotice: {
 				margin: "6px 10px",
@@ -603,7 +775,7 @@ window.__ModuleLoader__.load({
 				borderRadius: 8,
 				fontSize: 12,
 				lineHeight: "18px",
-				background: "var(--dsw-alias-surface-tertiary, rgba(127,127,127,0.12))",
+				background: "var(--dsw-alias-bg-layer-2, rgba(127,127,127,0.12))",
 				color: "var(--dsw-alias-label-secondary, #c8ccd2)"
 			},
 			statusTag: {
@@ -612,22 +784,32 @@ window.__ModuleLoader__.load({
 				lineHeight: "16px",
 				padding: "0 6px",
 				borderRadius: 4,
-				background: "var(--dsw-alias-surface-tertiary, rgba(127,127,127,0.12))"
+				background: "color-mix(in srgb, var(--dsw-alias-label-primary, #e5e7eb) 10%, transparent)",
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)"
 			},
 			logRow: {
 				display: "flex",
 				alignItems: "center",
 				gap: 8,
 				fontSize: 12,
-				lineHeight: "20px",
-				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
-				padding: "1px 0",
+				lineHeight: "18px",
+				padding: "3px 6px",
+				borderRadius: 6,
 				minWidth: 0
 			},
 			logSha: {
 				flex: "none",
-				color: "var(--dsw-alias-state-business-primary, #4f8cff)",
-				fontFamily: "monospace"
+				fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+				fontSize: 11,
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)"
+			},
+			logSubject: {
+				flex: "1",
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				color: "var(--dsw-alias-label-primary, #e5e7eb)"
 			},
 			output: {
 				// Sits at the top of the body, so the breathing room belongs below it.
@@ -667,8 +849,8 @@ window.__ModuleLoader__.load({
 			outputDetail: {
 				marginTop: 6,
 				paddingTop: 6,
-				borderTop: "1px solid var(--dsw-alias-border-secondary, rgba(127,127,127,0.35))",
-				fontFamily: "monospace",
+				borderTop: "1px solid color-mix(in srgb, currentColor 30%, transparent)",
+				fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 				fontSize: 11,
 				lineHeight: "16px",
 				wordBreak: "break-word",
@@ -677,11 +859,11 @@ window.__ModuleLoader__.load({
 				whiteSpace: "pre-wrap"
 			},
 			outputOk: {
-				background: "var(--dsw-alias-state-success-tertiary, rgba(52,199,89,0.12))",
+				background: "color-mix(in srgb, var(--dsw-alias-state-success-primary, #34c759) 14%, transparent)",
 				color: "var(--dsw-alias-state-success-primary, #34c759)"
 			},
 			outputError: {
-				background: "var(--dsw-alias-state-error-tertiary, rgba(239,68,68,0.12))",
+				background: "color-mix(in srgb, var(--dsw-alias-state-error-primary, #ef4444) 14%, transparent)",
 				color: "var(--dsw-alias-state-error-primary, #ef4444)"
 			},
 			dockWrap: {
@@ -691,7 +873,7 @@ window.__ModuleLoader__.load({
 				maxWidth: "100%",
 				fontSize: 12,
 				lineHeight: "20px",
-				color: "var(--dsw-alias-label-tertiary, #9aa0a6)",
+				color: "var(--dsw-alias-label-secondary, #c8ccd2)",
 				whiteSpace: "nowrap",
 				overflow: "hidden",
 				textOverflow: "ellipsis",
@@ -705,6 +887,33 @@ window.__ModuleLoader__.load({
 			return text.length > max ? text.slice(0, max - 1) + "…" : text;
 		}
 
+		/**
+		 * The model route one session's AI draft should use, or null to let the
+		 * host fall back to its first registered provider route.
+		 *
+		 * Two host generations carry the same `modelSelection` projection: the
+		 * row's own `projectionValues` (present since 0.1.6) and, since 0.1.7,
+		 * the snapshot's per-session `projectionsBySession[id].values`. Read the
+		 * row first, then the shared record, so neither generation loses a route
+		 * the user already chose. `next` (a pending pick) beats `lastUsed`.
+		 *
+		 * @param summary - `byId[sessionId]` row, when the snapshot has one.
+		 * @param sessions - the whole `useSessions` snapshot (may be undefined).
+		 * @param sessionId - the bound session id, or null/undefined.
+		 * @returns `{ provider, model }`, or null.
+		 */
+		function sessionModelRoute(summary, sessions, sessionId) {
+			var selection = summary && summary.projectionValues ? summary.projectionValues.modelSelection : undefined;
+			if (!selection && sessionId !== null && sessionId !== undefined && sessions && sessions.projectionsBySession) {
+				var record = sessions.projectionsBySession[sessionId];
+				selection = record && record.values ? record.values.modelSelection : undefined;
+			}
+			if (!selection) return null;
+			var effective = selection.next || selection.lastUsed;
+			if (!effective || !effective.provider || !effective.model) return null;
+			return { provider: effective.provider, model: effective.model };
+		}
+
 		/**
 		 * Strip ANSI/VT escape sequences from git's human-readable output.
 		 *
@@ -824,6 +1033,84 @@ window.__ModuleLoader__.load({
 			}, children);
 		}
 
+		/** Rows a collapsed-by-default list shows before its "show all" footer. */
+		var CHANGES_PREVIEW = 8;
+		/** Same, for the recent-commit list (shorter rows, less to say). */
+		var LOG_PREVIEW = 5;
+
+		/** The state colour one porcelain status carries, in theme tokens. */
+		function changeTagStyle(status) {
+			var color = status === "added" || status === "untracked"
+				? "var(--dsw-alias-state-success-primary, #34c759)"
+				: status === "deleted" || status === "conflict"
+					? "var(--dsw-alias-state-error-primary, #ef4444)"
+					: status === "renamed" || status === "copied"
+						// `state-business-primary` is the real accent (deepseek blue);
+						// `brand-primary` is the inverted contrast colour and would make
+						// this chip white-on-white in the dark theme.
+						? "var(--dsw-alias-state-business-primary, #4f8cff)"
+						: status === "modified" || status === "changed"
+							? "var(--dsw-alias-state-warn-primary, #f0a020)"
+							: "var(--dsw-alias-label-secondary, #c8ccd2)";
+			// `changeTag`'s background is `color-mix(currentColor…)`, so the tint
+			// follows whichever colour the status carries.
+			return Object.assign({}, S.changeTag, { color: color });
+		}
+
+		/**
+		 * One collapsible list section: a full-width header toggle (chevron +
+		 * label + count) and, while open, its rows plus a footer that expands the
+		 * preview. Two separate states on purpose — the header collapses the
+		 * section, the footer widens it — because one flag doing both made the
+		 * chevron point the wrong way for a list that was already on screen.
+		 *
+		 * @param spec - `{ hook, label, count, open, all, cap, empty, rows, onToggle, onMore }`.
+		 * @param t - the locale translator.
+		 * @returns the section element.
+		 */
+		function sectionView(spec, t) {
+			var children = [h("button", {
+				key: "header",
+				type: "button",
+				"data-dsh-git": spec.hook + "-header",
+				style: S.sectionHeader,
+				"aria-expanded": spec.open ? "true" : "false",
+				onClick: spec.onToggle
+			}, [
+				h("span", { key: "chevron", style: S.sectionChevron }, spec.open ? "▾" : "▸"),
+				h("span", { key: "label", style: S.sectionLabel }, spec.label),
+				h("span", { key: "count", style: S.sectionCount }, String(spec.count))
+			])];
+			if (spec.open) {
+				var previewed = spec.all || spec.count <= spec.cap;
+				children.push(h("div", {
+					key: "body",
+					"data-dsh-git": spec.hook + "-body",
+					style: S.sectionBody
+				}, spec.count === 0
+					? h("div", { key: "empty", style: S.sectionEmpty }, spec.empty)
+					: (previewed ? spec.rows : spec.rows.slice(0, spec.cap))));
+				if (!previewed) {
+					children.push(h("button", {
+						key: "more",
+						type: "button",
+						"data-dsh-git": spec.hook + "-more",
+						style: S.sectionMore,
+						onClick: spec.onMore
+					}, t("section.more", { count: spec.count })));
+				} else if (spec.all && spec.count > spec.cap) {
+					children.push(h("button", {
+						key: "more",
+						type: "button",
+						"data-dsh-git": spec.hook + "-more",
+						style: S.sectionMore,
+						onClick: spec.onMore
+					}, t("section.less")));
+				}
+			}
+			return h("div", { key: spec.hook, "data-dsh-git": spec.hook, style: S.section }, children);
+		}
+
 		/** Call one /dsh-git-rpc endpoint. */
 		function rpc(ctx, endpoint, args) {
 			return ctx.connection.rpc.call("/dsh-git-rpc", endpoint, { args: args || {} }).then(sanitizeResult);
@@ -849,8 +1136,11 @@ window.__ModuleLoader__.load({
 				commit: function (cwd, message) { return rpc(ctx, "commit", { cwd: cwd, message: message }); },
 				push: function (cwd) { return rpc(ctx, "push", { cwd: cwd }); },
 				log: function (cwd) { return rpc(ctx, "log", { cwd: cwd, count: 10 }); },
-				generateMessage: function (cwd, mode, provider, model) {
-					return rpc(ctx, "generateMessage", { cwd: cwd, mode: mode, provider: provider, model: model });
+				generateMessage: function (cwd, mode, provider, model, sessionId) {
+					// The session travels with the request: session-labelled
+					// providers reject an unidentified call, and the host forwards
+					// a session id to its adapter only when one is present.
+					return rpc(ctx, "generateMessage", { cwd: cwd, mode: mode, provider: provider, model: model, sessionId: sessionId });
 				}
 			};
 
@@ -881,6 +1171,7 @@ window.__ModuleLoader__.load({
 					commits: [],
 					error: null,
 					busy: null,
+					refreshing: false,
 					lastResult: null,
 					panelOpen: false
 				};
@@ -942,7 +1233,19 @@ window.__ModuleLoader__.load({
 
 			function doRefresh(cwd) {
 				var mySeq = ++seq;
-				emit(Object.assign({}, state, { sessionId: sessionId, cwd: cwd, phase: cwd ? "loading" : "idle", error: null }));
+				// Re-reading the SAME workspace keeps what is already on screen.
+				// Flipping the body to "loading" for a few hundred milliseconds
+				// collapsed the whole workbench and snapped it back — that is the
+				// jump you saw after clicking ↻ or any action button. Only a first
+				// load (or a workspace switch) has nothing to keep.
+				var keep = cwd !== null && cwd === state.cwd && state.phase === "ready";
+				emit(Object.assign({}, state, {
+					sessionId: sessionId,
+					cwd: cwd,
+					phase: keep ? state.phase : (cwd ? "loading" : "idle"),
+					refreshing: keep,
+					error: keep ? state.error : null
+				}));
 				if (!cwd) return Promise.resolve();
 				return Promise.all([
 					verbs.status(cwd),
@@ -1052,7 +1355,7 @@ window.__ModuleLoader__.load({
 		};
 		var OPTGROUP_STYLE = {
 			background: "var(--dsw-alias-bg-base, #1e1e1e)",
-			color: "var(--dsw-alias-label-tertiary, #9aa0a6)",
+			color: "var(--dsw-alias-label-secondary, #c8ccd2)",
 			fontWeight: 600
 		};
 
@@ -1203,6 +1506,32 @@ window.__ModuleLoader__.load({
 		var PANEL_MARGIN = 24;
 		/** Grab width of the panel's right-edge resize handle. */
 		var PANEL_RESIZE_GRIP = 6;
+		/**
+		 * Height the panel takes while the diff pane is open: a fixed height, not a
+		 * cap. With a cap the panel's height followed its content, so the moment the
+		 * diff arrived the pane grew and — anchored by `bottom` — the whole panel
+		 * jumped (the flash you saw when opening a diff). The `min()` keeps the panel
+		 * on screen in a short window (168px is the panel's bottom offset).
+		 */
+		var DIFF_PANEL_HEIGHT = "min(72vh, calc(100vh - 184px))";
+
+		/**
+		 * The panel's box in either mode: the compact single column, or workbench +
+		 * diff with a height that cannot move once the pane is open.
+		 * @param selected - the change the diff pane shows, or null.
+		 * @param diffWidth - width of the diff pane.
+		 * @returns the panel's inline style.
+		 */
+		function panelBoxStyle(selected, diffWidth) {
+			var box = Object.assign({}, S.panel, {
+				width: selected === null ? S.panel.width : DIFF_LEFT_PANE_WIDTH + PANEL_BORDER_WIDTH + diffWidth
+			});
+			if (selected !== null) {
+				box.height = DIFF_PANEL_HEIGHT;
+				box.maxHeight = DIFF_PANEL_HEIGHT;
+			}
+			return box;
+		}
 
 		/** The last path segment, for chip-sized text. */
 		function baseName(file) {
@@ -1510,10 +1839,14 @@ window.__ModuleLoader__.load({
 			// with "selector is not a function".
 			var sessions = useSessions(function (s) { return s; });
 
-			// NOTE: the shell's seed react-dom is an experimental 18.3.1-next
-			// build where React.useSyncExternalStore misbehaves (returns
-			// undefined / throws), so subscribe through the classic
-			// useState + useEffect pattern instead — safe on any React.
+			// NOTE: subscribe through the classic useState + useEffect pattern
+			// instead of React.useSyncExternalStore, so this store's own
+			// subscription is independent of whichever implementation the seed
+			// ships. This is about keeping one dependency out of the path, not a
+			// claim that the seeded build is broken: the framework's own
+			// `useSessions` prop already goes through the renderer's
+			// useSyncExternalStoreWithSelector, so an unusable seed would break
+			// the session list before it broke this panel.
 			var stateRef = React.useState(function () { return store.getSnapshot(); });
 			var state = stateRef[0];
 			var setState = stateRef[1];
@@ -1534,16 +1867,10 @@ window.__ModuleLoader__.load({
 			var sessionId = state.sessionId;
 			var currentSummary = sessionId !== null && sessions && sessions.byId ? sessions.byId[sessionId] : undefined;
 
-			// The session's own model route, when one is recorded: the durable
-			// `modelSelection` projection, pending pick first, last used second.
-			// Generation falls back to the host's first registered route.
-			var sessionRoute = (function () {
-				var selection = currentSummary && currentSummary.projectionValues ? currentSummary.projectionValues.modelSelection : undefined;
-				if (!selection) return null;
-				var effective = selection.next || selection.lastUsed;
-				if (!effective || !effective.provider || !effective.model) return null;
-				return { provider: effective.provider, model: effective.model };
-			})();
+			// The session's own model route, when one is recorded. Both projection
+			// surfaces it can come from are handled by sessionModelRoute; a
+			// missing route leaves generation to the host's first registered one.
+			var sessionRoute = sessionModelRoute(currentSummary, sessions, sessionId);
 
 			var messageRef = React.useState("");
 			var message = messageRef[0];
@@ -1553,12 +1880,22 @@ window.__ModuleLoader__.load({
 			var generateModeRef = React.useState("staged");
 			var generateMode = generateModeRef[0];
 			var setGenerateMode = generateModeRef[1];
-			var changesOpenRef = React.useState(false);
+			// Sections start OPEN: a Git panel that hides the user's own changes
+			// behind a chevron is a panel that looks empty. Collapsing is the
+			// explicit choice, and widening a long list past its preview is a
+			// separate one (`…All`), so the chevron always tells the truth.
+			var changesOpenRef = React.useState(true);
 			var changesOpen = changesOpenRef[0];
 			var setChangesOpen = changesOpenRef[1];
-			var logOpenRef = React.useState(false);
+			var changesAllRef = React.useState(false);
+			var changesAll = changesAllRef[0];
+			var setChangesAll = changesAllRef[1];
+			var logOpenRef = React.useState(true);
 			var logOpen = logOpenRef[0];
 			var setLogOpen = logOpenRef[1];
+			var logAllRef = React.useState(false);
+			var logAll = logAllRef[0];
+			var setLogAll = logAllRef[1];
 			// Whether the last operation's git output is expanded. A new result
 			// always starts collapsed: the summary line is the notification, the
 			// raw output is opt-in.
@@ -1820,11 +2157,7 @@ window.__ModuleLoader__.load({
 			// while nothing is selected, and the two-pane width (workbench + diff)
 			// once a file is open. Dragging the panel's right edge is what resizes
 			// the diff, so the panel grows and shrinks with it.
-			var panelWidth = selected === null ? S.panel.width : DIFF_LEFT_PANE_WIDTH + PANEL_BORDER_WIDTH + diffWidth;
-			var panelStyle = Object.assign({}, S.panel, {
-				width: panelWidth,
-				maxHeight: selected === null ? S.panel.maxHeight : "72vh"
-			});
+			var panelStyle = panelBoxStyle(selected, diffWidth);
 			if (dragPos) {
 				panelStyle = Object.assign(panelStyle, {
 					left: dragPos.left,
@@ -1858,20 +2191,24 @@ window.__ModuleLoader__.load({
 				"data-dsh-git": "panel-drag"
 			}, [
 				h("span", { key: "title", style: S.title }, "⎇ " + t("panel.title")),
-				h("span", { key: "cwd", style: S.meta, title: cwd }, shortText(cwd, 60)),
+				h("span", { key: "cwd", style: S.cwdPath, title: cwd }, shortText(cwd, 80)),
 				h("button", {
 					key: "refresh",
 					type: "button",
-					style: S.button,
-					disabled: busy !== null,
+					// A re-read keeps the whole workbench on screen and reports itself
+					// here instead of collapsing the body to a "loading" line and
+					// snapping back — that flash was the jump.
+					style: Object.assign({}, S.iconButton, busy !== null || state.refreshing ? S.buttonDisabled : null),
+					disabled: busy !== null || state.refreshing === true,
 					onClick: function () { store.refresh(state.cwd); },
 					"aria-label": t("refresh.aria"),
-					title: t("refresh.aria")
-				}, "↻"),
+					"aria-busy": state.refreshing === true ? "true" : "false",
+					title: state.refreshing === true ? t("refresh.busy") : t("refresh.aria")
+				}, state.refreshing === true ? "⋯" : "↻"),
 				h("button", {
 					key: "collapse",
 					type: "button",
-					style: S.button,
+					style: S.iconButton,
 					onClick: function () { store.setPanelOpen(false); },
 					"aria-label": t("panel.collapse"),
 					title: t("panel.collapse")
@@ -1896,15 +2233,21 @@ window.__ModuleLoader__.load({
 			} else if (!state.repo) {
 				bodyChildren.push(h("div", { key: "norepo", style: S.meta }, t("notRepo")));
 			} else {
-				// status line
+				// status line — the branch itself lives in the select right below,
+				// so this row carries only what the select cannot say: pending
+				// changes and how the branch sits against its upstream.
 				var statusLine = [];
 				var branchText = state.branch;
 				if (!branchText && state.detached) {
 					branchText = t("detached") + (state.oid ? " " + state.oid.slice(0, 7) : "");
 				}
-				statusLine.push(h("span", { key: "chip", style: S.chip, title: branchText || cwd }, branchText || "—"));
+				if (state.detached) {
+					statusLine.push(h("span", { key: "chip", style: S.chip, title: branchText }, branchText));
+				}
 				if (state.dirty > 0) {
-					statusLine.push(h("span", { key: "dirty", style: S.dirty, title: t("dirty", { count: state.dirty }) }, "● " + state.dirty));
+					statusLine.push(h("span", { key: "dirty", style: S.dirty, title: t("dirty", { count: state.dirty }) }, "● " + t("dirty", { count: state.dirty })));
+				} else {
+					statusLine.push(h("span", { key: "clean", style: S.meta }, "✓ " + t("changes.none")));
 				}
 				if (state.ahead > 0 || state.behind > 0) {
 					statusLine.push(h("span", { key: "ab", style: S.meta }, "↑" + state.ahead + " ↓" + state.behind));
@@ -2024,94 +2367,96 @@ window.__ModuleLoader__.load({
 					]));
 				}
 
-				// network + commit row
+				// network actions — three equal columns. Auto-width labels used to
+				// give each button a different width for the same job, which is what
+				// made this row read as a pile rather than a toolbar.
 				bodyChildren.push(h("div", { key: "net", style: S.row }, [
 					h("button", {
 						key: "fetch",
 						type: "button",
-						style: Object.assign({}, S.button, busy !== null ? S.buttonDisabled : null),
+						style: Object.assign({}, S.button, S.grow, busy !== null ? S.buttonDisabled : null),
 						disabled: busy !== null,
 						onClick: function () { store.act("fetch", function () { return store.verbs.fetch(state.cwd); }); }
 					}, busy === "fetch" ? t("busy.fetch") : t("action.fetch")),
 					h("button", {
 						key: "pull",
 						type: "button",
-						style: Object.assign({}, S.button, busy !== null ? S.buttonDisabled : null),
+						style: Object.assign({}, S.button, S.grow, busy !== null ? S.buttonDisabled : null),
 						disabled: busy !== null,
 						onClick: function () { store.act("pull", function () { return store.verbs.pull(state.cwd); }); }
 					}, busy === "pull" ? t("busy.pull") : t("action.pull")),
 					h("button", {
 						key: "push",
 						type: "button",
-						style: Object.assign({}, S.buttonPrimary, busy !== null ? S.buttonDisabled : null),
+						style: Object.assign({}, S.buttonPrimary, S.grow, busy !== null ? S.buttonDisabled : null),
 						disabled: busy !== null,
 						onClick: function () { store.act("push", function () { return store.verbs.push(state.cwd); }); }
 					}, busy === "push" ? t("busy.push") : t("action.push"))
 				]));
 
-				// commit tooling: stage everything, pick the draft basis, draft.
-				// Ordering mirrors the real workflow (stage → draft → commit) and
-				// keeps the 400px panel readable by splitting the tool row from the
-				// message row.
+				// commit flow, one card: stage all → draft basis + draft → message →
+				// commit. Grouping it keeps the 400px column readable and puts the
+				// primary action (提交) in the same surface as the text it sends.
 				var noChanges = state.dirty === 0;
-				bodyChildren.push(h("div", { key: "commitTools", style: S.row }, [
-					h("button", {
-						key: "stage",
-						type: "button",
-						style: Object.assign({}, S.button, busy !== null || noChanges ? S.buttonDisabled : null),
-						disabled: busy !== null || noChanges,
-						title: noChanges ? t("changes.none") : t("action.stage"),
-						onClick: function () { store.act("stage", function () { return store.verbs.stage(state.cwd); }); }
-					}, busy === "stage" ? t("busy.stage") : t("action.stage")),
-					h("select", {
-						key: "mode",
-						style: Object.assign({}, S.select, { flex: "none", width: "auto", maxWidth: 96 }),
-						value: generateMode,
-						disabled: busy !== null,
-						title: t("generate.mode.title"),
-						"aria-label": t("generate.mode.title"),
-						onChange: function (event) { setGenerateMode(event.target.value); }
-					}, [
-						h("option", { key: "staged", value: "staged", style: OPTION_STYLE }, t("generate.mode.staged")),
-						h("option", { key: "unstaged", value: "unstaged", style: OPTION_STYLE }, t("generate.mode.unstaged")),
-						h("option", { key: "all", value: "all", style: OPTION_STYLE }, t("generate.mode.all"))
+				bodyChildren.push(h("div", { key: "commitCard", style: S.card }, [
+					h("div", { key: "tools", style: S.rowTight }, [
+						h("button", {
+							key: "stage",
+							type: "button",
+							style: Object.assign({}, S.button, S.grow, busy !== null || noChanges ? S.buttonDisabled : null),
+							disabled: busy !== null || noChanges,
+							title: noChanges ? t("changes.none") : t("action.stage"),
+							onClick: function () { store.act("stage", function () { return store.verbs.stage(state.cwd); }); }
+						}, busy === "stage" ? t("busy.stage") : t("action.stage")),
+						h("select", {
+							key: "mode",
+							style: Object.assign({}, S.select, S.grow, { maxWidth: "none" }),
+							value: generateMode,
+							disabled: busy !== null,
+							title: t("generate.mode.title"),
+							"aria-label": t("generate.mode.title"),
+							onChange: function (event) { setGenerateMode(event.target.value); }
+						}, [
+							h("option", { key: "staged", value: "staged", style: OPTION_STYLE }, t("generate.mode.staged")),
+							h("option", { key: "unstaged", value: "unstaged", style: OPTION_STYLE }, t("generate.mode.unstaged")),
+							h("option", { key: "all", value: "all", style: OPTION_STYLE }, t("generate.mode.all"))
+						]),
+						h("button", {
+							key: "generate",
+							type: "button",
+							style: Object.assign({}, S.button, S.grow, busy !== null || noChanges ? S.buttonDisabled : null),
+							disabled: busy !== null || noChanges,
+							title: noChanges ? t("changes.none") : t("action.generate"),
+							onClick: doGenerate
+						}, busy === "generate" ? t("busy.generate") : "✨ " + t("action.generate"))
 					]),
-					h("button", {
-						key: "generate",
-						type: "button",
-						style: Object.assign({}, S.button, busy !== null || noChanges ? S.buttonDisabled : null),
-						disabled: busy !== null || noChanges,
-						title: noChanges ? t("changes.none") : t("action.generate"),
-						onClick: doGenerate
-					}, busy === "generate" ? t("busy.generate") : "✨ " + t("action.generate"))
-				]));
-
-				bodyChildren.push(h("div", { key: "commit", style: S.row }, [
-					h("textarea", {
-						key: "msg",
-						rows: 2,
-						style: S.textarea,
-						value: message,
-						placeholder: t("commit.placeholder"),
-						disabled: busy !== null,
-						onChange: function (event) { setMessage(event.target.value); },
-						// Enter inserts a newline (a message may have a body); the
-						// explicit commit chord is Ctrl/Cmd+Enter.
-						onKeyDown: function (event) {
-							if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && message.trim() !== "" && busy === null) {
-								event.preventDefault();
-								doCommit();
+					h("div", { key: "message", style: S.rowTight }, [
+						h("textarea", {
+							key: "msg",
+							rows: 2,
+							style: S.textarea,
+							value: message,
+							placeholder: t("commit.placeholder"),
+							disabled: busy !== null,
+							onChange: function (event) { setMessage(event.target.value); },
+							// Enter inserts a newline (a message may have a body); the
+							// explicit commit chord is Ctrl/Cmd+Enter.
+							onKeyDown: function (event) {
+								if (event.key === "Enter" && (event.ctrlKey || event.metaKey) && message.trim() !== "" && busy === null) {
+									event.preventDefault();
+									doCommit();
+								}
 							}
-						}
-					}),
-					h("button", {
-						key: "commit",
-						type: "button",
-						style: Object.assign({}, S.buttonPrimary, busy !== null || message.trim() === "" ? S.buttonDisabled : null),
-						disabled: busy !== null || message.trim() === "",
-						title: message.trim() === "" ? t("commit.empty") : undefined,
-						onClick: doCommit
-					}, busy === "commit" ? t("busy.commit") : t("action.commit"))
+						}),
+						h("button", {
+							key: "commit",
+							type: "button",
+							style: Object.assign({}, S.buttonPrimary, { alignSelf: "flex-end", padding: "0 14px" }, busy !== null || message.trim() === "" ? S.buttonDisabled : null),
+							disabled: busy !== null || message.trim() === "",
+							title: message.trim() === "" ? t("commit.empty") : undefined,
+							onClick: doCommit
+						}, busy === "commit" ? t("busy.commit") : t("action.commit"))
+					])
 				]));
 
 				function doCommit() {
@@ -2141,7 +2486,26 @@ window.__ModuleLoader__.load({
 					};
 					var text = known[details.code];
 					if (text === undefined) {
-						text = res && res.error && res.error.message ? String(res.error.message) : t("generate.failed");
+						// Unknown code (a transport failure, a provider rejection,
+						// …): lead with the localized sentence, keep the host's
+						// own words as the diagnosis, and name the route that
+						// failed — "which provider is broken" is the actionable
+						// part when a gateway refuses the call.
+						var detail = res && res.error && res.error.message ? String(res.error.message) : "";
+						var failedRoute = details.provider && details.model
+							? { provider: details.provider, model: details.model }
+							: null;
+						if (detail === "") {
+							text = t("generate.failed");
+						} else if (failedRoute !== null) {
+							text = t("generate.failedRoute", {
+								message: shortText(detail, 160),
+								provider: failedRoute.provider,
+								model: failedRoute.model
+							});
+						} else {
+							text = t("generate.failedDetail", { message: shortText(detail, 160) });
+						}
 					}
 					return { kind: "error", text: text };
 				}
@@ -2154,7 +2518,8 @@ window.__ModuleLoader__.load({
 							state.cwd,
 							generateMode,
 							route ? route.provider : undefined,
-							route ? route.model : undefined
+							route ? route.model : undefined,
+							state.sessionId === null ? undefined : state.sessionId
 						);
 					}, describeGenerate).then(function (res) {
 						if (res && res.ok === true && res.value && res.value.message) {
@@ -2163,79 +2528,67 @@ window.__ModuleLoader__.load({
 					});
 				}
 
-				// changes (one row per file) — collapsible, and the diff viewer's
-				// navigation: clicking a row opens that file's diff on the right.
-				var changesRow;
-				if (state.changes.length === 0) {
-					changesRow = h("div", { key: "none", style: S.meta }, t("changes.none"));
-				} else {
-					var shown = changesOpen ? state.changes : state.changes.slice(0, 8);
-					changesRow = h("div", { key: "list" }, shown.map(function (change, index) {
-						var file = change.file !== undefined ? change.file : change.path;
-						var origFile = change.origFile !== undefined ? change.origFile : null;
-						var isActive = selected !== null && selected.file === file && selected.origFile === origFile;
-						return h("div", {
-							key: index,
-							style: isActive ? S.changeRowActive : S.changeRow,
-							role: "button",
-							tabIndex: 0,
-							title: t("diff.open"),
-							"aria-label": t("diff.open") + " " + change.path,
-							"data-dsh-git": "change-row",
-							"data-active": isActive === true ? "true" : "false",
-							onClick: function () { selectChange(change); },
-							onKeyDown: function (event) {
-								if (event.key === "Enter" || event.key === " ") {
-									if (event.preventDefault) event.preventDefault();
-									selectChange(change);
-								}
+				// changes (one row per file) — the diff viewer's navigation:
+				// clicking a row opens that file's diff on the right. The chip
+				// trails the path so paths line up in one column and the eye can
+				// scan them; the status only has to say which kind of change it is.
+				var changesRows = state.changes.map(function (change, index) {
+					var file = change.file !== undefined ? change.file : change.path;
+					var origFile = change.origFile !== undefined ? change.origFile : null;
+					var isActive = selected !== null && selected.file === file && selected.origFile === origFile;
+					return h("div", {
+						key: index,
+						style: isActive ? S.changeRowActive : S.changeRow,
+						role: "button",
+						tabIndex: 0,
+						title: change.path,
+						"aria-label": t("diff.open") + " " + change.path,
+						"data-dsh-git": "change-row",
+						"data-active": isActive === true ? "true" : "false",
+						onClick: function () { selectChange(change); },
+						onKeyDown: function (event) {
+							if (event.key === "Enter" || event.key === " ") {
+								if (event.preventDefault) event.preventDefault();
+								selectChange(change);
 							}
-						}, [
-							h("span", { key: "tag", style: S.statusTag }, t("status." + change.status)),
-							h("span", { key: "path", style: S.changePath, title: change.path }, change.path)
-						]);
-					}));
-					if (state.changes.length > shown.length) {
-						changesRow = h("div", { key: "list" }, [
-							changesRow,
-							h("button", {
-								key: "more",
-								type: "button",
-								style: S.button,
-								onClick: function () { setChangesOpen(!changesOpen); }
-							}, changesOpen ? "▴" : "▾ " + (state.changes.length - shown.length))
-						]);
-					}
-				}
-				bodyChildren.push(h("div", { key: "changes", style: S.sectionTitle, onClick: function () { setChangesOpen(!changesOpen); } }, (changesOpen ? "▾ " : "▸ ") + t("changes.title", { count: state.changes.length })));
-				bodyChildren.push(h("div", { key: "changesBody" }, changesRow));
-
-				// recent commits — collapsible
-				var logRows;
-				if (state.commits.length === 0) {
-					logRows = h("div", { key: "none", style: S.meta }, t("log.none"));
-				} else {
-					var logShown = logOpen ? state.commits : state.commits.slice(0, 5);
-					logRows = h("div", { key: "list" }, logShown.map(function (commit, index) {
-						return h("div", { key: index, style: S.logRow, title: commit.subject }, [
-							h("span", { key: "sha", style: S.logSha }, commit.sha),
-							h("span", { key: "subj", style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: "1", minWidth: 0 } }, commit.subject)
-						]);
-					}));
-					if (state.commits.length > logShown.length) {
-						logRows = h("div", { key: "list" }, [
-							logRows,
-							h("button", {
-								key: "more",
-								type: "button",
-								style: S.button,
-								onClick: function () { setLogOpen(!logOpen); }
-							}, logOpen ? "▴" : "▾ " + (state.commits.length - logShown.length))
-						]);
-					}
-				}
-				bodyChildren.push(h("div", { key: "logTitle", style: S.sectionTitle, onClick: function () { setLogOpen(!logOpen); } }, (logOpen ? "▾ " : "▸ ") + t("log.title")));
-				bodyChildren.push(h("div", { key: "logBody" }, logRows));
+						}
+					}, [
+						h("span", { key: "path", style: S.changePath }, change.path),
+						h("span", { key: "tag", style: changeTagStyle(change.status) }, t("status." + change.status))
+					]);
+				});
+				bodyChildren.push(sectionView({
+					hook: "changes",
+					label: t("changes.title"),
+					count: state.changes.length,
+					open: changesOpen,
+					all: changesAll,
+					cap: CHANGES_PREVIEW,
+					empty: "✓ " + t("changes.none"),
+					rows: changesRows,
+					onToggle: function () { setChangesOpen(!changesOpen); },
+					onMore: function () { setChangesAll(!changesAll); }
+				}, t));
+
+				// recent commits — same card, one row per commit
+				var logRows = state.commits.map(function (commit, index) {
+					return h("div", { key: index, style: S.logRow, title: commit.subject }, [
+						h("span", { key: "sha", style: S.logSha }, commit.sha),
+						h("span", { key: "subj", style: S.logSubject }, commit.subject)
+					]);
+				});
+				bodyChildren.push(sectionView({
+					hook: "log",
+					label: t("log.title"),
+					count: state.commits.length,
+					open: logOpen,
+					all: logAll,
+					cap: LOG_PREVIEW,
+					empty: t("log.none"),
+					rows: logRows,
+					onToggle: function () { setLogOpen(!logOpen); },
+					onMore: function () { setLogAll(!logAll); }
+				}, t));
 			}
 
 			// Everything the open diff depends on, as one comparable string: a
@@ -2345,7 +2698,8 @@ window.__ModuleLoader__.load({
 				? true
 				: (summary.retainedBy.mainView || 0) > 0;
 
-			// Classic subscription pattern (see GitFloatingPanel for why).
+			// Classic subscription pattern (see GitFloatingPanel's note: keep this
+			// store independent of the seed's useSyncExternalStore build).
 			var stateRef = React.useState(function () { return store.getSnapshot(); });
 			var state = stateRef[0];
 			var setState = stateRef[1];
@@ -2381,17 +2735,22 @@ window.__ModuleLoader__.load({
 			}
 
 			// Left-aligned compact pill in the row band ABOVE the composer card
-			// (conversation.input.dock). The padding-left mirrors the centered
-			// card's left margin, so the pill hugs the textarea's top-left
-			// corner instead of floating at the conversation column's edge.
+			// (conversation.input.dock). The row box is capped at the composer
+			// card's own width and centered — the same way ui-conversation's own
+			// dock occupant (QueueDock) aligns itself — so the pill hugs the
+			// textarea's top-left corner instead of floating at the conversation
+			// column's edge. `--dsh-composer-card-max-width` is ui-conversation's
+			// internal variable (no published contract, and 0.1.7 added a second
+			// value for the embedded body); the 778px fallback keeps this row sane
+			// if it is ever renamed.
 			return h("div", {
 				style: {
 					boxSizing: "border-box",
 					display: "flex",
 					justifyContent: "flex-start",
 					width: "100%",
-					paddingLeft: "calc((100% - var(--dsh-composer-card-max-width, 778px)) / 2)",
-					margin: "2px 0"
+					maxWidth: "var(--dsh-composer-card-max-width, 778px)",
+					margin: "2px auto"
 				},
 				"data-dsh-git": "dock-row"
 			}, h("button", {
@@ -2403,7 +2762,7 @@ window.__ModuleLoader__.load({
 					maxWidth: 220,
 					padding: "1px 10px",
 					borderRadius: 999,
-					border: "1px solid var(--dsw-alias-separator-primary, rgba(127,127,127,0.25))",
+					border: "1px solid var(--dsw-alias-border-l1, rgba(127,127,127,0.25))",
 					background: "var(--dsw-alias-bg-layer-1, rgba(127,127,127,0.12))",
 					color: "var(--dsw-alias-label-secondary, #c8ccd2)",
 					font: "inherit",
@@ -2472,7 +2831,12 @@ window.__ModuleLoader__.load({
 			GitDiffPane: GitDiffPane,
 			DIFF_ROW: DIFF_ROW,
 			stripAnsiEscapes: stripAnsiEscapes,
-			outputView: outputView
+			outputView: outputView,
+			sectionView: sectionView,
+			changeTagStyle: changeTagStyle,
+			panelBoxStyle: panelBoxStyle,
+			DIFF_PANEL_HEIGHT: DIFF_PANEL_HEIGHT,
+			sessionModelRoute: sessionModelRoute
 		};
 		return module.exports;
 	}