@xia-sc/dsh-git 0.5.3 → 0.6.0

package/README.en.md

@@ -15,13 +15,16 @@ new-branch-from-base.
 ## UI
 
 - **Floating block** (`shell.overlay`): collapsed = renders nothing (no
-  floating element that could cover the input); expanded = the full Git
-  workbench (status line, branch switcher with **dirty-tree pre-check** —
-  selecting a branch while uncommitted changes exist shows a warning listing
-  the affected files instead of switching, with a "switch anyway" escape
-  hatch, fetch/pull actions, a **commit area** — stage-all button, draft-basis
-  picker, "✨ AI draft" button, message input and commit button — collapsible
-  changes and recent-commit lists). **Operation feedback is pinned to the very
+  floating element that could cover the input); expanded = one workflow read
+  top-down: status line (pending count, ahead/behind, upstream) → the branch
+  switcher with its **dirty-tree pre-check** (selecting a branch while
+  uncommitted changes exist warns with the affected files instead of switching,
+  plus a "switch anyway" escape hatch) → a **network toolbar** (Fetch / Pull /
+  Push, three equal columns, Push being the primary button) → a **commit card**
+  (Stage all + draft basis + "✨ AI draft" in equal columns, the message input
+  below it and the commit button) → two list cards. Every button group is split
+  evenly instead of sizing itself to its label.
+  **Operation feedback is pinned to the very
   top of the panel and stays one line tall** — the busy label and the last
   operation's result are the first rows of the body. The result is a localized
   phrase ("Pushed", "Staged everything", "Switched to x"); git's own output (a
@@ -36,6 +39,18 @@ new-branch-from-base.
   new branch name + base-branch picker (local branches or full remote refs
   like `origin/feature/x`) — confirming creates the branch from the base and
   switches to it.
+- **Changes and recent commits are two cards**: a change row is "monospace path
+  + status chip" (path first, so the paths line up in a column; modified=amber,
+  added/untracked=green, deleted/conflict=red, renamed=blue; the file the diff
+  pane is showing is highlighted), a commit row is "short sha + subject". Each
+  card's header (`▾ Changes 12`) collapses the whole section and starts
+  **expanded** — a Git panel must not hide the user's own changes; a list past
+  8 / 5 rows offers "Show all N" at the bottom, which is a separate state, so the
+  chevron always points the right way.
+- **Refreshing never flashes**: clicking ↻ or any post-action re-read keeps the
+  panel's content (a same-workspace re-read does not fall back to a "loading"
+  line and snap back); the header's refresh button greys out and reads
+  "Refreshing…".
 - **Click a change to see its diff**: clicking any row of the change list grows
   the panel from its 400px single column into two panes — the full workbench on
   the left, that file's unified diff on the right (see *The diff viewer* below).
@@ -62,6 +77,10 @@ the first selection expands the list to its full length.
   panel (the workbench keeps its width) and the diff takes the rest, 1:1 with the
   pointer because the panel anchors its left edge on grab. Double-clicking the
   edge resets the width, and the panel always stays inside the viewport.
+- **A stable box while the diff is open**: selecting a file pins the panel's height
+  (both columns run to the bottom), so the diff arriving, switching files and
+  collapsing again only scroll inside the panes — the panel never resizes under
+  the pointer.
 - **Staged / unstaged**: by default the pane follows the data — unstaged when
   that side has anything, staged otherwise — with two chips to switch by hand
   (an empty side is dimmed). When a file has changes on both sides, one click

package/README.md

@@ -13,12 +13,13 @@ DeepSeek Harness Web GUI 的完整 Git 管理插件，形态为一个**可折叠
 ## 界面
 
 - **悬浮面板**（`shell.overlay`）：折叠时不渲染任何元素（不会遮挡输入框）；
-  展开后是完整的 Git 工作台（状态行、带 **脏树预检** 的分支切换器——在有
-  未提交修改时选择分支，会先显示受影响文件列表警告而不是直接切换，并提供
-  "仍要切换"按钮；fetch/pull 操作；**提交区**——"暂存全部"按钮、AI 生成依据
-  选择器、"✨ AI 生成"按钮、提交信息输入框（多行文本框，回车换行、
-  Ctrl/Cmd+Enter 提交）与提交按钮；可折叠的变更列表与
-  最近提交列表）。**操作反馈固定钉在面板最上边，而且只有一行**——"推送中…"和上次操作的结果都在
+  展开后自上而下是一条工作流：状态行（未提交计数、领先/落后、上游）→
+  带 **脏树预检** 的分支切换器（有未提交修改时选择分支，会先显示受影响文件列表
+  警告而不是直接切换，并提供"仍要切换"按钮）→ **网络工具条**（拉取更新 / 拉取合并 /
+  推送，三等宽，"推送"是主按钮）→ **提交卡片**（"暂存全部" + AI 生成依据 +
+  "✨ AI 生成"三等宽，下面是提交信息输入框（多行文本框，回车换行、Ctrl/Cmd+Enter
+  提交）与提交按钮）→ 两张列表卡片。按钮一律**等宽分栏**，不再是一排宽窄不一的按钮。
+  **操作反馈固定钉在面板最上边，而且只有一行**——"推送中…"和上次操作的结果都在
   body 的第一行；结果是一个中文短句（"已推送"／"已暂存全部"／"已切换到 xxx"），git 自己的输出
   （push 的 sideband banner、`LF will be replaced by CRLF` 这类提示）收在右侧的"详情 ▾"里，点开才展开，
   不会被变更列表和最近提交顶到看不见的地方。面板**可通过顶栏拖动**（按住带 Git 标题的
