dsh-oc-tui 0.2.0-pre.13 → 0.2.0

package/lib/splash-opencode.js

@@ -91,18 +91,36 @@ export function paintSplashOpenCode(screen, cols, rows, theme, ctx = {}, floor =
   }
 
   // Keyboard shortcuts at bottom: only affordances that actually exist on the
-  // title screen. A narrow terminal drops the thinking hint whole rather than
-  // cutting any group in half; settings is the more valuable of the two.
+  // title screen. A narrow terminal drops whole groups rather than cutting any
+  // group in half; settings is the more valuable of the two, and the branch
+  // switcher the least, so the drop order is thinking then branches. Each
+  // group paints its key in the accent color and bold so the key reads apart
+  // from the muted description that follows it.
   if (shortcutsY > hintY + 2) {
     const sep = '    '
-    let line = ''
-    for (const group of ['Ctrl+P  ' + tr('splash.shortcutSettings'), 'Tab ' + tr('splash.shortcutThinking')]) {
-      const next = line === '' ? group : line + sep + group
-      if (displayWidth(next) > bandW - 2) break
-      line = next
+    const pairs = [
+      ['Ctrl+P', tr('splash.shortcutSettings')],
+      ['Tab', tr('splash.shortcutThinking')],
+      ['Ctrl+G', tr('splash.shortcutBranches')],
+    ]
+    const kept = []
+    let width = 0
+    for (const [key, desc] of pairs) {
+      const groupW = displayWidth(key) + 2 + displayWidth(desc)
+      const next = kept.length === 0 ? groupW : width + displayWidth(sep) + groupW
+      if (next > bandW - 2) break
+      kept.push([key, desc])
+      width = next
     }
-    if (line) {
-      screen.text(centerX(line), shortcutsY, line, { fg: theme.textMuted, bg: theme.background })
+    if (kept.length > 0) {
+      const line = kept.map(([key, desc]) => key + '  ' + desc).join(sep)
+      let sx = centerX(line)
+      for (let i = 0; i < kept.length; i++) {
+        if (i > 0) sx = screen.text(sx, shortcutsY, sep, { fg: theme.textMuted, bg: theme.background })
+        const [key, desc] = kept[i]
+        sx = screen.text(sx, shortcutsY, key, { fg: theme.accent, bold: true, bg: theme.background })
+        sx = screen.text(sx, shortcutsY, '  ' + desc, { fg: theme.textMuted, bg: theme.background })
+      }
     }
   }
 }

package/lib/std/command-list.js

@@ -15,7 +15,7 @@ export const COMMAND_PLACEMENT = Object.freeze({ apiVersion: 'tui.dsh/v1alpha1',
 // runCommand asks ctx.commands.find() first, so the harness owns them whenever
 // it registers them and the TUI only supplies the fallback.
 export const TUI_OWNED_COMMANDS = Object.freeze([
-  'settings', 'help', 'stats', 'new', 'resume', 'clear', 'cancel', 'rewind', 'quit',
+  'settings', 'help', 'stats', 'new', 'resume', 'clear', 'cancel', 'rewind', 'branch', 'quit',
 ])
 
 // Mirrors the `title` of each contributed command in dsh-plugin.json.
@@ -28,5 +28,6 @@ export const COMMAND_DESCRIPTIONS = Object.freeze({
   clear: 'Clear the transcript',
   cancel: 'Cancel the running turn',
   rewind: 'Rewind the session to an earlier point',
+  branch: 'Switch git branches on the empty page',
   quit: 'Leave the TUI',
 })

package/lib/term.js

@@ -431,6 +431,14 @@ export class Terminal extends EventEmitter {
     super()
     this.input = input
     this.output = output
+    // The write channel is bound, not looked up per frame. While the TUI owns
+    // the alternate screen the process streams are diverted into the
+    // diagnostics log; a late `this.output.write(...)` lookup on `process.stdout`
+    // would resolve to that diversion and file every frame instead of painting
+    // it. `write()` re-binds whenever the output object itself is swapped, so a
+    // host (or a test) handing in a new stream still gets painted to.
+    this._boundOutput = output
+    this._outputWrite = output.write.bind(output)
     this.raw = false
     this.started = false
     this._buffer = Buffer.alloc(0)
@@ -505,7 +513,11 @@ export class Terminal extends EventEmitter {
   }
 
   write(s) {
-    this.output.write(s)
+    if (this._boundOutput !== this.output) {
+      this._boundOutput = this.output
+      this._outputWrite = this.output.write.bind(this.output)
+    }
+    this._outputWrite(s)
   }
 
   // Ask the terminal for its clipboard (OSC 52 read). The reply arrives on

package/lib/ui.js

@@ -3,7 +3,7 @@
 import { Screen, makeStyle, mergeStyle, hexToAnsi } from './term.js'
 import { renderMarkdown } from './markdown.js'
 import { sha16 } from './image.js'
-import { displayWidth, truncateWidth, timeString, toolSummary, roughTokens, formatTokens, wrapText, shortenPath, decodeDataUrl } from './util.js'
+import { displayWidth, truncateWidth, timeString, toolSummary, roughTokens, formatTokens, wrapText, shortenPath, decodeDataUrl, reasoningText } from './util.js'
 import { paintSplashOpenCode } from './splash-opencode.js'
 import { loadMermaidEngine, paintMermaidArt, renderMermaidArt } from './mermaid-ascii.js'
 // `tr` on purpose: the paint methods below bind `t` to THEME, and a bare `t`
@@ -95,7 +95,7 @@ const COMMAND_HINTS = [
   ['/model', 'hint.model'], ['/provider', 'hint.provider'],
   ['/rewind', 'hint.rewind'], ['/stats', 'hint.stats'],
   ['/clear', 'hint.clear'], ['/cancel', 'hint.cancel'],
-  ['/quit', 'hint.quit'],
+  ['/quit', 'hint.quit'], ['/branch', 'hint.branch'],
   ['/compact', 'hint.compact'], ['/goal', 'hint.goal'],
 ]
 
@@ -260,6 +260,28 @@ function flatRows(tag, block, markerSegs, body, hang = 4, width = Infinity) {
   return rows
 }
 
+// One-line gist of a collapsed thinking box. A folded row that only says
+// "Thinking" tells the reader nothing about what was thought; the first real
+// line, stripped of its markdown noise, is enough to decide whether to expand.
+// Only the head of the text is scanned — a long chain of thought costs nothing
+// to preview, and the row is clipped to the pane by the caller anyway.
+function thinkingPreview(text) {
+  const head = String(text).slice(0, 400)
+  for (const raw of head.split(/\r?\n/)) {
+    const line = raw.trim()
+    if (line === '') continue
+    // A fence opener on its own line carries no gist; skip to the next line.
+    if (/^```/.test(line)) continue
+    return line
+      .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
+      .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
+      .replace(/[*_`#>~|]+/g, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+  }
+  return ''
+}
+
 // Per-tool accent for the activity rows: shell commands read as actions
 // (gold), reads as lookups (cyan), edits as changes (light blue), todo writes
 // as progress (mint); anything unmapped keeps the light-blue accent.
@@ -384,13 +406,14 @@ export class App {
     this.railScroll = 0            // lines scrolled up from the rail's bottom (0 = follow)
     this.versions = { tui: '', dsh: '' }
     this.rewind = null             // rewind picker state, or null
+    this.gitBranches = null        // git branch switcher state, or null
     this.inputText = ''
     this.inputCursor = 0
     this.inputImages = []          // pasted images: [{ status, ref, mediaType, label }]
     this.history = []
     this.historyIndex = -1
     this.scroll = 0                // lines scrolled up from bottom (0 = follow)
-    this.overlay = null            // 'help' | 'settings' | 'rewind' | null
+    this.overlay = null            // 'help' | 'settings' | 'rewind' | 'git-branches' | null
     this.settingsSelection = 0
     this.settingsEditing = null
     this.settingsDraft = ''
@@ -437,6 +460,11 @@ export class App {
     this._imageResults = new Map() // key -> { state: 'loading' | 'done' | 'error', protocol?, cellsW?, cellsH?, segLines?, error? }
     this._imageBlocks = new Map()  // key -> Set of blocks showing it (rev bump on arrival)
     this._imageRequested = new Set()
+    // The geometry each in-flight render was requested for. A resize can land
+    // while the host is decoding; stamping the result with what was asked for
+    // (not with what is current when it arrives) is what lets the next frame
+    // notice the mismatch and render again.
+    this._imagePendingSig = new Map()
     this._imageSources = new Map() // key -> the source that produced it (cropped variants are re-renders of it)
     this._imageCrops = new Map()   // key -> Set of '<key>\u0000<crop>' variants still holding a payload
     this._imageCropsPrev = new Set() // variants the previous render used (a crop outlives one idle frame)
@@ -492,11 +520,12 @@ export class App {
     // The settings left menu switches on Tab/click only; hovering it never
     // steals focus from the item list.
     if (region?.kind === 'settings-menu') return false
-    const target = region ? region.kind + ':' + (region.settingsIndex ?? region.sessionIndex ?? region.rewindIndex ?? '') : ''
-    const focusIndex = region ? (region.settingsIndex ?? region.sessionIndex ?? region.rewindIndex ?? -1) : -1
+    const target = region ? region.kind + ':' + (region.settingsIndex ?? region.sessionIndex ?? region.rewindIndex ?? region.branchIndex ?? '') : ''
+    const focusIndex = region ? (region.settingsIndex ?? region.sessionIndex ?? region.rewindIndex ?? region.branchIndex ?? -1) : -1
     const currentFocus = region?.kind === 'settings-item' ? this.settingsSelection
       : region?.kind === 'rewind-item' ? this.rewind?.selected
       : region?.kind === 'rewind-option' ? this.rewind?.modeIndex
+      : region?.kind === 'git-branch-item' ? this.gitBranches?.selected
       : this.sidebarSelection
     const focusDiffers = focusIndex >= 0 && focusIndex !== currentFocus
     if (target === this._lastHover && !focusDiffers) return false
@@ -505,6 +534,7 @@ export class App {
     this.focusedRegion = 'mouse'
     if (region.kind === 'settings-item') this.settingsSelection = region.settingsIndex
     if (region.kind === 'session') this.sidebarSelection = region.sessionIndex
+    if (region.kind === 'git-branch-item' && this.gitBranches) this.gitBranches.selected = region.branchIndex
     if (this.rewind) {
       if (region.kind === 'rewind-item') this.rewind.selected = region.rewindIndex
       if (region.kind === 'rewind-option') this.rewind.modeIndex = region.rewindIndex
@@ -865,6 +895,110 @@ export class App {
     picker.scroll = Math.max(0, Math.min(picker.scroll, Math.max(0, n - visible)))
   }
 
+  // ---- git branch switcher ------------------------------------------------
+  // Rows for the branch window: one non-selectable header per section, then
+  // one row per branch. Rebuilt from the fresh lists on every refresh so the
+  // current marker and the remote set can never go stale in an open window.
+
+  _gitBranchItems(local, remote, current) {
+    const items = []
+    if (local.length > 0) {
+      items.push({ kind: 'header', label: tr('git.local') })
+      for (const name of local) {
+        items.push({ kind: 'branch', ref: name, name, remote: false, current: name === current })
+      }
+    }
+    if (remote.length > 0) {
+      items.push({ kind: 'header', label: tr('git.remote') })
+      for (const name of remote) {
+        items.push({ kind: 'branch', ref: name, name, remote: true, current: false })
+      }
+    }
+    return items
+  }
+
+  openGitBranches({ cwd = '', root = '', current = '', local = [], remote = [] } = {}) {
+    this.gitBranches = {
+      cwd,
+      root,
+      current,
+      local,
+      remote,
+      items: this._gitBranchItems(local, remote, current),
+      selected: 0,
+      scroll: 0,
+      busy: false,
+      error: '',
+      status: '',
+    }
+    this.overlay = 'git-branches'
+    this._preselectGitBranch(current)
+  }
+
+  closeGitBranches() {
+    if (this.overlay === 'git-branches') this.overlay = null
+    this.gitBranches = null
+  }
+
+  // Replace the branch data after a switch, pull or refresh. The selection
+  // follows the branch it was on when that branch still exists, so a pull
+  // that only updates the remote set does not yank the cursor elsewhere; a
+  // list that dropped it (a pruned remote branch) lands on the new current
+  // branch instead of on an arbitrary row.
+  setGitBranchList({ current = '', local = [], remote = [] } = {}) {
+    const picker = this.gitBranches
+    if (!picker) return
+    const row = picker.items[picker.selected]
+    const previousRef = row?.kind === 'branch' ? row.ref : null
+    picker.current = current
+    picker.local = local
+    picker.remote = remote
+    picker.items = this._gitBranchItems(local, remote, current)
+    this._preselectGitBranch(previousRef, current)
+  }
+
+  // Point the selection at the first candidate ref that still has a row, else
+  // at the first branch there is. Candidates arrive most-preferred first.
+  _preselectGitBranch(...candidates) {
+    const picker = this.gitBranches
+    if (!picker) return
+    let target = -1
+    for (const ref of candidates) {
+      if (!ref) continue
+      target = picker.items.findIndex((item) => item.kind === 'branch' && item.ref === ref)
+      if (target >= 0) break
+    }
+    if (target < 0) target = picker.items.findIndex((item) => item.kind === 'branch')
+    picker.selected = target < 0 ? 0 : target
+    this._clampGitBranchesScroll()
+  }
+
+  moveGitBranches(delta) {
+    const picker = this.gitBranches
+    if (!picker || picker.busy) return
+    const count = picker.items.length
+    if (count === 0) return
+    let index = picker.selected
+    let steps = count
+    while (steps-- > 0) {
+      index = (index + delta + count) % count
+      if (settingsRowSelectable(picker.items[index])) break
+    }
+    picker.selected = index
+    this._clampGitBranchesScroll()
+  }
+
+  _clampGitBranchesScroll() {
+    const picker = this.gitBranches
+    if (!picker) return
+    const visible = 7
+    const n = picker.items.length
+    const sel = picker.selected
+    if (sel < picker.scroll) picker.scroll = sel
+    if (sel >= picker.scroll + visible) picker.scroll = sel - visible + 1
+    picker.scroll = Math.max(0, Math.min(picker.scroll, Math.max(0, n - visible)))
+  }
+
   // Point the selection at an item index, skipping rows that carry no action
   // (kind 'header' rows are never selectable): a landing on one moves down to
   // the next real item, or back to the first selectable one.
@@ -947,13 +1081,25 @@ export class App {
     }
   }
 
+  // Identity of the geometry every image render is built for. A result carries
+  // the signature it was produced under, so a frame at a different width (a
+  // resize, a sidebar toggled open) can tell that the raster on hand was scaled
+  // for the old grid and ask again, instead of drawing it at the wrong size
+  // until the session is reopened.
+  imageRenderSignature() {
+    const o = this.imageRenderOptions()
+    return [o.protocol, o.maxCellsW, o.maxCellsH, o.cellW, o.cellH].join('|')
+  }
+
   // A render landed for an image key: cache it and refresh every block that
   // shows the source so the next frame picks the finished render up. The block
   // set survives the bump — a result can be replaced (protocol upgrade after
   // caps probing, width re-render) and the replacement must reach the same
   // blocks; the map is cleared with the line cache in resetView.
   setImageResult(key, result) {
-    this._imageResults.set(key, result)
+    const sig = this._imagePendingSig.get(key) ?? this.imageRenderSignature()
+    this._imagePendingSig.delete(key)
+    this._imageResults.set(key, { ...result, sig })
     const blocks = this._imageBlocks.get(key)
     if (blocks) {
       for (const b of blocks) b.rev = (b.rev ?? 0) + 1
@@ -976,6 +1122,7 @@ export class App {
     const src = this._imageSources.get(key)
     if (!src) return
     live.add(cropKey)
+    this._imagePendingSig.set(cropKey, this.imageRenderSignature())
     this.onImageRequest?.({ ...src, key: cropKey, cropCells: clip })
   }
 
@@ -996,7 +1143,19 @@ export class App {
       out.push({ segs: [{ text: tr('image.attachment'), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
       return
     }
+    // Geometry check: a finished render whose signature no longer matches the
+    // current grid was scaled for a different width and would draw at the wrong
+    // size inside this one. Drop it — and the bookkeeping around it, or the
+    // request would never be repeated — so the placeholder shows for the frame
+    // or two the re-render takes.
+    const sig = this.imageRenderSignature()
     let result = this._imageResults.get(key)
+    if (result && result.sig !== undefined && result.sig !== sig) {
+      this._imageResults.delete(key)
+      this._imageRequested.delete(key)
+      this._imageCrops.delete(key)
+      result = undefined
+    }
     if (!result) {
       result = { state: 'loading' }
       this._imageResults.set(key, result)
@@ -1013,6 +1172,7 @@ export class App {
     if (result.state === 'loading') {
       if (!this._imageRequested.has(key)) {
         this._imageRequested.add(key)
+        this._imagePendingSig.set(key, sig)
         this.onImageRequest?.(src)
       }
       out.push({ segs: [{ text: tr('image.rendering'), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
@@ -1070,6 +1230,17 @@ export class App {
     }
 
     const engine = this._mermaidEngine
+    // A fence that is still streaming is a partial diagram: laying it out costs
+    // a full parse per frame for a picture that changes on the next chunk, and
+    // the half-drawn boxes flash as it grows. Keep the source visible until the
+    // block settles — the finished block invalidates the line cache and draws
+    // the diagram then.
+    if (!off && block?.streaming === true) {
+      for (const line of renderMarkdown('```mermaid\n' + code + '\n```', THEME, width)) {
+        out.push({ segs: line })
+      }
+      return
+    }
     if (!off) {
       if (engine === 'loading') {
         out.push({ segs: [{ text: tr('image.mermaidRendering'), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
@@ -1204,7 +1375,9 @@ export class App {
         b.rev++
         // Thinking is collapsed by default once it has finished streaming.
         if (b.reasoning && b.thinkingCollapsed === undefined) b.thinkingCollapsed = true
-        if (b.text === '' && b.reasoning === '') this.blocks.splice(i, 1)
+        // A signature-only block is as empty as one that never reasoned: left
+        // in place it would draw a bare `dsh` header over nothing.
+        if (b.text === '' && !reasoningText(b.reasoning)) this.blocks.splice(i, 1)
         break
       }
     }
@@ -1405,6 +1578,7 @@ export class App {
     this._imageResults.clear()
     this._imageBlocks.clear()
     this._imageRequested.clear()
+    this._imagePendingSig.clear()
     this._imageSources.clear()
     this._imageCrops.clear()
     this._imageCropsPrev = new Set()
@@ -1417,7 +1591,7 @@ export class App {
   // Toggle a completed thinking box between collapsed and expanded. Thinking
   // stays collapsed while it is still streaming.
   toggleThinking(block) {
-    if (!block || block.kind !== 'assistant' || !block.reasoning || block.streaming) return
+    if (!block || block.kind !== 'assistant' || !reasoningText(block.reasoning) || block.streaming) return
     block.thinkingCollapsed = block.thinkingCollapsed !== true
     block.rev++
   }
@@ -1603,12 +1777,17 @@ export class App {
         break
       }
       case 'assistant': {
+        // The displayable reasoning, with the transport signature stripped. A
+        // block whose reasoning is only a signature has no thinking to show, so
+        // every decision below — including whether the block is empty at all —
+        // is taken on this text rather than on the raw accumulation.
+        const reasoning = reasoningText(block.reasoning)
         // A message that only issued tool calls has nothing to say on its own:
         // its activity lives in the tool rows below, and drawing an empty frame
         // anyway is what produced the empty bubbles in long tool turns. The
         // turn's `dsh · time` header must not be swallowed here — pass it to
         // the next assistant block if there is one.
-        if (block.text === '' && !block.reasoning) {
+        if (block.text === '' && !reasoning) {
           if (block.showHeader === true) {
             // The next assistant message can sit behind this one's tool rows —
             // scan past them.
@@ -1627,7 +1806,7 @@ export class App {
         // body hangs under it in muted italics. No frame and no full-width
         // band — the boxed shapes measured their own borders and drifted on
         // wide runes, and the band read as a bar across the transcript.
-        if (block.reasoning) {
+        if (reasoning) {
           const streaming = block.streaming === true
           const collapsed = block.thinkingCollapsed === true || streaming
           const hint = streaming ? tr('transcript.streaming') : (collapsed ? tr('common.clickExpand') : tr('common.clickCollapse'))
@@ -1638,14 +1817,25 @@ export class App {
             : { text: collapsed ? '▸' : '▾', style: makeStyle({ fg: t.thinking, bold: true }) }
           const body = []
           if (!collapsed) {
-            for (const line of renderMarkdown(block.reasoning, t, Math.max(8, width - 6))) {
+            for (const line of renderMarkdown(reasoning, t, Math.max(8, width - 6))) {
               body.push(line.map((s) => ({ ...s, style: mergeStyle(s.style, { fg: t.thinking, italic: true }) })))
             }
           }
+          // Folded and finished: name the row, then show what it was about.
+          // While streaming the text is still arriving, so a preview would
+          // flicker; the running hint stands in for it.
+          const preview = collapsed && !streaming ? thinkingPreview(reasoning) : ''
           out.push(...flatRows('thinking', block, [
             { text: '  ', style: null },
             marker,
-            { text: tr('transcript.thinking') + hint, style: makeStyle({ fg: t.thinking, bold: true }) },
+            { text: tr('transcript.thinking'), style: makeStyle({ fg: t.thinking, bold: true }) },
+            ...(preview
+              ? [
+                  { text: ' · ', style: makeStyle({ fg: t.thinking, dim: true }) },
+                  { text: truncateWidth(preview, 48), style: makeStyle({ fg: t.thinking, italic: true }) },
+                ]
+              : []),
+            { text: hint, style: makeStyle({ fg: t.thinking, bold: true }) },
           ], body, 4, width))
           // A blank line separates the reasoning from the visible answer so
           // the two never run together.
@@ -2343,6 +2533,7 @@ export class App {
     if (this.overlay === 'help') this._paintHelp(screen, cols, rows, railW)
     if (this.overlay === 'settings') this._paintSettings(screen, cols, rows, railW)
     if (this.overlay === 'rewind') this._paintRewind(screen, cols, rows, railW)
+    if (this.overlay === 'git-branches') this._paintGitBranches(screen, cols, rows, railW)
     // The question modal owns the screen while a request is pending.
     this._questionCaret = null
     if (this.pendingQuestions) this._paintQuestions(screen, cols, rows, railW)
@@ -3305,6 +3496,10 @@ export class App {
           screen.text(cx + 6 + indent, y, truncateWidth(item.label, Math.max(6, 22 - indent)), style)
           screen.text(cx + 30, y, '\u2588'.repeat(done) + '\u2591'.repeat(barW - done), barStyle)
           screen.text(cx + 30 + barW + 1, y, truncateWidth(value, Math.max(4, cw - 41 - 5)), valueStyle)
+        } else if (item.wide === true) {
+          // A sentence, not a label/value pair: rows that explain rather than
+          // configure get the whole content width instead of the value column.
+          screen.text(cx + 6 + indent, y, truncateWidth(item.label, cw - 8 - indent), style)
         } else {
           screen.text(cx + 6 + indent, y, truncateWidth(item.label, Math.max(6, 29 - indent)), style)
           screen.text(cx + 36, y, truncateWidth(value, cw - 41), valueStyle)
@@ -3317,7 +3512,14 @@ export class App {
       : hasMenu
         ? tr('settings.footerMenu')
         : tr('settings.footerPlain')
-    screen.text(cx + 3, y0 + h - 2, footer, makeStyle({ fg: this.settingsConfirm ? t.warning : t.textMuted, bg: t.backgroundElement }))
+    // A pending confirm repaints the whole row as a warning; otherwise the
+    // key token leads each pair in the accent color so it reads apart from
+    // its description.
+    if (this.settingsConfirm) {
+      screen.text(cx + 3, y0 + h - 2, footer, makeStyle({ fg: t.warning, bg: t.backgroundElement }))
+    } else {
+      paintKeyHints(screen, cx + 3, y0 + h - 2, footer, cw - 6, t)
+    }
   }
 
   _paintHelp(screen, cols, rows, railW = 0) {
@@ -3349,6 +3551,7 @@ export class App {
       [tr('help.ctrlE'), tr('help.ctrlEDesc')],
       [tr('help.tab'), tr('help.tabDesc')],
       [tr('help.ctrlN'), tr('help.ctrlNDesc')],
+      [tr('help.ctrlG'), tr('help.ctrlGDesc')],
       [tr('help.ctrlD'), tr('help.ctrlDDesc')],
       [tr('help.pg'), tr('help.pgDesc')],
       [tr('help.shiftArrows'), tr('help.shiftArrowsDesc')],
@@ -3372,7 +3575,7 @@ export class App {
     yy++
     screen.text(x0 + 3, yy, tr('help.commands'), makeStyle({ fg: t.accent, bold: true, bg: t.backgroundElement }))
     yy++
-    for (const cmd of ['/help  /settings  /new  /resume <id>', '/model <id>  /provider <route>  /rewind', '/stats  /clear  /cancel  /quit']) {
+    for (const cmd of ['/help  /settings  /new  /resume <id>', '/branch  /model <id>  /provider <route>  /rewind', '/stats  /clear  /cancel  /quit']) {
       screen.text(x0 + 3, yy, cmd, makeStyle({ fg: t.text, bg: t.backgroundElement }))
       yy++
     }
@@ -3449,12 +3652,115 @@ export class App {
       }
       this.addHitRegion(picker.step === 'restore' ? 'rewind-option' : 'rewind-item', x0 + 1, y, w - 2, 1, { rewindIndex: i })
     }
-    const footer = picker.busy
-      ? tr('common.pleaseWait')
-      : picker.step === 'restore'
-        ? tr('common.selectConfirmBack')
-        : tr('common.selectContinueExit')
-    screen.text(x0 + 2, y0 + h - 2, truncateWidth(footer, innerW), makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+    if (picker.busy) {
+      screen.text(x0 + 2, y0 + h - 2, truncateWidth(tr('common.pleaseWait'), innerW), makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+    } else {
+      paintKeyHints(screen, x0 + 2, y0 + h - 2,
+        picker.step === 'restore' ? tr('common.selectConfirmBack') : tr('common.selectContinueExit'),
+        innerW, t)
+    }
+  }
+
+  _paintGitBranches(screen, cols, rows, railW = 0) {
+    const picker = this.gitBranches
+    if (!picker) return
+    const t = THEME
+    const region = overlayRegion(cols, railW)
+    const w = Math.min(72, region - 4)
+    const h = Math.min(rows - 2, 8 + Math.min(7, Math.max(1, picker.items.length)))
+    const x0 = Math.max(0, Math.floor((region - w) / 2))
+    const y0 = Math.max(0, Math.floor((rows - h) / 2))
+    const box = makeStyle({ fg: t.text, bg: t.backgroundElement })
+    const border = makeStyle({ fg: t.border, bg: t.backgroundElement })
+    for (let y = y0; y < y0 + h; y++) screen.fill(x0, y, w, ' ', box)
+    for (let i = 0; i < w; i++) {
+      screen.set(x0 + i, y0, '─', border)
+      screen.set(x0 + i, y0 + h - 1, '─', border)
+    }
+    for (let i = 0; i < h; i++) {
+      screen.set(x0, y0 + i, '│', border)
+      screen.set(x0 + w - 1, y0 + i, '│', border)
+    }
+    screen.set(x0, y0, '╭', border); screen.set(x0 + w - 1, y0, '╮', border)
+    screen.set(x0, y0 + h - 1, '╰', border); screen.set(x0 + w - 1, y0 + h - 1, '╯', border)
+    screen.text(x0 + 2, y0 + 1, tr('git.title'), makeStyle({ fg: t.primary, bold: true, bg: t.backgroundElement }))
+    const innerW = w - 4
+    // The subtitle doubles as the action report: busy while an operation
+    // runs, its failure, its one-line outcome, or the resting current-branch
+    // reading — in that precedence, so a failed pull is never hidden by the
+    // branch it was pulling.
+    let subtitle
+    if (picker.busy) subtitle = tr('common.working')
+    else if (picker.error) subtitle = picker.error
+    else if (picker.status) subtitle = picker.status
+    else subtitle = tr('git.subtitle', { branch: picker.current || tr('git.detached'), path: picker.root })
+    screen.text(x0 + 2, y0 + 2, truncateWidth(subtitle, innerW), makeStyle({
+      fg: picker.error ? t.error : t.textMuted,
+      bg: t.backgroundElement,
+    }))
+    const listTop = y0 + 4
+    const listH = Math.max(1, h - 7)
+    const start = picker.scroll
+    const end = Math.min(picker.items.length, start + listH)
+    if (picker.items.length === 0) {
+      screen.text(x0 + 3, listTop, tr('git.empty'), makeStyle({ fg: t.textMuted, italic: true, bg: t.backgroundElement }))
+    }
+    for (let i = start; i < end; i++) {
+      const y = listTop + (i - start)
+      const row = picker.items[i]
+      if (row.kind === 'header') {
+        screen.text(x0 + 3, y, truncateWidth(row.label, innerW - 2), makeStyle({ fg: t.accent, bold: true, bg: t.backgroundElement }))
+        continue
+      }
+      const selected = i === picker.selected
+      const st = makeStyle({
+        fg: selected ? t.primary : (row.current ? t.textMuted : t.text),
+        bold: selected,
+        bg: selected ? t.backgroundPanel : t.backgroundElement,
+      })
+      if (selected) screen.fill(x0 + 1, y, w - 2, ' ', st)
+      // The `*` marker is git's own, so it needs no translation and reads the
+      // same in every locale.
+      const pointer = selected ? '▸ ' : '  '
+      const marker = row.current ? '* ' : '  '
+      screen.text(x0 + 2, y, truncateWidth(pointer + marker + row.name, innerW), st)
+      this.addHitRegion('git-branch-item', x0 + 1, y, w - 2, 1, { branchIndex: i })
+    }
+    if (picker.busy) {
+      screen.text(x0 + 2, y0 + h - 2, truncateWidth(tr('common.pleaseWait'), innerW), makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+    } else {
+      paintKeyHints(screen, x0 + 2, y0 + h - 2, tr('git.footer'), innerW, t)
+    }
+  }
+}
+
+// Overlay footers and hint rows read as "key description · key description"
+// pairs. Painting such a line in one muted style let the keys sink into their
+// descriptions, so each pair's leading key token is repainted in the accent
+// color and bold while the descriptions and the ' · ' glue stay muted. The
+// split takes the first space of every ' · '-separated segment — a structure
+// every footer catalog follows by design — so a translated key word
+// ("Entrée") is highlighted exactly like "Enter".
+function paintKeyHints(screen, x, y, text, maxWidth, theme, base = null) {
+  const keyStyle = makeStyle({ fg: theme.accent, bold: true, bg: theme.backgroundElement })
+  const restStyle = base ?? makeStyle({ fg: theme.textMuted, bg: theme.backgroundElement })
+  let cx = x
+  const put = (chunk, style) => {
+    if (chunk === '' || cx >= x + maxWidth) return
+    const shown = truncateWidth(chunk, x + maxWidth - cx)
+    if (shown === '') return
+    screen.text(cx, y, shown, style)
+    cx += displayWidth(shown)
+  }
+  const segments = text.split(' · ')
+  for (let i = 0; i < segments.length; i++) {
+    if (i > 0) put(' · ', restStyle)
+    const gap = segments[i].indexOf(' ')
+    if (gap < 0) put(segments[i], keyStyle)
+    else {
+      put(segments[i].slice(0, gap), keyStyle)
+      put(segments[i].slice(gap), restStyle)
+    }
   }
 }