@xiaoming_z/dsh-git 0.0.0-stage → 0.3.0

package/client.js

@@ -0,0 +1,3133 @@
+/**
+ * `@xiaoming_z/dsh-git` — browser half of the DSH git panel.
+ *
+ * Hand-authored bundle: this is the exact artifact shape the DSH client module
+ * system expects (a classic script that registers a factory with
+ * `window.__ModuleLoader__.load`). Writing it by hand is what lets the plugin
+ * live outside the DSH monorepo — the canonical build emits this file from
+ * TypeScript, but nothing about the format requires that toolchain.
+ *
+ * The registered id MUST equal the package name: the module system looks the
+ * factory up by the Loader row id, which is the row's package specifier. A
+ * mismatch means the bundle loads but never binds to its row.
+ *
+ * Only `react` is required, and the shell seeds React as a shared module, so
+ * the package needs no `dsh.client.external` entry. Everything else is plain
+ * DOM with inline styles.
+ *
+ * Layout follows the first-party view contract (`dsh-client-ui-trajectory`):
+ * `width/height: 100%`, `box-sizing: border-box`, `overflow: hidden`, and a
+ * `min-width: 0` on every flex child that contains truncating text. Without
+ * those the commit subjects' `nowrap` forces the log column wider than the
+ * container, the panel overflows horizontally, and the file column gets pushed
+ * off the left edge.
+ */
+window.__ModuleLoader__.load({
+	id: '@xiaoming_z/dsh-git',
+	factory: (require) => {
+		var module = { exports: {} }
+		var exports = module.exports
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
+
+		const React = require('react')
+		const h = React.createElement
+
+		/** Services this plugin needs before its body runs. */
+		const inject = ['slots', 'locale', 'sessions']
+
+		/** Locale namespace this plugin registers under. */
+		const NS = 'git'
+
+		/** Route prefix owned by the Host half of `@xiaoming_z/dsh-git`. */
+		const API = '/git-api'
+
+		/**
+		 * Header every write must carry. The route table is outside the `/api`
+		 * browser-trust fence, so this is what stops a cross-origin page from
+		 * driving git through loopback: a custom header cannot be set
+		 * cross-origin without a preflight, and this server answers none.
+		 */
+		const WRITE_HEADER = 'x-dsh-git'
+
+		/**
+		 * Every string the panel renders.
+		 *
+		 * The shell owns the language choice (Settings → General, persisted to
+		 * `$DSH_HOME/settings.yaml`, defaulting to the browser's requested
+		 * languages), so this is a dictionary rather than a config of our own:
+		 * the panel just translates through whatever locale is active.
+		 */
+		const DICTS = {
+			zh: {
+				'view.git': 'Git',
+				'view.review': '审查',
+				'view.worktree': '工作区',
+				'view.history': '历史',
+				'tab.changes': '{count} 项变更',
+				'header.refresh': '刷新',
+				'header.retry': '重试',
+				'header.path.follow': '跟随会话工作区：{path}',
+				'header.path.placeholder': '仓库路径（留空则用宿主默认）',
+				'review.noMarker': '还没有审查点。标记之后，这里只显示之后发生的变化——你不用再从头翻历史。',
+				'review.mark': '标记为已审查',
+				'review.marked': '已标记为已审查',
+				'review.markHint': '把当前 HEAD 记为审查点',
+				'review.clean': '与审查点相比没有变化',
+				'review.summary': '自 {when} 以来：{commits} 个提交、{files} 个文件、+{added} −{deleted}',
+				'review.worktreeNote': '（含未提交改动）',
+				'review.rank': '按需要留意的程度排序：冲突 / 删除 / 二进制 / 大改动 优先',
+				'review.pickFile': '选择文件查看自审查点以来的改动',
+				'review.markerGone': '审查点已失效（可能被 rebase 删掉了），请重新标记',
+				'handoff.files': '改动的文件',
+				'handoff.commits': '最近的提交',
+				'handoff.copy': '复制引用',
+				'handoff.copyTitle': '复制一段可直接粘进对话的说明',
+				'handoff.copied': '已复制，粘到输入框即可',
+				'handoff.failed': '复制失败',
+				'review.why.conflict': '冲突',
+				'review.why.deleted': '删除',
+				'review.why.binary': '二进制',
+				'review.why.large': '大改动',
+				'empty.loading': '加载中…',
+				'empty.clean': '工作区干净',
+				'empty.noCommits': '没有提交',
+				'empty.pickFile': '选择左侧文件查看差异',
+				'empty.pickCommit': '选择中间一栏的提交查看改动',
+				'empty.noCommitDiff': '该提交没有可显示的差异',
+				'empty.pickOne': '选择一项查看差异',
+				'group.conflicted': '冲突',
+				'group.staged': '已暂存',
+				'group.unstaged': '未暂存',
+				'group.untracked': '未跟踪',
+				'group.header': '{label} · {count}',
+				'file.stage': '暂存',
+				'file.unstage': '取消',
+				'hunk.stage': '暂存此块',
+				'hunk.unstage': '取消此块',
+				'hunk.header': '改动块 {index}/{total}',
+				'commit.button': '提交 {count} 项',
+				'commit.placeholderReady': '提交信息（Enter 提交）',
+				'commit.placeholderEmpty': '先暂存要提交的改动…',
+				'commit.done': '已提交 {hash}',
+				'diff.failed': '无法读取差异：{message}',
+				'branch.title': '分支',
+				'branch.head': 'HEAD',
+				'branch.local': '本地 · {count}',
+				'branch.remote': '远程 · {count}',
+				'branch.new': '新建',
+				'branch.newTitle': '从 {base} 新建分支',
+				'branch.checkout': '检出',
+				'branch.checkoutRemoteTitle': '检出为本地分支 {name}',
+				'branch.current': '当前',
+				'branch.newPlaceholder': '新分支名（基于 {base}）',
+				'branch.filtered': '分支 {ref} · {count} 提交',
+				'branch.checkedOut': '已检出 {ref}',
+				'branch.created': '已新建并检出 {name}',
+				'pull.button': '拉取',
+				'pull.ff-only': '快进',
+				'pull.merge': '合并',
+				'pull.rebase': '变基',
+				'pull.ff-only.title': '拉取（仅快进）：分叉时失败，不改历史也不造合并提交',
+				'pull.merge.title': '拉取并合并：分叉时生成一个合并提交',
+				'pull.rebase.title': '拉取并变基：把本地提交重放到远端之上，会重写它们',
+				'pull.updated': '已更新 {before} → {after}',
+				'pull.uptodate': '已是最新',
+				'push.button': '推送',
+				'push.publish': '发布',
+				'push.title': '推送当前分支到它的上游',
+				'push.publishTitle': '把 {branch} 推送到远端并设置上游',
+				'push.done': '已推送 {before} → {after}',
+				'push.uptodate': '远端已是最新',
+				'push.published': '已发布 {branch}',
+				'splitter.title': '拖动调整宽度',
+				'stamp.justNow': '刚刚',
+				'stamp.minutes': '{count} 分钟前',
+				'stamp.hours': '{count} 小时前',
+				'stamp.days': '{count} 天前',
+				'status.M': '修改',
+				'status.A': '新增',
+				'status.D': '删除',
+				'status.R': '重命名',
+				'status.C': '复制',
+				'status.T': '类型变更',
+				'status.U': '冲突',
+				'status.?': '未跟踪',
+				'error.unreachable': 'git 服务不可达（{route}）：{message}\n确认 @xiaoming_z/dsh-git 这一行已在 profile 中启用。',
+				'error.notJson': '{route} 返回了非 JSON 响应（HTTP {status}）。',
+				'error.badStatus': '宿主半返回的 status 缺少字段 {fields}；客户端与宿主版本可能不匹配。',
+			},
+			en: {
+				'view.git': 'Git',
+				'view.review': 'Review',
+				'view.worktree': 'Changes',
+				'view.history': 'History',
+				'tab.changes': '{count} changed',
+				'header.refresh': 'Refresh',
+				'header.retry': 'Retry',
+				'header.path.follow': 'Following session workspace: {path}',
+				'header.path.placeholder': 'Repository path (empty follows the session)',
+				'review.noMarker': 'No review marker yet. Once you set one, this view shows only what changed after it — no re-reading history.',
+				'review.mark': 'Mark as reviewed',
+				'review.marked': 'Marked as reviewed',
+				'review.markHint': 'Record the current HEAD as the review marker',
+				'review.clean': 'Nothing changed since the review marker',
+				'review.summary': 'Since {when}: {commits} commits, {files} files, +{added} −{deleted}',
+				'review.worktreeNote': ' (includes uncommitted changes)',
+				'review.rank': 'Ordered by how much attention it deserves: conflicts, deletions, binaries and large changes first',
+				'review.pickFile': 'Pick a file to see its change since the marker',
+				'review.markerGone': 'The marker no longer resolves (a rebase may have removed it); mark again',
+				'handoff.files': 'Changed files',
+				'handoff.commits': 'Recent commits',
+				'handoff.copy': 'Copy ref',
+				'handoff.copyTitle': 'Copy a description you can paste into the conversation',
+				'handoff.copied': 'Copied — paste it into the composer',
+				'handoff.failed': 'Copy failed',
+				'review.why.conflict': 'conflict',
+				'review.why.deleted': 'deleted',
+				'review.why.binary': 'binary',
+				'review.why.large': 'large',
+				'empty.loading': 'Loading…',
+				'empty.clean': 'Working tree clean',
+				'empty.noCommits': 'No commits',
+				'empty.pickFile': 'Pick a file to see its diff',
+				'empty.pickCommit': 'Pick a commit to see its changes',
+				'empty.noCommitDiff': 'This commit has no diff to show',
+				'empty.pickOne': 'Pick something to see its diff',
+				'group.conflicted': 'Conflicted',
+				'group.staged': 'Staged',
+				'group.unstaged': 'Unstaged',
+				'group.untracked': 'Untracked',
+				'group.header': '{label} · {count}',
+				'file.stage': 'Stage',
+				'file.unstage': 'Unstage',
+				'hunk.stage': 'Stage hunk',
+				'hunk.unstage': 'Unstage hunk',
+				'hunk.header': 'Hunk {index}/{total}',
+				'commit.button': 'Commit {count}',
+				'commit.placeholderReady': 'Commit message (Enter to commit)',
+				'commit.placeholderEmpty': 'Stage something to commit…',
+				'commit.done': 'Committed {hash}',
+				'diff.failed': 'Cannot read the diff: {message}',
+				'branch.title': 'Branches',
+				'branch.head': 'HEAD',
+				'branch.local': 'Local · {count}',
+				'branch.remote': 'Remote · {count}',
+				'branch.new': 'New',
+				'branch.newTitle': 'New branch from {base}',
+				'branch.checkout': 'Checkout',
+				'branch.checkoutRemoteTitle': 'Check out as local branch {name}',
+				'branch.current': 'current',
+				'branch.newPlaceholder': 'New branch name (from {base})',
+				'branch.filtered': '{ref} · {count} commits',
+				'branch.checkedOut': 'Checked out {ref}',
+				'branch.created': 'Created and checked out {name}',
+				'pull.button': 'Pull',
+				'pull.ff-only': 'Fast-forward',
+				'pull.merge': 'Merge',
+				'pull.rebase': 'Rebase',
+				'pull.ff-only.title': 'Pull, fast-forward only: fails when diverged, so it never rewrites history or invents a merge commit',
+				'pull.merge.title': 'Pull and merge: creates a merge commit when the branch diverged',
+				'pull.rebase.title': 'Pull and rebase: replays your local commits on top of the remote, rewriting them',
+				'pull.updated': 'Updated {before} → {after}',
+				'pull.uptodate': 'Already up to date',
+				'push.button': 'Push',
+				'push.publish': 'Publish',
+				'push.title': 'Push the current branch to its upstream',
+				'push.publishTitle': 'Push {branch} to the remote and set its upstream',
+				'push.done': 'Pushed {before} → {after}',
+				'push.uptodate': 'Remote already up to date',
+				'push.published': 'Published {branch}',
+				'splitter.title': 'Drag to resize',
+				'stamp.justNow': 'just now',
+				'stamp.minutes': '{count}m ago',
+				'stamp.hours': '{count}h ago',
+				'stamp.days': '{count}d ago',
+				'status.M': 'modified',
+				'status.A': 'added',
+				'status.D': 'deleted',
+				'status.R': 'renamed',
+				'status.C': 'copied',
+				'status.T': 'type changed',
+				'status.U': 'conflicted',
+				'status.?': 'untracked',
+				'error.unreachable': 'git service unreachable ({route}): {message}\nCheck that @xiaoming_z/dsh-git is enabled in the profile.',
+				'error.notJson': '{route} returned a non-JSON response (HTTP {status}).',
+				'error.badStatus': 'The host returned a status payload without {fields}; the client and host halves are probably mismatched.',
+			},
+		}
+
+		/**
+		 * Substitute `{name}` placeholders.
+		 * @param template - the dictionary entry.
+		 * @param params - values by placeholder name.
+		 * @returns the filled string.
+		 */
+		function format(template, params) {
+			if (params === undefined || params === null) return template
+			return template.replace(/\{(\w+)\}/g, (match, name) =>
+				name in params ? String(params[name]) : match,
+			)
+		}
+
+		/**
+		 * Translate without a shell-injected seat.
+		 *
+		 * The shell injects a bound `t` through the slot descriptor; this is the
+		 * fallback for a bare render (a test frame, or a slot that failed to
+		 * inject). It uses English so a missing seat degrades to plain English
+		 * rather than raw dictionary keys.
+		 * @param key - the dictionary key.
+		 * @param params - placeholder values.
+		 * @returns the translated string.
+		 */
+		function fallbackTranslate(key, params) {
+			return format(DICTS.en[key] ?? key, params)
+		}
+
+		/**
+		 * Lane colours, cycled.
+		 *
+		 * Theme tokens rather than a fixed palette: hues chosen to read on a dark
+		 * background are close to invisible on a light one, and the shell
+		 * switches these with the theme. The first four are the clearly distinct
+		 * ones; the rest only matter on very wide graphs, which the lane
+		 * algorithm keeps rare.
+		 */
+		const LANE_COLORS = [
+			'var(--dsw-alias-state-business-primary)',
+			'var(--dsw-alias-state-success-primary)',
+			'var(--dsw-alias-state-warn-primary)',
+			'var(--dsw-alias-state-error-primary)',
+			'var(--dsw-alias-label-primary)',
+			'var(--dsw-alias-state-success-secondary)',
+			'var(--dsw-alias-state-warn-secondary)',
+		]
+
+		/** Status letter → colour + label. */
+		// Colours are theme TOKENS, never literals: the palette that reads well on
+		// a dark background is close to invisible on a light one, and the shell
+		// already switches these tokens with the theme.
+		const STATUS = {
+			M: ['var(--dsw-alias-state-warn-primary)', 'status.M'],
+			A: ['var(--dsw-alias-state-success-primary)', 'status.A'],
+			D: ['var(--dsw-alias-state-error-primary)', 'status.D'],
+			R: ['var(--dsw-alias-state-business-primary)', 'status.R'],
+			C: ['var(--dsw-alias-state-business-primary)', 'status.C'],
+			T: ['var(--dsw-alias-state-warn-primary)', 'status.T'],
+			U: ['var(--dsw-alias-state-error-primary)', 'status.U'],
+			'?': ['var(--dsw-alias-label-tertiary)', 'status.?'],
+		}
+
+		/**
+		 * The pull strategies the host accepts, and what each one does.
+		 *
+		 * `ff-only` is the default because it is the only one that can neither
+		 * rewrite local commits nor invent a merge commit; the other two are
+		 * deliberate choices, so the tooltip says what they cost.
+		 */
+		const PULL_STRATEGIES = ['ff-only', 'merge', 'rebase']
+
+		/** Drag bounds per resizable column, in px. */
+		const COLUMN_LIMITS = {
+			branches: [140, 380],
+			commits: [220, 720],
+			files: [180, 720],
+		}
+
+		/** Default widths, and the fallback for anything the store rejects. */
+		const COLUMN_DEFAULTS = { branches: 190, commits: 380, files: 380 }
+
+		const STORAGE_KEY = 'dsh-git:column-widths:v1'
+
+		/**
+		 * Coerce a width into its column's bounds.
+		 * @param column - one of {@link COLUMN_LIMITS}' keys.
+		 * @param value - the candidate width.
+		 * @returns a whole number of pixels, or null when the input is not a number.
+		 */
+		function clampWidth(column, value) {
+			const [min, max] = COLUMN_LIMITS[column] ?? [80, 1200]
+			const numeric = Number(value)
+			if (!Number.isFinite(numeric)) return null
+			return Math.min(Math.max(Math.round(numeric), min), max)
+		}
+
+		/**
+		 * The nearest ancestor that actually scrolls.
+		 *
+		 * The composer seat is a plain in-flow sibling of this view (`flex:none`),
+		 * not an overlay, so the scroll container's content is "this panel plus
+		 * whatever else shares the flow". Sizing the panel to the *window* made
+		 * that content exactly one composer taller than the scrollport, which is
+		 * why the composer could be scrolled into view.
+		 * @param element - the panel's outer box.
+		 * @returns the scrolling ancestor, or null.
+		 */
+		function nearestScroller(element) {
+			// Identified by `overflow-y`, never by "is it currently overflowing":
+			// a scroller whose content happens to fit — the short worktree, which
+			// is the case that needs growing — would not look like one, and the
+			// caller would fall back to the window estimate that caused the bug.
+			if (typeof window.getComputedStyle !== 'function') return null
+			let node = element.parentElement
+			while (node !== null && node !== undefined) {
+				if (/(auto|scroll)/.test(window.getComputedStyle(node).overflowY) && node.clientHeight > 0) return node
+				node = node.parentElement
+			}
+			return null
+		}
+
+		/**
+		 * The height the panel needs so the scroll container's content fits
+		 * exactly, leaving no slack to scroll.
+		 *
+		 * Subtracting the panel's own height from `scrollHeight` yields everything
+		 * else in the flow (headers above, the composer below); removing that from
+		 * the scrollport height is the panel's share. The answer does not depend on
+		 * the height the panel happens to have when measured, so one pass is exact
+		 * and a `resize` re-measure self-corrects.
+		 * @param element - the panel's outer box.
+		 * @param fallback - value to use when no scroller can be found.
+		 * @returns the target height in px, or null when it is not trustworthy.
+		 */
+		function fillHeightFor(element, fallback) {
+			const rect = element.getBoundingClientRect()
+			const scroller = nearestScroller(element)
+			const next =
+				scroller === null
+					? fallback
+					: scroller.clientHeight - (scroller.scrollHeight - rect.height)
+			return next > 200 ? Math.round(next) : null
+		}
+
+		/**
+		 * The width a drag produces: the column's width at grab time plus the
+		 * pointer's horizontal travel, clamped to the column's bounds.
+		 * @param column - the column being dragged.
+		 * @param startWidth - its width when the drag began.
+		 * @param startX - pointer x when the drag began.
+		 * @param currentX - pointer x now.
+		 * @returns the clamped width.
+		 */
+		function nextWidth(column, startWidth, startX, currentX) {
+			return clampWidth(column, startWidth + (currentX - startX))
+		}
+
+		/**
+		 * The browser's localStorage, or null where it is unavailable.
+		 * @returns the store, or null.
+		 */
+		function defaultStorage() {
+			try {
+				return typeof localStorage === 'undefined' ? null : localStorage
+			} catch {
+				// Access itself throws in some sandboxed frames.
+				return null
+			}
+		}
+
+		/**
+		 * Read the persisted widths, dropping every value that fails validation.
+		 *
+		 * Storage is not a trusted input: it may hold a value from an older
+		 * layout, a hand-edited string, or nothing at all. Anything invalid
+		 * falls back to the default rather than reaching the style attribute.
+		 * @param storage - a Storage-like object, or null.
+		 * @returns the surviving widths.
+		 */
+		function readWidths(storage) {
+			const widths = { ...COLUMN_DEFAULTS }
+			if (storage === null || storage === undefined) return widths
+			let parsed
+			try {
+				const raw = storage.getItem(STORAGE_KEY)
+				if (raw === null || raw === undefined) return widths
+				parsed = JSON.parse(raw)
+			} catch {
+				return widths
+			}
+			if (parsed === null || typeof parsed !== 'object') return widths
+			for (const column of Object.keys(COLUMN_LIMITS)) {
+				const width = clampWidth(column, parsed[column])
+				if (width !== null) widths[column] = width
+			}
+			return widths
+		}
+
+		/**
+		 * Persist the widths. A storage failure is ignored: losing a panel
+		 * preference must never break the panel.
+		 * @param storage - a Storage-like object, or null.
+		 * @param widths - the widths to store.
+		 */
+		function writeWidths(storage, widths) {
+			if (storage === null || storage === undefined) return
+			try {
+				storage.setItem(STORAGE_KEY, JSON.stringify(widths))
+			} catch {
+				/* private mode, quota, disabled storage */
+			}
+		}
+
+		/** Prefix that marks a reference string as ours. The shell treats it as opaque. */
+		const REF_PREFIX = 'dsh-git:'
+
+		const FILE_MODES = ['worktree', 'staged', 'untracked']
+
+		/**
+		 * Encode a reference to one changed file.
+		 *
+		 * The metadata is baked into the reference rather than looked up when the
+		 * message is sent. The source's `codec.serialize` receives no session, so
+		 * it cannot resolve a repository root — and a serialize that has to fetch
+		 * is a serialize that can fail, which blocks the send entirely. Burning
+		 * the numbers in also makes the model see exactly what the panel showed
+		 * at pick time. The path is last, so colons inside it are harmless.
+		 * @param entry - a status file entry.
+		 * @param mode - which diff the reference means.
+		 * @returns the opaque reference string.
+		 */
+		function encodeFileRef(entry, mode) {
+			// Porcelain status entries carry `index`/`worktree` ('.' meaning
+			// unchanged on that side) while review entries carry a single
+			// `status`; take whichever one actually says something, or a
+			// worktree reference would go out with no status at all.
+			const status =
+				[entry.status, entry.index, entry.worktree].find(
+					(letter) => typeof letter === 'string' && letter !== '' && letter !== '.',
+				) ?? ''
+			const fields = [
+				REF_PREFIX + 'file',
+				mode,
+				status,
+				Number.isFinite(entry.added) ? entry.added : '',
+				Number.isFinite(entry.deleted) ? entry.deleted : '',
+				entry.binary === true ? '1' : '0',
+			]
+			return `${fields.join(':')}:${entry.path}`
+		}
+
+		/**
+		 * Encode a reference to one commit. The subject is last for the same
+		 * reason as the path above.
+		 * @param commit - `{hash, files, subject}`.
+		 * @returns the opaque reference string.
+		 */
+		function encodeCommitRef(commit) {
+			return `${REF_PREFIX}commit:${commit.hash}:${Number.isFinite(commit.files) ? commit.files : ''}:${commit.subject ?? ''}`
+		}
+
+		/**
+		 * Decode one of our references.
+		 *
+		 * Returns null for anything malformed rather than throwing: the string
+		 * round-trips through clipboard and persistence, so it is untrusted.
+		 * @param ref - the reference string.
+		 * @returns the decoded reference, or null.
+		 */
+		function decodeRef(ref) {
+			if (typeof ref !== 'string' || !ref.startsWith(REF_PREFIX)) return null
+			const kind = ref.slice(REF_PREFIX.length, ref.indexOf(':', REF_PREFIX.length))
+			if (kind === 'commit') {
+				const rest = ref.slice(REF_PREFIX.length + 'commit:'.length)
+				const hash = rest.slice(0, rest.indexOf(':'))
+				if (!/^[0-9a-f]{4,40}$/.test(hash)) return null
+				const tail = rest.slice(hash.length + 1)
+				const files = tail.slice(0, tail.indexOf(':'))
+				const subject = tail.slice(files.length + 1)
+				return {
+					kind: 'commit',
+					hash,
+					files: files === '' ? null : Number(files),
+					subject,
+				}
+			}
+			if (kind === 'file') {
+				const rest = ref.slice(REF_PREFIX.length + 'file:'.length)
+				// mode, status, added, deleted, binary, then the path (which may
+				// itself contain colons, so it is whatever is left).
+				const parts = []
+				let cursor = 0
+				for (let index = 0; index < 5; index += 1) {
+					const at = rest.indexOf(':', cursor)
+					if (at === -1) return null
+					parts.push(rest.slice(cursor, at))
+					cursor = at + 1
+				}
+				const path = rest.slice(cursor)
+				if (!FILE_MODES.includes(parts[0]) || path === '') return null
+				return {
+					kind: 'file',
+					mode: parts[0],
+					status: parts[1] === '' ? null : parts[1],
+					added: parts[2] === '' ? null : Number(parts[2]),
+					deleted: parts[3] === '' ? null : Number(parts[3]),
+					binary: parts[4] === '1',
+					path,
+				}
+			}
+			return null
+		}
+
+		/**
+		 * The command that shows a reference's content.
+		 * @param decoded - a decoded reference.
+		 * @returns a shell command.
+		 */
+		function refCommand(decoded) {
+			if (decoded.kind === 'commit') return `git show ${decoded.hash.slice(0, 7)}`
+			if (decoded.mode === 'staged') return `git diff --cached -- ${decoded.path}`
+			if (decoded.mode === 'untracked') return `git diff --no-index /dev/null -- ${decoded.path}`
+			return `git diff -- ${decoded.path}`
+		}
+
+		/**
+		 * The model-facing text for a file reference.
+		 *
+		 * Metadata only, by design: the path, what happened to it, how much, and
+		 * the exact command that shows it. Inlining the diff would spend context
+		 * on something the model can fetch itself, and one review message can
+		 * legitimately carry several of these.
+		 * @param decoded - a decoded file reference.
+		 * @returns the serialized text.
+		 */
+		function describeFileRef(decoded) {
+			const parts = [`path="${decoded.path}"`]
+			if (decoded.status !== null) parts.push(`status="${decoded.status}"`)
+			if (decoded.binary) parts.push('binary="true"')
+			if (decoded.added !== null) parts.push(`added="${decoded.added}"`)
+			if (decoded.deleted !== null) parts.push(`deleted="${decoded.deleted}"`)
+			if (decoded.mode === 'staged') parts.push('staged="true"')
+			if (decoded.mode === 'untracked') parts.push('untracked="true"')
+			return `<git-change ${parts.join(' ')}>Read the file, or run \`${refCommand(decoded)}\`, to see the change.</git-change>`
+		}
+
+		/**
+		 * The model-facing text for a commit reference.
+		 * @param decoded - a decoded commit reference.
+		 * @returns the serialized text.
+		 */
+		function describeCommitRef(decoded) {
+			const parts = [`hash="${decoded.hash.slice(0, 10)}"`]
+			// A quote inside an attribute would break the tag, so the subject is
+			// flattened rather than escaped.
+			if (decoded.subject !== '') parts.push(`subject="${decoded.subject.replace(/"/g, "'")}"`)
+			if (decoded.files !== null) parts.push(`files="${decoded.files}"`)
+			return `<git-commit ${parts.join(' ')}>Run \`${refCommand(decoded)}\` to see it.</git-commit>`
+		}
+
+		/**
+		 * The text a person can paste into the composer themselves.
+		 *
+		 * This is the affordance that needs no unverified API: the panel only
+		 * writes to the clipboard, and the user decides whether to send.
+		 * @param ref - a reference string.
+		 * @returns the text to copy.
+		 */
+		function refText(ref) {
+			const decoded = decodeRef(ref)
+			if (decoded === null) return ref
+			return decoded.kind === 'commit' ? describeCommitRef(decoded) : describeFileRef(decoded)
+		}
+
+		/** Per-repository review markers, keyed by canonical repository root. */
+		const MARKER_KEY = 'dsh-git:review-markers:v1'
+
+		/**
+		 * Read the review markers.
+		 *
+		 * Storage is untrusted input, exactly like the column widths: anything
+		 * that fails validation is dropped rather than reaching a request.
+		 * @param storage - a Storage-like object, or null.
+		 * @returns markers keyed by repository root.
+		 */
+		function readMarkers(storage) {
+			const markers = {}
+			if (storage === null || storage === undefined) return markers
+			let parsed
+			try {
+				const raw = storage.getItem(MARKER_KEY)
+				if (raw === null || raw === undefined) return markers
+				parsed = JSON.parse(raw)
+			} catch {
+				return markers
+			}
+			if (parsed === null || typeof parsed !== 'object') return markers
+			for (const [root, entry] of Object.entries(parsed)) {
+				if (typeof root !== 'string' || root === '') continue
+				if (entry === null || typeof entry !== 'object') continue
+				if (typeof entry.hash !== 'string' || entry.hash === '') continue
+				markers[root] = { hash: entry.hash, at: Number.isFinite(entry.at) ? entry.at : null }
+			}
+			return markers
+		}
+
+		/**
+		 * Persist the review markers. A storage failure is ignored.
+		 * @param storage - a Storage-like object, or null.
+		 * @param markers - markers keyed by repository root.
+		 */
+		function writeMarkers(storage, markers) {
+			if (storage === null || storage === undefined) return
+			try {
+				storage.setItem(MARKER_KEY, JSON.stringify(markers))
+			} catch {
+				/* private mode, quota, disabled storage */
+			}
+		}
+
+		/** Changed lines at which a diff is worth flagging as large. */
+		const LARGE_CHANGE_LINES = 200
+
+		/**
+		 * Which attention tier a changed file falls in, and why.
+		 *
+		 * The reviewer's scarce resource is attention, so a review list is
+		 * ordered by what most deserves a look rather than by path: a conflict
+		 * or a deletion can break things outright, a binary cannot be skimmed at
+		 * all, and a large diff is where mistakes hide.
+		 * @param file - a review file entry.
+		 * @returns `{tier, reason}`, where `reason` is a dictionary key or null.
+		 */
+		function reviewTier(file) {
+			if (file.status === 'U') return { tier: 0, reason: 'review.why.conflict' }
+			if (file.status === 'D') return { tier: 1, reason: 'review.why.deleted' }
+			if (file.binary === true) return { tier: 2, reason: 'review.why.binary' }
+			if ((file.added ?? 0) + (file.deleted ?? 0) >= LARGE_CHANGE_LINES) {
+				return { tier: 3, reason: 'review.why.large' }
+			}
+			return { tier: 4, reason: null }
+		}
+
+		/**
+		 * Rank review files by how much attention they deserve.
+		 * @param files - review file entries.
+		 * @returns the entries with their tier, most attention-worthy first.
+		 */
+		function rankReviewFiles(files) {
+			return files
+				.map((file) => {
+					const { tier, reason } = reviewTier(file)
+					return { file, tier, reason, churn: (file.added ?? 0) + (file.deleted ?? 0) }
+				})
+				.sort(
+					(left, right) =>
+						left.tier - right.tier ||
+						right.churn - left.churn ||
+						left.file.path.localeCompare(right.file.path),
+				)
+		}
+
+		/**
+		 * A draggable divider between two columns.
+		 *
+		 * A wide invisible hit strip over a hairline: a 1px target would be
+		 * almost impossible to grab, which is why the first-party layout uses
+		 * the same trick.
+		 * @param props - `{ column, active, onStart }`.
+		 * @returns the splitter element.
+		 */
+		function Splitter(props) {
+			const { column, active, onStart, t } = props
+			const [hover, setHover] = React.useState(false)
+			const lit = hover || active
+			return h('div', {
+				style: {
+					...S.splitter,
+					background: lit ? 'var(--dsw-alias-state-business-primary)' : 'transparent',
+				},
+				title: t('splitter.title'),
+				onPointerEnter: () => setHover(true),
+				onPointerLeave: () => setHover(false),
+				onPointerDown: (event) => {
+					// Without this the drag selects the surrounding text.
+					event.preventDefault()
+					event.stopPropagation()
+					onStart(column, event.clientX)
+				},
+			})
+		}
+
+		const S = {
+			root: {
+				display: 'flex',
+				flexDirection: 'column',
+				width: '100%',
+				minWidth: 0,
+				minHeight: 0,
+				boxSizing: 'border-box',
+				// The shell sizes this view to its content while a session is
+				// active (`.viewArea { flex: 1 0 auto; min-height: auto }`), so
+				// `height: 100%` resolves to `auto` and the panel would grow with
+				// the commit list until the whole page scrolled. The cap below is
+				// what pins it to the window; the panes inside then scroll.
+				// Two shell overlays sit above this view and both are dealt with
+				// by this one z-index:
+				//
+				//   * the session column's invisible 40px resize strip
+				//     (`position:absolute; z-index:8; top:0; bottom:0` in the
+				//     gutter) spans the full width, so it lands ON TOP of the panel
+				//     and swallows the pointer wherever it crosses;
+				//   * the composer floats at z-index:7 over the bottom of the view.
+				//
+				// The git panel wants the full height and has its own commit box,
+				// so it deliberately occludes both while this view is selected.
+				// Switching back to the conversation view unmounts the panel and both reappear.
+				position: 'relative',
+				zIndex: 9,
+				// A definite height, not a cap. A `max-height` only bounds the
+				// panel: with a short worktree the content-sized view area shrank
+				// the panel back and the composer reappeared underneath, while the
+				// long history list happened to reach the cap and hide it. The
+				// measured height below replaces this fallback at runtime; it is
+				// what the render test sees.
+				height: 'calc(100vh - 96px)',
+				// When the shell *does* hand down a definite height, that is the
+				// real bound and the viewport estimate must not exceed it.
+				maxHeight: '100%',
+				// The shell box exists only to win the layering fight, so it stays
+				// out of hit-testing; the inner panel is the real surface.
+				pointerEvents: 'none',
+				// No background here on purpose: the shell box paints nothing.
+			},
+			panel: {
+				display: 'flex',
+				flexDirection: 'column',
+				flex: '1 1 auto',
+				minWidth: 0,
+				minHeight: 0,
+				overflow: 'hidden',
+				pointerEvents: 'auto',
+				background: 'var(--dsw-alias-bg-layer-1)',
+				color: 'var(--dsw-alias-label-primary)',
+				fontSize: 12,
+				lineHeight: 1.5,
+			},
+			header: {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 8,
+				padding: '6px 10px',
+				borderBottom: '1px solid var(--dsw-alias-border-l2)',
+				flexWrap: 'wrap',
+				minWidth: 0,
+				flex: '0 0 auto',
+			},
+			branch: { fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4, flex: '0 0 auto' },
+			pill: {
+				fontSize: 10,
+				padding: '1px 6px',
+				borderRadius: 999,
+				border: '1px solid var(--dsw-alias-border-l2)',
+				opacity: 0.85,
+			},
+			input: {
+				flex: '1 1 200px',
+				minWidth: 120,
+				background: 'transparent',
+				border: '1px solid var(--dsw-alias-border-l2)',
+				borderRadius: 4,
+				color: 'inherit',
+				font: 'inherit',
+				padding: '3px 6px',
+				boxSizing: 'border-box',
+			},
+			button: {
+				background: 'transparent',
+				border: '1px solid var(--dsw-alias-border-l2)',
+				borderRadius: 4,
+				color: 'inherit',
+				font: 'inherit',
+				padding: '3px 10px',
+				cursor: 'pointer',
+				flex: '0 0 auto',
+			},
+			primary: {
+				background: 'var(--dsw-alias-button-primary-fill)',
+				border: '1px solid transparent',
+				borderRadius: 4,
+				color: 'var(--dsw-alias-label-primary-inverted)',
+				font: 'inherit',
+				padding: '3px 12px',
+				cursor: 'pointer',
+				flex: '0 0 auto',
+			},
+			tab: {
+				background: 'transparent',
+				border: 'none',
+				borderBottom: '2px solid transparent',
+				color: 'inherit',
+				font: 'inherit',
+				padding: '4px 8px',
+				cursor: 'pointer',
+				opacity: 0.6,
+			},
+			tabActive: { opacity: 1, borderBottomColor: 'var(--dsw-alias-button-primary-fill)' },
+			body: { display: 'flex', flex: '1 1 auto', minWidth: 0, minHeight: 0 },
+			splitter: {
+				flex: '0 0 5px',
+				alignSelf: 'stretch',
+				cursor: 'col-resize',
+				// A 5px grab strip with no resting fill; it lights up on hover so
+				// the affordance is discoverable without adding a permanent bar.
+				opacity: 0.55,
+				touchAction: 'none',
+				position: 'relative',
+				zIndex: 2,
+			},
+			branches: {
+				flex: '0 0 190px',
+				minWidth: 0,
+				overflow: 'auto',
+				borderRight: '1px solid var(--dsw-alias-border-l2)',
+				paddingBottom: 12,
+			},
+			branchRow: {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 4,
+				padding: '1px 10px',
+				cursor: 'pointer',
+				minWidth: 0,
+				whiteSpace: 'nowrap',
+			},
+			branchSelected: { background: 'var(--dsw-alias-interactive-bg-active)' },
+			branchIndent: { paddingLeft: 22 },
+			branchMark: { flex: '0 0 auto', color: 'var(--dsw-alias-state-business-primary)' },
+			branchAction: { textTransform: 'none', letterSpacing: 0, opacity: 0.85 },
+			select: {
+				flex: '0 1 auto',
+				minWidth: 0,
+				background: 'transparent',
+				border: '1px solid var(--dsw-alias-border-l2)',
+				borderRadius: 4,
+				color: 'inherit',
+				font: 'inherit',
+				fontSize: 10,
+				padding: '0 2px',
+				textTransform: 'none',
+				letterSpacing: 0,
+				cursor: 'pointer',
+			},
+			branchInput: {
+				flex: '1 1 auto',
+				minWidth: 0,
+				background: 'transparent',
+				border: '1px solid var(--dsw-alias-border-l2)',
+				borderRadius: 4,
+				color: 'inherit',
+				font: 'inherit',
+				padding: '1px 5px',
+				boxSizing: 'border-box',
+			},
+			groupRow: { display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' },
+			commits: {
+				flex: '1 1 34%',
+				minWidth: 200,
+				overflow: 'auto',
+				borderRight: '1px solid var(--dsw-alias-border-l2)',
+			},
+			details: { flex: '1 1 30%', minWidth: 220, minHeight: 0, display: 'flex', flexDirection: 'column' },
+			left: {
+				flex: '0 0 380px',
+				minWidth: 0,
+				overflow: 'auto',
+				borderRight: '1px solid var(--dsw-alias-border-l2)',
+				display: 'flex',
+				flexDirection: 'column',
+			},
+			right: { flex: '1 1 auto', minWidth: 0, minHeight: 0, display: 'flex', flexDirection: 'column' },
+			group: {
+				padding: '5px 10px 2px',
+				opacity: 0.6,
+				fontSize: 10,
+				textTransform: 'uppercase',
+				letterSpacing: 0.5,
+				flex: '0 0 auto',
+			},
+			row: {
+				display: 'flex',
+				gap: 6,
+				alignItems: 'center',
+				padding: '2px 10px',
+				cursor: 'pointer',
+				minWidth: 0,
+			},
+			rowSelected: { background: 'var(--dsw-alias-interactive-bg-active)' },
+			stat: { fontFamily: 'ui-monospace, monospace', flex: '0 0 auto', width: 20, textAlign: 'center' },
+			path: { flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+			// A file row leads with the NAME and follows with its directory, dimmer
+			// — the way IDEA's commit tree does it, and for the same reason: a
+			// project has many files in one directory and few files with one
+			// name, so the name is what a reader scans for and the directory is
+			// context.
+			//
+			// The directory carries a much larger shrink factor so that a narrow
+			// row eats the path before it eats the name.
+			fileName: {
+				flex: '0 1 auto',
+				minWidth: 0,
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+				fontWeight: 500,
+			},
+			fileDir: {
+				flexGrow: 1,
+				flexShrink: 20,
+				flexBasis: 'auto',
+				minWidth: 0,
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+				opacity: 0.6,
+			},
+			iconButton: {
+				background: 'transparent',
+				border: '1px solid var(--dsw-alias-border-l2)',
+				borderRadius: 3,
+				color: 'inherit',
+				font: 'inherit',
+				fontSize: 10,
+				padding: '0 5px',
+				cursor: 'pointer',
+				flex: '0 0 auto',
+				opacity: 0.75,
+			},
+			commit: { display: 'flex', gap: 6, padding: '2px 10px', alignItems: 'center', cursor: 'pointer', minWidth: 0 },
+			hash: { fontFamily: 'ui-monospace, monospace', opacity: 0.65, flex: '0 0 auto' },
+			subject: { flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+			meta: { opacity: 0.55, flex: '0 0 auto', fontSize: 11 },
+			diffWrap: { flex: '1 1 auto', minWidth: 0, minHeight: 0, overflow: 'auto' },
+			diffLine: { fontFamily: 'ui-monospace, monospace', padding: '0 10px', whiteSpace: 'pre' },
+			hunkBar: {
+				display: 'flex',
+				alignItems: 'center',
+				gap: 8,
+				padding: '3px 10px',
+				background: 'var(--dsw-alias-bg-layer-2)',
+				position: 'sticky',
+				top: 0,
+			},
+			commitFiles: {
+				flex: '0 0 auto',
+				maxHeight: '38%',
+				overflow: 'auto',
+				borderBottom: '1px solid var(--dsw-alias-border-l2)',
+			},
+			commitHead: {
+				padding: '8px 10px',
+				borderBottom: '1px solid var(--dsw-alias-border-l2)',
+				flex: '0 0 auto',
+			},
+			composer: {
+				display: 'flex',
+				gap: 6,
+				padding: '6px 10px',
+				borderBottom: '1px solid var(--dsw-alias-border-l2)',
+				flex: '0 0 auto',
+				alignItems: 'center',
+			},
+			message: {
+				flex: '1 1 auto',
+				minWidth: 0,
+				background: 'transparent',
+				border: '1px solid var(--dsw-alias-border-l2)',
+				borderRadius: 4,
+				color: 'inherit',
+				font: 'inherit',
+				padding: '3px 6px',
+				boxSizing: 'border-box',
+			},
+			empty: { padding: 16, opacity: 0.6 },
+			error: {
+				margin: 10,
+				padding: '8px 10px',
+				border: '1px solid var(--dsw-alias-state-error-primary)',
+				borderRadius: 4,
+				color: 'var(--dsw-alias-state-error-primary)',
+				whiteSpace: 'pre-wrap',
+				overflow: 'auto',
+				flex: '0 0 auto',
+			},
+			notice: {
+				padding: '6px 10px',
+				color: 'var(--dsw-alias-state-success-primary)',
+				flex: '0 0 auto',
+			},
+			// The composer's branch chip. Its metrics match the shell's own
+			// composer controls (13px type, 20px line, the secondary label
+			// colour), so it reads as part of that row rather than as a badge
+			// dropped into it.
+			branchChip: {
+				display: 'inline-flex',
+				alignItems: 'center',
+				gap: 5,
+				minWidth: 0,
+				color: 'var(--dsw-alias-label-secondary)',
+				fontSize: 13,
+				fontWeight: 500,
+				lineHeight: '20px',
+				// Display only: there is nothing to press, so it must not look
+				// pressable.
+				cursor: 'default',
+				userSelect: 'none',
+			},
+			branchChipIcon: { display: 'inline-flex', flex: '0 0 auto', opacity: 0.85 },
+			branchChipName: {
+				minWidth: 0,
+				// Capped so a long branch name cannot push the composer row
+				// into a second line; the bubble carries the rest.
+				maxWidth: 220,
+				overflow: 'hidden',
+				textOverflow: 'ellipsis',
+				whiteSpace: 'nowrap',
+			},
+		}
+
+		/**
+		 * How long the pointer must rest on a cut-off label before its bubble
+		 * appears.
+		 *
+		 * A bubble that pops up the instant the pointer crosses a label is
+		 * noise — the pointer is usually on its way somewhere else. The pause is
+		 * what separates "passing by" from "I want to read this".
+		 */
+		const BUBBLE_DELAY_MS = 300
+
+		/** The gap between the label and its bubble. */
+		const BUBBLE_GAP = 8
+
+		/** The smallest distance a bubble keeps from the window's edges. */
+		const BUBBLE_MARGIN = 8
+
+		/**
+		 * How often the composer's branch chip re-reads the branch.
+		 *
+		 * The branch changes under the panel's feet: the agent checks out a
+		 * branch in the terminal, or a shell script switches one. A chip that
+		 * only read the branch when it mounted would lie for the rest of the
+		 * session. The host caches the read and drops it when `.git` changes, so
+		 * this poll is a cache hit until something actually moves.
+		 */
+		const BRANCH_POLL_MS = 5000
+
+		/**
+		 * The bubble's own look.
+		 *
+		 * These are the shell's tooltip tokens and metrics, not a new palette.
+		 * The shell already draws every tooltip this way — `position: fixed`,
+		 * `pointer-events: none`, the tooltip background token, 13px type — so a
+		 * bubble built from the same tokens is indistinguishable from the
+		 * tooltips around it, in both themes. A colour picked for one theme is
+		 * close to invisible in the other, and the tooltip tokens are switched
+		 * with the theme.
+		 */
+		const BUBBLE_STYLE = {
+			position: 'fixed',
+			// The shell's own tooltips use this layer; the panel itself sits at
+			// 9, and the bubble lives outside the panel's stacking context
+			// anyway (it is a child of the document body).
+			zIndex: '1100',
+			// The bubble must never steal the pointer: it covers the label the
+			// reader is pointing at.
+			pointerEvents: 'none',
+			boxSizing: 'border-box',
+			width: 'max-content',
+			maxWidth: 'min(50vw, 480px)',
+			maxHeight: 'calc(100vh - 24px)',
+			overflow: 'auto',
+			padding: '3px 7px',
+			borderRadius: 'var(--dsw-radius-sm)',
+			background: 'var(--dsw-alias-tooltip-bg)',
+			color: 'var(--dsw-static-neutral-bluish-00)',
+			fontSize: '13px',
+			lineHeight: '20px',
+			// `pre-line` so a multi-line bubble (a path, a rename, a hash and an
+			// author) keeps its line breaks, while a long single line still wraps.
+			whiteSpace: 'pre-line',
+			overflowWrap: 'break-word',
+			wordBreak: 'break-word',
+			boxShadow: 'var(--dsw-shadow-lv2)',
+		}
+
+		/** The bubble element, created on the first hover and reused after that. */
+		let bubbleElement = null
+
+		/** The pending bubble, when one is scheduled but not shown yet. */
+		let bubbleTimer = null
+
+		/** The label a pending bubble belongs to. */
+		let bubbleAnchor = null
+
+		/**
+		 * The bubble element, or null when there is no document to put it in.
+		 *
+		 * The bubble lives in `document.body` rather than inside the panel: every
+		 * column of the panel scrolls inside an `overflow: hidden` box, so a
+		 * bubble rendered in the tree would be clipped by exactly the panel it
+		 * belongs to. `position: fixed` then puts it in viewport coordinates,
+		 * which is what the placement arithmetic works in.
+		 * @returns the element, or null.
+		 */
+		function ensureBubbleElement() {
+			if (bubbleElement !== null) return bubbleElement
+			if (typeof document === 'undefined' || document === null) return null
+			if (typeof document.createElement !== 'function') return null
+			if (!document.body) return null
+			const element = document.createElement('div')
+			element.setAttribute('data-dsh-git-bubble', '')
+			Object.assign(element.style, BUBBLE_STYLE)
+			element.style.display = 'none'
+			document.body.appendChild(element)
+			bubbleElement = element
+			// A scroll or a resize moves the label out from under the bubble,
+			// which would leave it pointing at nothing; it is dismissed instead.
+			if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+				window.addEventListener('scroll', () => hideBubble(), true)
+				window.addEventListener('resize', () => hideBubble())
+			}
+			return element
+		}
+
+		/**
+		 * Whether a label is actually cut off.
+		 *
+		 * The bubble exists to show what the reader cannot see, so it must not
+		 * appear for a label that fits — that would be a bubble repeating text
+		 * that is already on the screen. `scrollWidth` is the width the text
+		 * wants and `clientWidth` the width it was given; the extra pixel
+		 * absorbs the rounding the two are reported with.
+		 * @param element - the label.
+		 * @returns true when the text overflows its box.
+		 */
+		function isTruncated(element) {
+			if (element === null || element === undefined) return false
+			const scrollWidth = element.scrollWidth
+			const clientWidth = element.clientWidth
+			if (!Number.isFinite(scrollWidth) || !Number.isFinite(clientWidth)) return false
+			return scrollWidth > clientWidth + 1
+		}
+
+		/**
+		 * Where the bubble goes.
+		 *
+		 * Below the label when there is room for it, above it otherwise, and
+		 * never past the edge of the window: a bubble the reader cannot see is
+		 * worse than no bubble at all.
+		 * @param anchor - the label's box, in viewport coordinates.
+		 * @param size - the bubble's own size.
+		 * @param viewport - the window's size.
+		 * @returns `{left, top}` in viewport pixels.
+		 */
+		function bubblePosition(anchor, size, viewport) {
+			const width = Math.min(size.width, Math.max(0, viewport.width - BUBBLE_MARGIN * 2))
+			const height = size.height
+			// A bubble wider than its label is lined up with the label's start
+			// edge. Centring it would push half of it off the window and leave it
+			// pointing at nothing.
+			let left =
+				width >= anchor.width
+					? anchor.left
+					: anchor.left + anchor.width / 2 - width / 2
+			left = Math.max(BUBBLE_MARGIN, Math.min(left, viewport.width - width - BUBBLE_MARGIN))
+			const below = anchor.bottom + BUBBLE_GAP
+			const above = anchor.top - BUBBLE_GAP - height
+			const fitsBelow = below + height <= viewport.height - BUBBLE_MARGIN
+			let top = fitsBelow || above < BUBBLE_MARGIN ? below : above
+			if (top + height > viewport.height - BUBBLE_MARGIN) {
+				top = Math.max(BUBBLE_MARGIN, viewport.height - height - BUBBLE_MARGIN)
+			}
+			return { left, top }
+		}
+
+		/**
+		 * The window's size, in the same units as the label's box.
+		 * @returns `{width, height}`.
+		 */
+		function viewportSize() {
+			return {
+				width: typeof window === 'undefined' ? 0 : window.innerWidth,
+				height: typeof window === 'undefined' ? 0 : window.innerHeight,
+			}
+		}
+
+		/**
+		 * Move the bubble next to a label.
+		 * @param anchor - the label element.
+		 */
+		function positionBubble(anchor) {
+			const element = bubbleElement
+			if (element === null) return
+			const place = bubblePosition(
+				anchor.getBoundingClientRect(),
+				{ width: element.offsetWidth, height: element.offsetHeight },
+				viewportSize(),
+			)
+			element.style.left = `${Math.round(place.left)}px`
+			element.style.top = `${Math.round(place.top)}px`
+		}
+
+		/**
+		 * Fill the bubble with its text.
+		 *
+		 * A path has no spaces, so the browser would break it wherever the line
+		 * happens to end — often in the middle of a file name. A `<wbr>` after
+		 * every slash gives it somewhere better to break: at a directory
+		 * boundary. `<wbr>` carries no text of its own, so what the bubble shows
+		 * and what a reader copies are both the path.
+		 * @param element - the bubble element.
+		 * @param text - the text to show.
+		 */
+		function setBubbleText(element, text) {
+			if (typeof document.createTextNode !== 'function') {
+				element.textContent = text
+				return
+			}
+			element.textContent = ''
+			const parts = text.split('/')
+			for (let index = 0; index < parts.length; index += 1) {
+				element.appendChild(document.createTextNode(parts[index]))
+				if (index < parts.length - 1) {
+					element.appendChild(document.createTextNode('/'))
+					element.appendChild(document.createElement('wbr'))
+				}
+			}
+		}
+
+		/**
+		 * Put the bubble on screen for one label.
+		 * @param anchor - the label element.
+		 * @param text - the text to show.
+		 */
+		function showBubble(anchor, text) {
+			const element = ensureBubbleElement()
+			if (element === null) return
+			if (typeof text !== 'string' || text === '') return
+			setBubbleText(element, text)
+			element.style.display = 'block'
+			positionBubble(anchor)
+		}
+
+		/**
+		 * Take the bubble off the screen.
+		 */
+		function hideBubble() {
+			if (bubbleElement !== null) bubbleElement.style.display = 'none'
+		}
+
+		/**
+		 * Drop the pending bubble and hide the visible one.
+		 */
+		function cancelBubble() {
+			if (bubbleTimer !== null) {
+				clearTimeout(bubbleTimer)
+				bubbleTimer = null
+			}
+			bubbleAnchor = null
+			hideBubble()
+		}
+
+		/**
+		 * Show a label's bubble, once the pointer has rested on it.
+		 * @param anchor - the label element.
+		 * @param text - the text to show.
+		 * @param always - show it even when the label is not cut off.
+		 */
+		function scheduleBubble(anchor, text, always = false) {
+			cancelBubble()
+			if (typeof setTimeout !== 'function') return
+			bubbleAnchor = anchor
+			bubbleTimer = setTimeout(() => {
+				bubbleTimer = null
+				if (bubbleAnchor !== anchor) return
+				// The check happens now, not on hover: the label may have been
+				// resized in between (a column drag), and a bubble for text that
+				// now fits is noise.
+				if (!always && !isTruncated(anchor)) return
+				showBubble(anchor, text)
+			}, BUBBLE_DELAY_MS)
+		}
+
+		/**
+		 * The props that make one label reveal its full text on hover.
+		 *
+		 * The bubble replaces the native `title` on these labels: both answer the
+		 * same hover, and the native one paints over the bubble a second later.
+		 * The native tooltip also cannot be styled, cannot show a rename's two
+		 * paths at once, and takes seconds to appear.
+		 *
+		 * The bubble earns its place in one of two ways. Either the label is cut
+		 * off, so the bubble shows what the reader cannot see; or the bubble
+		 * carries something the row does not show at all — a branch's upstream,
+		 * a commit's author — so the bubble is the only place that information
+		 * appears. The second case is `extra`, and it shows even when the label
+		 * fits.
+		 * @param text - the text to reveal.
+		 * @param options - `{ extra }`: the text carries something the row does not show.
+		 * @returns props to spread onto the label.
+		 */
+		function reveal(text, options = {}) {
+			const always = options.extra === true
+			return {
+				onPointerEnter: (event) => {
+					const anchor = event.currentTarget
+					if (!always && !isTruncated(anchor)) return
+					scheduleBubble(anchor, text, always)
+				},
+				onPointerLeave: () => cancelBubble(),
+			}
+		}
+
+		/**
+		 * The branch icon.
+		 *
+		 * Inline SVG rather than an icon from the shell: the icon package is
+		 * bundled INTO the first-party clients and is not a module a plugin can
+		 * require, so an inline path is the only way to get one without making
+		 * the whole panel depend on a package that may not be there. `currentColor`
+		 * means it follows the chip's colour, and therefore the theme.
+		 * @returns the icon element.
+		 */
+		function BranchIcon() {
+			return h(
+				'svg',
+				{
+					width: 14,
+					height: 14,
+					viewBox: '0 0 24 24',
+					fill: 'none',
+					stroke: 'currentColor',
+					strokeWidth: 1.8,
+					strokeLinecap: 'round',
+					strokeLinejoin: 'round',
+					'aria-hidden': 'true',
+				},
+				h('line', { x1: 6, y1: 3, x2: 6, y2: 15 }),
+				h('circle', { cx: 18, cy: 6, r: 3 }),
+				h('circle', { cx: 6, cy: 18, r: 3 }),
+				h('path', { d: 'M18 9a9 9 0 0 1-9 9' }),
+			)
+		}
+
+		/**
+		 * The composer's branch chip: which branch the session's workspace is on.
+		 *
+		 * Display only. Switching branches is the panel's job — a second place to
+		 * do it would be a second way to be wrong, and the composer is where
+		 * people write messages, not where they change repositories.
+		 *
+		 * A directory that is not a repository has no branch, so it has no chip
+		 * either. The failure is silence, not an error in the composer: the
+		 * composer is not the place to complain about a repository.
+		 *
+		 * The branch is read from `/branches`, which lists refs and never scans
+		 * the working tree — the chip must not cost a `git status` on every
+		 * repository the user opens.
+		 * @param props - `{ root }`, the session's working directory.
+		 * @returns the chip, or nothing.
+		 */
+		function BranchChip(props) {
+			const { root } = props
+			const [branch, setBranch] = React.useState(null)
+
+			React.useEffect(() => {
+				if (typeof root !== 'string' || root === '') {
+					setBranch(null)
+					return undefined
+				}
+				let cancelled = false
+				const read = () => {
+					api('/branches', { root }, fallbackTranslate)
+						.then((data) => {
+							if (cancelled) return
+							// A detached HEAD has no branch name — the host
+							// leaves `head` empty for it — so there is no chip.
+							const head = data?.head
+							setBranch(typeof head === 'string' && head !== '' ? head : null)
+						})
+						.catch(() => {
+							// Not a repository, or the git service is not
+							// reachable. Both mean "no branch to show".
+							if (!cancelled) setBranch(null)
+						})
+				}
+				read()
+				const timer = setInterval(read, BRANCH_POLL_MS)
+				// The user usually comes back to the window right after the
+				// agent switched branches somewhere else.
+				const onFocus = () => read()
+				if (typeof window !== 'undefined' && typeof window.addEventListener === 'function') {
+					window.addEventListener('focus', onFocus)
+				}
+				return () => {
+					cancelled = true
+					clearInterval(timer)
+					if (typeof window !== 'undefined' && typeof window.removeEventListener === 'function') {
+						window.removeEventListener('focus', onFocus)
+					}
+				}
+			}, [root])
+
+			if (branch === null) return null
+			return h(
+				'span',
+				{ style: S.branchChip, 'data-dsh-git-branch': branch },
+				h('span', { style: S.branchChipIcon }, h(BranchIcon)),
+				h('span', { style: S.branchChipName, ...reveal(branch) }, branch),
+			)
+		}
+
+		/**
+		 * Fetch one read endpoint.
+		 * @param route - path under the prefix.
+		 * @param params - query parameters; empty values are dropped.
+		 * @returns the unwrapped `data` payload.
+		 */
+		async function api(route, params, t = fallbackTranslate) {
+			const search = new URLSearchParams()
+			for (const [key, value] of Object.entries(params ?? {})) {
+				if (value !== undefined && value !== null && value !== '') search.set(key, String(value))
+			}
+			const query = search.toString()
+			let response
+			try {
+				response = await fetch(`${API}${route}${query === '' ? '' : `?${query}`}`)
+			} catch (error) {
+				throw new Error(
+					t('error.unreachable', { route: `${API}${route}`, message: error.message }),
+				)
+			}
+			let payload
+			try {
+				payload = await response.json()
+			} catch {
+				throw new Error(t('error.notJson', { route: `${API}${route}`, status: response.status }))
+			}
+			if (payload.ok !== true) throw new Error(payload.error ?? `HTTP ${response.status}`)
+			return payload.data
+		}
+
+		/**
+		 * Perform one write. Always carries {@link WRITE_HEADER}.
+		 * @param route - path under the prefix.
+		 * @param body - JSON body.
+		 * @returns the unwrapped `data` payload.
+		 */
+		async function write(route, body) {
+			const response = await fetch(`${API}${route}`, {
+				method: 'POST',
+				headers: { 'content-type': 'application/json', [WRITE_HEADER]: '1' },
+				body: JSON.stringify(body),
+			})
+			const payload = await response.json().catch(() => ({ ok: false, error: `HTTP ${response.status}` }))
+			if (payload.ok !== true) throw new Error(payload.error ?? `HTTP ${response.status}`)
+			return payload.data
+		}
+
+		/**
+		 * Assign a lane to every commit, newest-first.
+		 *
+		 * A lane holds the hash of the commit it is waiting for. Three rules keep
+		 * the graph from widening without bound, and the previous version broke
+		 * all three — on a merge-heavy history it grew a new column for almost
+		 * every commit until the row text was squeezed to nothing:
+		 *
+		 * 1. A freed lane is REUSED (first free slot) instead of appending, so a
+		 *    short-lived branch does not permanently widen the graph. The old
+		 *    version only trimmed trailing empties, so interior holes were never
+		 *    reclaimed.
+		 * 2. A parent that is not in the loaded window is not awaited at all.
+		 *    Otherwise every merge whose second parent fell outside the page
+		 *    held a lane open forever.
+		 * 3. When several lanes await the same commit (a merge target), all but
+		 *    one are cleared as the row is consumed, so the graph converges.
+		 *
+		 * Lane indices stay stable between consecutive rows, so the caller can
+		 * draw straight vertical runs without diagonal connectors.
+		 * @param commits - commits newest-first, each with `hash` and `parents`.
+		 * @returns one row per commit with its lane and the lane state around it.
+		 */
+		function computeLanes(commits) {
+			const visible = new Set(commits.map((commit) => commit.hash))
+			let lanes = []
+			const rows = []
+
+			/** Take a lane: an emptied one if possible, else a new column. */
+			const acquire = (hash) => {
+				const free = lanes.indexOf(null)
+				if (free !== -1) {
+					lanes[free] = hash
+					return free
+				}
+				lanes.push(hash)
+				return lanes.length - 1
+			}
+
+			for (const commit of commits) {
+				const lanesBefore = lanes.slice()
+				let lane = lanes.indexOf(commit.hash)
+				if (lane === -1) lane = acquire(commit.hash)
+
+				// A merge target can be awaited by more than one lane; this row
+				// consumes them all.
+				for (let i = lanes.length - 1; i >= 0; i -= 1) {
+					if (i !== lane && lanes[i] === commit.hash) lanes[i] = null
+				}
+
+				// The first parent carries this lane on. A parent past the end of
+				// the loaded window will never arrive, so the lane is released
+				// rather than left waiting.
+				const first = commit.parents[0]
+				lanes[lane] = first !== undefined && visible.has(first) ? first : null
+
+				for (const parent of commit.parents.slice(1)) {
+					if (!visible.has(parent) || lanes.includes(parent)) continue
+					acquire(parent)
+				}
+
+				// Two lanes can now await the same parent if this commit's first
+				// parent was already being awaited elsewhere — the branch has
+				// merged, so the duplicate column collapses.
+				const awaited = lanes[lane]
+				if (awaited !== null) {
+					for (let i = lanes.length - 1; i > lane; i -= 1) {
+						if (lanes[i] === awaited) lanes.splice(i, 1)
+					}
+				}
+
+				while (lanes.length > 0 && lanes[lanes.length - 1] === null) lanes.pop()
+				rows.push({ commit, lane, lanesBefore, lanesAfter: lanes.slice() })
+			}
+			return rows
+		}
+
+		/**
+		 * The lane gutter for one commit row.
+		 * @param props - `{ row }`.
+		 * @returns the gutter element.
+		 */
+		function LaneGraph(props) {
+			const { row } = props
+			const width = Math.max(row.lanesBefore.length, row.lanesAfter.length, row.lane + 1)
+			const cells = []
+			for (let i = 0; i < width; i += 1) {
+				const color = LANE_COLORS[i % LANE_COLORS.length]
+				const isCommit = i === row.lane
+				const live = row.lanesBefore[i] != null || row.lanesAfter[i] != null
+				cells.push(
+					h(
+						'div',
+						{ key: i, style: { position: 'relative', width: 13, height: 18, flex: '0 0 auto' } },
+						live && !isCommit
+							? h('div', {
+									style: { position: 'absolute', left: 6, top: 0, bottom: 0, width: 2, background: color, opacity: 0.45 },
+								})
+							: null,
+						isCommit
+							? h('div', {
+									style: {
+										position: 'absolute',
+										left: 3,
+										top: 5,
+										width: 8,
+										height: 8,
+										borderRadius: '50%',
+										background: color,
+										boxShadow: `0 0 0 2px color-mix(in srgb, ${color} 20%, transparent)`,
+									},
+								})
+							: null,
+					),
+				)
+			}
+			return h('div', { style: { display: 'flex', flex: '0 0 auto' } }, cells)
+		}
+
+		/**
+		 * The directory the given session is working in.
+		 *
+		 * This is the whole of the session ↔ repository binding: the slot hands
+		 * the active session id to the contribution's `inject`, and the session
+		 * summary carries the `cwd` it was started with. Resolved defensively —
+		 * an older shell without the summary shape must degrade to a manually
+		 * entered path, not throw in the slot.
+		 * @param ctx - client root context.
+		 * @param sessionId - the slot's active session id.
+		 * @returns the session's working directory, or null.
+		 */
+		function sessionCwd(ctx, sessionId) {
+			if (typeof sessionId !== 'string' || sessionId === '') return null
+			try {
+				const snapshot = ctx.sessions?.list?.getSnapshot?.()
+				const summary = snapshot?.byId?.[sessionId]
+				if (typeof summary?.cwd === 'string' && summary.cwd !== '') return summary.cwd
+			} catch {
+				/* fall through to the manual path */
+			}
+			return null
+		}
+
+		/**
+		 * Candidates for the `@` menu: the changed files of this session's
+		 * repository, then its recent commits.
+		 *
+		 * Failure is silence, not an error: a menu that cannot load simply offers
+		 * nothing from this source, and the other `@` sources still work.
+		 * @param ctx - client root context.
+		 * @param session - the session projection the menu is open for.
+		 * @param req - the live query.
+		 * @param t - translate function.
+		 * @returns menu candidates, most relevant first.
+		 */
+		async function gitCandidates(ctx, session, req, t) {
+			const root = sessionCwd(ctx, session?.sessionId)
+			if (root === null) return []
+			const query = String(req?.query ?? '').toLowerCase()
+			let status
+			let log
+			try {
+				;[status, log] = await Promise.all([
+					api('/status', { root }, fallbackTranslate),
+					api('/log', { root, limit: 30 }, fallbackTranslate),
+				])
+			} catch {
+				return []
+			}
+			const matches = (text) => query === '' || String(text).toLowerCase().includes(query)
+			const files = []
+			for (const [label, group, mode] of [
+				['group.conflicted', status.conflicted, 'worktree'],
+				['group.staged', status.staged, 'staged'],
+				['group.unstaged', status.unstaged, 'worktree'],
+				['group.untracked', status.untracked, 'untracked'],
+			]) {
+				for (const entry of group ?? []) {
+					if (!matches(entry.path)) continue
+					files.push({
+						name: entry.path,
+						description: t(label),
+						section: t('handoff.files'),
+						value: encodeFileRef(entry, mode),
+					})
+				}
+			}
+			const commits = (log.commits ?? [])
+				.filter((commit) => matches(commit.subject) || matches(commit.hash))
+				.map((commit) => ({
+					name: `${commit.hash.slice(0, 7)} ${commit.subject}`,
+					description: commit.author,
+					section: t('handoff.commits'),
+					value: encodeCommitRef({ hash: commit.hash, subject: commit.subject, files: null }),
+				}))
+			return [...files.slice(0, 30), ...commits]
+		}
+
+		/**
+		 * Split a unified diff into its file header and its hunks. Mirrors
+		 * `splitHunks` in the host half; the hunk indices sent back must line up
+		 * with the ones the host derives from the same text.
+		 * @param text - a unified diff.
+		 * @returns the header lines and one string per `@@` hunk.
+		 */
+		function splitHunks(text) {
+			const header = []
+			const hunks = []
+			let current = null
+			for (const line of text.split('\n')) {
+				if (line.startsWith('@@')) {
+					if (current !== null) hunks.push(current.join('\n'))
+					current = [line]
+					continue
+				}
+				if (current === null) header.push(line)
+				else current.push(line)
+			}
+			if (current !== null) hunks.push(current.join('\n'))
+			return { header, hunks: hunks.map((hunk) => hunk.replace(/\n+$/, '')) }
+		}
+
+		/**
+		 * Colourised diff lines.
+		 * @param props - `{ text }`.
+		 * @returns the lines.
+		 */
+		function DiffLines(props) {
+			return h(
+				'div',
+				null,
+				props.text.split('\n').map((line, index) => {
+					const isMeta =
+						line.startsWith('+++') ||
+						line.startsWith('---') ||
+						line.startsWith('diff ') ||
+						line.startsWith('index ') ||
+						line.startsWith('similarity ') ||
+						line.startsWith('rename ') ||
+						line.startsWith('new file ') ||
+						line.startsWith('deleted file ')
+					const isHunk = line.startsWith('@@')
+					const isAdd = line.startsWith('+') && !isMeta
+					const isDel = line.startsWith('-') && !isMeta
+					return h(
+						'div',
+						{
+							key: index,
+							style: {
+								...S.diffLine,
+								color: isMeta
+									? 'var(--dsw-alias-label-tertiary)'
+									: isHunk
+										? 'var(--dsw-alias-state-business-primary)'
+										: isAdd
+											? 'var(--dsw-alias-state-success-primary)'
+											: isDel
+												? 'var(--dsw-alias-state-error-primary)'
+												: 'inherit',
+								// A tint of the same token rather than a fixed rgba, so the
+								// line background tracks the theme too. `color-mix` is the
+								// pattern the shell's own stylesheets use.
+								background: isAdd
+									? 'color-mix(in srgb, var(--dsw-alias-state-success-primary) 12%, transparent)'
+									: isDel
+										? 'color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent)'
+										: 'transparent',
+							},
+						},
+						line === '' ? ' ' : line,
+					)
+				}),
+			)
+		}
+
+		/**
+		 * A diff, split so each hunk carries its own action.
+		 * @param props - `{ text, empty, actions }`, where `actions` is
+		 *   `{label, title, run(indices)}` or null for a read-only diff.
+		 * @returns the pane.
+		 */
+		function DiffPane(props) {
+			const { text, empty, actions, t } = props
+			if (!text) return h('div', { style: S.empty }, empty ?? t('empty.pickOne'))
+			const { header, hunks } = splitHunks(text)
+			if (hunks.length === 0) return h(DiffLines, { text })
+			return h(
+				'div',
+				null,
+				h(DiffLines, { text: header.join('\n') }),
+				hunks.map((hunk, index) =>
+					h(
+						'div',
+						{ key: index },
+						actions === null
+							? null
+							: h(
+									'div',
+									{ style: S.hunkBar },
+									h(
+										'button',
+										{ style: S.iconButton, title: actions.title, onClick: () => actions.run([index]) },
+										actions.label,
+									),
+									h('span', { style: S.meta }, t('hunk.header', { index: index + 1, total: hunks.length })),
+								),
+						h(DiffLines, { text: hunk }),
+					),
+				),
+			)
+		}
+
+		/**
+		 * Split a repository-relative path into its file name and its directory.
+		 *
+		 * The panel shows the name first and the directory after it, dimmer, so
+		 * that a row reads `AnalyseManager.java  src/main/java/…/analyse` rather
+		 * than one long path where the name is buried at the end. A file at the
+		 * repository root has no directory, and shows none.
+		 * @param path - a repository-relative path.
+		 * @returns `{name, dir}`; `dir` is `''` for a file at the root.
+		 */
+		function splitNameDir(path) {
+			const text = typeof path === 'string' ? path : ''
+			const slash = text.lastIndexOf('/')
+			return slash === -1
+				? { name: text, dir: '' }
+				: { name: text.slice(slash + 1), dir: text.slice(0, slash) }
+		}
+
+		/**
+		 * Relative time, coarse on purpose; the exact timestamp is in the title.
+		 * @param ms - epoch milliseconds.
+		 * @returns a short human string.
+		 */
+		function relativeTime(ms, t) {
+			const seconds = Math.max(0, (Date.now() - ms) / 1000)
+			if (seconds < 60) return t('stamp.justNow')
+			if (seconds < 3600) return t('stamp.minutes', { count: Math.floor(seconds / 60) })
+			if (seconds < 86400) return t('stamp.hours', { count: Math.floor(seconds / 3600) })
+			if (seconds < 2592000) return t('stamp.days', { count: Math.floor(seconds / 86400) })
+			return new Date(ms).toISOString().slice(0, 10)
+		}
+
+		/**
+		 * One changed file row, with the action that moves it between the index
+		 * and the worktree.
+		 * @param props - `{ file, selected, onOpen, onAction, action }`.
+		 * @returns the row element.
+		 */
+		function FileRow(props) {
+			// `onAction`, when present, is the descriptor `{label, title, run}` for
+			// this row's index/worktree toggle. It used to be read from a second
+			// destructured name that no caller ever passed, so every row with an
+			// action threw on `undefined.title` during render.
+			const { file, selected, onOpen, onAction, onCopy, t } = props
+			// Two shapes arrive here: working-tree entries carry `index`/`worktree`
+			// (where '.' means "unchanged on that side"), commit entries carry a
+			// single `status`. Pick the side that actually changed, or every
+			// unstaged file would render as a bare ".".
+			const letter =
+				file.status ??
+				[file.index, file.worktree].find((side) => side !== undefined && side !== '.' && side !== ' ') ??
+				file.index ??
+				'?'
+			const [color, labelKey] = STATUS[letter] ?? ['var(--dsw-alias-label-tertiary)', '']
+			// Name first, directory after it and dimmer — see `splitNameDir`.
+			const { name: fileName, dir: fileDir } = splitNameDir(file.path)
+			// The bubble shows the whole path, which is what the row splits into
+			// two pieces; a rename adds the path it came from.
+			const fullPath = file.origPath == null ? file.path : `${file.origPath} → ${file.path}`
+			return h(
+				'div',
+				{
+					style: { ...S.row, ...(selected ? S.rowSelected : null) },
+					onClick: onOpen,
+				},
+				h('span', { style: { ...S.stat, color }, title: labelKey === '' ? '' : t(labelKey) }, letter),
+				h('span', { style: S.fileName, ...reveal(fullPath) }, fileName),
+				fileDir === '' ? null : h('span', { style: S.fileDir, ...reveal(fullPath) }, fileDir),
+				file.origPath == null ? null : h('span', { style: S.meta }, `← ${file.origPath}`),
+				onCopy === undefined
+					? null
+					: h(
+							'button',
+							{
+								style: { ...S.iconButton, ...S.branchAction },
+								title: t('handoff.copyTitle'),
+								onClick: (event) => {
+									event.stopPropagation()
+									onCopy()
+								},
+							},
+							t('handoff.copy'),
+						),
+				onAction === undefined
+					? null
+					: h(
+							'button',
+							{
+								style: S.iconButton,
+								title: onAction.title,
+								onClick: (event) => {
+									// Without this the row's own click (open the diff)
+									// would also fire.
+									event.stopPropagation()
+									onAction.run()
+								},
+							},
+							onAction.label,
+						),
+			)
+		}
+
+		/**
+		 * The git panel.
+		 * @returns the panel element.
+		 */
+		function GitView(props) {
+			// The repository the current session works in. An explicitly typed
+			// path overrides it; otherwise the panel follows the session.
+			const sessionRoot = typeof props?.sessionRoot === 'string' ? props.sessionRoot : ''
+			// The shell injects a bound `t` (see the slot descriptor in `apply`);
+			// the fallback keeps a bare render working.
+			const t = typeof props?.t === 'function' ? props.t : fallbackTranslate
+			const [rootInput, setRootInput] = React.useState('')
+			const [appliedRoot, setAppliedRoot] = React.useState('')
+			const [mode, setMode] = React.useState('review')
+			// Declared after `mode` on purpose: hook order is positional, and the
+			// render test seeds the mode slot by index.
+			const [branches, setBranches] = React.useState({ local: [], remote: [], head: null })
+			const [ref, setRef] = React.useState('')
+			const [status, setStatus] = React.useState(null)
+			const [commits, setCommits] = React.useState([])
+			const [file, setFile] = React.useState(null)
+			const [fileDiff, setFileDiff] = React.useState('')
+			const [commit, setCommit] = React.useState(null)
+			const [commitDetail, setCommitDetail] = React.useState(null)
+			const [commitFile, setCommitFile] = React.useState(null)
+			const [commitDiff, setCommitDiff] = React.useState('')
+			const [message, setMessage] = React.useState('')
+			const [error, setError] = React.useState(null)
+			const [notice, setNotice] = React.useState(null)
+			const [busy, setBusy] = React.useState(false)
+			// Declared last so the render test's seeded indices stay valid.
+			const [widths, setWidths] = React.useState(() => readWidths(defaultStorage()))
+			const [drag, setDrag] = React.useState(null)
+			const [fillHeight, setFillHeight] = React.useState(null)
+			// Hook order is positional; this one is last on purpose so the render
+			// test's seeded indices (mode at 2, file/fileDiff at 7/8) stay valid.
+			const rootRef = React.useRef(null)
+			// `null` means the new-branch input is closed.
+			const [newBranch, setNewBranch] = React.useState(null)
+			// Bumped to force a reload when the ref filter did not change (creating a
+			// branch from HEAD leaves `ref` at ''), so the reload can never be a
+			// second, stale-ref fetch racing the effect's own.
+			const [reloadToken, setReloadToken] = React.useState(0)
+			const [pullStrategy, setPullStrategy] = React.useState('ff-only')
+			const [markers, setMarkers] = React.useState(() => readMarkers(defaultStorage()))
+			const [review, setReview] = React.useState(null)
+
+			// Empty `appliedRoot` means "follow the session"; a typed path pins it.
+			const effectiveRoot = appliedRoot !== '' ? appliedRoot : sessionRoot
+
+			const fail = React.useCallback((failure) => {
+				setError(failure instanceof Error ? failure.message : String(failure))
+			}, [])
+
+			const load = React.useCallback(async () => {
+				setBusy(true)
+				try {
+					const [nextStatus, nextLog, nextBranches] = await Promise.all([
+						api('/status', { root: effectiveRoot }, t),
+						api('/log', { root: effectiveRoot, limit: 200, ref }, t),
+						api('/branches', { root: effectiveRoot }, t),
+					])
+					// Every array is coerced, and its absence is reported. An
+					// undefined array here would throw while rendering the file
+					// groups — *after* the error branch has already been passed —
+					// and React would unmount the whole panel, leaving a blank
+					// view with no message anywhere.
+					const missing = ['staged', 'unstaged', 'untracked', 'conflicted'].filter(
+						(key) => !Array.isArray(nextStatus[key]),
+					)
+					if (missing.length > 0) {
+						throw new Error(t('error.badStatus', { fields: missing.join(', ') }))
+					}
+					setStatus({
+						...nextStatus,
+						staged: nextStatus.staged,
+						unstaged: nextStatus.unstaged,
+						untracked: nextStatus.untracked,
+						conflicted: nextStatus.conflicted,
+					})
+					setCommits(Array.isArray(nextLog.commits) ? nextLog.commits : [])
+					setBranches({
+						local: Array.isArray(nextBranches.local) ? nextBranches.local : [],
+						remote: Array.isArray(nextBranches.remote) ? nextBranches.remote : [],
+						head: nextBranches.head ?? null,
+					})
+					setError(null)
+					setRootInput((current) => (current === '' ? nextStatus.root : current))
+				} catch (failure) {
+					fail(failure)
+					setStatus(null)
+					setCommits([])
+				} finally {
+					setBusy(false)
+				}
+			}, [effectiveRoot, fail, ref, reloadToken])
+
+			React.useEffect(() => {
+				void load()
+			}, [load])
+
+			// The resize listener lives on window, not on the splitter, so the
+			// pointer can leave the 5px strip without dropping the drag.
+			React.useEffect(() => {
+				if (drag === null) return undefined
+				const onMove = (event) => {
+					const next = nextWidth(drag.column, drag.startWidth, drag.startX, event.clientX)
+					if (next !== null) setWidths((current) => ({ ...current, [drag.column]: next }))
+				}
+				const onEnd = () => setDrag(null)
+				window.addEventListener('pointermove', onMove)
+				window.addEventListener('pointerup', onEnd)
+				window.addEventListener('pointercancel', onEnd)
+				return () => {
+					window.removeEventListener('pointermove', onMove)
+					window.removeEventListener('pointerup', onEnd)
+					window.removeEventListener('pointercancel', onEnd)
+				}
+			}, [drag])
+
+			// Fill from this view's own top edge to the bottom of the window, so
+			// the panel occludes the composer regardless of how short its content
+			// is. Measuring beats a hard-coded header height: the session header
+			// above this view is not a fixed size.
+			React.useLayoutEffect(() => {
+				const element = rootRef.current
+				if (element === null || typeof window === 'undefined' || typeof window.addEventListener !== 'function') {
+					return undefined
+				}
+				const measure = () => {
+					const fallback = window.innerHeight - element.getBoundingClientRect().top
+					// A nonsense measurement (hidden view, zero-height frame) is
+					// ignored rather than collapsed into the style.
+					setFillHeight(fillHeightFor(element, fallback))
+				}
+				measure()
+				window.addEventListener('resize', measure)
+				return () => window.removeEventListener('resize', measure)
+			}, [])
+
+			// The marker is keyed by the CANONICAL root the host echoed back, not by
+			// whatever path was typed: the same repository must keep one marker.
+			const reviewMarker = status?.root === undefined ? null : (markers[status.root] ?? null)
+
+			React.useEffect(() => {
+				const root = status?.root
+				if (mode !== 'review' || root === undefined || reviewMarker === null) {
+					setReview(null)
+					return undefined
+				}
+				let cancelled = false
+				setReview(null)
+				api('/review', { root, since: reviewMarker.hash }, t)
+					.then((data) => {
+						if (!cancelled) setReview(data)
+					})
+					.catch((failure) => {
+						if (!cancelled) fail(failure)
+					})
+				return () => {
+					cancelled = true
+				}
+			}, [mode, status?.root, reviewMarker?.hash, reloadToken, fail, t])
+
+			// A different session means a different repository, so a pinned path is
+			// dropped and the panel follows the new session.
+			React.useEffect(() => {
+				setAppliedRoot('')
+				setRootInput('')
+			}, [sessionRoot])
+
+			// Persisted once per completed drag, not on every pointermove.
+			React.useEffect(() => {
+				if (drag === null) writeWidths(defaultStorage(), widths)
+			}, [drag, widths])
+
+			/**
+			 * Wrap the panel's content.
+			 *
+			 * The outer box is the shell-facing one: it carries the z-index that
+			 * beats the session column's resize strip, keeps the pointer disabled
+			 * so the band reserved for the composer stays click-through, and
+			 * paints nothing. The inner box is the visible, interactive panel.
+			 * @param children - the panel's children.
+			 * @returns the framed subtree.
+			 */
+			const frame = (children) =>
+				h(
+					'div',
+					{ ref: rootRef, style: fillHeight === null ? S.root : { ...S.root, height: `${fillHeight}px` } },
+					h('div', { style: S.panel }, children),
+				)
+
+			const beginDrag = React.useCallback(
+				(column, startX) => setDrag({ column, startX, startWidth: widths[column] }),
+				[widths],
+			)
+
+			/**
+			 * Switch to a branch, optionally creating it first.
+			 * @param target - the ref to check out, or the start point.
+			 * @param create - when given, create this branch at `target`.
+			 */
+			const checkoutBranch = (target, create) =>
+				void mutate(
+					async () => {
+						await write('/checkout', { root: effectiveRoot, ref: target, create })
+						// The branch filter described the branch we just left.
+						setRef('')
+						setReloadToken((count) => count + 1)
+						setNewBranch(null)
+						setNotice(
+							create === undefined
+								? t('branch.checkedOut', { ref: target })
+								: t('branch.created', { name: create }),
+						)
+					},
+					{ reload: false },
+				)
+
+			/**
+			 * Fetch and integrate the current branch's upstream.
+			 *
+			 * `ff-only` cannot rewrite history or invent a merge commit, so it is
+			 * what the default Pull button does; a diverged branch fails with
+			 * git's own message and the user picks Merge deliberately.
+			 * @param strategy - `ff-only` | `merge` | `rebase`.
+			 */
+			const pull = (strategy) =>
+				void mutate(
+					async () => {
+						const result = await write('/pull', { root: effectiveRoot, strategy })
+						setReloadToken((count) => count + 1)
+						setNotice(
+							result.changed
+								? t('pull.updated', { before: result.before, after: result.after })
+								: t('pull.uptodate'),
+						)
+					},
+					{ reload: false },
+				)
+
+			/**
+			 * Record the current HEAD as the review marker.
+			 *
+			 * The hash comes from the porcelain status the panel already holds, so
+			 * marking costs no extra request. Note what the marker does and does
+			 * not cover: it tracks COMMITS, so uncommitted work keeps appearing
+			 * until it is committed — which is the honest behaviour, since it has
+			 * not been recorded anywhere yet.
+			 */
+			const markReviewed = () => {
+				const root = status?.root
+				const hash = status?.branch?.oid
+				if (typeof root !== 'string' || typeof hash !== 'string' || hash === '') return
+				const next = { ...markers, [root]: { hash, at: Date.now() } }
+				setMarkers(next)
+				writeMarkers(defaultStorage(), next)
+				setReloadToken((count) => count + 1)
+				setNotice(t('review.marked'))
+			}
+
+			/**
+			 * Put a reference's paste-ready text on the clipboard.
+			 *
+			 * The panel never submits anything itself: it hands the user a line
+			 * they can read, edit and decide to send. (Programmatic insertion
+			 * would need a per-session input facade that no first-party package
+			 * reaches, so it is deliberately not attempted here.)
+			 * @param ref - a reference string.
+			 */
+			const copyRef = async (ref) => {
+				try {
+					await navigator.clipboard.writeText(refText(ref))
+					setNotice(t('handoff.copied'))
+				} catch {
+					setNotice(t('handoff.failed'))
+				}
+			}
+
+			/**
+			 * Show one path's change since the marker.
+			 * @param entry - a review file entry.
+			 */
+			const openReviewFile = async (entry) => {
+				setFile({ path: entry.path, review: true })
+				setFileDiff('')
+				try {
+					const data = await api(
+						'/diff',
+						{ root: effectiveRoot, file: entry.path, since: reviewMarker?.hash },
+						t,
+					)
+					setFileDiff(data.text)
+				} catch (failure) {
+					setFileDiff(t('diff.failed', { message: failure.message }))
+				}
+			}
+
+			/**
+			 * Push the current branch, publishing it first when it has no upstream.
+			 * @param setUpstream - publish the branch as part of the push.
+			 */
+			const push = (setUpstream) =>
+				void mutate(
+					async () => {
+						const result = await write('/push', { root: effectiveRoot, setUpstream })
+						setReloadToken((count) => count + 1)
+						setNotice(
+							result.published
+								? t('push.published', { branch: result.branch })
+								: result.changed
+									? t('push.done', { before: result.before, after: result.after })
+									: t('push.uptodate'),
+						)
+					},
+					{ reload: false },
+				)
+
+			/**
+			 * Check out a remote-tracking branch: reuse the local branch of the
+			 * same name when one exists, since `checkout -b` would refuse.
+			 * @param entry - a `branches.remote` entry.
+			 */
+			const checkoutRemote = (entry) => {
+				const existing = branches.local.find((branch) => branch.name === entry.branch)
+				if (existing === undefined) checkoutBranch(entry.name, entry.branch)
+				else checkoutBranch(existing.name)
+			}
+
+			/** Create the branch named in the inline input. */
+			const createBranch = () => {
+				const name = typeof newBranch === 'string' ? newBranch.trim() : ''
+				if (name === '') return
+				checkoutBranch(ref === '' ? 'HEAD' : ref, name)
+			}
+
+			/**
+			 * Pin the typed path, or re-read when it is unchanged. A changed root
+			 * reloads through the `load` effect rather than here, so the fetch
+			 * uses the new root instead of the one this render closed over.
+			 */
+			const applyRoot = () => {
+				const next = rootInput.trim()
+				if (next !== appliedRoot) setAppliedRoot(next)
+				else void load()
+			}
+
+			const openFile = React.useCallback(
+				async (target, staged, untracked) => {
+					setFile({ path: target.path, staged, untracked })
+					setFileDiff('')
+					try {
+						const data = await api(
+							'/diff',
+							{
+								root: effectiveRoot,
+								file: target.path,
+								staged: staged ? 1 : undefined,
+								untracked: untracked ? 1 : undefined,
+							},
+							t,
+						)
+						setFileDiff(data.text)
+					} catch (failure) {
+						setFileDiff(t('diff.failed', { message: failure.message }))
+					}
+				},
+				[effectiveRoot],
+			)
+
+			const openCommit = React.useCallback(
+				async (hash) => {
+					setCommit(hash)
+					setCommitDetail(null)
+					setCommitFile(null)
+					setCommitDiff('')
+					try {
+						const detail = await api('/commit', { root: effectiveRoot, hash }, t)
+						// Same reasoning as the status arrays: a missing `files`
+						// would throw during render, past the error branch.
+						const files = Array.isArray(detail.files) ? detail.files : []
+						setCommitDetail({ ...detail, files })
+						const first = files[0]
+						if (first !== undefined) {
+							setCommitFile(first.path)
+							setCommitDiff((await api('/show', { root: effectiveRoot, hash, file: first.path }, t)).text)
+						}
+					} catch (failure) {
+						fail(failure)
+					}
+				},
+				[effectiveRoot, fail],
+			)
+
+			const openCommitFile = React.useCallback(
+				async (path) => {
+					if (commit === null) return
+					setCommitFile(path)
+					setCommitDiff('')
+					try {
+						setCommitDiff((await api('/show', { root: effectiveRoot, hash: commit, file: path }, t)).text)
+					} catch (failure) {
+						fail(failure)
+					}
+				},
+				[effectiveRoot, commit, fail],
+			)
+
+			/**
+			 * Run a write, then refresh. The host invalidates its own cache on a
+			 * write, so this read is guaranteed to see the new state.
+			 * @param run - the write to perform.
+			 * @param keep - optional selection to re-open afterwards.
+			 */
+			const mutate = React.useCallback(
+				async (run, options = {}) => {
+					const { reload = true, keep } = options
+					setBusy(true)
+					setNotice(null)
+					try {
+						await run()
+						// A caller that changed the ref filter reloads through the
+						// `load` effect instead: fetching here would use the ref this
+						// render closed over and could land after the correct one.
+						if (reload) await load()
+						if (keep !== undefined) await keep()
+						setError(null)
+					} catch (failure) {
+						fail(failure)
+					} finally {
+						setBusy(false)
+					}
+				},
+				[load, fail],
+			)
+
+			const rows = React.useMemo(() => computeLanes(commits), [commits])
+
+			// The bubble lives in the document body, so it outlives the panel
+			// unless the panel dismisses it on the way out. This hook is last on
+			// purpose: the hook order is positional, and the render test seeds
+			// the earlier slots by index.
+			React.useEffect(() => () => cancelBubble(), [])
+
+			const groups =
+				status === null
+					? []
+					: [
+							['group.conflicted', status.conflicted, null],
+							['group.staged', status.staged, 'unstage'],
+							['group.unstaged', status.unstaged, 'stage'],
+							['group.untracked', status.untracked, 'stage'],
+						].filter(([, files]) => files.length > 0)
+
+			const header = h(
+				'div',
+				{ style: S.header },
+				h(
+					'span',
+					{ style: S.branch, title: status?.root ?? '' },
+					status?.branch?.head ?? (status?.branch?.detached === true ? '(detached)' : '—'),
+					status?.branch?.ahead > 0 ? h('span', { style: S.pill }, `↑${status.branch.ahead}`) : null,
+					status?.branch?.behind > 0 ? h('span', { style: S.pill }, `↓${status.branch.behind}`) : null,
+				),
+				h('input', {
+					style: S.input,
+					value: rootInput,
+					// An empty box is not "unset": it means the panel is following
+					// the session, and the placeholder says which directory that is.
+					placeholder:
+						effectiveRoot === ''
+							? t('header.path.placeholder')
+							: t('header.path.follow', { path: effectiveRoot }),
+					spellCheck: false,
+					onChange: (event) => setRootInput(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key === 'Enter') applyRoot()
+					},
+				}),
+				h('button', { style: S.button, onClick: () => applyRoot() }, busy ? '…' : t('header.refresh')),
+			)
+
+			const tabs = h(
+				'div',
+				{ style: { display: 'flex', gap: 4, padding: '0 6px', flex: '0 0 auto', borderBottom: '1px solid var(--dsw-alias-border-l2)' } },
+				[
+					['review', 'view.review'],
+					['worktree', 'view.worktree'],
+					['history', 'view.history'],
+				].map(([key, labelKey]) =>
+					h(
+						'button',
+						{
+							key,
+							style: { ...S.tab, ...(mode === key ? S.tabActive : null) },
+							onClick: () => setMode(key),
+						},
+						t(labelKey),
+					),
+				),
+				h('span', { style: { ...S.meta, marginLeft: 'auto', alignSelf: 'center' } },
+					status === null
+						? ''
+						: t('tab.changes', {
+								count:
+									status.staged.length +
+									status.unstaged.length +
+									status.untracked.length +
+									status.conflicted.length,
+							})),
+			)
+
+			if (error !== null) {
+				return frame([
+					header,
+					h('div', { style: S.error }, error),
+					h(
+						'div',
+						{ style: { padding: '0 10px' } },
+						h('button', { style: S.button, onClick: () => void load() }, t('header.retry')),
+					),
+				])
+			}
+
+			// ── review pane: what changed since you last looked ───────────────────
+			const reviewRanked = review === null ? [] : rankReviewFiles(review.files)
+
+			const reviewSummary =
+				review === null || reviewMarker === null
+					? null
+					: h(
+							'div',
+							{ style: { ...S.group, ...S.groupRow } },
+							h(
+								'span',
+								{ style: { flex: '1 1 auto', minWidth: 0 } },
+								t('review.summary', {
+									when:
+										reviewMarker.at === null
+											? reviewMarker.hash.slice(0, 7)
+											: relativeTime(reviewMarker.at, t),
+									commits: review.commits.length,
+									files: review.totals.files,
+									added: review.totals.added,
+									deleted: review.totals.deleted,
+								}),
+								t('review.worktreeNote'),
+							),
+							h(
+								'button',
+								{
+									style: { ...S.iconButton, ...S.branchAction },
+									title: t('review.markHint'),
+									disabled: busy,
+									onClick: () => markReviewed(),
+								},
+								t('review.mark'),
+							),
+						)
+
+			const reviewPane =
+				reviewMarker === null
+					? h(
+							'div',
+							{ style: { display: 'flex', flexDirection: 'column', gap: 12, padding: 16, alignItems: 'flex-start' } },
+							h('div', { style: { opacity: 0.7, maxWidth: 520 } }, t('review.noMarker')),
+							h(
+								'button',
+								{
+									style: S.primary,
+									disabled: busy || status === null,
+									onClick: () => markReviewed(),
+								},
+								t('review.mark'),
+							),
+						)
+					: h(
+							'div',
+							{ style: { display: 'flex', flexDirection: 'column', flex: '1 1 auto', minHeight: 0 } },
+							reviewSummary,
+							h('div', { style: { ...S.group, opacity: 0.45, fontSize: 10 } }, t('review.rank')),
+							h(
+								'div',
+								{ style: S.body },
+								h(
+									'div',
+									{ style: { ...S.left, flex: `0 0 ${widths.files}px` } },
+									review === null
+										? h('div', { style: S.empty }, t('empty.loading'))
+										: reviewRanked.length === 0
+											? h('div', { style: S.empty }, t('review.clean'))
+											: reviewRanked.map(({ file: entry, reason }) => {
+												// Name first, directory after it — see `splitNameDir`.
+												const { name: entryName, dir: entryDir } = splitNameDir(entry.path)
+												// The bubble shows the whole path; a rename adds the path it came from.
+												const fullPath =
+													entry.origPath == null
+														? entry.path
+														: `${entry.origPath} → ${entry.path}`
+												return h(
+														'div',
+														{
+															key: entry.path,
+															style: {
+																...S.row,
+																...(file?.path === entry.path && file?.review === true
+																	? S.rowSelected
+																	: null),
+															},
+															onClick: () => void openReviewFile(entry),
+														},
+														h(
+															'span',
+															{
+																style: {
+																	...S.stat,
+																	color: (STATUS[entry.status ?? 'M'] ??
+																		['var(--dsw-alias-label-tertiary)'])[0],
+																},
+															},
+															entry.status ?? '?',
+														),
+														h('span', { style: S.fileName, ...reveal(fullPath) }, entryName),
+														entryDir === '' ? null : h('span', { style: S.fileDir, ...reveal(fullPath) }, entryDir),
+														reason === null
+															? null
+															: h('span', { style: { ...S.meta, flex: '0 0 auto' } }, t(reason)),
+														h(
+															'span',
+															{ style: { ...S.meta, flex: '0 0 auto' } },
+															entry.binary ? '' : `+${entry.added ?? 0} −${entry.deleted ?? 0}`,
+														),
+														h(
+															'button',
+															{
+																style: { ...S.iconButton, ...S.branchAction },
+																title: t('handoff.copyTitle'),
+																onClick: (event) => {
+																	event.stopPropagation()
+																	void copyRef(
+																		encodeFileRef(
+																			{ ...entry, status: entry.status ?? '' },
+																			'worktree',
+																		),
+																	)
+																},
+															},
+															t('handoff.copy'),
+														),
+													)
+												}),
+								),
+								h(
+									'div',
+									{ style: S.right },
+									h(
+										'div',
+										{ style: S.diffWrap },
+										h(DiffPane, { text: fileDiff, empty: t('review.pickFile'), actions: null, t }),
+									),
+								),
+							),
+						)
+
+			// ── worktree pane ─────────────────────────────────────────────────────
+			const worktreeLeft = h(
+				'div',
+				{ style: { ...S.left, flex: `0 0 ${widths.files}px` } },
+				status === null
+					? h('div', { style: S.empty }, t('empty.loading'))
+					: groups.length === 0
+						? h('div', { style: S.empty }, t('empty.clean'))
+						: groups.map(([labelKey, files, action]) =>
+								h(
+									'div',
+									{ key: labelKey },
+									h(
+										'div',
+										{ style: S.group },
+										t('group.header', { label: t(labelKey), count: files.length }),
+									),
+									files.map((entry) =>
+										h(FileRow, {
+											key: `${labelKey}:${entry.path}`,
+											file: entry,
+											selected: file?.path === entry.path,
+											t,
+											onOpen: () =>
+												void openFile(entry, labelKey === 'group.staged', labelKey === 'group.untracked'),
+											onCopy: () => copyRef(encodeFileRef(entry, labelKey === 'group.staged' ? 'staged' : labelKey === 'group.untracked' ? 'untracked' : 'worktree')),
+											onAction:
+												action === null
+													? undefined
+													: action === 'stage'
+														? {
+																label: t('file.stage'),
+																title: 'git add',
+																run: () => void mutate(() => write('/stage', { root: effectiveRoot, files: [entry.path] })),
+															}
+														: {
+																label: t('file.unstage'),
+																title: 'git reset HEAD',
+																run: () => void mutate(() => write('/unstage', { root: effectiveRoot, files: [entry.path] })),
+															},
+										}),
+									),
+								),
+							),
+			)
+
+			// Hunk actions only make sense for a file that is already tracked:
+			// `git apply --cached` cannot stage part of an untracked file, which
+			// has no index entry to patch.
+			const hunkActions =
+				file === null || file.untracked === true || file.review === true || typeof file.path !== 'string'
+					? null
+					: file.staged === true
+						? {
+								label: t('hunk.unstage'),
+								title: 'git apply --cached --reverse',
+								run: (indices) =>
+									void mutate(
+										() => write('/hunks', { root: effectiveRoot, file: file.path, hunks: indices, staged: true }),
+										{ keep: () => openFile(file, file.staged, file.untracked) },
+									),
+							}
+						: {
+								label: t('hunk.stage'),
+								title: 'git apply --cached',
+								run: (indices) =>
+									void mutate(
+										() => write('/hunks', { root: effectiveRoot, file: file.path, hunks: indices }),
+										{ keep: () => openFile(file, file.staged, file.untracked) },
+									),
+							}
+
+			const worktreeRight = h(
+				'div',
+				{ style: S.right },
+				h(
+					'div',
+					{ style: S.diffWrap },
+					h(DiffPane, { text: fileDiff, empty: t('empty.pickFile'), actions: hunkActions, t }),
+				),
+			)
+
+			const commitBox = h(
+				'div',
+				{ style: S.composer },
+				h('input', {
+					style: S.message,
+					value: message,
+					placeholder:
+						status === null || status.staged.length === 0
+							? t('commit.placeholderEmpty')
+							: t('commit.placeholderReady'),
+					spellCheck: false,
+					onChange: (event) => setMessage(event.target.value),
+					onKeyDown: (event) => {
+						if (event.key !== 'Enter' || message.trim() === '') return
+						void mutate(
+							async () => {
+								const result = await write('/commit', { root: effectiveRoot, message: message.trim() })
+								setMessage('')
+								setNotice(t('commit.done', { hash: result.hash }))
+							},
+						)
+					},
+				}),
+				h(
+					'button',
+					{
+						style: { ...S.primary, opacity: status === null || status.staged.length === 0 || message.trim() === '' ? 0.5 : 1 },
+						disabled: status === null || status.staged.length === 0 || message.trim() === '',
+						onClick: () =>
+							void mutate(async () => {
+								const result = await write('/commit', { root: effectiveRoot, message: message.trim() })
+								setMessage('')
+								setNotice(t('commit.done', { hash: result.hash }))
+							}),
+					},
+					t('commit.button', { count: status?.staged?.length ?? 0 }),
+				),
+			)
+
+			// ── history pane: branches | commits | changes ────────────────────────
+			const remotes = new Map()
+			for (const entry of branches.remote) {
+				if (!remotes.has(entry.remote)) remotes.set(entry.remote, [])
+				remotes.get(entry.remote).push(entry)
+			}
+
+			// A branch with no upstream cannot be pushed until it is published,
+			// and the panel already knows which case it is in.
+			const currentBranch = branches.local.find((branch) => branch.current)
+			const needsPublish = currentBranch !== undefined && currentBranch.upstream === null
+
+			/** Clicking a ref re-walks the log from it; clicking it again returns to HEAD. */
+			const toggleRef = (value) => setRef(ref === value ? '' : value)
+
+			const branchColumn = h(
+				'div',
+				{ style: { ...S.branches, flex: `0 0 ${widths.branches}px` } },
+				h(
+					'div',
+					{ style: { ...S.group, ...S.groupRow } },
+					t('branch.title'),
+					h(
+						'select',
+						{
+							style: S.select,
+							value: pullStrategy,
+							disabled: busy,
+							title: t(`pull.${pullStrategy}.title`),
+							onChange: (event) => setPullStrategy(event.target.value),
+						},
+						PULL_STRATEGIES.map((value) => h('option', { key: value, value }, t(`pull.${value}`))),
+					),
+					h(
+						'button',
+						{
+							style: { ...S.iconButton, ...S.branchAction },
+							title: t(`pull.${pullStrategy}.title`),
+							disabled: busy,
+							onClick: () => pull(pullStrategy),
+						},
+						t('pull.button'),
+					),
+					h(
+						'button',
+						{
+							style: { ...S.iconButton, ...S.branchAction },
+							title: needsPublish
+								? t('push.publishTitle', { branch: currentBranch?.name ?? '' })
+								: t('push.title'),
+							disabled: busy,
+							onClick: () => push(needsPublish),
+						},
+						needsPublish ? t('push.publish') : t('push.button'),
+					),
+				),
+				h('div', { style: S.group }, t('branch.head')),
+				h(
+					'div',
+					{ style: { ...S.branchRow, ...(ref === '' ? S.branchSelected : null) }, onClick: () => setRef('') },
+					h('span', { style: S.branchMark }, '●'),
+					h('span', { style: S.path, ...reveal(branches.head ?? '') }, branches.head ?? '—'),
+				),
+				h(
+					'div',
+					{ style: { ...S.group, ...S.groupRow } },
+					t('branch.local', { count: branches.local.length }),
+					h(
+						'button',
+						{
+							style: { ...S.iconButton, ...S.branchAction },
+							title: t('branch.newTitle', { base: ref === '' ? 'HEAD' : ref }),
+							onClick: () => setNewBranch(newBranch === null ? '' : null),
+						},
+						t('branch.new'),
+					),
+				),
+				newBranch === null
+					? null
+					: h(
+							'div',
+							{ style: S.branchRow },
+							h('input', {
+								style: S.branchInput,
+								value: newBranch,
+								autoFocus: true,
+								placeholder: t('branch.newPlaceholder', { base: ref === '' ? 'HEAD' : ref }),
+								spellCheck: false,
+								onChange: (event) => setNewBranch(event.target.value),
+								onKeyDown: (event) => {
+									if (event.key === 'Enter') createBranch()
+									if (event.key === 'Escape') setNewBranch(null)
+								},
+							}),
+						),
+				branches.local.map((entry) =>
+					h(
+						'div',
+						{
+							key: entry.name,
+							style: { ...S.branchRow, ...(ref === entry.name ? S.branchSelected : null) },
+							onClick: () => toggleRef(entry.name),
+						},
+						h('span', { style: { ...S.branchMark, opacity: entry.current ? 1 : 0 } }, '★'),
+						h('span', {
+							style: S.path,
+							// The upstream is on no other part of the row, so the
+							// bubble is worth showing even when the name fits.
+							...reveal(
+								entry.upstream === null ? entry.name : `${entry.name}\n→ ${entry.upstream}`,
+								{ extra: entry.upstream !== null },
+							),
+						}, entry.name),
+						entry.current
+							? h('span', { style: S.meta }, t('branch.current'))
+							: h(
+									'button',
+									{
+										style: { ...S.iconButton, ...S.branchAction },
+										title: `git checkout ${entry.name}`,
+										onClick: (event) => {
+											event.stopPropagation()
+											checkoutBranch(entry.name)
+										},
+									},
+									t('branch.checkout'),
+								),
+					),
+				),
+				h('div', { style: S.group }, t('branch.remote', { count: branches.remote.length })),
+				[...remotes.entries()].map(([remoteName, entries]) =>
+					h(
+						'div',
+						{ key: remoteName },
+						h('div', { style: { ...S.group, ...S.branchIndent, textTransform: 'none' } }, remoteName),
+						entries.map((entry) =>
+							h(
+								'div',
+								{
+									key: entry.name,
+									style: {
+										...S.branchRow,
+										...S.branchIndent,
+										...(ref === entry.name ? S.branchSelected : null),
+									},
+									onClick: () => toggleRef(entry.name),
+								},
+								h('span', { style: S.path, ...reveal(entry.name) }, entry.branch),
+								h(
+									'button',
+									{
+										style: { ...S.iconButton, ...S.branchAction },
+										title: t('branch.checkoutRemoteTitle', { name: entry.branch }),
+										onClick: (event) => {
+											event.stopPropagation()
+											checkoutRemote(entry)
+										},
+									},
+									t('branch.checkout'),
+								),
+							),
+						),
+					),
+				),
+			)
+
+			const commitColumn = h(
+				'div',
+				{ style: { ...S.commits, flex: `0 0 ${widths.commits}px` } },
+				ref === '' ? null : h('div', { style: S.group }, t('branch.filtered', { ref, count: rows.length })),
+				rows.length === 0 ? h('div', { style: S.empty }, t('empty.noCommits')) : null,
+				rows.map((row) =>
+					h(
+						'div',
+						{
+							key: row.commit.hash,
+							style: { ...S.commit, ...(commit === row.commit.hash ? S.rowSelected : null) },
+							onClick: () => void openCommit(row.commit.hash),
+						},
+						h(LaneGraph, { row }),
+						// The hash is cut to seven characters, and the author is not
+						// on the row at all — so the bubble carries what the row
+						// does not, and shows even though nothing is cut off.
+						h('span', {
+							style: S.hash,
+							...reveal(`${row.commit.hash}\n${row.commit.author}`, { extra: true }),
+						}, row.commit.hash.slice(0, 7)),
+						h('span', { style: S.subject, ...reveal(row.commit.subject) }, row.commit.subject),
+						h('span', { style: S.meta }, relativeTime(row.commit.at, t)),
+					),
+				),
+			)
+
+			const detailColumn = h(
+				'div',
+				{ style: S.details },
+				commitDetail === null
+					? h('div', { style: S.empty }, commit === null ? t('empty.pickCommit') : t('empty.loading'))
+					: h(
+							'div',
+							{ style: S.commitFiles },
+							h(
+								'div',
+								{ style: S.commitHead },
+								h('div', { style: { fontWeight: 600 } }, commitDetail.commit.subject),
+								h(
+									'div',
+									{ style: S.meta },
+									`${commitDetail.commit.hash.slice(0, 10)} · ${commitDetail.commit.author} · ${relativeTime(commitDetail.commit.at, t)} · ${commitDetail.files.length}`,
+								),
+							),
+							commitDetail.files.map((entry) =>
+								h(FileRow, {
+									key: entry.path,
+									file: entry,
+									selected: commitFile === entry.path,
+									t,
+									onOpen: () => void openCommitFile(entry.path),
+								}),
+							),
+						),
+				h(
+					'div',
+					{ style: S.diffWrap },
+					h(DiffPane, {
+						text: commitDiff,
+						empty: commit === null ? '' : t('empty.noCommitDiff'),
+						actions: null,
+						t,
+					}),
+				),
+			)
+
+			return frame([
+				header,
+				tabs,
+				notice === null ? null : h('div', { style: S.notice }, notice),
+				// The commit box sits above the panes. It was moved here because the
+				// floating composer used to own the bottom of this view; the
+				// composer is now occluded (see S.root), so the bottom is free and
+				// this is a plain layout choice — IDEA puts it at the bottom, which
+				// is a one-line move if that reads better.
+				mode === 'worktree' ? commitBox : null,
+				mode === 'worktree'
+					? h(
+							'div',
+							{ style: S.body },
+							worktreeLeft,
+							h(Splitter, { column: 'files', active: drag?.column === 'files', onStart: beginDrag, t }),
+							worktreeRight,
+						)
+					: mode === 'history'
+						? h(
+							'div',
+							{ style: S.body },
+							branchColumn,
+							h(Splitter, { column: 'branches', active: drag?.column === 'branches', onStart: beginDrag, t }),
+							commitColumn,
+							h(Splitter, { column: 'commits', active: drag?.column === 'commits', onStart: beginDrag, t }),
+							detailColumn,
+						)
+						: reviewPane,
+			])
+		}
+
+		/**
+		 * Client plugin body: register the dictionary and the view.
+		 * @param ctx - client root context.
+		 */
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, DICTS), 'ui-git: dictionaries')
+			// Bound once: the function reads the active locale at call time, so a
+			// locale switch only needs a re-render (the slot renderer re-renders
+			// every outlet), not a re-registration.
+			const t = ctx.locale.bind(NS)
+			// `slots.inject` makes the contribution declaration-aware: it lands
+			// whether or not `conversation` (the slot's owner) activated first.
+			// The `@` source. This is the sanctioned way a plugin puts content in
+			// front of the model: the source's `codec.serialize` decides what the
+			// model actually receives when the message is sent.
+			//
+			// A SOFT dependency on purpose. `ctx.get` here is undefined until the
+			// provider activates — reading it eagerly threw and took the whole
+			// plugin down with it — while listing it in the exported `inject` would
+			// be the opposite failure: a deployment without that package would
+			// never mount this panel at all. `ctx.inject` waits for the service
+			// without gating the plugin, and the review view is the part that must
+			// never depend on an optional extra.
+			ctx.inject(['inputTriggers'], (scoped) => {
+				scoped.effect(
+					() =>
+						scoped.inputTriggers.registerSource({
+						trigger: '@',
+						name: 'git',
+						order: 20,
+						showGroupTitle: true,
+						candidates: (session, req) => gitCandidates(ctx, session, req, t),
+						onPick: (pick) => {
+							const value = pick?.candidate?.value
+							const decoded = decodeRef(value)
+							if (decoded === null) return undefined
+							return {
+								insert: {
+									source: 'git',
+									ref: value,
+									label: pick.candidate.name,
+									appearance: decoded.kind === 'file' ? 'file' : undefined,
+									clipboardText: refText(value),
+								},
+							}
+						},
+							codec: {
+								clipboardText: (ref) => refText(ref),
+								// Pure: the metadata is already in the reference, so this
+								// cannot fail on a network hiccup and block the send.
+								serialize: (ref) => Promise.resolve(refText(ref)),
+							},
+						}),
+					'ui-git: @ source',
+				)
+			})
+
+			ctx.slots.inject('conversation.view', () =>
+				ctx.slots.register(
+					{
+						name: 'conversation.view',
+						id: 'git',
+						order: 30,
+						locale: NS,
+						label: () => 'Git',
+						// The slot reports the active session id; its working
+						// directory is the repository this panel opens on.
+						inject: (sessionId) => ({ sessionRoot: sessionCwd(ctx, sessionId), t }),
+					},
+					GitView,
+				),
+			)
+
+			// The branch chip in the composer's accessory row.
+			//
+			// `conversation.input.left` is the shell's list slot for the
+			// controls on the left of the composer's bottom row. It is empty in
+			// the first-party shell, which is what makes it the right home for
+			// a chip that says where you are: it sits next to the permission
+			// selector and the model picker, not inside the message.
+			//
+			// Registered AFTER the view on purpose: the registration order is
+			// the order the shell renders, and the panel is the plugin's main
+			// event.
+			ctx.slots.inject('conversation.input.left', () =>
+				ctx.slots.register(
+					{
+						name: 'conversation.input.left',
+						id: 'git-branch',
+						order: 10,
+						locale: NS,
+						// The session's working directory is the repository the
+						// chip reports on — the same one the panel opens on.
+						inject: (sessionId) => ({ root: sessionCwd(ctx, sessionId) ?? '' }),
+					},
+					BranchChip,
+				),
+			)
+		}
+
+		exports.apply = apply
+		exports.inject = inject
+		exports.GitView = GitView
+		// Exported so the lane assignment, the hunk split and the column-width
+		// validation can be unit-tested without a DOM. The hunk split must stay
+		// identical to the host's.
+		exports.computeLanes = computeLanes
+		exports.splitHunks = splitHunks
+		exports.DICTS = DICTS
+		exports.sessionCwd = sessionCwd
+		exports.rankReviewFiles = rankReviewFiles
+		exports.encodeFileRef = encodeFileRef
+		exports.encodeCommitRef = encodeCommitRef
+		exports.decodeRef = decodeRef
+		exports.refText = refText
+		exports.describeFileRef = describeFileRef
+		exports.describeCommitRef = describeCommitRef
+		exports.gitCandidates = gitCandidates
+		exports.readMarkers = readMarkers
+		exports.MARKER_KEY = MARKER_KEY
+		exports.fillHeightFor = fillHeightFor
+		exports.clampWidth = clampWidth
+		exports.nextWidth = nextWidth
+		exports.readWidths = readWidths
+		exports.COLUMN_LIMITS = COLUMN_LIMITS
+		exports.STORAGE_KEY = STORAGE_KEY
+		// Exported so the bubble's placement arithmetic and its truncation gate
+		// can be unit-tested without a DOM.
+		exports.bubblePosition = bubblePosition
+		exports.isTruncated = isTruncated
+		exports.reveal = reveal
+		exports.BUBBLE_STYLE = BUBBLE_STYLE
+		exports.BUBBLE_DELAY_MS = BUBBLE_DELAY_MS
+		// Exported so the composer's branch chip can be rendered on its own and
+		// checked against a mocked host.
+		exports.BranchChip = BranchChip
+		exports.BranchIcon = BranchIcon
+		exports.BRANCH_POLL_MS = BRANCH_POLL_MS
+		return module.exports
+	},
+})