@@ -27,6 +28,13 @@ DeepSeek Harness Web GUI 的完整 Git 管理插件，形态为一个**可折叠
   分支切换器旁边的"＋ 新建分支"按钮会展开一个内联表单：新分支名 + 基分支
   选择器（本地分支或 `origin/feature/x` 这样的完整远端引用）——确认后从
   该基分支创建新分支并切换过去。
+- **变更 / 最近提交两张卡片**：变更列表每行是「等宽路径 + 状态色标签」（路径在左，
+  所以一列路径对得齐；修改=橙、新增·未跟踪=绿、删除·冲突=红、重命名=蓝，
+  当前正在看的那一行整行高亮）；最近提交每行是「短 sha + 主题」。两张卡片的标题行
+  （`▾ 变更 12`）点一下整段收起/展开，**默认展开**——面板不该把用户自己的改动藏起来；
+  列表超过 8 / 5 行时底部出现「显示全部 N 项」，与折叠是两件事，所以箭头永远指对方向。
+- **刷新不闪**：点 ↻ 或任何操作之后的重读都**保留面板内容**（同一个工作区不会退回
+  一行 "读取中…" 再弹回来），只在标题栏把刷新按钮置灰并写着"刷新中…"。
 - **点击变更看差异**：点变更列表里的任意一行，面板会从 400px 的单栏展开成
   两栏——左边照旧是完整工作台，右边是该文件的 unified diff（见下文
   「差异查看」）。再点同一行、或点差异标题栏的 `×`，就收回单栏。
@@ -47,6 +55,8 @@ DeepSeek Harness Web GUI 的完整 Git 管理插件，形态为一个**可折叠
 - **可拖拽调宽**：拖动**面板最右侧那条边**即改差异栏宽度——左栏（工作台）宽度不变，
   面板整体变宽、差异栏跟着长；双击这条边复位。面板始终留在视口内，窗口变窄时
   会自动收回；拖动时面板会就地锚定左边缘，所以指针与这条边是 1:1 跟手的。
+- **打开差异时尺寸是稳定的**：一选中文件，面板就定好了高度（两栏都铺到面板底部），
+  diff 读回来、切文件、来回点收起都只在栏内滚动，面板本身不会跟着内容跳一下。
 - **未暂存 / 已暂存**：默认自动跟随数据——未暂存有内容就显示未暂存，否则显示
   已暂存；顶部两个 chip 可手动切换，空的一侧置灰。同一个文件两边都有改动时，
   一次点击看到的是最关心的那一侧，另一侧一键可达。

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 拒绝，请先提交或暂存",
@@ -77,8 +78,12 @@ window.__ModuleLoader__.load({
 			"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": "关闭差异",
@@ -137,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",
@@ -176,8 +182,10 @@ window.__ModuleLoader__.load({
 			"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",
@@ -269,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",
@@ -284,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",
@@ -299,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",
@@ -309,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",
@@ -328,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: {
@@ -369,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",
@@ -384,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"
@@ -400,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",
+				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 +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
@@ -528,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"
@@ -541,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,
@@ -571,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"
 			},
@@ -595,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",
@@ -603,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: {
@@ -612,22 +775,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 +840,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 +850,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 +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",
@@ -824,6 +997,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);
@@ -881,6 +1132,7 @@ window.__ModuleLoader__.load({
 					commits: [],
 					error: null,
 					busy: null,
+					refreshing: false,
 					lastResult: null,
 					panelOpen: false
 				};
@@ -942,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),
@@ -1052,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
 		};
 
@@ -1203,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) {
@@ -1553,12 +1843,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 +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,
@@ -1858,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")
@@ -1896,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));
@@ -2024,94 +2330,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() {
@@ -2163,79 +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));
+						}
+					}, [
+						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
@@ -2403,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",
@@ -2472,7 +2768,11 @@ 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
 		};
 		return module.exports;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xia-sc/dsh-git",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "description": "Complete Git management for the DeepSeek Harness Web GUI: branch switch, new-branch-from-base, fetch, pull, stage-all, commit (with AI-drafted message), push, status, and a click-to-open diff viewer (staged/unstaged, resizable) — as a collapsible floating panel that follows the current session's workspace.",
   "type": "module",
   "main": "lib/index.js",