dsh-git-changes 0.0.0-stage → 0.1.0

package/src/client/28-changes.js

@@ -0,0 +1,1163 @@
+/* dsh-git-changes client half — Git CHANGES panel (staged / unstaged / commit / push). */
+
+/** Status codes rendered as a single uppercase letter in the row tail. */
+const CHANGE_CODES = new Set(['M', 'A', 'D', 'R', 'C', 'U', '?', '!'])
+/** Maximum number of file rows rendered per section (defensive cap). */
+const CHANGE_ROW_LIMIT = 2000
+/** Left inset shared by every row under a section header. */
+const SECTION_ROW_INDENT = 8
+/** Inset that lines a file icon up with the folder icon column. */
+const FILE_ICON_OFFSET = 8
+/** Extra inset for file rows so names line up with the folder icon column. */
+
+/**
+ * Split a porcelain status payload into the two Cursor-style groups.
+ *
+ * A file can appear in both groups (for example `MM`), matching VS Code.
+ * @param {object | null} status `gitStatus` route payload
+ * @returns {{branch: object | null, staged: Array<object>, unstaged: Array<object>}}
+ */
+function groupChanges(status) {
+  const files = status && Array.isArray(status.files) ? status.files : []
+  const staged = []
+  const unstaged = []
+  for (const file of files) {
+    if (!file || typeof file.path !== 'string') continue
+    const index = typeof file.indexStatus === 'string' ? file.indexStatus : ' '
+    const work = typeof file.workTreeStatus === 'string' ? file.workTreeStatus : ' '
+    if (index !== ' ' && index !== '?' && index !== '!') staged.push(file)
+    if (work !== ' ' || index === '?') unstaged.push(file)
+  }
+  const byPath = (a, b) => (a.path < b.path ? -1 : a.path > b.path ? 1 : 0)
+  staged.sort(byPath)
+  unstaged.sort(byPath)
+  return { branch: status && status.branch ? status.branch : null, staged, unstaged }
+}
+
+/**
+ * Human label for the branch bar: name, detached marker, ahead/behind counts.
+ * @param {object | null} branch status payload branch
+ * @returns {string}
+ */
+function branchLabel(branch) {
+  if (!branch || typeof branch !== 'object') return ''
+  if (branch.detached === true) return 'HEAD (detached)'
+  const name = typeof branch.name === 'string' && branch.name.length > 0 ? branch.name : 'HEAD'
+  const counts = []
+  if (branch.ahead > 0) counts.push('↑' + branch.ahead)
+  if (branch.behind > 0) counts.push('↓' + branch.behind)
+  return counts.length > 0 ? name + ' ' + counts.join(' ') : name
+}
+
+/**
+ * Split a workspace path into its display name and its parent directory.
+ * @param {string} path workspace-relative path
+ * @returns {{name: string, dir: string}}
+ */
+function changePathParts(path) {
+  const text = String(path || '')
+  const cut = text.lastIndexOf('/')
+  if (cut < 0) return { name: text, dir: '' }
+  return { name: text.slice(cut + 1), dir: text.slice(0, cut) }
+}
+
+/**
+ * Build a directory tree from a flat list of change rows.
+ *
+ * Directory nodes keep their expanded state in the caller's `Set`; only file
+ * rows are actionable (directories toggle). The tree is intentionally local to
+ * this module because `FileTree` is driven by lazy Host directory reads.
+ * @param {Array<object>} files change rows
+ * @returns {object} tree root node
+ */
+function buildChangeTree(files) {
+  const root = { type: 'dir', name: '', path: '', children: [] }
+  const dirs = new Map([['', root]])
+  /** Find or create one directory node. */
+  const ensureDir = (dirPath) => {
+    if (dirs.has(dirPath)) return dirs.get(dirPath)
+    const cut = dirPath.lastIndexOf('/')
+    const parentPath = cut < 0 ? '' : dirPath.slice(0, cut)
+    const parent = ensureDir(parentPath)
+    const node = { type: 'dir', name: dirPath.slice(cut + 1), path: dirPath, children: [] }
+    parent.children.push(node)
+    dirs.set(dirPath, node)
+    return node
+  }
+  for (const file of files) {
+    const { dir } = changePathParts(file.path)
+    ensureDir(dir).children.push({ type: 'file', name: changePathParts(file.path).name, path: file.path, file })
+  }
+  /** Sort directories first, then by name. */
+  const sortNode = (node) => {
+    if (node.children.length > 1) {
+      node.children.sort((a, b) => {
+        if (a.type !== b.type) return a.type === 'dir' ? -1 : 1
+        return a.name < b.name ? -1 : a.name > b.name ? 1 : 0
+      })
+    }
+    for (const child of node.children) if (child.type === 'dir') sortNode(child)
+  }
+  sortNode(root)
+  // Collapse single-child directory chains (packages/ui/theme in one row) the
+  // way VS Code and Cursor render the SCM tree.
+  const collapseDirs = (node) => {
+    for (const child of node.children) {
+      if (child.type !== 'dir') continue
+      while (child.children.length === 1 && child.children[0].type === 'dir') {
+        const only = child.children[0]
+        child.name = child.name + '/' + only.name
+        child.path = only.path
+        child.children = only.children
+      }
+      collapseDirs(child)
+    }
+  }
+  collapseDirs(root)
+  // Aggregate status for folder rows: the dot colour mirrors the most
+  // important change below the folder.
+  const STATUS_PRIORITY = ['!', 'D', 'A', 'U', 'R', 'C', 'M', '?']
+  const worstStatus = (node) => {
+    let best = ''
+    let bestRank = STATUS_PRIORITY.length + 1
+    const walk = (entry) => {
+      for (const child of entry.children) {
+        if (child.type === 'dir') {
+          walk(child)
+          continue
+        }
+        const code = String((child.file && child.file.code) || '').trim()
+        if (!code) continue
+        const rank = STATUS_PRIORITY.indexOf(code)
+        if (rank === -1) continue
+        if (rank < bestRank) { best = code; bestRank = rank }
+      }
+    }
+    walk(node)
+    return best
+  }
+  const attachStatus = (node) => {
+    for (const child of node.children) {
+      if (child.type !== 'dir') continue
+      child.status = worstStatus(child)
+      attachStatus(child)
+    }
+  }
+  attachStatus(root)
+  return root
+}
+
+/**
+ * Map a failed write payload onto a translated, user-facing message.
+ * @param {object | null} body response payload
+ * @param {(key: string) => string} t locale translate
+ * @returns {string}
+ */
+function describeGitError(body, t) {
+  const code = body && (body.code || (body.error && body.error.code))
+  const key = code ? 'changes.error.' + code : 'changes.error.generic'
+  const translated = typeof t === 'function' ? t(key) : key
+  if (translated === key) return typeof t === 'function' ? t('changes.error.generic') : 'Operation failed.'
+  return translated
+}
+
+/**
+ * CSS-safe modifier for one porcelain status code ('?'/! would break selectors).
+ * @param {string} code status letter
+ * @returns {string} class suffix
+ */
+function changeCodeClass(code) {
+  const value = String(code || ' ').trim()
+  if (value === '?') return 'u'
+  if (value === '!') return 'conflict'
+  return value === '' ? 'none' : value.toLowerCase()
+}
+
+/**
+ * Small document glyph used by the "open file" row action.
+ * @returns {any} React element
+ */
+function FileGlyph() {
+  return h(
+    'svg',
+    {
+      width: 12,
+      height: 12,
+      viewBox: '0 0 16 16',
+      'aria-hidden': 'true',
+      focusable: 'false',
+      fill: 'none',
+      stroke: 'currentColor',
+      strokeWidth: 1.3,
+      strokeLinejoin: 'round',
+      strokeLinecap: 'round',
+    },
+    h('path', { d: 'M4 1.5h5.2l2.8 2.8V14.5H4z' }),
+    h('path', { d: 'M9.2 1.5v2.8H12' }),
+    h('path', { d: 'M6 8h4' }),
+    h('path', { d: 'M6 11h4' }),
+  )
+}
+
+/**
+ * One clickable change row with hover stage/unstage action and a status letter.
+ * @param {object} props row props
+ * @returns {any} React element
+ */
+function ChangeRow(props) {
+  const { file, scope, depth, activePath, onOpen, onStage, onUnstage, onContextMenu, onOpenFile, onRequestDiscard, t, scheme } = props
+  const parts = changePathParts(file.path)
+  const isActive = activePath === file.path
+  const action = scope === 'staged'
+    ? { label: '\u2212', title: t('changes.unstage'), onClick: () => onUnstage([file.path]) }
+    : { label: '+', title: t('changes.stage'), onClick: () => onStage([file.path]) }
+  const untracked = file.code === 'U' || file.indexStatus === '?'
+  const openFileButton = typeof onOpenFile === 'function'
+    ? h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-icon-btn drp-change-action drp-file-action',
+        title: t('changes.openFile'),
+        'aria-label': t('changes.openFile'),
+        onClick: (event) => {
+          event.stopPropagation()
+          onOpenFile(file.path)
+        },
+      },
+      h(FileGlyph),
+    )
+    : null
+  // 暂存区里的改动已经有「取消暂存」（−）；撤销/放弃只对工作区未暂存的改动开放。
+  const discardButton = scope !== 'staged' && typeof onRequestDiscard === 'function'
+    ? h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-icon-btn drp-change-action drp-discard-action',
+        title: scope === 'staged' ? t('changes.discardStaged') : t('changes.discard'),
+        'aria-label': scope === 'staged' ? t('changes.discardStaged') : t('changes.discard'),
+        onClick: (event) => {
+          event.stopPropagation()
+          onRequestDiscard([file.path], scope, untracked ? [file.path] : [])
+        },
+      },
+      '\u21ba',
+    )
+    : null
+  return h(
+    'div',
+    {
+      className: cx('drp-tree-row', 'drp-change-row', isActive && 'drp-tree-active'),
+      style: { paddingLeft: (SECTION_ROW_INDENT + FILE_ICON_OFFSET + treeIndentOf((depth || 0) + 1)) + 'px' },
+      role: 'treeitem',
+      tabIndex: 0,
+      title: file.path + (file.code ? '\nGit: ' + file.code : ''),
+      onClick: () => onOpen(file.path, scope),
+      onContextMenu: (event) => {
+        if (typeof onContextMenu === 'function') onContextMenu(event, file.path, scope)
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Enter') onOpen(file.path, scope)
+      },
+    },
+    h('span', { className: 'drp-change-file-icon' }, h(FileIcon, { path: file.path, scheme })),
+    h('span', { className: 'drp-change-name' }, parts.name),
+    parts.dir
+      ? h('span', { className: 'drp-change-dir' }, parts.dir)
+      : null,
+    openFileButton,
+    discardButton,
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-icon-btn drp-change-action',
+        title: action.title,
+        'aria-label': action.title,
+        onClick: (event) => {
+          event.stopPropagation()
+          action.onClick()
+        },
+      },
+      action.label,
+    ),
+    h('span', { className: cx('drp-change-code', 'drp-code-' + changeCodeClass(file.code)) }, file.code || ''),
+  )
+}
+
+/**
+ * Flatten one change group into a sorted list (the "list" view).
+ * @param {Array<object>} files status records
+ * @returns {Array<object>} sorted records
+ */
+function buildChangeList(files) {
+  return (Array.isArray(files) ? files : [])
+    .filter((file) => file && typeof file.path === 'string')
+    .slice()
+    .sort((left, right) => left.path.localeCompare(right.path))
+}
+
+/**
+ * Collect the file paths below one tree node so folder rows can stage or
+ * unstage everything inside them with the existing write API.
+ * @param {object} node tree node
+ * @returns {Array<string>} descendant file paths
+ */
+function collectDirFiles(node) {
+  const paths = []
+  const walk = (entry) => {
+    if (!entry || !Array.isArray(entry.children)) return
+    for (const child of entry.children) {
+      if (child.type === 'dir') walk(child)
+      else if (child.file && typeof child.file.path === 'string') paths.push(child.file.path)
+    }
+  }
+  walk(node)
+  return paths
+}
+
+/**
+ * Render one tree level of change rows.
+ * @param {object} props level props
+ * @returns {Array<any>} rows
+ */
+function ChangeTreeLevel(props) {
+  const { node, depth, collapsed, onToggle, rowProps } = props
+  const { t } = rowProps
+  const rows = []
+  let files = 0
+  for (const child of node.children) {
+    if (files >= CHANGE_ROW_LIMIT) break
+    if (child.type === 'dir') {
+      const isOpen = !collapsed.has(child.path)
+      const dirPaths = collectDirFiles(child)
+      const dirAction = rowProps.scope === 'staged'
+        ? { label: '\u2212', title: t('changes.unstageFolder'), click: () => rowProps.onUnstage(dirPaths) }
+        : { label: '+', title: t('changes.stageFolder'), click: () => rowProps.onStage(dirPaths) }
+      rows.push(h(
+        'div',
+        {
+          key: 'dir:' + child.path,
+          className: 'drp-tree-row drp-tree-dir',
+          style: { paddingLeft: (SECTION_ROW_INDENT + treeIndentOf(depth)) + 'px' },
+          role: 'treeitem',
+          onClick: () => onToggle(child.path),
+        },
+        h('span', { className: 'drp-tree-caret' }, isOpen ? '▾' : '▸'),
+        h('span', { className: 'drp-folder-icon' }, h(FolderGlyph)),
+        h('span', { className: 'drp-change-dirname' }, child.name),
+        child.status
+          ? h('span', { className: cx('drp-dir-dot', 'drp-code-' + changeCodeClass(child.status)) })
+          : null,
+        dirPaths.length > 0
+          ? h(
+            'button',
+            {
+              type: 'button',
+              className: 'drp-icon-btn drp-change-action drp-dir-action',
+              title: dirAction.title,
+              'aria-label': dirAction.title,
+              onClick: (event) => {
+                event.stopPropagation()
+                dirAction.click()
+              },
+            },
+            dirAction.label,
+          )
+          : null,
+      ))
+      if (isOpen) {
+        rows.push(...ChangeTreeLevel({ ...props, node: child, depth: depth + 1 }))
+      }
+      continue
+    }
+    files += 1
+    rows.push(h(ChangeRow, { key: 'file:' + child.path, file: child.file, depth, ...rowProps }))
+  }
+  return rows
+}
+
+/**
+ * Modal confirmation shown before a discard (destructive, not undoable).
+ * @param {object} props component props
+ * @returns {any} React element
+ */
+function DiscardConfirm(props) {
+  const { t, count, onCancel, onConfirm } = props
+  return h(
+    'div',
+    { className: 'drp-confirm-overlay', role: 'presentation' },
+    h(
+      'div',
+      { className: 'drp-confirm', role: 'dialog', 'aria-modal': 'true' },
+      h('div', { className: 'drp-confirm-title' }, t('changes.discardConfirmTitle')),
+      h('div', { className: 'drp-confirm-body' }, t('changes.discardConfirmBody', { count: String(count) })),
+      h(
+        'div',
+        { className: 'drp-confirm-actions' },
+        h('button', { type: 'button', className: 'drp-btn', onClick: onCancel }, t('changes.discardCancel')),
+        h('button', { type: 'button', className: 'drp-btn drp-btn-danger', onClick: onConfirm }, t('changes.discardConfirmOk')),
+      ),
+    ),
+  )
+}
+
+/**
+ * One collapsible section (staged or unstaged) with a header action.
+ * @param {object} props section props
+ * @returns {any} React element
+ */
+function ChangeSection(props) {
+  const { scope, files, collapsedDirs, collapsed, view, onToggleCollapsed, onToggleDir, onStage, onUnstage, onOpen, onContextMenu, activePath, t, onOpenFile, onRequestDiscard, scheme } = props
+  const count = files.length
+  const allAction = scope === 'staged'
+    ? { title: t('changes.unstageAll'), label: '−', onClick: () => onUnstage(null) }
+    : { title: t('changes.stageAll'), label: '+', onClick: () => onStage(null) }
+  const title = scope === 'staged' ? t('changes.staged') : t('changes.unstaged')
+  const tree = buildChangeTree(files)
+  return h(
+    'div',
+    { className: 'drp-changes-section' },
+    h(
+      'div',
+      {
+        className: 'drp-changes-section-head',
+        role: 'button',
+        tabIndex: 0,
+        onClick: () => onToggleCollapsed(scope),
+        onKeyDown: (event) => { if (event.key === 'Enter') onToggleCollapsed(scope) },
+      },
+      h('span', { className: 'drp-tree-caret' }, collapsed ? '▸' : '▾'),
+      h('span', { className: 'drp-changes-section-title' }, title),
+      h('span', { className: 'drp-changes-count' }, String(count)),
+      scope === 'unstaged' && count > 0 && typeof onRequestDiscard === 'function'
+        ? h(
+          'button',
+          {
+            type: 'button',
+            className: 'drp-icon-btn drp-changes-bulk',
+            title: t('changes.discardAll'),
+            'aria-label': t('changes.discardAll'),
+            onClick: (event) => {
+              event.stopPropagation()
+              const paths = files.map((file) => file.path)
+              const untracked = files.filter((file) => file.code === 'U' || file.indexStatus === '?').map((file) => file.path)
+              onRequestDiscard(paths, 'unstaged', untracked)
+            },
+          },
+          '\u21ba',
+        )
+        : null,
+      h(
+        'button',
+        {
+          type: 'button',
+          className: 'drp-icon-btn drp-changes-bulk',
+          title: allAction.title,
+          'aria-label': allAction.title,
+          disabled: count === 0,
+          onClick: (event) => {
+            event.stopPropagation()
+            allAction.onClick()
+          },
+        },
+        allAction.label,
+      ),
+    ),
+    collapsed
+      ? null
+      : h(
+        'div',
+        { className: 'drp-changes-tree', role: 'tree' },
+        count === 0
+          ? h('div', { className: 'drp-changes-empty' }, t('changes.sectionEmpty'))
+          : view === 'list'
+            ? buildChangeList(files).slice(0, CHANGE_ROW_LIMIT).map((file) => h(ChangeRow, {
+              key: 'file:' + file.path,
+              file,
+              scope,
+              depth: 0,
+              activePath,
+              onOpen,
+              onStage,
+              onUnstage,
+              onContextMenu,
+              onOpenFile,
+              onRequestDiscard,
+              scheme,
+              t,
+            }))
+            : ChangeTreeLevel({
+              node: tree,
+              depth: 0,
+              collapsed: collapsedDirs,
+              onToggle: onToggleDir,
+              rowProps: { scope, activePath, onOpen, onStage, onUnstage, onContextMenu, onOpenFile, onRequestDiscard, scheme, t },
+            }),
+      ),
+  )
+}
+
+/**
+ * Branch name, ahead/behind counters, refresh action.
+ * @param {object} props bar props
+ * @returns {any} React element
+ */
+function BranchBar(props) {
+  const { branch, busy, view, onRefresh, onToggleView, t } = props
+  const label = branchLabel(branch)
+  const nextView = view === 'list' ? 'tree' : 'list'
+  return h(
+    'div',
+    { className: 'drp-changes-branch' },
+    h('span', { className: 'drp-branch-icon', 'aria-hidden': 'true' }, '⎇'),
+    h('span', { className: 'drp-branch-name', title: label || t('changes.branchUnknown') }, label || t('changes.branchUnknown')),
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-icon-btn drp-branch-view',
+        title: t('changes.view.' + nextView),
+        'aria-label': t('changes.view.' + nextView),
+        'aria-pressed': view === 'list' ? 'true' : 'false',
+        onClick: () => {
+          if (typeof onToggleView === 'function') onToggleView()
+        },
+      },
+      view === 'list' ? '▤' : '☰',
+    ),
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-icon-btn drp-branch-refresh',
+        title: t('changes.refresh'),
+        'aria-label': t('changes.refresh'),
+        disabled: busy === true,
+        onClick: onRefresh,
+      },
+      busy === true ? '…' : '⟳',
+    ),
+  )
+}
+
+/**
+ * Lay out commit history on a compact lane graph.
+ * Walks newest-first and keeps one lane head per pending commit, so merges and
+ * branches stay on their own column without a full git-graph library.
+ * @param {Array<object>} commits commit records from the log route
+ * @returns {Array<object>} per-row layout records
+ */
+function buildGraphRows(commits) {
+  const lanes = []
+  const rows = []
+  for (const commit of Array.isArray(commits) ? commits : []) {
+    if (!commit || typeof commit.sha !== 'string') continue
+    let lane = lanes.indexOf(commit.sha)
+    if (lane < 0) {
+      lane = lanes.length
+      lanes.push(commit.sha)
+    }
+    const before = lanes.slice()
+    const parents = Array.isArray(commit.parents) ? commit.parents : []
+    const first = parents[0]
+    if (first) lanes[lane] = first
+    else lanes.splice(lane, 1)
+    for (const parent of parents.slice(1)) {
+      if (!lanes.includes(parent)) lanes.push(parent)
+    }
+    rows.push({
+      sha: commit.sha,
+      short: commit.short || String(commit.sha).slice(0, 7),
+      subject: commit.subject || '',
+      author: commit.author || '',
+      date: commit.date || '',
+      refs: Array.isArray(commit.refs) ? commit.refs : [],
+      lane,
+      before,
+      after: lanes.slice(),
+    })
+  }
+  return rows
+}
+
+/**
+ * One lane-graph row: connector lines, the commit dot, subject and metadata.
+ * @param {object} props row props
+ * @returns {any} React element
+ */
+function ChangeGraphRow(props) {
+  const { row, onOpen, t } = props
+  const height = 26
+  const column = (index) => index * 14 + 7
+  const width = Math.max(14, Math.max(row.before.length, row.after.length) * 14)
+  const lines = []
+  const count = Math.max(row.before.length, row.after.length)
+  for (let index = 0; index < count; index += 1) {
+    lines.push(h('line', {
+      key: 'lane' + index,
+      x1: column(index),
+      y1: 0,
+      x2: column(index),
+      y2: height,
+      className: 'drp-graph-lane',
+    }))
+  }
+  lines.push(h('circle', { key: 'dot', cx: column(row.lane), cy: height / 2, r: 3.2, className: 'drp-graph-dot' }))
+  const meta = [row.refs[0], row.author, String(row.date || '').slice(0, 10)].filter(Boolean).join(' · ')
+  return h(
+    'button',
+    {
+      type: 'button',
+      className: 'drp-graph-row',
+      title: row.sha,
+      onClick: () => {
+        if (typeof onOpen === 'function') onOpen(row)
+      },
+    },
+    h('svg', { className: 'drp-graph-svg', width, height, 'aria-hidden': 'true' }, lines),
+    h(
+      'span',
+      { className: 'drp-graph-main' },
+      h('span', { className: 'drp-graph-subject' }, row.subject || row.short),
+      meta ? h('span', { className: 'drp-graph-meta' }, meta) : null,
+    ),
+  )
+}
+
+/**
+ * Commit message input; Enter submits, Shift+Enter submits and pushes.
+ * @param {object} props box props
+ * @returns {any} React element
+ */
+function CommitBox(props) {
+  const { value, branch, busy, generating, onChange, onSubmit, onGenerate, t } = props
+  const placeholder = t('changes.messagePlaceholder', { branch: branchLabel(branch) || 'HEAD' })
+  return h(
+    'div',
+    { className: 'drp-commit-field' },
+    h('textarea', {
+      className: 'drp-commit-box',
+      rows: 2,
+      value: value,
+      placeholder,
+      spellCheck: false,
+      'aria-label': t('changes.message'),
+      disabled: busy === true,
+      onChange: (event) => onChange(event.target.value),
+      onKeyDown: (event) => {
+        if (event.key !== 'Enter') return
+        if (!(event.metaKey || event.ctrlKey)) return
+        event.preventDefault()
+        onSubmit(event.shiftKey === true)
+      },
+    }),
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-commit-ai',
+        title: t('changes.aiGenerate'),
+        'aria-label': t('changes.aiGenerate'),
+        disabled: busy === true || generating === true,
+        onClick: () => {
+          if (typeof onGenerate === 'function') onGenerate()
+        },
+      },
+      generating === true ? '…' : '✨',
+    ),
+  )
+}
+
+/**
+ * Primary commit button with a dropdown for "commit and push".
+ * @param {object} props button props
+ * @returns {any} React element
+ */
+function CommitButton(props) {
+  const { busy, disabled, onCommit, onCommitPush, t } = props
+  const [menuOpen, setMenuOpen] = React.useState(false)
+  const menuRef = React.useRef(null)
+  React.useEffect(() => {
+    if (!menuOpen) return undefined
+    const close = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) setMenuOpen(false)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
+  }, [menuOpen])
+  return h(
+    'div',
+    { className: 'drp-commit-row' },
+    h(
+      'button',
+      {
+        type: 'button',
+        className: 'drp-btn drp-btn-primary drp-commit-main',
+        disabled: disabled === true || busy === true,
+        onClick: () => onCommit(false),
+      },
+      busy === true ? t('changes.committing') : '✓ ' + t('changes.commit'),
+    ),
+    h(
+      'div',
+      { className: 'drp-commit-split', ref: menuRef },
+      h(
+        'button',
+        {
+          type: 'button',
+          className: 'drp-btn drp-commit-caret',
+          'aria-label': t('changes.moreCommitActions'),
+          title: t('changes.moreCommitActions'),
+          disabled: disabled === true || busy === true,
+          onClick: () => setMenuOpen((open) => !open),
+        },
+        '▾',
+      ),
+      menuOpen
+        ? h(
+          'div',
+          { className: 'drp-commit-menu', role: 'menu' },
+          h('button', {
+            type: 'button',
+            className: 'drp-menu-item',
+            role: 'menuitem',
+            onClick: () => { setMenuOpen(false); onCommit(false) },
+          }, t('changes.commit')),
+          h('button', {
+            type: 'button',
+            className: 'drp-menu-item',
+            role: 'menuitem',
+            onClick: () => { setMenuOpen(false); onCommit(true) },
+          }, t('changes.commitPush')),
+        )
+        : null,
+    ),
+  )
+}
+
+/**
+ * Transient toast for operation results.
+ * @param {object} props toast props
+ * @returns {any} React element or null
+ */
+function Toast(props) {
+  const { toast } = props
+  if (!toast || typeof toast.text !== 'string' || toast.text.length === 0) return null
+  return h('div', { className: cx('drp-toast', toast.kind === 'error' && 'drp-toast-error') }, toast.text)
+}
+
+/**
+ * Context menu for one change row (open / stage / unstage / copy path).
+ * @param {object} props menu props
+ * @returns {any} React element or null
+ */
+function ChangeContextMenu(props) {
+  const { menu, onClose, onOpen, onStage, onUnstage, onRequestDiscard, onNotify, t } = props
+  React.useEffect(() => {
+    if (!menu) return undefined
+    const close = () => onClose()
+    document.addEventListener('mousedown', close)
+    document.addEventListener('keydown', close)
+    return () => {
+      document.removeEventListener('mousedown', close)
+      document.removeEventListener('keydown', close)
+    }
+  }, [menu, onClose])
+  if (!menu) return null
+  const item = (label, run) => h('button', {
+    type: 'button',
+    className: 'drp-menu-item',
+    role: 'menuitem',
+    onClick: (event) => { event.stopPropagation(); run() },
+  }, label)
+  return h(
+    'div',
+    {
+      className: 'drp-ctx-menu',
+      role: 'menu',
+      style: { left: menu.x + 'px', top: menu.y + 'px' },
+      onMouseDown: (event) => event.stopPropagation(),
+    },
+    item(t('changes.openDiff'), () => { onClose(); onOpen(menu.path, menu.scope) }),
+    menu.scope === 'staged'
+      ? item(t('changes.unstage'), () => { onClose(); onUnstage([menu.path]) })
+      : item(t('changes.stage'), () => { onClose(); onStage([menu.path]) }),
+    menu.scope === 'staged'
+      ? null
+      : item(t('changes.discard'), () => { onClose(); onRequestDiscard([menu.path], menu.scope, []) }),
+    item(t('changes.copyPath'), () => {
+      onClose()
+      try {
+        if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+          void navigator.clipboard.writeText(menu.path)
+          if (typeof onNotify === 'function') onNotify(t('changes.copied'), 'info')
+          return
+        }
+      } catch (error) { /* clipboard unavailable */ }
+      if (typeof onNotify === 'function') onNotify(t('changes.copyFailed'), 'error')
+    }),
+  )
+}
+
+/**
+ * Git CHANGES panel: branch bar, commit box, commit button, staged/unstaged trees.
+ *
+ * Status comes from `gitStatus`; writes go through the `stage`/`unstage`/`commit`
+ * POST routes, and a successful write's fresh `status` replaces local state
+ * (optimistic refresh) before the 30s fallback poll runs again.
+ * @param {object} props panel props
+ * @returns {any} React element
+ */
+function ChangesPanel(props) {
+  const { sessionId, activePath, onOpenChangeDiff, onOpenCommit, onOpenFile, onWorkspaceChanged, onNotify, t, initialStatus, scheme } = props
+  const [status, setStatus] = React.useState(initialStatus || null)
+  const [error, setError] = React.useState(null)
+  const [loading, setLoading] = React.useState(!initialStatus)
+  const [busy, setBusy] = React.useState(false)
+  const [message, setMessage] = React.useState('')
+  const [collapsed, setCollapsed] = React.useState({ staged: false, unstaged: false })
+  // Directories are expanded by default; only paths the user collapsed are kept.
+  const [collapsedDirs, setCollapsedDirs] = React.useState(() => new Set())
+  const [toast, setToast] = React.useState(null)
+  const [generating, setGenerating] = React.useState(false)
+  /** Changes list layout: tree (folders) or flat list. */
+  const [view, setView] = React.useState(() => {
+    try {
+      return localStorage.getItem('dsh-git-changes.changeView') === 'list' ? 'list' : 'tree'
+    } catch (error) {
+      return 'tree'
+    }
+  })
+  const [graph, setGraph] = React.useState(null)
+  const [graphOpen, setGraphOpen] = React.useState(false)
+  const [graphLoading, setGraphLoading] = React.useState(false)
+  const [menu, setMenu] = React.useState(null)
+  const [pendingDiscard, setPendingDiscard] = React.useState(null)
+  const toastTimer = React.useRef(null)
+  const aliveRef = React.useRef(true)
+
+  React.useEffect(() => {
+    aliveRef.current = true
+    return () => {
+      aliveRef.current = false
+      if (toastTimer.current) clearTimeout(toastTimer.current)
+    }
+  }, [])
+
+  /** Show a transient toast. */
+  const notify = React.useCallback((text, kind) => {
+    if (!aliveRef.current) return
+    setToast({ text, kind: kind || 'info' })
+    if (toastTimer.current) clearTimeout(toastTimer.current)
+    toastTimer.current = setTimeout(() => {
+      if (aliveRef.current) setToast(null)
+    }, 3200)
+  }, [])
+
+  /** Load the latest status payload. */
+  const refresh = React.useCallback(async (options) => {
+    if (!sessionId) return
+    if (!(options && options.quiet === true)) setLoading(true)
+    try {
+      const value = await apiGet('gitStatus', { sessionId })
+      if (!aliveRef.current) return
+      setStatus(value || { available: false, reason: 'git-failed' })
+      setError(null)
+    } catch (failure) {
+      if (!aliveRef.current) return
+      setError(failure && failure.message ? failure.message : String(failure))
+    } finally {
+      if (aliveRef.current) setLoading(false)
+    }
+  }, [sessionId])
+
+  React.useEffect(() => {
+    if (initialStatus) return
+    void refresh()
+  }, [refresh, initialStatus])
+
+  // 30s fallback poll; skip while a write is in flight or the document is hidden.
+  React.useEffect(() => {
+    const timer = setInterval(() => {
+      if (busy || (typeof document !== 'undefined' && document.hidden)) return
+      void refresh({ quiet: true })
+    }, 30000)
+    return () => clearInterval(timer)
+  }, [busy, refresh])
+
+  /** Run one write request and fold its fresh status back into local state. */
+  const runWrite = React.useCallback(async (name, body, successText) => {
+    if (!sessionId || busy) return
+    setBusy(true)
+    try {
+      const value = await apiPost(name, { sessionId, ...(body || {}) })
+      if (!aliveRef.current) return
+      if (value && value.ok === true) {
+        if (value.status) setStatus(value.status)
+        else void refresh({ quiet: true })
+        if (successText) notify(successText, 'info')
+        return value
+      }
+      if (value && value.status) setStatus(value.status)
+      const text = describeGitError(value, t)
+      setError(text)
+      notify(text, 'error')
+      return null
+    } catch (failure) {
+      if (!aliveRef.current) return null
+      const text = failure && failure.message ? failure.message : String(failure)
+      setError(text)
+      notify(text, 'error')
+      return null
+    } finally {
+      if (aliveRef.current) setBusy(false)
+    }
+  }, [busy, notify, refresh, sessionId, t])
+
+  const groups = groupChanges(status)
+  const canCommit = groups.staged.length > 0 && message.trim().length > 0 && !busy
+
+  /** Stage the given paths, or everything when `paths` is null. */
+  const stage = (paths) => runWrite('stage', paths === null ? { all: true } : { paths }, t('changes.stagedToast'))
+  /** Unstage the given paths, or everything when `paths` is null. */
+  const unstage = (paths) => runWrite('unstage', paths === null ? { all: true } : { paths }, t('changes.unstagedToast'))
+
+  /** Commit the index, optionally pushing afterwards. */
+  const commit = async (push) => {
+    if (!canCommit) return
+    const value = await runWrite('commit', { message, push: push === true }, null)
+    if (!value) return
+    setMessage('')
+    if (value.pushed === true) notify(t('changes.committedPushed'), 'info')
+    else if (push === true) notify(describeGitError({ code: value.pushCode || 'push-failed' }, t), 'error')
+    else notify(t('changes.committed'), 'info')
+  }
+
+  const toggleCollapsed = (scope) => setCollapsed((current) => ({ ...current, [scope]: !current[scope] }))
+  const toggleDir = (path) => setCollapsedDirs((current) => {
+    const next = new Set(current)
+    if (next.has(path)) next.delete(path)
+    else next.add(path)
+    return next
+  })
+
+  const openChangeDiff = (path, scope) => {
+    if (typeof onOpenChangeDiff === 'function') onOpenChangeDiff(path, scope)
+  }
+
+  /** Ask for confirmation before discarding; the caller never discards inline. */
+  const requestDiscard = (paths, scope, untrackedPaths) => {
+    if (!Array.isArray(paths) || paths.length === 0) return
+    setPendingDiscard({
+      paths,
+      scope: scope === 'staged' ? 'staged' : 'unstaged',
+      untrackedPaths: Array.isArray(untrackedPaths) ? untrackedPaths : [],
+    })
+  }
+
+  /** Run the destructive discard after the user confirmed it. */
+  const confirmDiscard = () => {
+    const pending = pendingDiscard
+    if (!pending) return
+    setPendingDiscard(null)
+    void (async () => {
+      const value = await runWrite('discard', {
+        paths: pending.paths,
+        untrackedPaths: pending.untrackedPaths,
+        scope: pending.scope,
+      }, t('changes.discarded'))
+      if (value && typeof onWorkspaceChanged === 'function') onWorkspaceChanged()
+    })()
+  }
+
+  /** Ask the host model for a commit message from the current diff. */
+  const generate = async () => {
+    if (!sessionId || busy || generating) return
+    setGenerating(true)
+    try {
+      const value = await apiPost('generateMessage', { sessionId })
+      if (!aliveRef.current) return
+      if (value && value.ok === true && typeof value.message === 'string') {
+        setMessage(value.message)
+        notify(t('changes.aiGenerated'), 'info')
+      } else {
+        notify(describeGitError({ code: value && value.code ? value.code : 'generate-failed' }, t), 'error')
+      }
+    } catch (failure) {
+      if (!aliveRef.current) return
+      notify(failure && failure.message ? failure.message : t('changes.aiFailed'), 'error')
+    } finally {
+      if (aliveRef.current) setGenerating(false)
+    }
+  }
+
+  /** Load the commit history shown by the graph panel. */
+  const loadGraph = React.useCallback(async () => {
+    if (!sessionId) return
+    setGraphLoading(true)
+    try {
+      const value = await apiGet('log', { sessionId, limit: 80 })
+      if (!aliveRef.current) return
+      setGraph(value && value.available === true && Array.isArray(value.commits) ? value.commits : [])
+    } catch (failure) {
+      if (aliveRef.current) setGraph([])
+    } finally {
+      if (aliveRef.current) setGraphLoading(false)
+    }
+  }, [sessionId])
+
+  React.useEffect(() => {
+    if (graphOpen && graph === null && !graphLoading) void loadGraph()
+  }, [graphOpen, graph, graphLoading, loadGraph])
+
+  React.useEffect(() => {
+    try {
+      localStorage.setItem('dsh-git-changes.changeView', view)
+    } catch (error) { /* storage unavailable */ }
+  }, [view])
+
+  if (!sessionId) return null
+  if (status && status.available === false) {
+    const reason = status.reason === 'no-git'
+      ? t('changes.noGit')
+      : status.reason === 'not-git'
+        ? t('changes.notGit')
+        : status.reason === 'no-changes'
+          ? t('changes.noChanges')
+          : t('changes.unavailable')
+    return h('div', { className: 'drp-changes-panel' }, h('div', { className: 'drp-changes-empty-state' }, reason))
+  }
+
+  return h(
+    'div',
+    { className: 'drp-changes-panel' },
+    h(BranchBar, { branch: groups.branch, busy, view, onRefresh: () => void refresh(), onToggleView: () => setView((current) => (current === 'list' ? 'tree' : 'list')), t }),
+    h(CommitBox, {
+      value: message,
+      branch: groups.branch,
+      busy,
+      generating,
+      onChange: setMessage,
+      onSubmit: (push) => void commit(push),
+      onGenerate: () => void generate(),
+      t,
+    }),
+    h(CommitButton, {
+      busy,
+      disabled: !canCommit,
+      onCommit: (push) => void commit(push),
+      onCommitPush: () => void commit(true),
+      t,
+    }),
+    error ? h('div', { className: 'drp-changes-error' }, error) : null,
+    loading && !status
+      ? h('div', { className: 'drp-changes-loading' }, t('changes.loading'))
+      : h(
+        'div',
+        { className: 'drp-changes-groups' },
+        h(ChangeSection, {
+          scope: 'staged',
+          files: groups.staged,
+          collapsedDirs,
+          view,
+          collapsed: collapsed.staged,
+          onToggleCollapsed: toggleCollapsed,
+          onToggleDir: toggleDir,
+          onStage: stage,
+          onUnstage: unstage,
+          onOpen: openChangeDiff,
+          onOpenFile: typeof onOpenFile === 'function' ? onOpenFile : null,
+          onRequestDiscard: requestDiscard,
+          onContextMenu: (event, path, scope) => {
+            event.preventDefault()
+            setMenu({ x: event.clientX, y: event.clientY, path, scope })
+          },
+          activePath,
+          scheme,
+          t,
+        }),
+        h(ChangeSection, {
+          scope: 'unstaged',
+          files: groups.unstaged,
+          collapsedDirs,
+          view,
+          collapsed: collapsed.unstaged,
+          onToggleCollapsed: toggleCollapsed,
+          onToggleDir: toggleDir,
+          onStage: stage,
+          onUnstage: unstage,
+          onOpen: openChangeDiff,
+          onOpenFile: typeof onOpenFile === 'function' ? onOpenFile : null,
+          onRequestDiscard: requestDiscard,
+          onContextMenu: (event, path, scope) => {
+            event.preventDefault()
+            setMenu({ x: event.clientX, y: event.clientY, path, scope })
+          },
+          activePath,
+          scheme,
+          t,
+        }),
+      ),
+    SHOW_COMMIT_GRAPH && h(
+      'div',
+      { className: 'drp-graph' },
+      h(
+        'button',
+        {
+          type: 'button',
+          className: 'drp-changes-section-head drp-graph-head',
+          onClick: () => setGraphOpen((current) => !current),
+        },
+        h('span', { className: 'drp-graph-caret' }, graphOpen ? '⌄' : '›'),
+        h('span', { className: 'drp-changes-section-title' }, t('changes.graph')),
+        h('span', { className: 'drp-changes-count' }, graph === null ? '…' : String(graph.length)),
+      ),
+      graphOpen === true
+        ? (graphLoading && graph === null
+            ? h('div', { className: 'drp-changes-empty' }, t('changes.loading'))
+            : (graph && graph.length > 0)
+              ? h('div', { className: 'drp-graph-list' }, buildGraphRows(graph).map((row) => h(ChangeGraphRow, {
+                  key: row.sha,
+                  row,
+                  t,
+                  onOpen: (commit) => {
+                    if (typeof onOpenCommit === 'function') onOpenCommit(commit)
+                  },
+                })))
+              : h('div', { className: 'drp-changes-empty' }, t('changes.graphEmpty')))
+        : null,
+    ),
+    pendingDiscard
+      ? h(DiscardConfirm, {
+          t,
+          count: pendingDiscard.paths.length + pendingDiscard.untrackedPaths.length,
+          onCancel: () => setPendingDiscard(null),
+          onConfirm: confirmDiscard,
+        })
+      : null,
+    h(Toast, { toast }),
+    h(ChangeContextMenu, {
+      menu,
+      onClose: () => setMenu(null),
+      onOpen: openChangeDiff,
+      onStage: stage,
+      onUnstage: unstage,
+      onRequestDiscard: requestDiscard,
+      onNotify: notify,
+      t,
+    }),
+  )
+}
+
+/**
+ * Fire one Git write route and return its JSON payload.
+ * @param {'stage'|'unstage'|'commit'|'push'} name route name
+ * @param {object} body request body
+ * @param {AbortSignal} [signal] cancellation
+ * @returns {Promise<object | null>} payload
+ */
+async function postGitReview(name, body, signal) {
+  return apiPost(name, body || {}, signal)
+}