@xia-sc/dsh-git 0.5.2 → 0.6.0

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 拒绝，请先提交或暂存",
@@ -72,12 +73,17 @@ window.__ModuleLoader__.load({
 			"generate.noProvider": "尚未配置模型，请先在 设置 > 模型 中添加",
 			"generate.noModel": "该提供方没有可用模型",
 			"generate.empty": "模型没有返回提交信息",
+			"generate.truncated": "模型还没写出提交信息就用完了 token 上限（思考模型会先花掉这份预算），再点一次通常即可",
 			"generate.cancelled": "生成已取消",
 			"generate.failed": "生成失败",
 			"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": "关闭差异",
@@ -109,6 +115,17 @@ window.__ModuleLoader__.load({
 			"busy.checkout": "切换中…",
 			"busy.createBranch": "创建分支中…",
 			"output.ok": "操作成功",
+			"output.failed": "操作失败",
+			"output.detail": "详情",
+			"output.detailHide": "收起",
+			"output.fetch": "已拉取更新",
+			"output.pull": "已拉取合并",
+			"output.push": "已推送",
+			"output.stage": "已暂存全部",
+			"output.commit": "已提交",
+			"output.checkout": "已切换到 {branch}",
+			"output.createBranch": "已创建并切换到 {branch}",
+			"output.generate": "已生成提交信息",
 			"dock.aria": "打开 Git 面板",
 			"status.modified": "修改",
 			"status.added": "新增",
@@ -125,6 +142,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",
@@ -159,12 +177,15 @@ window.__ModuleLoader__.load({
 			"generate.noProvider": "No model is configured — add one in Settings > Models",
 			"generate.noModel": "That provider advertises no model",
 			"generate.empty": "The model returned no commit message",
+			"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",
 			"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",
@@ -196,6 +217,17 @@ window.__ModuleLoader__.load({
 			"busy.checkout": "Switching…",
 			"busy.createBranch": "Creating branch…",
 			"output.ok": "Operation succeeded",
+			"output.failed": "Operation failed",
+			"output.detail": "Details",
+			"output.detailHide": "Hide",
+			"output.fetch": "Fetched",
+			"output.pull": "Pulled",
+			"output.push": "Pushed",
+			"output.stage": "Staged everything",
+			"output.commit": "Committed",
+			"output.checkout": "Switched to {branch}",
+			"output.createBranch": "Created and switched to {branch}",
+			"output.generate": "Draft ready",
 			"dock.aria": "Open Git panel",
 			"status.modified": "modified",
 			"status.added": "added",
@@ -245,8 +277,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",
@@ -260,11 +292,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",
@@ -275,9 +335,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",
@@ -285,18 +372,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",
@@ -304,40 +395,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: {
@@ -345,14 +454,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",
@@ -360,14 +471,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"
@@ -376,47 +489,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",
-				userSelect: "none"
+				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",
+				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.
@@ -425,14 +614,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
@@ -504,9 +691,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"
@@ -517,7 +704,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,
@@ -547,7 +734,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"
 			},
@@ -571,7 +758,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",
@@ -579,7 +766,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: {
@@ -588,40 +775,86 @@ 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: {
-				marginTop: 8,
+				// Sits at the top of the body, so the breathing room belongs below it.
+				// The card itself is one localized summary line tall; git's own words
+				// live in `outputDetail`, behind the toggle.
+				marginBottom: 8,
 				padding: "6px 10px",
 				borderRadius: 8,
 				fontSize: 12,
+				lineHeight: "18px"
+			},
+			outputLine: {
+				display: "flex",
+				alignItems: "center",
+				gap: 8
+			},
+			outputSummary: {
+				flex: "1",
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			outputToggle: {
+				flex: "none",
+				padding: "0 6px",
+				height: 20,
+				border: "1px solid currentColor",
+				borderRadius: 6,
+				background: "transparent",
+				color: "inherit",
+				font: "inherit",
+				fontSize: 11,
 				lineHeight: "18px",
+				cursor: "pointer"
+			},
+			outputDetail: {
+				marginTop: 6,
+				paddingTop: 6,
+				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",
 				maxHeight: 160,
 				overflowY: "auto",
 				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: {
@@ -631,7 +864,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",
@@ -645,9 +878,206 @@ window.__ModuleLoader__.load({
 			return text.length > max ? text.slice(0, max - 1) + "…" : text;
 		}
 
+		/**
+		 * Strip ANSI/VT escape sequences from git's human-readable output.
+		 *
+		 * `git push` forwards the remote's own sideband banner verbatim — Gitee,
+		 * for one, decorates "Powered by GITEE.COM" with SGR codes, and its first
+		 * sequence is even truncated (`ESC[0`) right before a complete one. A DOM
+		 * is not a terminal: the ESC byte has no glyph, so only the parameters
+		 * survived and the banner read `Powered by [0[01;33mGITEE.COM [0[m…`.
+		 *
+		 * Only `message` text passes through here. Diff bodies and paths must not:
+		 * a file may legitimately contain ESC bytes and the pane shows it verbatim.
+		 *
+		 * @param text - a git message string (or anything else).
+		 * @returns the text with escape sequences removed.
+		 */
+		function stripAnsiEscapes(text) {
+			return (text === undefined || text === null ? "" : String(text))
+				// OSC (window title / hyperlink): ESC ] … BEL or ESC \
+				.replace(/\u001B\][^\u0007\u001B]*(?:\u0007|\u001B\\)/g, "")
+				// A complete CSI sequence: ESC [ params/intermediates final byte
+				.replace(/\u001B\[[0-9;?]*[ -/]*[@-~]/g, "")
+				// A truncated CSI (the remote's malformed banner): ESC [ params only
+				.replace(/\u001B\[[0-9;?]*/g, "")
+				// Any other two-character escape, then any surviving ESC.
+				.replace(/\u001B[@-Z\\-_]/g, "")
+				.replace(/\u001B/g, "");
+		}
+
+		/** Sanitize one RPC result's human-readable text, leaving data untouched. */
+		function sanitizeResult(result) {
+			if (result === null || typeof result !== "object") return result;
+			var message = function (holder) {
+				return holder !== null && typeof holder === "object" && typeof holder.message === "string"
+					? Object.assign({}, holder, { message: stripAnsiEscapes(holder.message) })
+					: holder;
+			};
+			var value = message(result.value);
+			var error = message(result.error);
+			if (value === result.value && error === result.error) return result;
+			return Object.assign({}, result, { value: value, error: error });
+		}
+
+		/** Longest one-line summary an operation card shows before folding. */
+		var OUTPUT_SUMMARY_MAX = 160;
+
+		/**
+		 * Word one operation result the default way: a summary the panel can
+		 * localize from `action` (the store holds no translator), plus git's own
+		 * output as collapsible detail.
+		 *
+		 * git's output is often several lines of advice — the LF/CRLF warning on
+		 * every staged file, a remote's push banner — and showing it as the
+		 * notification buries the answer to "did it work?". So success keeps git's
+		 * words behind the toggle, and a failure shows the head of the diagnostic
+		 * with the whole thing one click away.
+		 *
+		 * @param action - the operation name (`push`, `stage`, …).
+		 * @param res - the raw RPC result.
+		 * @param params - interpolation for the localized summary (e.g. `{ branch }`).
+		 * @returns `{ kind, action, params, text, detail }`.
+		 */
+		function summarizeResult(action, res, params) {
+			if (res && res.ok === true) {
+				var raw = res.value && typeof res.value.message === "string" ? res.value.message.trim() : "";
+				return { kind: "ok", action: action, params: params || null, text: null, detail: raw };
+			}
+			var message = res && res.error && res.error.message ? String(res.error.message).trim() : "";
+			return {
+				kind: "error",
+				action: action,
+				params: params || null,
+				text: message === "" ? null : shortText(message, OUTPUT_SUMMARY_MAX),
+				detail: message.length > OUTPUT_SUMMARY_MAX ? message : ""
+			};
+		}
+
+		/**
+		 * One operation-feedback card: the localized summary line and, when git
+		 * said anything, git's own output behind a toggle. Pure and exported, so
+		 * the render test can drive both states (SSR cannot click).
+		 *
+		 * @param result - `state.lastResult` (`{ kind, action, params, text, detail }`).
+		 * @param t - the locale translator.
+		 * @param open - whether the detail block is expanded.
+		 * @param onToggle - called when the detail toggle is clicked.
+		 * @returns the card element, or null without a result.
+		 */
+		function outputView(result, t, open, onToggle) {
+			if (!result) return null;
+			var summary = result.text !== undefined && result.text !== null && String(result.text) !== ""
+				? String(result.text)
+				: result.action
+					? t("output." + result.action, result.params || undefined)
+					: t(result.kind === "error" ? "output.failed" : "output.ok");
+			var detail = typeof result.detail === "string" ? result.detail.trim() : "";
+			var line = [
+				h("span", { key: "text", style: S.outputSummary, title: summary }, summary)
+			];
+			if (detail !== "") {
+				line.push(h("button", {
+					key: "toggle",
+					type: "button",
+					"data-dsh-git": "output-toggle",
+					style: S.outputToggle,
+					"aria-expanded": open ? "true" : "false",
+					onClick: onToggle
+				}, (open ? "▴ " : "▾ ") + t(open ? "output.detailHide" : "output.detail")));
+			}
+			var children = [h("div", { key: "line", style: S.outputLine }, line)];
+			if (open && detail !== "") {
+				children.push(h("div", { key: "detail", "data-dsh-git": "output-detail", style: S.outputDetail }, detail));
+			}
+			return h("div", {
+				key: "output",
+				"data-dsh-git": "output",
+				style: Object.assign({}, S.output, result.kind === "ok" ? S.outputOk : S.outputError)
+			}, 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 || {} });
+			return ctx.connection.rpc.call("/dsh-git-rpc", endpoint, { args: args || {} }).then(sanitizeResult);
 		}
 
 		/**
@@ -702,6 +1132,7 @@ window.__ModuleLoader__.load({
 					commits: [],
 					error: null,
 					busy: null,
+					refreshing: false,
 					lastResult: null,
 					panelOpen: false
 				};
@@ -763,7 +1194,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),
@@ -823,17 +1266,20 @@ window.__ModuleLoader__.load({
 			 * Run one action; on success force a fresh load; surfaces lastResult.
 			 * `describe` lets a caller own the wording of both outcomes (used by
 			 * generation, where the success value is the message itself and a
-			 * failure code maps to a localized string). Resolves with the raw
-			 * RPC result so the caller can also act on it.
+			 * failure code maps to a localized string). Without it the result is
+			 * summarized by {@link summarizeResult}: a localized one-liner plus
+			 * git's own output as detail. `params` interpolates that summary (e.g.
+			 * `{ branch }`); the panel localizes it, since the store holds no `t`.
+			 * Resolves with the raw RPC result so the caller can also act on it.
+			 * @param name - the operation name (`push`, `commit`, …).
+			 * @param run - performs the call.
+			 * @param describe - optional wording override for both outcomes.
+			 * @param params - optional interpolation for the default summary.
 			 */
-			function act(name, run, describe) {
+			function act(name, run, describe, params) {
 				emit(Object.assign({}, state, { busy: name, lastResult: null }));
 				return run().then(function (res) {
-					var result = describe
-						? describe(res)
-						: res && res.ok === true
-							? { kind: "ok", text: res.value && res.value.message ? String(res.value.message) : null }
-							: { kind: "error", text: res && res.error && res.error.message ? String(res.error.message) : "operation failed" };
+					var result = describe ? describe(res) : summarizeResult(name, res, params);
 					emit(Object.assign({}, state, { busy: null, lastResult: result }));
 					if (res && res.ok === true) {
 						var cwd = state.cwd;
@@ -841,10 +1287,10 @@ window.__ModuleLoader__.load({
 					}
 					return res;
 				}).catch(function (error) {
-					emit(Object.assign({}, state, {
-						busy: null,
-						lastResult: { kind: "error", text: error && error.message ? String(error.message) : String(error) }
-					}));
+					// A transport failure is worded exactly like a git failure: the
+					// same summary/detail split, so the card never grows a second shape.
+					var failure = { ok: false, error: { message: error && error.message ? String(error.message) : String(error) } };
+					emit(Object.assign({}, state, { busy: null, lastResult: summarizeResult(name, failure, params) }));
 				});
 			}
 
@@ -870,7 +1316,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
 		};
 
@@ -1021,6 +1467,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) {
@@ -1371,12 +1843,31 @@ 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.
+			var outputOpenRef = React.useState(false);
+			var outputOpen = outputOpenRef[0];
+			var setOutputOpen = outputOpenRef[1];
+			React.useEffect(function () {
+				setOutputOpen(false);
+			}, [state.lastResult]);
 
 			// Branch the user picked while the tree is dirty: the pre-check
 			// shows a warning instead of switching immediately; the switch only
@@ -1629,11 +2120,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,
@@ -1667,20 +2154,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")
@@ -1688,6 +2179,16 @@ window.__ModuleLoader__.load({
 			]);
 
 			var bodyChildren = [];
+			// Operation feedback sits at the very TOP of the body. A push banner is
+			// several lines long, and at the bottom of a 400px panel it landed under
+			// the change list and the log — below the fold on any repo with a few
+			// files, which is exactly where nobody looks after clicking a button.
+			if (state.lastResult) {
+				bodyChildren.push(outputView(state.lastResult, t, outputOpen, function () { setOutputOpen(!outputOpen); }));
+			}
+			if (busy) {
+				bodyChildren.push(h("div", { key: "busy", style: S.meta }, busyLabel));
+			}
 			if (state.phase === "loading" || state.phase === "idle") {
 				bodyChildren.push(h("div", { key: "loading", style: S.meta }, t("loading")));
 			} else if (state.phase === "error") {
@@ -1695,15 +2196,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));
@@ -1728,7 +2235,7 @@ window.__ModuleLoader__.load({
 							var value = event.target.value;
 							if (!value || value === state.branch) { setPendingBranch(null); return; }
 							if (state.dirty > 0) { setPendingBranch(value); return; }
-							store.act("checkout", function () { return store.verbs.checkout(state.cwd, value); });
+							store.act("checkout", function () { return store.verbs.checkout(state.cwd, value); }, null, { branch: value });
 						},
 						"aria-label": t("switch.aria")
 					}, selectChildren),
@@ -1799,7 +2306,7 @@ window.__ModuleLoader__.load({
 						if (nameText === "" || baseText === "" || busy !== null) return;
 						setNewBranchName("");
 						setNewBranchOpen(false);
-						store.act("createBranch", function () { return store.verbs.createBranch(state.cwd, nameText, baseText); });
+						store.act("createBranch", function () { return store.verbs.createBranch(state.cwd, nameText, baseText); }, null, { branch: nameText });
 					}
 				}
 				if (pendingBranch !== null && state.dirty > 0) {
@@ -1817,100 +2324,102 @@ window.__ModuleLoader__.load({
 							onClick: function () {
 								var target = pendingBranch;
 								setPendingBranch(null);
-								store.act("checkout", function () { return store.verbs.checkout(state.cwd, target); });
+								store.act("checkout", function () { return store.verbs.checkout(state.cwd, target); }, null, { branch: target });
 							}
 						}, busy === "checkout" ? t("busy.checkout") : t("switch.force"))
 					]));
 				}
 
-				// 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() {
@@ -1935,6 +2444,7 @@ window.__ModuleLoader__.load({
 						"no-provider": t("generate.noProvider"),
 						"no-model": t("generate.noModel"),
 						"llm-empty": t("generate.empty"),
+						"llm-truncated": t("generate.truncated"),
 						"cancelled": t("generate.cancelled")
 					};
 					var text = known[details.code];
@@ -1961,90 +2471,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));
-			}
-
-			// last operation output
-			if (state.lastResult) {
-				bodyChildren.push(h("div", {
-					key: "output",
-					style: Object.assign({}, S.output, state.lastResult.kind === "ok" ? S.outputOk : S.outputError)
-				}, state.lastResult.text || t("output.ok")));
-			}
-			if (busy) {
-				bodyChildren.push(h("div", { key: "busy", style: S.meta }, busyLabel));
+						}
+					}, [
+						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
@@ -2212,7 +2699,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",
@@ -2279,7 +2766,13 @@ window.__ModuleLoader__.load({
 			parseDiffSide: parseDiffSide,
 			diffRowView: diffRowView,
 			GitDiffPane: GitDiffPane,
-			DIFF_ROW: DIFF_ROW
+			DIFF_ROW: DIFF_ROW,
+			stripAnsiEscapes: stripAnsiEscapes,
+			outputView: outputView,
+			sectionView: sectionView,
+			changeTagStyle: changeTagStyle,
+			panelBoxStyle: panelBoxStyle,
+			DIFF_PANEL_HEIGHT: DIFF_PANEL_HEIGHT
 		};
 		return module.exports;
 	}