dsh-ide-git 0.24.0 → 0.27.0

package/src/client.js

@@ -9,8 +9,8 @@
  * chrome:
  *
  *   columns  wide and tall enough : repo/branch bar | tree | graph | changes
- *   stack    narrow and tall      : changes over graph, collapsible tree
- *   compact  short or very narrow : one header row + a Changes/History switch
+ *   stack    narrow and tall      : changes over a tabbed history/diff window
+ *   compact  very narrow          : changes on top + the same tabbed window
  *
  * Theming: no hard-coded surfaces. Every surface is a --dsw-alias-* token, so
  * transparent themes and background plugins (dsh-any-background) show through,
@@ -90,6 +90,8 @@ window.__ModuleLoader__.load({
       'repo.nested': '子仓库',
       'repo.none': '当前工作区不是 Git 仓库',
       'repo.pick': '选择要查看的仓库',
+      'repo.filter': '搜索仓库',
+      'picker.empty': '没有匹配项',
       'repo.empty': '这个工作区下没有找到 Git 仓库',
       'repo.switch': '切换仓库',
       'branch.switch': '切换分支',
@@ -462,6 +464,8 @@ window.__ModuleLoader__.load({
       'repo.nested': 'nested',
       'repo.none': 'This workspace is not a Git repository',
       'repo.pick': 'Pick a repository to inspect',
+      'repo.filter': 'Search repositories',
+      'picker.empty': 'No matches',
       'repo.empty': 'No Git repository found in this workspace',
       'repo.switch': 'Switch repository',
       'branch.switch': 'Switch branch',
@@ -842,6 +846,8 @@ window.__ModuleLoader__.load({
         'repo.nested': '巢狀',
         'repo.none': '呢個工作區唔係 Git 存放庫',
         'repo.pick': '揀一個存放庫嚟睇',
+        'repo.filter': '搵存放庫',
+        'picker.empty': '冇相符項目',
         'repo.empty': '呢個工作區搵唔到 Git 存放庫',
         'repo.switch': '切換存放庫',
         'branch.switch': '切換分支',
@@ -1214,6 +1220,8 @@ window.__ModuleLoader__.load({
         'repo.nested': '巢狀',
         'repo.none': '這個工作區不是 Git 版本庫',
         'repo.pick': '選擇要檢視的版本庫',
+        'repo.filter': '搜尋版本庫',
+        'picker.empty': '沒有相符項目',
         'repo.empty': '這個工作區找不到 Git 版本庫',
         'repo.switch': '切換版本庫',
         'branch.switch': '切換分支',
@@ -1586,6 +1594,8 @@ window.__ModuleLoader__.load({
         'repo.nested': '巢狀',
         'repo.none': '呢個工作區唔係 Git 存放庫',
         'repo.pick': '揀一個存放庫嚟睇',
+        'repo.filter': '搵存放庫',
+        'picker.empty': '冇相符項目',
         'repo.empty': '呢個工作區搵唔到 Git 存放庫',
         'repo.switch': '切換存放庫',
         'branch.switch': '切換分支',
@@ -1958,6 +1968,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'ネスト',
         'repo.none': 'このワークスペースは Git リポジトリではありません',
         'repo.pick': '確認するリポジトリを選択',
+        'repo.filter': 'リポジトリを検索',
+        'picker.empty': '一致する項目がありません',
         'repo.empty': 'このワークスペースに Git リポジトリが見つかりません',
         'repo.switch': 'リポジトリを切り替え',
         'branch.switch': 'ブランチを切り替え',
@@ -2330,6 +2342,8 @@ window.__ModuleLoader__.load({
         'repo.nested': '중첩',
         'repo.none': '이 워크스페이스는 Git 저장소가 아닙니다',
         'repo.pick': '확인할 저장소를 선택하세요',
+        'repo.filter': '저장소 검색',
+        'picker.empty': '일치하는 항목이 없습니다',
         'repo.empty': '이 워크스페이스에서 Git 저장소를 찾을 수 없습니다',
         'repo.switch': '저장소 전환',
         'branch.switch': '브랜치 전환',
@@ -2702,6 +2716,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'verschachtelt',
         'repo.none': 'Dieser Arbeitsbereich ist kein Git-Repository',
         'repo.pick': 'Repository zum Ansehen wählen',
+        'repo.filter': 'Repositories durchsuchen',
+        'picker.empty': 'Keine Treffer',
         'repo.empty': 'In diesem Arbeitsbereich wurde kein Git-Repository gefunden',
         'repo.switch': 'Repository wechseln',
         'branch.switch': 'Branch wechseln',
@@ -3074,6 +3090,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'imbriqué',
         'repo.none': 'Cet espace de travail n\'est pas un dépôt Git',
         'repo.pick': 'Choisir un dépôt à inspecter',
+        'repo.filter': 'Rechercher des dépôts',
+        'picker.empty': 'Aucun résultat',
         'repo.empty': 'Aucun dépôt Git trouvé dans cet espace de travail',
         'repo.switch': 'Changer de dépôt',
         'branch.switch': 'Changer de branche',
@@ -3446,6 +3464,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'вложенный',
         'repo.none': 'Эта рабочая область не является репозиторием Git',
         'repo.pick': 'Выберите репозиторий для просмотра',
+        'repo.filter': 'Поиск репозиториев',
+        'picker.empty': 'Нет совпадений',
         'repo.empty': 'В этой рабочей области репозиторий Git не найден',
         'repo.switch': 'Сменить репозиторий',
         'branch.switch': 'Сменить ветку',
@@ -3818,6 +3838,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'aninhado',
         'repo.none': 'Esta área de trabalho não é um repositório Git',
         'repo.pick': 'Escolha um repositório para inspecionar',
+        'repo.filter': 'Pesquisar repositórios',
+        'picker.empty': 'Nenhum resultado',
         'repo.empty': 'Nenhum repositório Git encontrado nesta área de trabalho',
         'repo.switch': 'Trocar de repositório',
         'branch.switch': 'Trocar de branch',
@@ -4190,6 +4212,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'annidato',
         'repo.none': 'Questa area di lavoro non è un repository Git',
         'repo.pick': 'Scegli un repository da esaminare',
+        'repo.filter': 'Cerca repository',
+        'picker.empty': 'Nessuna corrispondenza',
         'repo.empty': 'Nessun repository Git trovato in questa area di lavoro',
         'repo.switch': 'Cambia repository',
         'branch.switch': 'Cambia branch',
@@ -4562,6 +4586,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'genest',
         'repo.none': 'Deze werkruimte is geen Git-repository',
         'repo.pick': 'Kies een repository om te bekijken',
+        'repo.filter': 'Repositories zoeken',
+        'picker.empty': 'Geen resultaten',
         'repo.empty': 'Geen Git-repository gevonden in deze werkruimte',
         'repo.switch': 'Wissel van repository',
         'branch.switch': 'Wissel van branch',
@@ -4934,6 +4960,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'zagnieżdżone',
         'repo.none': 'Ten obszar roboczy nie jest repozytorium Git',
         'repo.pick': 'Wybierz repozytorium do podglądu',
+        'repo.filter': 'Szukaj repozytoriów',
+        'picker.empty': 'Brak dopasowań',
         'repo.empty': 'W tym obszarze roboczym nie znaleziono repozytorium Git',
         'repo.switch': 'Zmień repozytorium',
         'branch.switch': 'Zmień gałąź',
@@ -5306,6 +5334,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'nästlad',
         'repo.none': 'Den här arbetsytan är inte ett Git-arkiv',
         'repo.pick': 'Välj ett arkiv att granska',
+        'repo.filter': 'Sök bland arkiv',
+        'picker.empty': 'Inga träffar',
         'repo.empty': 'Inget Git-arkiv hittades i den här arbetsytan',
         'repo.switch': 'Byt arkiv',
         'branch.switch': 'Byt gren',
@@ -5678,6 +5708,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'iç içe',
         'repo.none': 'Bu çalışma alanı bir Git deposu değil',
         'repo.pick': 'İncelenecek depoyu seçin',
+        'repo.filter': 'Depo ara',
+        'picker.empty': 'Eşleşme yok',
         'repo.empty': 'Bu çalışma alanında Git deposu bulunamadı',
         'repo.switch': 'Depoyu değiştir',
         'branch.switch': 'Dalı değiştir',
@@ -6050,6 +6082,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'bersarang',
         'repo.none': 'Ruang kerja ini bukan repositori Git',
         'repo.pick': 'Pilih repositori untuk diperiksa',
+        'repo.filter': 'Cari repositori',
+        'picker.empty': 'Tidak ada kecocokan',
         'repo.empty': 'Tidak ada repositori Git di ruang kerja ini',
         'repo.switch': 'Ganti repositori',
         'branch.switch': 'Ganti branch',
@@ -6422,6 +6456,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'lồng nhau',
         'repo.none': 'Không gian làm việc này không phải kho Git',
         'repo.pick': 'Chọn một kho để xem',
+        'repo.filter': 'Tìm kho',
+        'picker.empty': 'Không có kết quả phù hợp',
         'repo.empty': 'Không tìm thấy kho Git trong không gian làm việc này',
         'repo.switch': 'Chuyển kho',
         'branch.switch': 'Chuyển nhánh',
@@ -6794,6 +6830,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'متشعّب',
         'repo.none': 'مساحة العمل هذه ليست مستودع Git',
         'repo.pick': 'اختر مستودعًا لعرضه',
+        'repo.filter': 'البحث عن المستودعات',
+        'picker.empty': 'لا توجد نتائج مطابقة',
         'repo.empty': 'لم يُعثر على مستودع Git في مساحة العمل هذه',
         'repo.switch': 'تبديل المستودع',
         'branch.switch': 'تبديل الفرع',
@@ -7166,6 +7204,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'नेस्टेड',
         'repo.none': 'यह कार्यक्षेत्र Git रिपॉज़िटरी नहीं है',
         'repo.pick': 'देखने के लिए रिपॉज़िटरी चुनें',
+        'repo.filter': 'रिपॉज़िटरी खोजें',
+        'picker.empty': 'कोई मेल नहीं',
         'repo.empty': 'इस कार्यक्षेत्र में कोई Git रिपॉज़िटरी नहीं मिली',
         'repo.switch': 'रिपॉज़िटरी बदलें',
         'branch.switch': 'शाखा बदलें',
@@ -7538,6 +7578,8 @@ window.__ModuleLoader__.load({
         'repo.nested': 'ซ้อนกัน',
         'repo.none': 'เวิร์กสเปซนี้ไม่ใช่รีโพซิทอรี Git',
         'repo.pick': 'เลือกรีโพซิทอรีที่จะดู',
+        'repo.filter': 'ค้นหารีโพซิทอรี',
+        'picker.empty': 'ไม่มีรายการที่ตรงกัน',
         'repo.empty': 'ไม่พบรีโพซิทอรี Git ในเวิร์กสเปซนี้',
         'repo.switch': 'สลับรีโพซิทอรี',
         'branch.switch': 'สลับแบรนช์',
@@ -8852,8 +8894,12 @@ window.__ModuleLoader__.load({
        panes measure width (columns). */
     const PANE_CHROME_KEYS = {
       columns: ['tree', 'changes', 'diff'],
-      stack: ['tree', 'changes', 'diff'],
-      compact: ['tree', 'diff'],
+      /* v0.26.1: BOTH stacked chromes put the history list and the diff in one
+         TABBED window (history | diff) under the changes list, so the diff is
+         no longer a pane of its own here — it fills the tab body. Only the
+         three-column chrome still splits the diff out of the middle column. */
+      stack: ['tree', 'changes'],
+      compact: ['tree', 'changes'],
     }
     /* Whether a key measures a height (stacked chromes) or a width (columns).
        This is the chrome's DEFAULT for the tree/changes panes; the diff pane
@@ -8869,9 +8915,8 @@ window.__ModuleLoader__.load({
       'columns:diff': { min: 120, max: 900 },
       'stack:tree': { min: 100, max: 420 },
       'stack:changes': { min: 120, max: 460 },
-      'stack:diff': { min: 120, max: 900 },
       'compact:tree': { min: 100, max: 420 },
-      'compact:diff': { min: 120, max: 900 },
+      'compact:changes': { min: 120, max: 460 },
     }
     /* Today's fixed sizes stay the default — and stay in the stylesheet: a pane
        the user never dragged keeps exactly the look it had before, while a
@@ -8884,6 +8929,7 @@ window.__ModuleLoader__.load({
       'stack:tree': { ratio: 0.36 },
       'stack:changes': { ratio: 0.46 },
       'compact:tree': { ratio: 0.42 },
+      'compact:changes': { ratio: 0.46 },
     }
     const PANE_MAIN_MIN_W = 240
     const PANE_MAIN_MIN_H = 150
@@ -8899,7 +8945,7 @@ window.__ModuleLoader__.load({
        history↔diff separator lives inside the middle pane, so it is not counted
        against the body's own budget. */
     const PANE_GUTTER_PX = 8
-    const PANE_BODY_GUTTERS = { columns: 2, stack: 2, compact: 1 }
+    const PANE_BODY_GUTTERS = { columns: 2, stack: 2, compact: 2 }
     const PANE_BUCKETS = Object.keys(PANE_CHROME_KEYS).reduce(
       (all, chrome) => all.concat([chrome + ':wide', chrome + ':tall']), [])
 
@@ -10469,12 +10515,187 @@ window.__ModuleLoader__.load({
       return E('div', { className: 'dig-menu-wrap', ref: ref, style: { left: position.left + 'px', top: position.top + 'px' } },
         E('div', { className: 'dig-menu', ref: cardRef, 'data-menu-material': 'translucent' },
           E('div', { className: 'dig-menu-scroll' },
-            props.items.map((item, index) => renderItem(item, index, false)))),
+            props.body === undefined
+              ? (Array.isArray(props.items) ? props.items : []).map((item, index) => renderItem(item, index, false))
+              : props.body)),
         sub === null ? null : E('div', { className: 'dig-menu dig-menu-sub', 'data-menu-material': 'translucent', style: sub.flip === true ? { right: '100%', top: sub.top + 'px' } : { left: '100%', top: sub.top + 'px' } },
           E('div', { className: 'dig-menu-scroll' },
             sub.items.map((item, index) => renderItem(item, index, true)))))
     }
 
+    /* Searchable picker body shared by the panel header switchers and the
+       composer pills. It owns no positioning: the panel renders it as a
+       ContextMenu body, the composer inside its own .dig-cs-menu. Repositories
+       are a flat, filtered list; branches keep their slash namespace as a
+       collapsible tree, and a non-empty query opens every folder so a match
+       is never hidden behind a fold. */
+    function SearchPicker(props) {
+      const t = props.t
+      const mode = props.mode === 'branch' ? 'branch' : 'repo'
+      const [needle, setNeedle] = useState('')
+      const [folded, setFolded] = useState({})
+      const [active, setActive] = useState(0)
+      const inputRef = useRef(null)
+      const listRef = useRef(null)
+      useEffect(() => {
+        const input = inputRef.current
+        if (input !== null && typeof input.focus === 'function') input.focus({ preventScroll: true })
+      }, [])
+      const query = needle.trim().toLowerCase()
+      const matches = (value) => query === '' || String(value === undefined || value === null ? '' : value).toLowerCase().indexOf(query) >= 0
+      const rows = []
+      if (mode === 'repo') {
+        const repos = Array.isArray(props.repos) ? props.repos : []
+        for (const repo of repos) {
+          const name = repo.name === undefined || repo.name === null ? baseNameOf(repo.path) : String(repo.name)
+          if (query !== '' && matches(name) === false && matches(repo.path) === false && matches(repo.sub) === false && matches(repo.branch) === false) continue
+          rows.push({ key: 'repo:' + String(repo.path), kind: 'repo', repo: repo, name: name })
+        }
+      } else {
+        const entries = (Array.isArray(props.branches) ? props.branches : []).filter((entry) => matches(entry.name))
+        const root = { folders: new Map(), leaves: [] }
+        for (const entry of entries) {
+          const parts = String(entry.name).split('/')
+          let node = root
+          for (let index = 0; index < parts.length - 1; index += 1) {
+            const key = parts[index]
+            if (node.folders.has(key) === false) node.folders.set(key, { folders: new Map(), leaves: [] })
+            node = node.folders.get(key)
+          }
+          node.leaves.push({ entry: entry, label: parts[parts.length - 1] })
+        }
+        const countLeaves = (node) => node.leaves.length + Array.from(node.folders.values()).reduce((sum, child) => sum + countLeaves(child), 0)
+        const walk = (node, prefix, depth) => {
+          for (const name of Array.from(node.folders.keys()).sort()) {
+            const id = prefix === '' ? name : prefix + '/' + name
+            const open = query !== '' || folded[id] !== true
+            rows.push({ key: 'dir:' + id, kind: 'folder', id: id, name: name, depth: depth, count: countLeaves(node.folders.get(name)), open: open })
+            if (open === true) walk(node.folders.get(name), id, depth + 1)
+          }
+          for (const leaf of node.leaves) {
+            const entry = leaf.entry
+            const worktree = entry.worktree !== null && entry.worktree !== undefined
+            const busy = typeof props.busyName === 'string' && props.busyName !== ''
+            rows.push({
+              key: 'branch:' + String(entry.name), kind: 'branch', entry: entry, label: leaf.label, depth: depth,
+              disabled: worktree === true || busy === true, worktree: worktree,
+            })
+          }
+        }
+        walk(root, '', 0)
+      }
+      const selectable = rows.filter((row) => row.kind !== 'folder' && row.disabled !== true)
+      const activeIndex = selectable.length === 0 ? -1 : Math.min(active, selectable.length - 1)
+      const activeRow = activeIndex < 0 ? null : selectable[activeIndex]
+      const activeKey = activeRow === null ? '' : activeRow.key
+      useEffect(() => {
+        const host = listRef.current
+        if (host === null || activeKey === '') return
+        const found = Array.from(host.querySelectorAll('[data-pick-key]')).find((row) => row.getAttribute('data-pick-key') === activeKey)
+        if (found !== undefined && typeof found.scrollIntoView === 'function') found.scrollIntoView({ block: 'nearest' })
+      }, [activeKey])
+      const pickRow = (row) => {
+        if (row === null || row.disabled === true || typeof props.onPick !== 'function') return
+        if (row.kind === 'repo') props.onPick(row.repo.path, row.repo)
+        else if (row.kind === 'branch') props.onPick(row.entry.name, row.entry)
+      }
+      const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+          event.preventDefault()
+          event.stopPropagation()
+          if (typeof props.onClose === 'function') props.onClose()
+          return
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+          if (selectable.length === 0) return
+          event.preventDefault()
+          event.stopPropagation()
+          setActive((value) => {
+            const current = Math.min(value, selectable.length - 1)
+            return event.key === 'ArrowDown' ? (current + 1) % selectable.length : (current - 1 + selectable.length) % selectable.length
+          })
+          return
+        }
+        if (event.key === 'Enter') {
+          event.preventDefault()
+          event.stopPropagation()
+          pickRow(activeRow)
+        }
+      }
+      const currentRepo = mode === 'repo' && props.current !== undefined && props.current !== null ? String(props.current) : ''
+      const currentBranch = mode === 'branch' && props.current !== undefined && props.current !== null ? String(props.current) : ''
+      const rowClass = (row) => 'dig-pick-row'
+        + (activeKey === row.key ? ' dig-pick-row-active' : '')
+        + ((currentRepo !== '' && row.kind === 'repo' && String(row.repo.path) === currentRepo) ? ' dig-pick-row-current' : '')
+        + ((currentBranch !== '' && row.kind === 'branch' && String(row.entry.name) === currentBranch) ? ' dig-pick-row-current' : '')
+        + (row.disabled === true ? ' dig-pick-row-disabled' : '')
+      const rowsView = rows.map((row) => {
+        if (row.kind === 'folder') {
+          return E('button', {
+            key: row.key, type: 'button',
+            className: 'dig-pick-folder' + (row.open !== true ? ' dig-pick-folder-closed' : ''),
+            style: { paddingLeft: (6 + row.depth * 14) + 'px' },
+            onClick: () => { if (query !== '') return; setFolded((previous) => Object.assign({}, previous, { [row.id]: row.open === true })) },
+          },
+            E('span', { className: 'dig-pick-chevron' + (row.open === true ? ' dig-pick-chevron-open' : '') }, E(Icon, { name: 'chevron', size: 10 })),
+            E(Icon, { name: 'folder', size: 12 }),
+            E('span', { className: 'dig-pick-name' }, row.name),
+            E('span', { className: 'dig-pick-count' }, String(row.count)))
+        }
+        if (row.kind === 'repo') {
+          return E('button', {
+            key: row.key, type: 'button', className: rowClass(row), 'data-pick-key': row.key,
+            title: row.repo.path,
+            onMouseEnter: () => { const index = selectable.indexOf(row); if (index >= 0) setActive(index) },
+            onClick: () => pickRow(row),
+          },
+            E(Icon, { name: 'folder', size: 13 }),
+            E('span', { className: 'dig-pick-main' },
+              E('span', { className: 'dig-pick-name' }, row.name),
+              row.repo.sub !== undefined && row.repo.sub !== null && row.repo.sub !== '' && row.repo.sub !== row.name
+                ? E('span', { className: 'dig-pick-sub' }, row.repo.sub)
+                : null),
+            row.repo.branch === undefined || row.repo.branch === null || row.repo.branch === ''
+              ? null
+              : E('span', { className: 'dig-pick-badge' }, row.repo.branch))
+        }
+        const entry = row.entry
+        const head = entry.head === true
+        const worktreeNote = row.worktree === true
+          ? (props.worktreeNote === undefined ? t('branches.worktree') : props.worktreeNote)
+          : null
+        return E('button', {
+          key: row.key, type: 'button',
+          className: rowClass(row) + (head === true ? ' dig-pick-row-head' : ''),
+          'data-pick-key': row.key,
+          style: { paddingLeft: (6 + row.depth * 14) + 'px' },
+          disabled: row.disabled === true,
+          title: String(entry.name) + (worktreeNote === null ? '' : ' · ' + worktreeNote),
+          onMouseEnter: () => { const index = selectable.indexOf(row); if (index >= 0) setActive(index) },
+          onClick: () => pickRow(row),
+        },
+          E('span', { className: 'dig-pick-icon dig-tone-' + (head === true ? 'warn' : 'accent') }, E(Icon, { name: head === true ? 'star' : 'branch', size: 12 })),
+          E('span', { className: 'dig-pick-name' }, row.label),
+          worktreeNote === null ? null : E('span', { className: 'dig-pick-note' }, worktreeNote),
+          entry.ahead > 0 ? E('span', { className: 'dig-pick-count' }, '↑' + String(entry.ahead)) : null,
+          entry.behind > 0 ? E('span', { className: 'dig-pick-count' }, '↓' + String(entry.behind)) : null)
+      })
+      return E('div', { className: 'dig-pick dig-pick-' + mode },
+        E('div', { className: 'dig-pick-search' },
+          E('input', {
+            ref: inputRef,
+            className: 'dig-input dig-input-compact dig-pick-input',
+            value: needle,
+            spellCheck: false,
+            placeholder: mode === 'repo' ? t('repo.filter') : t('branches.filter'),
+            'aria-label': mode === 'repo' ? t('repo.filter') : t('branches.filter'),
+            onChange: (event) => { setNeedle(event.target.value); setActive(0) },
+            onKeyDown: onKeyDown,
+          })),
+        E('div', { className: 'dig-pick-list', ref: listRef, role: 'listbox' },
+          rowsView.length === 0 ? E('div', { className: 'dig-pick-empty' }, t('picker.empty')) : rowsView))
+    }
+
     /* Lets the user choose which actions the rail shows and in which order. The
        list is drag-sortable and arrow-sortable (the arrows also work with a
        keyboard); visibility is a per-action toggle, not a delete, so a hidden
@@ -12027,10 +12248,12 @@ window.__ModuleLoader__.load({
           return
         }
         anchorRef.current = key
-        /* Plain click only SELECTS (single-replace, the branch tree's model):
-           the diff moved to DOUBLE-click — a stray click mid-multi-select must
-           not yank the pane away (v0.18.3). */
+        /* Plain click SELECTS and shows the diff (v0.25.1, user request): in the
+           narrow right column the list replaces the pane, so a click that only
+           highlighted the row looked like "nothing happened". Modifier clicks
+           above stay pure multi-select; ignored rows have no diff to show. */
         setSelection((previous) => previous.size === 1 && previous.has(key) === true ? previous : new Set([key]))
+        if (group !== 'ignored' && props.onDiff !== undefined) props.onDiff(item, group)
       }, [setSelection, anchorRef, props.onDiff])
       /* Rubber-band selection now comes from the shared useRubberBand hook
          (see its comment): the fixed row heights + the prefix-sum offsets
@@ -13165,11 +13388,37 @@ window.__ModuleLoader__.load({
       const [selectedPath, setSelectedPath] = useState(null)
       const [patch, setPatch] = useState('')
       const [patchLoading, setPatchLoading] = useState(false)
+      /* The compact chrome's lower window is tabbed (history | diff) instead of
+         split, so opening a file does not take the history list away: the diff
+         gets its own tab and the user can switch back (v0.26.0). */
+      const [splitTab, setSplitTab] = useState('history')
+      useEffect(() => {
+        if (splitTab === 'diff' && patch === '' && patchLoading === false) setSplitTab('history')
+      }, [splitTab, patch, patchLoading])
+      /* v0.26.3: the row fires onDiff from its single click now, so a double
+         click used to open the same diff three times — and the responses raced
+         (a slow first request could land after the second and paint the wrong
+         file under the new title). `diffSeq` stamps each request and only the
+         newest one is allowed to write; `diffLast` swallows the burst a double
+         click produces. */
+      const diffSeq = useRef(0)
+      const diffLast = useRef({ key: '', at: 0 })
       /* What the open diff pane shows (v0.13.5): the pane is shared by the
          commit detail (hash + subject) and the working tree (staged or not),
          and the selection menu's payload must say which. Cleared everywhere
          the patch is cleared. */
       const [diffContext, setDiffContext] = useState(null)
+      /* v0.27: closing / switching away must also invalidate the request in
+         flight and reset the double-click guard. Without the stamp bump a
+         late response repainted the closed pane; without the diffLast reset
+         reopening the same file within 400ms was swallowed. */
+      const resetDiff = useCallback(() => {
+        diffSeq.current += 1
+        diffLast.current = { key: '', at: 0 }
+        setPatch('')
+        setPatchLoading(false)
+        setDiffContext(null)
+      }, [])
       /* ---- multi-select (issue #13): the change list's selection lives here
          so the right-click menu, the keyboard and the selection bar act on one
          set; the branch tree and the history keep theirs closer to their rows
@@ -13203,6 +13452,10 @@ window.__ModuleLoader__.load({
       const onChangeSelection = useCallback((update) => { setChangeSelection(update); clearPicksExcept('changes') }, [clearPicksExcept])
       const onCommitPicks = useCallback((update) => { setPickedCommits(update); clearPicksExcept('history') }, [clearPicksExcept])
       const [menu, setMenu] = useState(null)
+      /* The header repo/branch switchers need a search box and a branch tree,
+         which a plain ContextMenu item list cannot express; they share the
+         same anchored surface through its `body` prop. */
+      const [picker, setPicker] = useState(null)
       const [dialog, setDialog] = useState(null)
       const [tick, setTick] = useState(0)
       const [favTick, setFavTick] = useState(0)
@@ -13818,11 +14071,10 @@ window.__ModuleLoader__.load({
         headRef.current = null
         setDetail(null)
         setSelectedHash(null)
-        setPatch('')
-        setDiffContext(null)
+        resetDiff()
         setView('history')
         setPathFilter('')
-      }, [sessionId])
+      }, [sessionId, resetDiff])
 
       /* The composer status pill and this panel are separate trees; when the
          pill (or any other seat) switches the repository or the branch, this
@@ -13849,16 +14101,24 @@ window.__ModuleLoader__.load({
       }, [sessionId, repoRoot, pickRepo, refresh])
 
       const openDiff = useCallback(async (seed) => {
+        const key = JSON.stringify([base, seed])
+        const now = Date.now()
+        if (key === diffLast.current.key && now - diffLast.current.at < 400) return
+        diffLast.current = { key: key, at: now }
+        const run = diffSeq.current + 1
+        diffSeq.current = run
         setPatchLoading(true)
         setPatch('')
         try {
           const data = await request('diff', Object.assign({}, base, seed))
+          if (diffSeq.current !== run) return
           setPatch(data.patch)
         } catch (caught) {
+          if (diffSeq.current !== run) return
           setErrorCode(null)
           setError(caught instanceof Error ? caught.message : String(caught))
         } finally {
-          setPatchLoading(false)
+          if (diffSeq.current === run) setPatchLoading(false)
         }
       }, [base])
 
@@ -13939,6 +14199,11 @@ window.__ModuleLoader__.load({
          file menu, working-diff shortcut): external first, inline fallback. */
       const showDiff = useCallback((seed) => {
         if (previewDiff(seed) === true) return
+        /* The pane header names the file; its close button clears the selection
+           again, so the inline path owns selectedPath here too. */
+        setSelectedPath(seed.path === undefined ? null : seed.path)
+        /* Compact chrome: the diff lives in a tab, so opening a file shows it. */
+        setSplitTab('diff')
         if (seed.hash !== undefined && seed.hash !== null) {
           setDiffContext({ kind: 'commit', hash: seed.hash, subject: seed.subject || '' })
           void openDiff({ hash: seed.hash, path: seed.path })
@@ -13951,8 +14216,7 @@ window.__ModuleLoader__.load({
       const selectCommit = useCallback(async (commit) => {
         setSelectedHash(commit.hash)
         setSelectedPath(null)
-        setPatch('')
-        setDiffContext(null)
+        resetDiff()
         setView('detail')
         setDetail(null)
         try {
@@ -13961,7 +14225,7 @@ window.__ModuleLoader__.load({
           setErrorCode(null)
           setError(caught instanceof Error ? caught.message : String(caught))
         }
-      }, [base])
+      }, [base, resetDiff])
 
       const checkout = useCallback(async (entry) => {
         if (entry.tag === true) { void run('checkout', { branch: entry.name }); return }
@@ -13988,6 +14252,7 @@ window.__ModuleLoader__.load({
       const openMenuAt = useCallback((event, items) => {
         const element = hostRef.current
         const rect = element === null ? null : element.getBoundingClientRect()
+        setPicker(null)
         setMenu({
           x: event.clientX - (rect === null ? 0 : rect.left),
           y: event.clientY - (rect === null ? 0 : rect.top),
@@ -13997,6 +14262,22 @@ window.__ModuleLoader__.load({
         })
       }, [])
 
+      /* Same anchor math as openMenuAt, but the body is a SearchPicker instead
+         of a fixed item list. Keeping it separate means the generic context
+         menus do not grow search state they never use. */
+      const openPickerAt = useCallback((event, kind) => {
+        const element = hostRef.current
+        const rect = element === null ? null : element.getBoundingClientRect()
+        setMenu(null)
+        setPicker({
+          kind: kind,
+          x: event.clientX - (rect === null ? 0 : rect.left),
+          y: event.clientY - (rect === null ? 0 : rect.top),
+          boundsWidth: rect === null ? 0 : Math.round(rect.width),
+          boundsHeight: rect === null ? 0 : Math.round(rect.height),
+        })
+      }, [])
+
       /* ---------- toast plumbing ---------- */
       /* Declared BEFORE the context menus on purpose: the send-to-chat bindings
          and every menu builder close over pushToast, and a hooks dependency
@@ -14712,7 +14993,13 @@ window.__ModuleLoader__.load({
 
       /* ---------- shared pieces ---------- */
 
-      const repoOptions = repoState === null ? [] : repoState.repos
+      /* The scanned row keeps the branch it had when the workspace was
+         listed; after a checkout the branch pill and the tree move on, so the
+         repo label must follow the live HEAD instead of naming the old
+         branch. */
+      const repoOptions = repoState === null ? [] : repoState.repos.map((repo) => (
+        repo.path === repoRoot && branches !== null ? Object.assign({}, repo, { branch: branches.branch }) : repo
+      ))
       /* A linked worktree opened from the worktree view is a repository root
          the workspace scan never listed. Without a header entry the top bar
          kept naming the primary checkout while every branch and change below
@@ -14734,27 +15021,12 @@ window.__ModuleLoader__.load({
          popovers reuse openMenuAt, so they clamp to the panel box and share
          the opaque, frosted menu surface instead of the OS select popup. */
       const openRepoMenu = useCallback((event) => {
-        openMenuAt(event, headerRepos.map((repo) => ({
-          id: 'repo:' + repo.path,
-          icon: 'folder',
-          tone: 'accent',
-          label: repo.name + (repo.branch === null || repo.branch === undefined ? '' : ' · ' + repo.branch),
-          active: repo.path === repoRoot,
-          run: () => { if (repo.path !== repoRoot) pickRepo(repo.path) },
-        })))
-      }, [openMenuAt, headerRepos, repoRoot, pickRepo])
+        openPickerAt(event, 'repo')
+      }, [openPickerAt])
 
       const openBranchSwitchMenu = useCallback((event) => {
-        const local = branches === null ? [] : branches.local
-        openMenuAt(event, local.map((entry) => ({
-          id: 'switch:' + entry.name,
-          icon: entry.head === true ? 'star' : 'branch',
-          tone: entry.head === true ? 'warn' : 'accent',
-          label: entry.name,
-          active: entry.head === true,
-          run: () => { if (entry.head !== true) void checkout(entry) },
-        })))
-      }, [openMenuAt, branches, checkout])
+        openPickerAt(event, 'branch')
+      }, [openPickerAt])
 
       const topBar = E('div', { className: 'dig-topbar' },
         E(RepoSelect, {
@@ -14815,7 +15087,7 @@ window.__ModuleLoader__.load({
       const historyPane = view === 'detail'
         ? E(CommitDetail, {
             t: t, detail: detail, selectedPath: selectedPath,
-            onBack: () => { setView('history'); setSelectedPath(null); setPatch(''); setDiffContext(null) },
+            onBack: () => { setView('history'); setSelectedPath(null); resetDiff() },
             /* Plain click only highlights the file; the DOUBLE-click opens its
                diff (v0.18.3, one click model across every list). */
             onSelectFile: (file) => { setSelectedPath(file.path) },
@@ -14846,11 +15118,20 @@ window.__ModuleLoader__.load({
             request: request,
           })
 
-      const diffPane = patch === '' && patchLoading === false ? null : E('div', { className: 'dig-diff-pane', 'data-pane': 'diff', style: paneStyle('diff'), onContextMenu: onDiffPaneContextMenu },
+      /* The compact chrome renders the diff INSTEAD of the changes list (the
+         narrow right column has no neighbour to show it beside), so it needs a
+         filling variant; every other chrome keeps the 55%-tall split pane. */
+      const diffPaneOf = (fill) => patch === '' && patchLoading === false ? null : E('div', { className: 'dig-diff-pane' + (fill === true ? ' dig-diff-pane-fill' : ''), 'data-pane': 'diff', style: fill === true ? null : paneStyle('diff'), onContextMenu: onDiffPaneContextMenu },
         E('div', { className: 'dig-diff-head' },
           E('span', { className: 'dig-mono dig-diff-path' }, selectedPath === null ? '' : selectedPath),
-          E('button', { type: 'button', className: 'dig-icon-btn', onClick: () => { setPatch(''); setSelectedPath(null); setDiffContext(null) } }, E(Icon, { name: 'close', size: 12 }))),
+          E('button', {
+            type: 'button',
+            className: 'dig-icon-btn',
+            title: t('toast.close'),
+            onClick: () => { resetDiff(); setSelectedPath(null); setSplitTab('history') },
+          }, E(Icon, { name: 'close', size: 12 }))),
         E(DiffBody, { patch: patch, loading: patchLoading, t: t }))
+      const diffPane = diffPaneOf(false)
 
       /* ---------- rail (IDE-style left action strip) ---------- */
 
@@ -15226,7 +15507,7 @@ window.__ModuleLoader__.load({
         else if (spec.id === 'tree') { entry.active = treeOpen; entry.run = () => foldTree(!treeOpen) }
         else if (spec.id === 'worktrees') {
           entry.active = view === 'worktrees'
-          entry.run = () => { setPatch(''); setDiffContext(null); setView(view === 'worktrees' ? 'history' : 'worktrees') }
+          entry.run = () => { resetDiff(); setView(view === 'worktrees' ? 'history' : 'worktrees') }
         }
         else if (spec.id === 'float') {
           // Label AND icon follow where the panel actually is: floating panels get
@@ -15372,9 +15653,56 @@ window.__ModuleLoader__.load({
       const worktrees = summary !== null && Array.isArray(summary.worktrees) ? summary.worktrees : []
 
       /* The history↔diff separator only exists while a diff is on screen, and it
-         lives inside the middle pane — the diff is the pane below it. */
+         lives inside the middle pane — the diff is the pane below it. Only the
+         three-column chrome keeps that split (v0.26.1). */
       const diffGutter = diffPane === null ? null : gutter('diff', 'next')
 
+      /* v0.26.1 — the stacked chromes (stack and compact) show the history list
+         and the diff in ONE tabbed window below the changes list: clicking a
+         file flips that window to the diff tab instead of splitting the diff out
+         and squeezing the history. `withCount` only matters on compact, whose
+         changes head (and with it the "changes {n}" badge) is hidden; `withTree`
+         adds the tree toggle that chrome has no other way to reach. */
+      const noDiff = patch === '' && patchLoading === false
+      const fillDiff = diffPaneOf(true)
+      const splitTabs = (withCount, withTree) => E('div', { className: 'dig-split-tabs' },
+        withCount === true ? E('span', { className: 'dig-compact-count' }, fill(t('seg.changes'), { n: dirty })) : null,
+        E('button', {
+          type: 'button',
+          className: 'dig-tab',
+          'data-active': splitTab === 'history' ? 'true' : 'false',
+          'data-action': 'history-tab',
+          onClick: () => setSplitTab('history'),
+        }, t('seg.history')),
+        E('button', {
+          type: 'button',
+          className: 'dig-tab',
+          'data-active': splitTab === 'diff' ? 'true' : 'false',
+          'data-action': 'diff-tab',
+          disabled: noDiff,
+          title: noDiff ? t('diff.empty') : t('diff.codeLabel'),
+          onClick: () => setSplitTab('diff'),
+        }, t('diff.codeLabel')),
+        E('span', { className: 'dig-topbar-spacer' }),
+        withTree === true ? E('button', {
+          type: 'button',
+          className: 'dig-icon-btn' + (treeOpen ? ' dig-icon-btn-active' : ''),
+          'data-action': 'tree',
+          'aria-pressed': treeOpen ? 'true' : 'false',
+          title: t('toolbar.tree'),
+          onClick: () => foldTree(!treeOpen),
+        }, E(Icon, { name: treeOpen ? 'eye' : 'eyeOff' })) : null)
+
+      /* v0.26.3: a tabbed window keeps BOTH panes mounted and only hides the
+         inactive one. Swapping the elements out unmounted the history list (and
+         the commit detail) on every diff switch, which threw away its scroll
+         position and the windowed list's state. `display:none` keeps the
+         scrollTop (verified in Chromium). The hidden diff measures 0 tall and
+         is dropped by measurePanes' `live > 0` filter, so pane geometry stays
+         honest. */
+      const diffActive = splitTab === 'diff' && fillDiff !== null
+      const tabPane = (active, node) => node === null ? null : E('div', { className: 'dig-tab-pane' + (active === true ? '' : ' dig-tab-pane-hidden') }, node)
+
       let body
       if (repoState === null) {
         /* The scan is still running: a neutral loading state, never the
@@ -15398,31 +15726,19 @@ window.__ModuleLoader__.load({
           onRemove: (tree) => setDialog({ kind: 'worktreeRemove', tree: tree, force: false }),
         }))
       } else if (compact) {
+        /* v0.26.0: the changes list sits on TOP and the lower window is a tab
+           pair (history | diff) instead of a split — opening a file no longer
+           takes the history list away, and the changes list never disappears.
+           The diff tab only exists while there is a patch to show. */
         body = E('div', { className: 'dig-body dig-body-compact', ref: bodyRef },
-          E('div', { className: 'dig-compact-bar' },
-            E(Segmented, {
-              value: view === 'detail' ? 'history' : view,
-              onChange: (next) => { setView(next); setPatch(''); setDiffContext(null) },
-              items: [
-                { id: 'changes', label: fill(t('seg.changes'), { n: dirty }) },
-                { id: 'history', label: t('seg.history') },
-              ],
-            }),
-            E('span', { className: 'dig-topbar-spacer' }),
-            // Two-way on purpose: treeOpen is persisted, so a header button that
-            // only rendered while the tree was OPEN left a folded tree with no way
-            // back on this chrome (the rail now carries one too, for the others).
-            E('button', {
-              type: 'button',
-              className: 'dig-icon-btn' + (treeOpen ? ' dig-icon-btn-active' : ''),
-              'data-action': 'tree',
-              'aria-pressed': treeOpen ? 'true' : 'false',
-              title: t('toolbar.tree'),
-              onClick: () => foldTree(!treeOpen),
-            }, E(Icon, { name: treeOpen ? 'eye' : 'eyeOff' }))),
           treeOpen ? E('div', { className: 'dig-compact-tree', 'data-pane': 'tree', style: paneStyle('tree') }, E(BranchTree, { t: t, branches: branches, favorites: favorites, onCheckout: checkout, onBrowse: browseBranch, onBranchMenu: branchMenu, onDeleteEntries: deleteBranchEntries, onCopyValues: copyValues, onPicksChange: onBranchPicks, clearSignal: pickEpochs.tree })) : null,
           treeOpen ? gutter('tree', 'prev') : null,
-          view === 'changes' ? changesPane : E('div', { className: 'dig-pane dig-pane-main' }, historyPane, diffGutter, diffPane))
+          E('div', { className: 'dig-pane dig-pane-changes-stack', 'data-pane': 'changes', style: paneStyle('changes') }, changesPane),
+          gutter('changes', 'prev'),
+          E('div', { className: 'dig-pane dig-pane-main' },
+            splitTabs(true, true),
+            tabPane(diffActive === false, historyPane),
+            fillDiff === null ? null : tabPane(diffActive, fillDiff)))
       } else if (columns) {
         body = E('div', { className: 'dig-body dig-body-columns', ref: bodyRef },
           treeOpen ? E('div', { className: 'dig-pane dig-pane-tree', 'data-pane': 'tree', style: paneStyle('tree') }, E(BranchTree, { t: t, branches: branches, favorites: favorites, onCheckout: checkout, onBrowse: browseBranch, onBranchMenu: branchMenu, onDeleteEntries: deleteBranchEntries, onCopyValues: copyValues, onPicksChange: onBranchPicks, clearSignal: pickEpochs.tree })) : null,
@@ -15436,7 +15752,13 @@ window.__ModuleLoader__.load({
           treeOpen ? gutter('tree', 'prev') : null,
           E('div', { className: 'dig-pane dig-pane-changes-stack', 'data-pane': 'changes', style: paneStyle('changes') }, changesPane),
           gutter('changes', 'prev'),
-          E('div', { className: 'dig-pane dig-pane-main' }, historyPane, diffGutter, diffPane))
+          /* v0.26.1: below the commit box the history list and the diff share
+             one tabbed window — a click on a changed file flips to the diff tab
+             and leaves the list (and its scroll position) alone. */
+          E('div', { className: 'dig-pane dig-pane-main' },
+            splitTabs(false, false),
+            tabPane(diffActive === false, historyPane),
+            fillDiff === null ? null : tabPane(diffActive, fillDiff)))
       }
 
       /* ---------- overlays ---------- */
@@ -15452,6 +15774,37 @@ window.__ModuleLoader__.load({
           onClose: () => setMenu(null),
         }))
       }
+      if (picker !== null) {
+        /* The panel header's repo/branch switchers share the ContextMenu
+           surface (same clamping and outside-click), but their body is the
+           searchable picker instead of an item list. */
+        const branchList = branches === null ? [] : branches.local
+        overlays.push(E(ContextMenu, {
+          key: 'picker',
+          anchor: { x: picker.x, y: picker.y },
+          boundsWidth: picker.boundsWidth,
+          boundsHeight: picker.boundsHeight,
+          items: [],
+          body: E(SearchPicker, {
+            key: picker.kind,
+            mode: picker.kind,
+            t: t,
+            repos: picker.kind === 'repo' ? headerRepos : [],
+            branches: picker.kind === 'branch' ? branchList : [],
+            current: picker.kind === 'repo' ? repoRoot : (branches === null ? '' : branches.branch),
+            onPick: (value, row) => {
+              setPicker(null)
+              if (picker.kind === 'repo') {
+                if (value !== repoRoot) pickRepo(value)
+                return
+              }
+              if (row.head !== true) void checkout(row)
+            },
+            onClose: () => setPicker(null),
+          }),
+          onClose: () => setPicker(null),
+        }))
+      }
       if (railSettings === true) {
         overlays.push(E(RailSettings, {
           key: 'rail-settings',
@@ -15952,7 +16305,21 @@ window.__ModuleLoader__.load({
       '.dig-pane-main{flex:1;min-width:0}',
       '.dig-pane-changes{width:290px;flex:none;border-left:1px solid var(--dsw-alias-border-l2)}',
       '.dig-pane-changes-stack{max-height:46%;flex:none;border-bottom:1px solid var(--dsw-alias-border-l2)}',
-      '.dig-compact-bar{display:flex;align-items:center;gap:6px;padding:4px 6px;flex:none}',
+      /* v0.26.1: both stacked chromes show history and diff in one tabbed
+         window; the strip is the window's tab bar (the compact chrome also
+         hosts the changes count and the tree toggle in it). */
+      '.dig-split-tabs{display:flex;align-items:center;gap:4px;padding:4px 6px;flex:none;border-bottom:1px solid var(--dsw-alias-border-l2)}',
+      /* v0.26.3: the tabbed window's bodies stay mounted; the inactive one is
+         hidden so the history list keeps its scroll position and the detail
+         keeps its expanded state. */
+      '.dig-tab-pane{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}',
+      '.dig-tab-pane-hidden{display:none}',
+      '.dig-compact-count{color:var(--dsw-alias-label-secondary);font-weight:500;font-size:11px;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}',
+      '.dig-tab{border:none;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;font-weight:500;padding:2px 10px;border-radius:var(--dsw-radius-sm,8px);cursor:pointer;white-space:nowrap;flex:none}',
+      '.dig-tab:hover{background:var(--dsw-alias-interactive-bg-hover);color:var(--dsw-alias-label-primary)}',
+      '.dig-tab[data-active="true"]{background:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-layer-1));color:var(--dsw-alias-label-primary)}',
+      '.dig-tab:disabled{opacity:.45;cursor:default}',
+      '.dig-tab:disabled:hover{background:transparent;color:var(--dsw-alias-label-secondary)}',
       '.dig-compact-tree{max-height:42%;flex:none;border-bottom:1px solid var(--dsw-alias-border-l2)}',
       // A divider: an 8px hit area (a fingertip needs it) painted as a 1px hairline
       // that lights up on hover, focus or while dragging. touch-action:none is what
@@ -15986,6 +16353,29 @@ window.__ModuleLoader__.load({
       '.dig-picker-name{flex:none;font-weight:600}',
       '.dig-picker-kind{color:var(--dsw-alias-label-tertiary);flex:none}',
       '.dig-picker-path{color:var(--dsw-alias-label-tertiary);margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%}',
+      /* v0.27 searchable repo / branch picker (panel header + composer pill).
+         The list scrolls, the search field stays pinned on top. */
+      '.dig-pick{display:flex;flex-direction:column;gap:2px;width:300px;max-width:100%;min-height:0;color:var(--dsw-alias-label-primary)}',
+      '.dig-pick-search{position:sticky;top:0;z-index:1;padding:2px 2px 6px;background:var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-layer-1))}',
+      '.dig-pick-list{display:flex;flex-direction:column;gap:1px;overflow:auto;min-height:0;max-height:300px;overscroll-behavior:contain}',
+      '.dig-pick-row{display:flex;align-items:center;gap:6px;width:100%;padding:4px 8px;border:none;border-radius:var(--dsw-radius-sm,8px);background:transparent;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer;min-width:0}',
+      '.dig-pick-row:hover:not(:disabled),.dig-pick-folder:hover{background:var(--dsw-alias-interactive-bg-hover)}',
+      '.dig-pick-row-active{background:var(--dsw-alias-interactive-bg-hover)}',
+      '.dig-pick-row-current{color:var(--dsw-alias-brand-primary)}',
+      '.dig-pick-row-disabled{opacity:.45;cursor:default}',
+      '.dig-pick-row-head{font-weight:600}',
+      '.dig-pick-folder{display:flex;align-items:center;gap:5px;width:100%;padding:3px 8px;border:none;border-radius:var(--dsw-radius-sm,8px);background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;font-size:12px;text-align:left;cursor:pointer;min-width:0}',
+      '.dig-pick-chevron{display:inline-flex;flex:none;transition:transform .12s ease;opacity:.6}',
+      '.dig-pick-chevron-open{transform:rotate(90deg)}',
+      '.dig-pick-main{display:flex;flex-direction:column;min-width:0;flex:1}',
+      '.dig-pick-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.dig-pick-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dsw-alias-label-tertiary);font-size:10px;line-height:12px}',
+      '.dig-pick-icon{display:inline-flex;flex:none}',
+      '.dig-pick-badge{margin-left:auto;flex:none;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px;border-radius:999px;corner-shape:round;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);font-size:10px;line-height:16px}',
+      '.dig-pick-note{flex:none;color:var(--dsw-alias-label-tertiary);font-size:11px}',
+      '.dig-pick-count{margin-left:auto;flex:none;color:var(--dsw-alias-label-tertiary);font-size:11px;font-variant-numeric:tabular-nums}',
+      '.dig-pick-empty{padding:10px 8px;color:var(--dsw-alias-label-tertiary);font-size:12px}',
+      '.dig-cs-menu.dig-cs-picker{width:300px;min-width:260px;max-width:340px;max-height:360px;padding:4px;overflow:hidden}',
       /* position:relative: the marquee box paints against this wrapper (the
          scroll container is offset by the search field — same rule as
          .dig-history above). */
@@ -16008,6 +16398,11 @@ window.__ModuleLoader__.load({
       '.dig-folder-head:hover{color:var(--dsw-alias-label-primary)}',
       '.dig-folder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
       '.dig-count{margin-left:auto;opacity:.6;font-weight:400}',
+      /* v0.26.2: the changes head is the one count that belongs to the WORD, not
+         to the right edge — .dig-count pushes itself to the far right (fine for the
+         branch groups), so the changes header opts back in to sitting right after
+         its title (user report: the number floated in the middle of the row). */
+      '.dig-changes-head .dig-count{margin-left:0}',
       '.dig-chevron{display:inline-flex;transform:rotate(-90deg);transition:transform .12s ease}',
       '.dig-chevron-open{transform:rotate(0deg)}',
       '.dig-row{display:flex;align-items:center;gap:5px;padding:2px 8px;cursor:pointer;white-space:nowrap;overflow:hidden}',
@@ -16060,7 +16455,10 @@ window.__ModuleLoader__.load({
          filter bar, and painting from the wrong rect was the v0.19.2 drift. */
       '.dig-history{display:flex;flex-direction:column;min-height:0;flex:1;position:relative}',
       '.dig-history-scroll{flex:1;overflow:auto}',
-      '.dig-commit{display:flex;align-items:center;gap:6px;padding:1px 8px 1px 0;cursor:pointer;height:26px;overflow:hidden}',
+      // The row's left edge follows the bars above it (filter row / compact
+      // switch: 4px 6px padding), so the time column and the graph start on the
+      // same inset as the input box instead of flush against the pane edge.
+      '.dig-commit{display:flex;align-items:center;gap:6px;padding:1px 8px 1px 6px;cursor:pointer;height:26px;overflow:hidden}',
       '.dig-commit:hover{background:var(--dsw-alias-interactive-bg-hover)}',
       /* Same theme-aware gray mix as .dig-row-selected (see it). */
       '.dig-commit-selected{background:color-mix(in srgb,var(--dsw-alias-interactive-bg-active,var(--dsw-alias-interactive-bg-hover)) 58%,var(--dsw-static-neutral-bluish-75,var(--dsw-alias-bg-layer-3)) 42%);color:var(--dsw-alias-label-primary);box-shadow:inset 2px 0 0 var(--dsw-alias-brand-primary)}',
@@ -16171,6 +16569,7 @@ window.__ModuleLoader__.load({
       '.dig-detail-files{display:flex;flex-direction:column}',
       '.dig-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}',
       '.dig-diff-pane{flex:none;max-height:55%;display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--dsw-alias-border-l2)}',
+      '.dig-diff-pane-fill{flex:1;max-height:none;border-top:none}',
       '.dig-diff-head{display:flex;align-items:center;gap:8px;padding:3px 8px;color:var(--dsw-alias-label-tertiary);flex:none;min-width:0}',
       '.dig-diff-path{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}',
       '.dig-diff{flex:1;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:calc(12px + var(--dsh-code-font-delta, 0px));line-height:1.5;font-weight:500;min-height:0}',
@@ -16422,6 +16821,13 @@ window.__ModuleLoader__.load({
       '.dig-wt-label{color:var(--dsw-alias-label-secondary);font-size:12px;font-weight:500}',
       '.dig-wt-error{padding:6px 8px;margin-bottom:8px;border-radius:var(--dsw-radius-sm,8px);background:rgba(220,38,38,.12);color:var(--dsw-alias-state-error-primary);font-size:11px;line-height:16px;word-break:break-word}',
       'body[data-ds-dark-theme] .dig-wt-error{background:rgba(248,113,113,.16)}',
+      /* ---- icon tooltip ---- */
+      /* A body child, not a panel child: the bottom workbench declares
+         `contain: layout style`, so a fixed element inside it would take the
+         panel box as its containing block and land off-screen (invariant 13).
+         Styled from the same menu tokens so it reads as part of the product. */
+      '.dig-tip{position:fixed;z-index:9999;display:none;box-sizing:border-box;max-width:280px;padding:5px 8px;border-radius:var(--dsw-radius-sm,8px);background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-2,var(--dsw-alias-bg-layer-1)));color:var(--dsw-alias-label-primary);box-shadow:var(--dsw-elevation-prominent,0 8px 22px rgba(0,0,0,.32));font-family:var(--dsw-font-family,system-ui,sans-serif);font-size:calc(11px + var(--dsh-content-font-delta-secondary,0px));font-weight:500;line-height:1.45;text-align:left;white-space:normal;overflow-wrap:anywhere;pointer-events:none}',
+      '.dig-tip[data-show="true"]{display:block}',
     ].concat(LANE_TRACE_RULES).join('\n')
 
     /* ============================== plugin ============================== */
@@ -17168,50 +17574,48 @@ window.__ModuleLoader__.load({
         behind > 0 ? E('span', { className: 'dig-cs-badge dig-cs-behind', title: t('composer.behindHint') }, '↓' + String(behind)) : null,
         ahead > 0 ? E('span', { className: 'dig-cs-badge dig-cs-ahead', title: t('composer.aheadHint') }, '↑' + String(ahead)) : null,
         error !== '' ? E('span', { className: 'dig-cs-error', title: error }, '×') : null,
-        menu === 'repo' ? E('div', { className: 'dig-cs-menu', 'data-cordis-panel': '' },
+        menu === 'repo' ? E('div', { className: 'dig-cs-menu dig-cs-picker', 'data-cordis-panel': '' },
           /* v0.19.2: one row per checkout — the repository's own name first
              (origin URL basename, falling back to the directory name), and the
              single-level directory name as a small sub line only when the two
              differ (two clones of one repository stay tellable apart). The
-             full path lives in the tooltip, not in the row. */
-          data.repos.map((row) => {
-            const dirName = baseNameOf(row.path)
-            const displayName = row.origin !== undefined && row.origin !== '' ? row.origin : dirName
-            return E('button', {
-              key: row.path,
-              type: 'button',
-              className: 'dig-cs-item',
-              'data-current': row.path === repoRoot ? 'true' : 'false',
-              title: row.path,
-              onClick: () => pickRepoRoot(row.path),
-            },
-              E(Icon, { name: 'commit', size: 11 }),
-              E('span', { className: 'dig-cs-item-main' },
-                E('span', { className: 'dig-cs-item-name' }, displayName),
-                dirName !== displayName ? E('span', { className: 'dig-cs-item-sub' }, dirName) : null))
+             full path lives in the tooltip, not in the row. v0.27 adds the
+             search field so seven clones need no scrolling to find one. */
+          E(SearchPicker, {
+            key: 'composer-repo',
+            mode: 'repo',
+            t: t,
+            repos: data.repos.map((row) => {
+              const dirName = baseNameOf(row.path)
+              const displayName = row.origin !== undefined && row.origin !== '' ? row.origin : dirName
+              return {
+                path: row.path,
+                name: displayName,
+                sub: dirName !== displayName ? dirName : undefined,
+              }
+            }),
+            current: repoRoot,
+            onPick: (path) => pickRepoRoot(path),
+            onClose: () => setMenu(null),
           }))
           : null,
         menu === 'branch' ? (branchLoading === true || branchList === null
           ? E('div', { className: 'dig-cs-menu', 'data-cordis-panel': '' }, E('div', { className: 'dig-cs-item dig-cs-static' }, '…'))
-          : E('div', { className: 'dig-cs-menu', 'data-cordis-panel': '' },
-            branchList.local.map((entry) => E('button', {
-              key: entry.name,
-              type: 'button',
-              className: 'dig-cs-item',
-              'data-current': entry.head === true ? 'true' : 'false',
-              disabled: entry.worktree !== null || checkingOut !== '',
-              title: entry.worktree !== null ? t('composer.inWorktree') : (checkingOut !== '' ? t('composer.busy') : entry.name),
-              onClick: () => { void checkoutBranch(entry.name) },
-            },
-              E(Icon, { name: 'branch', size: 11 }),
-              E('span', { className: 'dig-cs-item-name' }, entry.name),
-              entry.worktree !== null ? E('span', { className: 'dig-cs-item-note' }, t('composer.inWorktree')) : null,
-              checkingOut === entry.name ? E('span', { className: 'dig-cs-item-note' }, '…') : null,
-              entry.ahead > 0 || entry.behind > 0
-                ? E('span', { className: 'dig-cs-item-counts' },
-                  entry.ahead > 0 ? E('span', { className: 'dig-cs-ahead' }, '↑' + String(entry.ahead)) : null,
-                  entry.behind > 0 ? E('span', { className: 'dig-cs-behind' }, '↓' + String(entry.behind)) : null)
-                : null))))
+          : E('div', { className: 'dig-cs-menu dig-cs-picker', 'data-cordis-panel': '' },
+            E(SearchPicker, {
+              key: 'composer-branch',
+              mode: 'branch',
+              t: t,
+              branches: branchList.local,
+              current: branchName === null ? '' : branchName,
+              busyName: checkingOut,
+              worktreeNote: t('composer.inWorktree'),
+              onPick: (name, entry) => {
+                if (entry.head === true) { setMenu(null); return }
+                void checkoutBranch(name)
+              },
+              onClose: () => setMenu(null),
+            })))
           : null,
       )
     }
@@ -17518,6 +17922,193 @@ window.__ModuleLoader__.load({
               }))))
     }
 
+    /* ---- icon tooltips ----
+       Every icon action already carries its name in `title` (the rail adds the
+       disabled reason; the toolbar / mini / pill buttons carry the action
+       verb). Native title bubbles are the wrong surface for this product: the
+       bottom workbench is a dense horizontal strip, the bubble needs a full
+       second of rest, it is drawn in the browser's own styling, and over a
+       DISABLED rail button it never appears at all. Draw one themed card
+       instead, shared by every seat (panel, composer pill, diff preview) and
+       hung off <body> — see the `.dig-tip` note in CSS for why it can't live
+       inside the panel. The card mirrors the anchor's own `title`, which is
+       removed while the card is up so the native bubble never doubles it. */
+    const TIP_ID = 'dsh-ide-git-tip'
+    const TIP_DELAY_MS = 120
+    const TIP_GAP = 6
+    /* Only this plugin's own surfaces explain themselves. `.dig-root` is the
+       panel (native and better-sidebar seats alike), `.dig-cs-root` the
+       composer status pill, `.dig-preview-root` the external diff seat. */
+    const TIP_ROOTS = '.dig-root, .dig-cs-root, .dig-preview-root'
+
+    function installHoverTips() {
+      /* The SSR self-check drives apply() with a minimal document stub: it has
+         no body, no id lookup and no event targets. Those environments get the
+         no-op installer rather than a throw during plugin activation. */
+      if (typeof document === 'undefined' || document.body == null
+        || typeof document.createElement !== 'function'
+        || typeof document.getElementById !== 'function'
+        || typeof document.addEventListener !== 'function'
+        || typeof window === 'undefined'
+        || typeof window.addEventListener !== 'function') return () => {}
+      /* HMR / re-apply: never stack two cards (or two listener sets on one). */
+      const stale = document.getElementById(TIP_ID)
+      if (stale !== null) stale.remove()
+      const card = document.createElement('div')
+      card.id = TIP_ID
+      card.className = 'dig-tip'
+      card.setAttribute('data-dsh-ide-git', '')
+      card.setAttribute('role', 'tooltip')
+      card.setAttribute('aria-hidden', 'true')
+      document.body.appendChild(card)
+
+      /* `anchor` is the button the pointer is on (or about to rest on, while
+         `timer` runs); `shown` is the one whose title the card has taken. */
+      let anchor = null
+      let shown = null
+      let takenTitle = null
+      let timer = null
+
+      const restore = () => {
+        if (shown === null) return
+        /* React may have rewritten the attribute while the card was up (toggle
+           buttons swap their copy): only put the taken text back when nothing
+           else has claimed the slot, so a fresh label is never clobbered. */
+        try {
+          if (shown.getAttribute('title') === null && takenTitle !== null) shown.setAttribute('title', takenTitle)
+        } catch (error) { void error }
+        shown = null
+        takenTitle = null
+      }
+
+      const hide = () => {
+        if (timer !== null) { clearTimeout(timer); timer = null }
+        anchor = null
+        restore()
+        card.removeAttribute('data-show')
+        card.setAttribute('aria-hidden', 'true')
+        card.textContent = ''
+      }
+
+      /* Viewport coordinates on a body child: no panel containment to fight. */
+      const place = () => {
+        const rect = anchor.getBoundingClientRect()
+        const width = card.offsetWidth
+        const height = card.offsetHeight
+        const viewportW = window.innerWidth || document.documentElement.clientWidth || 0
+        const viewportH = window.innerHeight || document.documentElement.clientHeight || 0
+        /* The vertical action rail is a 24px column on the panel's left edge:
+           a card under an icon there would cover the icons below it, so this one
+           sits to its right and follows the row. (The horizontal rail uses
+           `.dig-rail-row`, so the `closest` query only matches the vertical
+           seat — top rows keep the below-the-button placement.) */
+        if (anchor.closest('.dig-rail') !== null) {
+          let left = rect.left + rect.width + TIP_GAP
+          if (left + width > viewportW - 4) left = rect.left - TIP_GAP - width
+          if (left < 4) left = 4
+          let top = rect.top + (rect.height - height) / 2
+          if (top + height > viewportH - 4) top = viewportH - height - 4
+          if (top < 4) top = 4
+          card.style.left = Math.round(left) + 'px'
+          card.style.top = Math.round(top) + 'px'
+          return
+        }
+        /* Below the anchor; flip above when the bottom edge would clip. */
+        let top = rect.bottom + TIP_GAP
+        if (top + height > viewportH - 4) top = rect.top - height - TIP_GAP
+        if (top < 4) top = 4
+        let left = rect.left + (rect.width - width) / 2
+        if (left + width > viewportW - 4) left = viewportW - width - 4
+        if (left < 4) left = 4
+        card.style.left = Math.round(left) + 'px'
+        card.style.top = Math.round(top) + 'px'
+      }
+
+      const reveal = () => {
+        timer = null
+        if (anchor === null) return
+        const label = anchor.getAttribute('title')
+        if (label === null || label === '') { hide(); return }
+        takenTitle = label
+        try { anchor.removeAttribute('title') } catch (error) { void error }
+        shown = anchor
+        card.textContent = label
+        card.setAttribute('data-show', 'true')
+        card.removeAttribute('aria-hidden')
+        place()
+      }
+
+      /* Whatever sits under the pointer, not whatever received the event: a
+         disabled button still hit-tests (rail icons), and the SVG glyph inside
+         the button is usually the element under the cursor. `closest` walks up
+         to the button. The label is read here, but the anchor's own copy is
+         already taken while its card is up — so the shown button answers from
+         the saved text, otherwise it would stop counting as a candidate the
+         moment the card opened. */
+      const buttonAt = (x, y) => {
+        if (typeof document.elementFromPoint !== 'function') return null
+        let hit = null
+        try { hit = document.elementFromPoint(x, y) } catch (error) { void error; return null }
+        if (hit === null || hit === undefined || typeof hit.closest !== 'function') return null
+        if (hit.closest(TIP_ROOTS) === null) return null
+        return hit.closest('button, [role="button"]')
+      }
+
+      const labelOf = (button) => {
+        if (button === shown) return takenTitle
+        const label = button.getAttribute('title')
+        return label === null || label === '' ? null : label
+      }
+
+      const onPointerMove = (event) => {
+        if (event !== null && event !== undefined && event.pointerType === 'touch') return
+        /* A drag is not a hover: reordering rail actions, dragging a divider or
+           selecting rows all sweep across buttons with a pressed pointer, and
+           no card should pop up under the drag. */
+        if (event !== null && event !== undefined && typeof event.buttons === 'number' && event.buttons !== 0) {
+          if (anchor !== null || timer !== null || shown !== null) hide()
+          return
+        }
+        const button = buttonAt(event === null || event === undefined ? 0 : event.clientX, event === null || event === undefined ? 0 : event.clientY)
+        if (button === null || labelOf(button) === null) {
+          if (anchor !== null || timer !== null || shown !== null) hide()
+          return
+        }
+        if (button === anchor) return
+        /* Another button: the old card (and the title it took) goes now, the
+           new one waits out the grace period — sweeping the rail must not
+           flash a card per icon. */
+        if (timer !== null) { clearTimeout(timer); timer = null }
+        restore()
+        card.removeAttribute('data-show')
+        anchor = button
+        timer = setTimeout(reveal, TIP_DELAY_MS)
+      }
+
+      document.addEventListener('pointermove', onPointerMove, { passive: true })
+      document.addEventListener('pointerdown', hide, true)
+      document.addEventListener('pointerleave', hide)
+      document.addEventListener('wheel', hide, { passive: true, capture: true })
+      /* Scroll and resize move the anchor under a card that cannot follow it:
+         the card would lie about where the button is. Drop it and let the next
+         pointer move re-open it. */
+      window.addEventListener('scroll', hide, true)
+      window.addEventListener('resize', hide)
+      window.addEventListener('blur', hide)
+
+      return () => {
+        hide()
+        document.removeEventListener('pointermove', onPointerMove)
+        document.removeEventListener('pointerdown', hide, true)
+        document.removeEventListener('pointerleave', hide)
+        document.removeEventListener('wheel', hide, { capture: true })
+        window.removeEventListener('scroll', hide, true)
+        window.removeEventListener('resize', hide)
+        window.removeEventListener('blur', hide)
+        card.remove()
+      }
+    }
+
     function apply(ctx) {
       const style = document.createElement('style')
       style.setAttribute('data-dsh-ide-git', '')
@@ -17525,6 +18116,11 @@ window.__ModuleLoader__.load({
       document.head.appendChild(style)
       ctx.effect(() => () => { style.remove() }, 'dsh-ide-git: panel styles')
 
+      /* Icon affordances explain themselves on hover wherever this plugin
+         draws one — the panel in any seat, the composer pill, the diff
+         preview. One document-level card covers them all. */
+      ctx.effect(() => installHoverTips(), 'dsh-ide-git: icon tooltips')
+
       const t = translatorOf(ctx)
 
       /* DSH's own locale registry: bind this plugin's namespace so host-side