dsh-oc-tui 0.2.0 → 0.3.0

package/lib/ui.js

@@ -1,7 +1,9 @@
 // The TUI view model and renderer: opencode-inspired layout with a dark
 // theme, session sidebar, chat transcript, input row, and status bar.
+import { stripVTControlCharacters } from 'node:util'
 import { Screen, makeStyle, mergeStyle, hexToAnsi } from './term.js'
 import { renderMarkdown } from './markdown.js'
+import { DEFAULT_THEME, THEME, getTheme, themeId as normalizeThemeId } from './themes.js'
 import { sha16 } from './image.js'
 import { displayWidth, truncateWidth, timeString, toolSummary, roughTokens, formatTokens, wrapText, shortenPath, decodeDataUrl, reasoningText } from './util.js'
 import { paintSplashOpenCode } from './splash-opencode.js'
@@ -17,61 +19,7 @@ const MERMAID_INDENT = '  '
 const MERMAID_INDENT_WIDTH = displayWidth(MERMAID_INDENT)
 const MERMAID_MARGIN = 4
 
-// DeepSeek brand palette: deep blue accents on a blue-tinted dark canvas.
-export const THEME = {
-  primary: '4d6bfe',      // DeepSeek blue
-  secondary: '6c9cff',    // light blue
-  accent: '7c9cff',       // light blue accent
-  error: 'e06c75',
-  warning: 'e8c468',      // soft gold (no orange)
-  warningDim: '806c39',   // dimmed gold: resting cells of the flowing composer frame
-  success: '7fd88f',
-  info: '56b6c2',
-  text: 'f0f4ff',         // blue-white text
-  textMuted: '8a93a8',
-  background: '0a0e18',   // blue-tinted dark background
-  backgroundPanel: '111a2c',
-  backgroundElement: '1b2740',
-  border: '3d4d73',
-  borderSubtle: '2b3a5c',
-  markdownHeading: '7c9cff',
-  markdownLinkText: '6c9cff',
-  markdownCode: '7fd88f',
-  markdownCodeBlock: 'f0f4ff',
-  markdownBlockQuote: '9fb0d8',
-  markdownListItem: '4d6bfe',
-  markdownHorizontalRule: '46547a',
-  codeBg: '1b2740',
-  thinking: '9aa6c2',
-  reminder: 'c5bdf7',       // system-reminder row text (pale violet)
-  imageChipBg: 'd97706',    // orange emphasis for pasted-image markers
-  imageChipText: '1a0d00',  // text on the orange image chip
-  compaction: '95d8c0',     // compaction row text (pale mint)
-  inbox: '9fd0e8',          // pending-inbox row text (pale cyan)
-  steering: '9fd0e8',       // inline badge on a user turn that arrived as steering
-  systemPrompt: 'b9c4dd',   // system-prompt row text (cool gray)
-  // Context-meter segments (web ContextMeter port): heuristic composition
-  // shares get distinct hues so the breakdown bar reads at a glance.
-  contextSystem: '7fd88f',
-  contextTools: 'e8c468',
-  contextMessages: '56b6c2',
-  // Mouse text-selection highlight (left-drag select, right-click copy).
-  selection: '3153b8',
-  // Syntax highlighting palette (highlight.js token classes), tuned for the
-  // blue-tinted dark canvas and the code background.
-  syntaxKeyword: 'c792ea',
-  syntaxString: '9ece8f',
-  syntaxNumber: 'e5b567',
-  syntaxComment: '6b7490',
-  syntaxFunction: '82aaff',
-  syntaxType: 'e5c07b',
-  tableBorder: '41528a',
-  // Transcript markers: the pointer that opens a user turn carries the brand
-  // blue, the assistant's own label a quiet one, so a long transcript reads at
-  // a glance without any frame around either.
-  userPointer: '4d6bfe',
-  assistantLabel: '9aa6c2',
-}
+export { THEME } from './themes.js'
 
 // Flowing activity indicator frames (clockwise Braille flow).
 const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
@@ -82,11 +30,6 @@ const SPINNER = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇',
 const WORKSPACE_LABEL_KEY = 'header.workspace'
 const WORKSPACE_MIN_PATH = 8
 
-// Cached styles for the composer's flowing (marching-ants) frame: a bright
-// gold head, a warning-gold body, and the dimmed resting tone. Built once
-// because the whole border re-resolves its tone on every animation frame.
-let flowFramePalette = null
-
 // Composer command palette: the command stays literal, the description is a
 // catalog key resolved at paint time (so a language switch is live).
 const COMMAND_HINTS = [
@@ -116,14 +59,19 @@ const RAIL_MIN_COLS = 140
 const RAIL_WIDTH = 34
 
 // Usable text width inside the composer box, derived from the same geometry
-// render() uses (composerX = sidebarW + 2 or 1; the box spans to the main
-// area's right edge, with two columns of padding on each side). Shared so the
+// render() uses, including the centered homepage and its width cap. Shared so the
 // approval prompt's line count and its painting can never disagree.
-function composerTextWidth(cols, sidebarW, railW = 0) {
-  const composerX = sidebarW > 0 ? sidebarW + 2 : 1
+function composerGeometry(cols, sidebarW, railW = 0, home = false) {
+  const left = sidebarW > 0 ? sidebarW + 2 : 2
   const rightEdge = cols - (railW > 0 ? railW + 1 : 0)
-  const composerW = rightEdge - composerX - 1
-  return Math.max(1, composerW - 4)
+  const available = Math.max(5, rightEdge - left - 2)
+  const composerW = home ? Math.min(76, available) : available
+  const composerX = home ? left + Math.floor((available - composerW) / 2) : left
+  return { composerX, composerW }
+}
+
+function composerTextWidth(cols, sidebarW, railW = 0, home = false) {
+  return Math.max(1, composerGeometry(cols, sidebarW, railW, home).composerW - 4)
 }
 
 // Width of the region an overlay may occupy: every column left of the rail's
@@ -243,6 +191,63 @@ function clipSegs(segs, width) {
   return out
 }
 
+function tintMarkdownSegment(seg, style, theme, replace = false) {
+  if (!seg.style) return { ...seg, style: makeStyle(style) }
+  if (seg.style?.bg === theme.codeBg) return seg
+  return { ...seg, style: replace ? makeStyle(style) : mergeStyle(seg.style, style) }
+}
+
+function transcriptText(text) {
+  return stripVTControlCharacters(String(text ?? ''))
+    .replace(/\r\n?/g, '\n')
+    .replace(/\t/g, '    ')
+    .replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, '')
+}
+
+function indentTranscriptRow(row, amount) {
+  // Protocol images retain the old two-column origin; text rows arrive bare.
+  return {
+    ...row,
+    segs: [{ text: ' '.repeat(amount), style: null }, ...row.segs],
+    ...(row.image ? { image: { ...row.image, x: amount + row.image.x - 2 } } : {}),
+  }
+}
+
+function transcriptPanel(body, width, border, theme, tag) {
+  const rows = [{ segs: [] }, ...body, { segs: [] }]
+  return rows.map((row) => ({
+    ...indentTranscriptRow(row, 3),
+    segs: [
+      { text: '┃', style: makeStyle({ fg: border }) },
+      { text: '  ', style: null },
+      ...clipSegs(row.segs, Math.max(1, width - 5)),
+    ],
+    background: theme.backgroundPanel,
+    ...tag,
+  }))
+}
+
+// Catalog key for a context note's marker row. An unknown label (a context
+// kind a newer host introduced) falls back to the label itself, which at least
+// names the subsystem that produced it.
+const NOTE_LABEL_KEYS = {
+  compaction: 'note.compaction',
+  'system-reminder': 'note.systemReminder',
+  'runtime-context': 'note.runtimeContext',
+}
+
+function noteLabelKey(label) {
+  return NOTE_LABEL_KEYS[label] ?? String(label ?? 'context')
+}
+
+// A row that paints nothing: no cell text and no image. Block renderers pad
+// their own edges with these, and the transcript collapses them into the one
+// gutter row between two blocks (see App._blockRows).
+function isBlankRow(row) {
+  if (!row || row.image) return false
+  return row.segs.every((seg) => !seg?.text || seg.text.trim() === '')
+}
+
 // A flat, unboxed block: the marker row comes first, body lines hang under it
 // at `hang` columns in the block's own color, and every row is tagged so the
 // whole block stays one click target. Transcript rows are plain segment lists
@@ -332,14 +337,23 @@ export function makeBlock(kind, data = {}) {
 }
 
 // Classify a non-user context message into a labeled collapsible note.
-// `system-reminder` frames and compaction checkpoints get labeled boxes;
-// everything else stays a plain system line.
+// `system-reminder` frames, the runtime-context snapshot and compaction
+// checkpoints get labeled boxes; everything else stays a plain system line.
+//
+// These are the messages the harness assembles for the model rather than
+// something the human typed, and the first two restate state on every change
+// (the working directory, the approval policy) — so they render collapsed, and
+// `contextDetails: hide` (a developer setting) drops them entirely.
+const CONTEXT_LABELS = new Set(['system-reminder', 'runtime-context'])
+
 export function noteFromContext(src, text) {
   if (typeof text !== 'string') return null
   if (text.includes('<system-reminder>')) {
     return { label: 'system-reminder', text: stripTag(text, 'system-reminder') }
   }
-  if (src && src.kind === 'plugin' && src.plugin === 'compact') {
+  if (src?.kind === 'runtime-context') return { label: 'runtime-context', text }
+  if (src && ((src.kind === 'plugin' && src.plugin === 'compact')
+    || src.kind === 'compact-checkpoint' || src.kind === 'compact-summary')) {
     return { label: 'compaction', text: stripTag(text, 'compacted-summary') }
   }
   return null
@@ -375,17 +389,22 @@ function inboxPreview(text, width) {
 // The application view state + layout + painting. It is dsh-agnostic: the
 // plugin feeds it events and key presses.
 export class App {
-  constructor(terminal, { sidebarWidth = 18 } = {}) {
+  constructor(terminal, { sidebarWidth = 26 } = {}) {
     this.terminal = terminal
     this.sidebarWidth = sidebarWidth
+    this.themeId = DEFAULT_THEME
+    this.theme = THEME
     this.blocks = []
-    this.assistantHeaderPending = true
+    this._turnStartedAt = undefined
+    this._turnAssistant = null
+    this._pendingModelChanges = []
     this.title = 'DeepSeek Harness'
     this.titleScreen = true
     this.workingDirectory = ''
     this.gitBranch = ''
     this.sessionId = ''
     this.model = ''
+    this._requestModel = undefined
     this.provider = ''
     this.status = 'idle'           // idle | running
     this.usage = { input: 0, output: 0 }
@@ -409,6 +428,9 @@ export class App {
     this.gitBranches = null        // git branch switcher state, or null
     this.inputText = ''
     this.inputCursor = 0
+    this.commandSelection = 0
+    this._commandQuery = ''
+    this._commandDismissed = false
     this.inputImages = []          // pasted images: [{ status, ref, mediaType, label }]
     this.history = []
     this.historyIndex = -1
@@ -427,6 +449,11 @@ export class App {
     this.settingsMenuIndex = 0      // active left-menu entry (Tab switches it)
     this.settingsScrollOffset = 0   // scroll offset for the settings window (wheel scroll support)
     this.toast = null              // { text, level }
+    this.cornerNotice = null
+    this._cornerNoticeTimer = null
+    this.mcpNotice = null          // { name, status } — the corner notice
+    this._mcpNotices = []
+    this._mcpNoticeTimer = null
     this.effortSlider = null       // { levels: [{id, name}], current } — the current model's real reasoning levels
     this.effortSliderVisible = false
     this.pendingApproval = null    // { toolName, summary, origin, details, risk, settle }
@@ -442,6 +469,9 @@ export class App {
     this.inboxExpanded = false
     this.systemPromptText = ''     // last rendered system-prompt text (dedupe)
     this.systemPromptBlock = null
+    // 'show' renders the context boxes collapsed; 'hide' drops them from the
+    // transcript entirely (developer setting, see App.setContextDetails).
+    this.contextDetails = 'show'
     this.focusedRegion = 'keyboard' // mouse hover temporarily owns focus
     this._lastHover = ''            // last hovered target (focus-follows-mouse cache)
     this.hitRegions = []           // topmost interactive regions from the latest render
@@ -484,6 +514,15 @@ export class App {
     this._lastTransWidth = 80
   }
 
+  setTheme(value) {
+    const id = normalizeThemeId(value)
+    if (id === this.themeId) return false
+    this.themeId = id
+    this.theme = getTheme(id)
+    this._blockLineCache.clear()
+    return true
+  }
+
   addHitRegion(kind, x, y, width, height = 1, data = {}) {
     if (width <= 0 || height <= 0) return
     this.hitRegions.push({ kind, x, y, width, height, ...data })
@@ -640,8 +679,8 @@ export class App {
         const cell = row[x]
         if (!cell) continue
         cell.style = cell.style
-          ? mergeStyle(cell.style, { bg: THEME.selection })
-          : makeStyle({ bg: THEME.selection })
+          ? mergeStyle(cell.style, { bg: this.theme.selection })
+          : makeStyle({ bg: this.theme.selection })
       }
     }
   }
@@ -680,12 +719,23 @@ export class App {
       this.title = title
       this.untitled = title === '' || title === undefined
     }
-    if (model !== undefined) this.model = model
+    if (model !== undefined) {
+      if (model !== this.model) this._requestModel = undefined
+      this.model = model
+    }
     if (provider !== undefined) this.provider = provider
   }
 
+  setRequestModel(model) {
+    if (typeof model === 'string') this._requestModel = model
+  }
+
   setStatus(status) {
+    if (status === 'idle' && this.status !== 'idle') this.finalizeAssistant()
     this.status = status
+    if (status === 'idle' && this._pendingModelChanges.length) {
+      for (const block of this._pendingModelChanges.splice(0)) this._insertModelChange(block)
+    }
   }
 
   // The reasoning-effort slider data: the current model's ACTUAL selectable
@@ -801,7 +851,7 @@ export class App {
   // from the web chat stats strip. Every group drops out whole when it has no
   // data, and a session whose steps all settled without billing keeps its
   // counts without a zero-token group.
-  _statsGroups() {
+  _statsGroups({ billing = true } = {}) {
     const m = this.metrics ?? {}
     const groups = []
     if ((m.steps ?? 0) > 0) {
@@ -815,7 +865,7 @@ export class App {
       if ((m.decodeMs ?? 0) > 0) speeds.push(tr('stats.tokensPerSecond', { value: formatMetric(m.decodeTokens / (m.decodeMs / 1000)) }))
       if (speeds.length > 0) groups.push(speeds.join(' · '))
     }
-    if ((m.billedInputTokens ?? 0) > 0 || (m.outputTokens ?? 0) > 0) {
+    if (billing && ((m.billedInputTokens ?? 0) > 0 || (m.outputTokens ?? 0) > 0)) {
       if (m.cacheHitRate !== undefined) groups.push(tr('stats.cacheRate', { percent: m.cacheHitRate }))
       groups.push(tr('stats.inOut', { input: formatTokens(m.billedInputTokens ?? 0), output: formatTokens(m.outputTokens ?? 0) }))
     }
@@ -1037,18 +1087,44 @@ export class App {
     this._maybeFollow()
   }
 
+  addModelChange(from, to, { beforeLatestUser = false, defer = false } = {}) {
+    const oldModel = transcriptText(from?.model).trim()
+    const newModel = transcriptText(to?.model).trim()
+    const oldProvider = transcriptText(from?.provider).trim()
+    const newProvider = transcriptText(to?.provider).trim()
+    if (!oldModel || !newModel || (oldModel === newModel && oldProvider === newProvider)) return
+    const block = makeBlock('model-change', {
+      from: { model: oldModel, provider: oldProvider },
+      to: { model: newModel, provider: newProvider },
+    })
+    if (defer && this.status !== 'idle') this._pendingModelChanges.push(block)
+    else this._insertModelChange(block, beforeLatestUser)
+  }
+
+  _insertModelChange(block, beforeLatestUser = false) {
+    this.detachInboxBlock()
+    let index = this.blocks.length
+    if (beforeLatestUser) {
+      const user = this.blocks.findLastIndex((entry) => entry.kind === 'user')
+      if (user >= 0 && !this.blocks.slice(user + 1).some((entry) => entry.kind === 'assistant' || entry.kind === 'tool')) index = user
+    }
+    this.blocks.splice(index, 0, block)
+    this._maybeFollow()
+  }
+
   addNote(text, label = 'context') {
     this.detachInboxBlock()
     this.blocks.push(makeBlock('note', { text, label, collapsed: true }))
     this.scroll = 0
   }
 
-  addUser(text, { steering = false, images } = {}) {
+  addUser(text, { steering = false, images, time = Date.now() } = {}) {
     this.detachInboxBlock()
-    const block = makeBlock('user', { text, steering })
+    const block = makeBlock('user', { text, steering, time })
     if (images?.length) block.images = images
     this.blocks.push(block)
-    this.assistantHeaderPending = true
+    this._turnStartedAt = time
+    this._turnAssistant = null
     this.scroll = 0
   }
 
@@ -1067,17 +1143,33 @@ export class App {
     return false
   }
 
+  // Badge the most recent user block as a steering turn. A steered prompt is
+  // drawn by the composer first and echoed by the loop only when the inbox
+  // claim happens, so the badge is applied to that block rather than to a new
+  // one — the two would otherwise sit next to each other and read as a repeat.
+  markLastUserSteering() {
+    for (let i = this.blocks.length - 1; i >= 0; i--) {
+      const b = this.blocks[i]
+      if (b.kind !== 'user') continue
+      if (b.steering) return true
+      b.steering = true
+      b.rev = (b.rev ?? 0) + 1
+      return true
+    }
+    return false
+  }
+
   // Image render options for the host: the probed protocol, the size budget
   // (cells), the probed cell pixel size, and the canvas background the
   // renderer composes transparent pixels over.
   imageRenderOptions() {
     return {
       protocol: this.graphicsProtocol,
-      maxCellsW: Math.max(8, Math.min(72, this._lastTransWidth - 6)),
+      maxCellsW: Math.max(1, Math.min(72, this._lastTransWidth - 9)),
       maxCellsH: this.imageMaxRows,
       cellW: this.imageCellW,
       cellH: this.imageCellH,
-      bgHex: THEME.background,
+      bgHex: this.theme.background,
     }
   }
 
@@ -1088,7 +1180,7 @@ export class App {
   // until the session is reopened.
   imageRenderSignature() {
     const o = this.imageRenderOptions()
-    return [o.protocol, o.maxCellsW, o.maxCellsH, o.cellW, o.cellH].join('|')
+    return [o.protocol, o.maxCellsW, o.maxCellsH, o.cellW, o.cellH, o.bgHex].join('|')
   }
 
   // A render landed for an image key: cache it and refresh every block that
@@ -1140,7 +1232,7 @@ export class App {
     // Chip mode: the settings turned pixels off entirely — images stay
     // placeholder chips and the pipeline never runs.
     if (this.imagePixels === false) {
-      out.push({ segs: [{ text: tr('image.attachment'), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
+      out.push({ segs: [{ text: tr('image.attachment'), style: makeStyle({ fg: this.theme.textMuted, italic: true }) }] })
       return
     }
     // Geometry check: a finished render whose signature no longer matches the
@@ -1157,7 +1249,7 @@ export class App {
       result = undefined
     }
     if (!result) {
-      result = { state: 'loading' }
+      result = { state: 'loading', sig }
       this._imageResults.set(key, result)
     }
     // Remember which blocks show this key so setImageResult can bump their
@@ -1175,11 +1267,11 @@ export class App {
         this._imagePendingSig.set(key, sig)
         this.onImageRequest?.(src)
       }
-      out.push({ segs: [{ text: tr('image.rendering'), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
+      out.push({ segs: [{ text: tr('image.rendering'), style: makeStyle({ fg: this.theme.textMuted, italic: true }) }] })
       return
     }
     if (result.state === 'error') {
-      out.push({ segs: [{ text: tr('image.renderFailed', { error: truncateWidth(result.error ?? tr('common.unknown'), Math.max(8, width - 28)) }), style: makeStyle({ fg: THEME.error }) }] })
+      out.push({ segs: [{ text: tr('image.renderFailed', { error: truncateWidth(result.error ?? tr('common.unknown'), Math.max(8, width - 28)) }), style: makeStyle({ fg: this.theme.error }) }] })
       return
     }
     if (result.protocol === 'halfblock') {
@@ -1204,7 +1296,7 @@ export class App {
   // falling back to the inline renderings otherwise.
   _markdownLines(text, block, width, out) {
     const hooks = { mermaid: true, image: true }
-    for (const line of renderMarkdown(text, THEME, width, hooks)) {
+    for (const line of renderMarkdown(text, this.theme, width, hooks)) {
       if (line && line.mermaid !== undefined) this._mermaidLines(line.mermaid, block, width, out)
       else if (line && line.image !== undefined) this._markdownImageLines(line.image, block, width, out)
       else out.push({ segs: line })
@@ -1236,14 +1328,14 @@ export class App {
     // 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)) {
+      for (const line of renderMarkdown('```mermaid\n' + code + '\n```', this.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 }) }] })
+        out.push({ segs: [{ text: tr('image.mermaidRendering'), style: makeStyle({ fg: this.theme.textMuted, italic: true }) }] })
         return
       }
       if (engine) {
@@ -1251,15 +1343,15 @@ export class App {
         if (art) {
           const budget = width - MERMAID_INDENT_WIDTH - MERMAID_MARGIN
           if (art.width <= budget) {
-            for (const segs of paintMermaidArt(art, THEME, MERMAID_INDENT)) out.push({ segs })
+            for (const segs of paintMermaidArt(art, this.theme, MERMAID_INDENT)) out.push({ segs })
             return
           }
           // Real art, wider than this pane: name what it needs and show the
           // source. A raster of the same diagram reads worse, and sending the
           // source to mermaid.ink to draw what the engine already drew leaks
           // it for nothing.
-          out.push({ segs: [{ text: tr('image.mermaidTooWide', { width: art.width, budget: Math.max(0, budget) }), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
-          for (const line of renderMarkdown('```mermaid\n' + code + '\n```', THEME, width)) {
+          out.push({ segs: [{ text: tr('image.mermaidTooWide', { width: art.width, budget: Math.max(0, budget) }), style: makeStyle({ fg: this.theme.textMuted, italic: true }) }] })
+          for (const line of renderMarkdown('```mermaid\n' + code + '\n```', this.theme, width)) {
             out.push({ segs: line })
           }
           return
@@ -1270,7 +1362,7 @@ export class App {
     // Off, or a grammar the engine does not draw: the provider chain draws it
     // as an image unless the setting says a diagram stays its own source.
     if (off) {
-      for (const line of renderMarkdown('```mermaid\n' + code + '\n```', THEME, width)) {
+      for (const line of renderMarkdown('```mermaid\n' + code + '\n```', this.theme, width)) {
         out.push({ segs: line })
       }
       return
@@ -1286,15 +1378,15 @@ export class App {
         this._mermaidRequested.add(key)
         this.onMermaidRequest?.(code, key)
       }
-      out.push({ segs: [{ text: tr('image.mermaidRendering'), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
+      out.push({ segs: [{ text: tr('image.mermaidRendering'), style: makeStyle({ fg: this.theme.textMuted, italic: true }) }] })
       return
     }
     if (result.state === 'done') {
-      this._imageLines({ key: result.imageKey }, block, width, out)
+      this._imageLines({ kind: 'bytes', key: result.imageKey, bytes: result.bytes }, block, width, out)
       return
     }
     // fallback / error: the source, highlighted.
-    for (const line of renderMarkdown('```mermaid\n' + code + '\n```', THEME, width)) {
+    for (const line of renderMarkdown('```mermaid\n' + code + '\n```', this.theme, width)) {
       out.push({ segs: line })
     }
   }
@@ -1325,7 +1417,7 @@ export class App {
       this._imageLines({ kind: 'url', key: 'url:' + sha16(Buffer.from(text, 'utf8')), url: text }, block, width, out)
       return
     }
-    out.push({ segs: [{ text: '🖼 ' + (alt || tr('image.altFallback')), style: makeStyle({ fg: THEME.textMuted, italic: true }) }] })
+    out.push({ segs: [{ text: '🖼 ' + (alt || tr('image.altFallback')), style: makeStyle({ fg: this.theme.textMuted, italic: true }) }] })
   }
 
   _trackMediaBlock(map, key, block) {
@@ -1347,13 +1439,28 @@ export class App {
   }
 
   startAssistant() {
-    this.detachInboxBlock()
-    const showHeader = this.assistantHeaderPending
-    this.assistantHeaderPending = false
-    this.blocks.push(makeBlock('assistant', { text: '', reasoning: '', streaming: true, showHeader }))
+    this._appendAssistant(Date.now(), true)
     this.scroll = 0
   }
 
+  _hideAssistantFooter() {
+    if (!this._turnAssistant || this._turnAssistant.showFooter === false) return
+    this._turnAssistant.showFooter = false
+    this._turnAssistant.rev++
+  }
+
+  _appendAssistant(time = Date.now(), streaming = false) {
+    this.detachInboxBlock()
+    this._hideAssistantFooter()
+    const block = makeBlock('assistant', {
+      text: '', reasoning: '', streaming, time, showFooter: true,
+      model: this._requestModel ?? this.model, turnStartedAt: this._turnStartedAt,
+    })
+    this.blocks.push(block)
+    this._turnAssistant = block
+    return block
+  }
+
   // Append a stream chunk to the live assistant block.
   streamChunk(chunk) {
     let last = this.blocks[this.blocks.length - 1]
@@ -1372,11 +1479,10 @@ export class App {
       const b = this.blocks[i]
       if (b.kind === 'assistant' && b.streaming) {
         b.streaming = false
+        b.time = Date.now()
         b.rev++
         // Thinking is collapsed by default once it has finished streaming.
         if (b.reasoning && b.thinkingCollapsed === undefined) b.thinkingCollapsed = true
-        // 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
       }
@@ -1388,11 +1494,7 @@ export class App {
     this.detachInboxBlock()
     const last = this.blocks[this.blocks.length - 1]
     if (last && last.kind === 'assistant') return last
-    const showHeader = this.assistantHeaderPending
-    this.assistantHeaderPending = false
-    const b = makeBlock('assistant', { text: '', reasoning: '', streaming: false, time, showHeader })
-    this.blocks.push(b)
-    return b
+    return this._appendAssistant(time)
   }
 
   setAssistantText(text, time) {
@@ -1407,6 +1509,7 @@ export class App {
 
   startTool({ callId, name, args }) {
     this.detachInboxBlock()
+    this._hideAssistantFooter()
     const b = makeBlock('tool', { callId, name, args, status: 'running', result: '' })
     this.blocks.push(b)
     this.scroll = 0
@@ -1554,6 +1657,20 @@ export class App {
     return true
   }
 
+  // Show or hide the harness-plumbing boxes (runtime-context snapshot, system
+  // prompt, system reminders). The blocks stay in the list either way — only
+  // their rendering is gated — so flipping the setting back is instant and
+  // needs no replay of the session log. Every block's cached rows are dropped
+  // because a hidden block leaves no rows behind, which changes the gutter the
+  // neighbours get.
+  setContextDetails(value) {
+    const next = value === 'hide' ? 'hide' : 'show'
+    if (next === this.contextDetails) return false
+    this.contextDetails = next
+    this._blockLineCache.clear()
+    return true
+  }
+
   setTodo(todos) {
     this.detachInboxBlock()
     const existing = this.blocks.find((b) => b.kind === 'todo')
@@ -1568,6 +1685,10 @@ export class App {
 
   resetView() {
     this.blocks = []
+    this._turnStartedAt = undefined
+    this._turnAssistant = null
+    this._pendingModelChanges = []
+    this._requestModel = undefined
     this.usage = { input: 0, output: 0 }
     this.metrics = {}
     this.scroll = 0
@@ -1622,25 +1743,6 @@ export class App {
     return SPINNER[Math.floor(Date.now() / interval) % SPINNER.length]
   }
 
-  // Style for one cell of the composer's flowing frame: while a turn is
-  // running, gold dashes with a bright head sweep clockwise around the
-  // border (marching ants) instead of a flat yellow frame. `pos` is the
-  // cell's distance along the perimeter from the top-left corner - top edge
-  // left -> right, right edge downward, bottom edge right -> left, left
-  // edge upward. `phase` advances with time (like the spinners) so the
-  // pattern flows without any per-frame state.
-  _flowBorderStyle(pos, phase) {
-    if (!flowFramePalette) {
-      flowFramePalette = {
-        head: makeStyle({ fg: mixColor(THEME.warning, '#ffffff', 0.5) }),
-        body: makeStyle({ fg: THEME.warning }),
-        rest: makeStyle({ fg: THEME.warningDim }),
-      }
-    }
-    const d = (((pos - phase) % 10) + 10) % 10
-    return d === 0 ? flowFramePalette.head : d < 3 ? flowFramePalette.body : flowFramePalette.rest
-  }
-
   // True while anything is still animating: a streaming turn or a running
   // tool (read/write/bash/...). The UI loop keeps repainting while this is
   // true so spinners keep flowing even when no events are arriving.
@@ -1649,10 +1751,6 @@ export class App {
     // The settings update page keeps repainting while a registry check or
     // install is in flight so its subtitle spinner keeps flowing.
     if (this.settingsBusy) return true
-    // The max effort effect keeps flowing even after the slider is closed —
-    // the composer's top-right effort label stays animated at the strongest
-    // level.
-    if (this.effortSlider && this._effortAtMax()) return true
     for (const block of this.blocks) {
       if (block.kind === 'assistant' && block.streaming) return true
       if (block.kind === 'tool' && block.status === 'running') return true
@@ -1697,27 +1795,102 @@ export class App {
     }, 2000)
   }
 
+  showCornerNotice(title, detail, level = 'info') {
+    this.cornerNotice = { title: String(title), detail: String(detail), level }
+    if (this._cornerNoticeTimer) clearTimeout(this._cornerNoticeTimer)
+    if (!this.terminal || typeof this.terminal.paint !== 'function') return
+    this._cornerNoticeTimer = setTimeout(() => {
+      this.clearCornerNotice()
+      if (this.terminal.started) this.terminal.paint(this.render())
+    }, 5000)
+    this._cornerNoticeTimer.unref?.()
+  }
+
+  clearCornerNotice() {
+    if (this._cornerNoticeTimer) clearTimeout(this._cornerNoticeTimer)
+    this._cornerNoticeTimer = null
+    this.cornerNotice = null
+  }
+
+  // An MCP server's connection result. Shown in the corner for two seconds,
+  // independent of the bottom toast: a modal or a status line must not hide
+  // the answer to "did that server come up".
+  showMcpNotice(name, status) {
+    this._mcpNotices.push({ name: String(name), status })
+    if (!this.mcpNotice) this._nextMcpNotice()
+  }
+
+  _nextMcpNotice() {
+    this.mcpNotice = this._mcpNotices.shift() ?? null
+    if (!this.mcpNotice || !this.terminal || typeof this.terminal.paint !== 'function') return
+    this._mcpNoticeTimer = setTimeout(() => {
+      this._mcpNoticeTimer = null
+      this._nextMcpNotice()
+      if (this.terminal.started) this.terminal.paint(this.render())
+    }, 2000)
+    this._mcpNoticeTimer.unref?.()
+  }
+
+  clearMcpNotices() {
+    if (this._mcpNoticeTimer) clearTimeout(this._mcpNoticeTimer)
+    this._mcpNoticeTimer = null
+    this._mcpNotices = []
+    this.mcpNotice = null
+  }
+
   // ---- layout ----------------------------------------------------------
 
+  commandMatches() {
+    if (this._commandQuery !== this.inputText) {
+      this._commandQuery = this.inputText
+      this.commandSelection = 0
+      this._commandDismissed = false
+    }
+    if (this._commandDismissed || !/^\/\S*$/.test(this.inputText)) return []
+    return COMMAND_HINTS.filter(([command]) => command.startsWith(this.inputText))
+  }
+
+  moveCommandSelection(delta) {
+    const matches = this.commandMatches()
+    if (!matches.length) return false
+    this.commandSelection = (this.commandSelection + delta + matches.length) % matches.length
+    return true
+  }
+
+  completeCommand(index = this.commandSelection) {
+    const match = this.commandMatches()[index]
+    if (!match) return false
+    this.inputText = match[0] + ' '
+    this.inputCursor = this.inputText.length
+    return true
+  }
+
+  dismissCommands() {
+    if (!this.commandMatches().length) return false
+    this._commandDismissed = true
+    return true
+  }
+
   _layout() {
     const cols = this.terminal.cols
     const rows = this.terminal.rows
     const headerH = 1
     const statusH = 1
     const sliderH = this.effortSliderVisible && this.effortSlider ? 1 : 0
-    // OpenCode-style: very narrow sidebar (max 12 cols), auto-hide aggressively
-    // Prioritize conversation view - sidebar only shows when explicitly toggled AND space allows
-    let sidebarW = this.sidebarVisible && cols >= 110 ? Math.min(12, Math.floor(cols / 9)) : 0
-    if (cols - sidebarW < 75) sidebarW = 0
+    const home = this.titleScreen && this.blocks.length === 0 && !this.pendingApproval
     // The right status rail claims one border column plus RAIL_WIDTH content
     // columns; `borderX` is the main area's exclusive right edge (the border
     // glyph's own column). Narrow windows keep the single-column layout.
-    const railW = cols >= RAIL_MIN_COLS ? RAIL_WIDTH : 0
+    const railW = !home && cols >= RAIL_MIN_COLS ? RAIL_WIDTH : 0
     const borderX = railW > 0 ? cols - railW - 1 : cols
-    const composerWidth = Math.max(20, borderX - sidebarW - 6)
+    const sidebarW = !home && this.sidebarVisible && borderX >= 110
+      ? Math.max(22, Math.min(30, this.sidebarWidth)) : 0
+    const { composerX, composerW } = composerGeometry(cols, sidebarW, railW, home)
+    const composerWidth = Math.max(1, composerW - 4)
     const visual = inputRows(this.inputText, this.inputCursor, composerWidth)
-    const suggestions = this.inputText.startsWith('/') && !this.inputText.includes(' ') ? Math.min(COMMAND_HINTS.length, COMMAND_HINTS.filter(([command]) => command.startsWith(this.inputText)).length) : 0
+    const suggestions = this.pendingApproval ? 0 : Math.min(Math.max(1, Math.min(6, rows - 12)), this.commandMatches().length)
     const imageHintH = this.inputImages.length > 0 ? 1 : 0
+    const composerGap = !this.pendingApproval && rows >= 12 ? 1 : 0
     // The stats strip takes one row directly above the composer, the seat the
     // web chat stats line occupies in its composer dock. A session with nothing
     // to report keeps the row for the transcript, and the rail (which carries
@@ -1728,176 +1901,158 @@ export class App {
     // origin and details to be shown. Its height comes from the same helper the
     // painter uses, so the box is exactly as tall as its content, and never so
     // tall that the transcript loses its last row.
-    const maxComposerRows = Math.max(1, rows - headerH - statusH - sliderH - imageHintH - statsH - suggestions - 2)
+    const maxComposerRows = Math.max(1, rows - headerH - statusH - sliderH - imageHintH - statsH - suggestions - 2 - composerGap)
     let inputRowsVisible
     if (this.pendingApproval) {
-      const approval = this._approvalLines(composerTextWidth(cols, sidebarW, railW), maxComposerRows)
+      const approval = this._approvalLines(composerTextWidth(cols, sidebarW, railW, home), maxComposerRows)
       inputRowsVisible = Math.max(1, Math.min(approval.length, maxComposerRows))
     } else {
-      inputRowsVisible = Math.min(Math.max(1, visual.rows.length), rows >= 28 ? 6 : 3)
+      inputRowsVisible = Math.min(Math.max(1, visual.rows.length), rows >= 28 ? 6 : 3, maxComposerRows)
     }
-    const inputH = inputRowsVisible + 2 + suggestions
+    const inputH = inputRowsVisible + 2 + composerGap + suggestions
     const transcriptTop = headerH
-    const transcriptBottom = rows - inputH - statusH - sliderH - imageHintH - statsH
+    const dockTop = rows - inputH - statusH - sliderH - imageHintH - statsH
+    const transcriptBottom = home && rows >= 16
+      ? Math.min(dockTop, Math.max(headerH + 4, Math.min(dockTop - 3, Math.floor(rows * 0.44)))) : dockTop
     const transcriptH = Math.max(1, transcriptBottom - transcriptTop)
-    return { cols, rows, headerH, inputH, inputRowsVisible, suggestions, imageHintH, statsH, statusH, sliderH, transcriptTop, transcriptBottom, transcriptH, sidebarW, railW, borderX, composerWidth, visual }
+    return { cols, rows, home, headerH, inputH, inputRowsVisible, composerGap, suggestions, imageHintH, statsH, statusH, sliderH, transcriptTop, transcriptBottom, transcriptH, sidebarW, railW, borderX, composerX, composerW, composerWidth, visual }
   }
 
   // ---- block -> lines --------------------------------------------------
 
   _blockLines(block, width) {
-    const t = THEME
+    const t = this.theme
     const out = []
+    const gutter = ['user', 'assistant', 'tool', 'model-change'].includes(block.kind)
+      ? Math.min(2, Math.max(0, Math.floor((width - 12) / 2)))
+      : 0
+    width = Math.max(1, width - gutter * 2)
     switch (block.kind) {
-      case 'user': {
-        // A pointer marks your turn and the text hangs under it — no frame, no
-        // fill, so a long prompt never has to be measured against a border.
-        // The timestamp trails the last line (or its own row when the last line
-        // is full) so a steering message still reads as its own event.
-        const pointerW = 4
-        const hang = ' '.repeat(pointerW)
-        const pointer = { text: '  ❯ ', style: makeStyle({ fg: t.userPointer, bold: true }) }
-        const lines = renderMarkdown(block.text, t, Math.max(8, width - pointerW))
-        if (lines.length === 0) lines.push([])
-        const tail = []
-        if (block.steering) tail.push({ text: tr('transcript.steeringBadge'), style: makeStyle({ fg: t.steering, bold: true }) })
-        tail.push({ text: ' · ' + timeString(block.time), style: makeStyle({ fg: t.textMuted }) })
-        const last = lines[lines.length - 1]
-        const tailW = tail.reduce((n, s) => n + displayWidth(s.text), 0)
-        const lastW = last.reduce((n, s) => n + displayWidth(s.text), 0)
-        // The text hangs at `pointerW`, so the tail only joins it when it fits
-        // in what is left of the row *after* that indent.
-        if (lastW + tailW <= width - pointerW) last.push(...tail)
-        else lines.push([{ text: hang, style: null }, ...tail])
-        for (let i = 0; i < lines.length; i++) {
-          out.push({ segs: i === 0 ? [pointer, ...lines[i]] : [{ text: hang, style: null }, ...lines[i]] })
+      case 'model-change': {
+        const route = (value) => value.model + (value.provider ? ' · ' + value.provider : '')
+        const text = tr('transcript.modelChanged', { from: route(block.from), to: route(block.to) })
+        const muted = makeStyle({ fg: t.textMuted })
+        const rule = makeStyle({ fg: t.borderSubtle })
+        const content = '◇ ' + text
+        out.push({ segs: [] })
+        if (displayWidth(content) + 6 <= width) {
+          const available = width - displayWidth(content) - 2
+          const left = Math.floor(available / 2)
+          out.push({ segs: [
+            { text: '─'.repeat(left) + ' ', style: rule },
+            { text: content, style: muted },
+            { text: ' ' + '─'.repeat(available - left), style: rule },
+          ] })
+        } else {
+          for (const line of wrapText(content, Math.max(2, width))) {
+            out.push({ segs: [{ text: line, style: muted }] })
+          }
         }
-        for (const src of block.images ?? []) this._imageLines(src, block, width, out)
         out.push({ segs: [] })
         break
       }
+      case 'user': {
+        const bodyWidth = Math.max(2, width - 5)
+        const body = []
+        // Prompts preserve their literal markdown, as in OpenCode's text part.
+        for (const text of wrapText(transcriptText(block.text), bodyWidth)) {
+          body.push({ segs: [{ text, style: makeStyle({ fg: t.text }) }] })
+        }
+        if (block.images?.length) {
+          if (block.text) body.push({ segs: [] })
+          for (const src of block.images) this._imageLines(src, block, bodyWidth, body)
+        }
+        body.push({ segs: [
+          { text: timeString(block.time), style: makeStyle({ fg: t.textMuted }) },
+          ...(block.steering ? [{ text: tr('transcript.steeringBadge'), style: makeStyle({ fg: t.steering, bold: true }) }] : []),
+        ] })
+        if (this.blocks[0] !== block) out.push({ segs: [] })
+        out.push(...transcriptPanel(body, width, block.steering ? t.steering : t.userPointer, t))
+        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 === '' && !reasoning) {
-          if (block.showHeader === true) {
-            // The next assistant message can sit behind this one's tool rows —
-            // scan past them.
-            let j = this.blocks.indexOf(block) + 1
-            while (j < this.blocks.length && this.blocks[j].kind === 'tool') j++
-            const next = this.blocks[j]
-            if (next?.kind === 'assistant' && next.showHeader === false) {
-              next.showHeader = true
-              next.rev = (next.rev ?? 0) + 1
-            }
-            block.showHeader = false
-          }
-          break
-        }
-        // Thinking is one flat row: collapsed it names itself, expanded the
-        // 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.text && !reasoning && !block.images?.length) break
+        out.push({ segs: [] })
         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'))
-          // While streaming, a flowing spinner leads the marker (replaced at
-          // draw time so the cached lines can stay static between frames).
           const marker = streaming
             ? { text: '⠿', style: makeStyle({ fg: t.primary, bold: true }), anim: 'spinner' }
-            : { text: collapsed ? '▸' : '▾', style: makeStyle({ fg: t.thinking, bold: true }) }
+            : { text: collapsed ? '+' : '−', style: makeStyle({ fg: t.thinking }) }
           const body = []
           if (!collapsed) {
-            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 }) })))
+            body.push([])
+            for (const line of renderMarkdown(reasoning, t, Math.max(1, width - 3))) {
+              body.push(line.map((s) => tintMarkdownSegment(s, { fg: t.thinking, italic: true }, t)))
             }
           }
-          // 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) : ''
+          const previewBudget = Math.max(0, width - 7 - displayWidth(tr('transcript.thinking')) - displayWidth(hint))
+          const preview = collapsed && !streaming && previewBudget > 0
+            ? truncateWidth(thinkingPreview(reasoning), previewBudget) : ''
           out.push(...flatRows('thinking', block, [
-            { text: '  ', style: null },
+            { text: '   ', style: null },
             marker,
-            { text: tr('transcript.thinking'), style: makeStyle({ fg: t.thinking, bold: true }) },
+            { text: tr('transcript.thinking'), style: makeStyle({ fg: t.thinking }) },
             ...(preview
               ? [
                   { text: ' · ', style: makeStyle({ fg: t.thinking, dim: true }) },
-                  { text: truncateWidth(preview, 48), style: makeStyle({ fg: t.thinking, italic: true }) },
+                  { text: preview, 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.
+            { text: hint, style: makeStyle({ fg: t.textMuted, dim: true }) },
+          ], body, 3, width))
           if (block.text) out.push({ segs: [] })
         }
-        let text = block.text
-        if (block.streaming) text += '▍'
-        // One header per request: a turn split by tool calls renders one
-        // answer per block, and only the first announces `dsh · time`.
-        if (block.showHeader !== false) {
-          out.push({
-            segs: [
-              { text: '  ', style: null },
-              { text: 'dsh', style: makeStyle({ fg: t.assistantLabel, bold: true }) },
-              { text: ' · ' + timeString(block.time), style: makeStyle({ fg: t.textMuted }) },
-            ],
-          })
-        }
+        let text = block.text ?? ''
+        if (block.streaming && text) text += '▍'
         if (text) {
           const body = []
-          this._markdownLines(text, block, Math.max(8, width - 2), body)
-          // The answer hangs at the same two columns as its header; a media row
-          // (mermaid art, a reserved image slab) already carries its own x
-          // offset, so it passes through untouched.
-          for (const line of body) {
-            if (line.image) {
-              out.push(line)
-              continue
-            }
-            out.push({ segs: [{ text: '  ', style: null }, ...(line.segs ?? [])] })
-          }
+          this._markdownLines(text, block, Math.max(1, width - 3), body)
+          for (const line of body) out.push(indentTranscriptRow(line, 3))
+        }
+        const images = []
+        for (const src of block.images ?? []) this._imageLines(src, block, Math.max(1, width - 3), images)
+        for (const line of images) out.push(indentTranscriptRow(line, 3))
+        if (!block.streaming && block.showFooter !== false) {
+          const model = block.model ?? this.model
+          const duration = block.time - block.turnStartedAt
+          out.push({ segs: [] })
+          out.push({ segs: [
+            { text: '   ▣  ', style: makeStyle({ fg: t.primary }) },
+            { text: 'dsh', style: makeStyle({ fg: t.text }) },
+            ...(model ? [{ text: ' · ' + model, style: makeStyle({ fg: t.textMuted }) }] : []),
+            ...(Number.isFinite(duration) && duration > 0
+              ? [{ text: ' · ' + formatDuration(duration), style: makeStyle({ fg: t.textMuted }) }] : []),
+          ] })
         }
-        for (const src of block.images ?? []) this._imageLines(src, block, width, out)
         out.push({ segs: [] })
         break
       }
       case 'tool': {
-        // OpenCode-style activity row: a status marker, the action in its own
-        // accent, and the target it acts on (the path read, the command run)
-        // in muted text. Collapsed it is exactly that one row; expanded the
-        // result hangs under a ⎿ gutter. The whole block is a click target —
-        // a collapsed row hides its result precisely so a long turn of tool
-        // calls stays scannable, and one click brings the details back.
         const running = block.status === 'running'
         const expanded = block.expanded === true
+        const shell = ['bash', 'pwsh', 'shell'].includes(block.name)
+        const preview = !running && (shell || block.status === 'error') && !!block.result
+        const panel = expanded || preview
         const accent = toolAccent(block.name, t)
         const statusColor = running ? t.warning : block.status === 'error' ? t.error : t.success
+        const icon = shell ? '$' : ['read'].includes(block.name) ? '→'
+          : ['write', 'edit', 'str_replace_editor'].includes(block.name) ? '←'
+            : ['glob', 'grep', 'web_search'].includes(block.name) ? '✱' : '◇'
         const marker = running
           ? { text: '⠿', style: makeStyle({ fg: statusColor, bold: true }), anim: 'spinner' }
-          : { text: block.status === 'error' ? '✗' : '✓', style: makeStyle({ fg: statusColor, bold: true }) }
-        const summary = toolSummary(block.name, block.args)
+          : { text: block.status === 'error' ? '✗' : icon, style: makeStyle({ fg: block.status === 'error' ? t.error : accent }) }
+        const summary = transcriptText(toolSummary(block.name, block.args)).replace(/\n/g, ' ')
         const cut = summary.indexOf(' ')
         const verb = cut < 0 ? summary : summary.slice(0, cut)
         const rawTarget = cut < 0 ? '' : summary.slice(cut + 1)
-        // The tool row sets its hint one column further out than the notes do,
-        // so the shared " · click to ..." text gets one more leading space.
-        const hint = running ? '' : ' ' + (expanded ? tr('common.clickCollapse') : tr('common.clickExpand'))
-        const budget = Math.max(6, width - 7 - displayWidth(verb) - displayWidth(hint))
+        const hint = running ? '' : (expanded ? tr('common.clickCollapse') : tr('common.clickExpand'))
+        const budget = Math.max(1, width - (panel ? 10 : 7) - displayWidth(verb) - displayWidth(hint))
         const target = truncateWidth(rawTarget, budget)
-        out.push({
+        const header = {
           segs: [
-            { text: '   ', style: null },
             marker,
             { text: ' ', style: null },
             { text: verb, style: makeStyle({ fg: accent, bold: true }) },
@@ -1905,37 +2060,40 @@ export class App {
             ...(hint ? [{ text: hint, style: makeStyle({ fg: t.textMuted, dim: true }) }] : []),
           ],
           tool: { block },
-        })
-        // Tool-result images (screenshots, generated pictures) render in full
-        // only while expanded — the collapse is a text-economy rule, not a
-        // media one.
-        if (expanded) {
-          const cap = 400
-          const resultLines = renderMarkdown(block.result ?? '', t, Math.max(8, width - 8))
-          const shown = Math.min(resultLines.length, cap)
-          for (let i = 0; i < shown; i++) {
-            out.push({
+        }
+        if (panel) {
+          const cap = expanded ? 400 : 10
+          const bodyWidth = Math.max(2, width - 5)
+          const body = shell
+            ? wrapText(rawTarget || summary, Math.max(2, bodyWidth - 2)).map((text, i) => ({
               segs: [
-                { text: '   ', style: null },
-                ...(i === 0
-                  ? [{ text: '⎿', style: makeStyle({ fg: t.textMuted }) }, { text: ' ', style: null }]
-                  : [{ text: '  ', style: null }]),
-                ...resultLines[i].map((s) => ({ ...s, style: makeStyle({ fg: t.text }) })),
+                i === 0 ? marker : { text: ' ', style: null },
+                { text: ' ' + text, style: makeStyle({ fg: t.text }) },
               ],
-              tool: { block },
-            })
+            }))
+            : [header]
+          body.push({ segs: [] })
+          const resultLines = shell
+            ? wrapText(transcriptText(block.result), bodyWidth).map((text) => [{ text, style: makeStyle({ fg: t.text }) }])
+            : renderMarkdown(block.result ?? '', t, bodyWidth)
+          const shown = Math.min(resultLines.length, cap)
+          for (let i = 0; i < shown; i++) {
+            body.push({ segs: resultLines[i] })
           }
           if (resultLines.length > cap) {
-            out.push({
-              segs: [{ text: '     ' + tr('common.moreLines', { count: resultLines.length - cap }), style: makeStyle({ fg: t.textMuted, dim: true }) }],
-              tool: { block },
-            })
+            body.push({ segs: [{ text: tr('common.moreLines', { count: resultLines.length - cap }), style: makeStyle({ fg: t.textMuted, dim: true }) }] })
+          }
+          if (expanded) for (const src of block.images ?? []) this._imageLines(src, block, bodyWidth, body)
+          if (shell && hint) {
+            body.push({ segs: [] })
+            body.push({ segs: [{ text: hint.trimStart(), style: makeStyle({ fg: t.textMuted, dim: true }) }] })
           }
-          const from = out.length
-          for (const src of block.images ?? []) this._imageLines(src, block, width, out)
-          for (let i = from; i < out.length; i++) out[i].tool = { block }
+          out.push({ segs: [] })
+          out.push(...transcriptPanel(body, width, block.status === 'error' ? t.error : t.borderSubtle, t, { tool: { block } }))
+          out.push({ segs: [] })
+        } else {
+          out.push(indentTranscriptRow(header, 3))
         }
-        out.push({ segs: [] })
         break
       }
       case 'todo': {
@@ -1955,22 +2113,25 @@ export class App {
         break
       }
       case 'note': {
-        // Context notes (system-reminder / compaction): one flat marker row
-        // naming the label, the body hanging under it in the label's own
-        // color, collapsed by default. Whole block clickable to toggle.
-        const fg = block.label === 'compaction' ? t.compaction : t.reminder
+        // Context notes (system-reminder / runtime-context / compaction): one
+        // flat marker row naming the label, the body hanging under it in the
+        // label's own color, collapsed by default. Whole block clickable to
+        // toggle. A developer setting can drop the harness-plumbing kinds.
+        if (this.contextDetails === 'hide' && CONTEXT_LABELS.has(block.label)) break
+        const fg = block.label === 'compaction' ? t.compaction
+          : block.label === 'runtime-context' ? t.systemPrompt : t.reminder
         const collapsed = block.collapsed === true
         const hint = collapsed ? tr('common.clickExpand') : tr('common.clickCollapse')
         const body = []
         if (!collapsed) {
           for (const line of renderMarkdown(block.text, t, Math.max(8, width - 6))) {
-            body.push(line.map((s) => ({ ...s, style: mergeStyle(s.style, { fg }) })))
+            body.push(line.map((s) => tintMarkdownSegment(s, { fg }, t)))
           }
         }
         out.push(...flatRows('note', block, [
           { text: '  ', style: null },
           { text: collapsed ? '▸' : '▾', style: makeStyle({ fg, bold: true }) },
-          { text: ' ' + tr(block.label === 'compaction' ? 'note.compaction' : 'note.systemReminder') + hint, style: makeStyle({ fg, bold: true }) },
+          { text: ' ' + tr(noteLabelKey(block.label)) + hint, style: makeStyle({ fg, bold: true }) },
         ], body, 4, width))
         out.push({ segs: [] })
         break
@@ -1978,7 +2139,7 @@ export class App {
       case 'system': {
         const color = block.level === 'error' ? t.error : block.level === 'warn' ? t.warning : t.textMuted
         for (const line of renderMarkdown(block.text, t, width - 2)) {
-          out.push({ segs: [{ text: '  ', style: null }, ...line.map((s) => ({ ...s, style: makeStyle({ fg: color, italic: true }) }))] })
+          out.push({ segs: [{ text: '  ', style: null }, ...line.map((s) => tintMarkdownSegment(s, { fg: color, italic: true }, t, true))] })
         }
         out.push({ segs: [] })
         break
@@ -1987,13 +2148,14 @@ export class App {
         // The session's system prompt (V3 `system/message`): the same flat
         // collapsible shape as the other notes, in its own neutral palette so
         // it never reads as a reminder or a compaction checkpoint.
+        if (this.contextDetails === 'hide') break
         const fg = t.systemPrompt
         const collapsed = block.collapsed === true
         const hint = collapsed ? tr('common.clickExpand') : tr('common.clickCollapse')
         const body = []
         if (!collapsed) {
           for (const line of renderMarkdown(block.text, t, Math.max(8, width - 6))) {
-            body.push(line.map((s) => ({ ...s, style: mergeStyle(s.style, { fg }) })))
+            body.push(line.map((s) => tintMarkdownSegment(s, { fg }, t)))
           }
         }
         out.push(...flatRows('note', block, [
@@ -2042,7 +2204,7 @@ export class App {
       default:
         break
     }
-    return out
+    return out.map((row) => ({ ...row, inset: gutter, rightInset: gutter }))
   }
 
   // Return the cached rendered lines for a block, re-rendering only when its
@@ -2053,7 +2215,7 @@ export class App {
     const key = block.rev + ':' + width
     const cached = this._blockLineCache.get(block)
     if (cached && cached.key === key) return cached.lines
-    if (block.streaming && cached && Date.now() - this._streamingRenderAt < 120) {
+    if (block.streaming && cached?.width === width && Date.now() - this._streamingRenderAt < 120) {
       return cached.lines
     }
     const rendered = this._blockLines(block, width)
@@ -2069,24 +2231,70 @@ export class App {
       img.start = prev && prev.gid === img.gid ? prev.start : i
     }
     if (block.streaming) this._streamingRenderAt = Date.now()
-    this._blockLineCache.set(block, { key, lines: rendered })
+    this._blockLineCache.set(block, { key, width, lines: rendered })
     return rendered
   }
 
   // Total rendered line count for the transcript at a given width.
   _transcriptTotal(width) {
     let total = 0
-    for (const block of this.blocks) total += this._ensureBlockLines(block, width).length
+    let prevKind = null
+    for (const block of this.blocks) {
+      const rows = this._blockRows(block, width, prevKind)
+      if (rows.length === 0) continue
+      total += rows.length
+      prevKind = block.kind
+    }
     return total
   }
 
+  // The rows one block contributes to the transcript, with the block gutter
+  // applied. Each block renderer pads its own edges and those paddings drifted:
+  // a user bubble opened with a gap but left none behind it, so a context note
+  // right after one sat flush under the panel, while a system line owned only a
+  // trailing gap and was glued to the block above. The gutter is decided here
+  // instead — strip whatever blank rows the block put at its own edges, then
+  // place exactly one between two occupied blocks — so every pair of blocks
+  // reads at the same distance. A block that renders nothing (an assistant
+  // block with no text yet) takes no room and no gutter at all.
+  //
+  // A run of tool calls is the one exception: those rows are a list of what the
+  // turn did, and one gap per call would scatter it across the screen.
+  //
+  // The trimmed rows are cached on the block's own line-cache entry, so every
+  // invalidation site (theme switch, a settled mermaid engine, a reset) drops
+  // them together with the lines they were cut from.
+  _blockRows(block, width, prevKind) {
+    const lead = prevKind !== null && !(prevKind === 'tool' && block.kind === 'tool')
+    const lines = this._ensureBlockLines(block, width)
+    const entry = this._blockLineCache.get(block)
+    const key = (entry?.key ?? '') + ':' + (lead ? 1 : 0)
+    if (entry?.rows?.key === key) return entry.rows.lines
+    let from = 0
+    let to = lines.length
+    while (from < to && isBlankRow(lines[from])) from++
+    while (to > from && isBlankRow(lines[to - 1])) to--
+    const rows = from === to ? [] : lines.slice(from, to)
+    if (rows.length > 0 && lead) rows.unshift({ segs: [] })
+    // An image row carries the index the draw pass reads as "how many rows of
+    // this group sit above the window"; after a trim that index has moved.
+    for (let i = 0; i < rows.length; i++) {
+      const img = rows[i]?.image
+      if (!img) continue
+      const prev = rows[i - 1]?.image
+      img.start = prev && prev.gid === img.gid ? prev.start : i
+    }
+    if (entry) entry.rows = { key, lines: rows }
+    return rows
+  }
+
   // ---- paint -----------------------------------------------------------
 
   render() {
-    const { cols, rows, headerH, inputRowsVisible, suggestions, imageHintH, statsH, transcriptTop, transcriptBottom, transcriptH, sidebarW, railW, borderX, visual } = this._layout()
+    const { cols, rows, home, headerH, inputRowsVisible, composerGap, suggestions, imageHintH, statsH, transcriptTop, transcriptBottom, transcriptH, sidebarW, railW, borderX, composerX, composerW, visual } = this._layout()
     this.hitRegions = []
     const screen = new Screen(cols, rows)
-    const t = THEME
+    const t = this.theme
     screen.clear(makeStyle({ bg: t.background }))
 
     // Header: brand + session name on the left. The right end carries the
@@ -2101,7 +2309,7 @@ export class App {
     const branch = this.gitBranch ? 'git: ' + this.gitBranch : ''
     let hx = 2
     hx = screen.text(hx, 0, '◈ ', makeStyle({ fg: t.primary, bold: true, bg: t.backgroundPanel }))
-    hx = gradientText(screen, hx, 0, 'DeepSeek Harness TUI', t.primary, '#dce6ff', { bold: true, bg: t.backgroundPanel })
+    hx = gradientText(screen, hx, 0, 'DeepSeek Harness TUI', '#4d6bfe', '#dce6ff', { bold: true, bg: t.backgroundPanel })
     let workspace = null
     // The placeholder a session with no title of its own shows: resolved here,
     // not when the session was opened, so a language switch renames it.
@@ -2224,8 +2432,10 @@ export class App {
     let cursor = 0
     let row = 0
     const usedCrops = new Set()
+    let prevKind = null
     for (const block of this.blocks) {
-      const lines = this._ensureBlockLines(block, transWidth)
+      const lines = this._blockRows(block, transWidth, prevKind)
+      if (lines.length > 0) prevKind = block.kind
       const blockEnd = cursor + lines.length
       if (blockEnd > offset && cursor < endIndex) {
         const from = Math.max(0, offset - cursor)
@@ -2233,23 +2443,24 @@ export class App {
         for (let i = from; i < to; i++) {
           const y = transcriptTop + row
           const line = lines[i]
-          let x = transcriptX
+          let x = transcriptX + (line.inset ?? 0)
           // Clip every row to the transcript width at the draw boundary. A row
           // is composed from a fixed prefix plus block content, and a single
           // segment (model-authored text, a long path, a wide rune at the last
           // column) can be wider than the box even when the markdown renderer
           // respected its own limit. Letting it through would paint past the
           // terminal edge, wrap the row, and shift the rest of the frame.
-          const budget = transWidth
+          const right = borderX - (line.rightInset ?? 0)
+          const budget = Math.max(0, right - x)
           for (const seg of clipSegs(line.segs, budget)) {
             // Animated placeholders (spinners) are resolved at draw time so
             // the cached lines stay static between animation frames.
-            x = screen.text(x, y, seg.anim ? this.animChar() : seg.text, seg.style)
+            const style = line.background ? makeStyle({ ...seg.style, bg: seg.style?.bg ?? line.background }) : seg.style
+            x = screen.text(x, y, seg.anim ? this.animChar() : seg.text, style)
           }
           // The row tail fills to the main area's right edge; with the status
           // rail on screen the fill stops short of the rail's border column.
-          if (borderX < cols) screen.fill(x, y, Math.max(0, borderX - x), ' ', makeStyle({ fg: t.text }))
-          else screen.fillToEnd(x, y, makeStyle({ fg: t.text }))
+          screen.fill(x, y, Math.max(0, right - x), ' ', makeStyle({ fg: t.text, bg: line.background }))
           // A graphics-protocol image row: the cells stay blank (background
           // above), and the terminal draws pixels over them via the slab
           // registered here.
@@ -2268,7 +2479,7 @@ export class App {
               if (clip > 0) this._requestImageCrop(img.key, clip)
               screen.setImageRow(y, {
                 key: cropKey,
-                x: transcriptX + img.x,
+                x: transcriptX + (line.inset ?? 0) + img.x,
                 cellsW: img.cellsW,
                 cellsH: img.cellsH - clip,
                 top: true,
@@ -2316,22 +2527,19 @@ export class App {
     }
     this._imageCropsPrev = usedCrops
 
-    if (this.titleScreen && this.blocks.length === 0) {
-      // OpenCode-style splash: DeepSeek brand mark with workspace/git context.
-      // The composer claims the rows below `floor`, so the shortcut row has to
-      // sit above it or it would be painted over. The mark centers in the main
-      // area, never under the status rail.
+    if (home) {
       paintSplashOpenCode(screen, cols, rows, t, {
         workingDirectory: this.workingDirectory,
         gitBranch: this.gitBranch,
         model: this.model,
         provider: this.provider,
-      }, transcriptBottom + statsH - 1, { x0: 0, width: borderX })
+      }, transcriptBottom + statsH - 1, {
+        x0: composerX, width: composerW, composerTop: transcriptBottom,
+        composerBottom: transcriptBottom + suggestions + imageHintH + inputRowsVisible + composerGap + 1,
+      })
     }
 
     // Composer
-    const composerX = sidebarW > 0 ? sidebarW + 2 : 1
-    const composerW = borderX - composerX - 1
     let composerTop = transcriptBottom + statsH
 
     // Stats strip: the web chat's session stats line, one row between the
@@ -2347,27 +2555,33 @@ export class App {
       const hint = '/stats'
       const hintW = displayWidth(hint)
       const lineWidth = groups.reduce((sum, group, i) => sum + (i > 0 ? 1 : 0) + displayWidth(group), 0)
-      const hintSeat = lineWidth + hintW + 6 <= cols - 2
-      const budget = cols - 2 - (hintSeat ? hintW + 3 : 0)
+      const hintSeat = lineWidth + hintW + 6 <= composerW
+      const budget = composerX + composerW - 2 - (hintSeat ? hintW + 3 : 0)
       screen.fill(0, stripY, cols, ' ', makeStyle({ bg }))
       let sx = screen.text(composerX, stripY, '▤ ', makeStyle({ fg: t.primary, bg }))
       let drawn = 0
       for (const group of groups) {
-        const lead = drawn > 0 ? '│' : ''
+        const lead = drawn > 0 ? ' ' : ''
         if (sx + displayWidth(lead) + displayWidth(group) > budget) break
         sx = screen.text(sx, stripY, lead + group, makeStyle({ fg: t.textMuted, bg }))
         drawn++
       }
-      if (drawn < groups.length) screen.text(sx, stripY, '│…', makeStyle({ fg: t.border, bg }))
-      if (hintSeat) screen.text(cols - hintW - 2, stripY, hint, makeStyle({ fg: t.border, dim: true, bg }))
+      if (drawn < groups.length) screen.text(sx, stripY, ' …', makeStyle({ fg: t.border, bg }))
+      if (hintSeat) screen.text(composerX + composerW - hintW - 2, stripY, hint, makeStyle({ fg: t.textMuted, bg }))
       this.addHitRegion('stats', 0, stripY, cols, 1)
     }
     if (suggestions > 0) {
-      const matches = COMMAND_HINTS.filter(([command]) => command.startsWith(this.inputText)).slice(0, suggestions)
-      for (const [command, description] of matches) {
-        screen.fill(composerX, composerTop, composerW, ' ', makeStyle({ bg: t.backgroundElement }))
-        screen.text(composerX + 2, composerTop, command, makeStyle({ fg: t.primary, bold: true, bg: t.backgroundElement }))
-        screen.text(composerX + 18, composerTop, tr(description), makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+      const matches = this.commandMatches()
+      const start = Math.max(0, Math.min(this.commandSelection - suggestions + 1, matches.length - suggestions))
+      for (let i = start; i < start + suggestions; i++) {
+        const [command, description] = matches[i]
+        const selected = i === this.commandSelection
+        const bg = selected ? t.backgroundElement : t.backgroundPanel
+        screen.fill(composerX, composerTop, composerW, ' ', makeStyle({ bg }))
+        screen.text(composerX, composerTop, selected ? '┃' : ' ', makeStyle({ fg: t.primary, bg }))
+        screen.text(composerX + 2, composerTop, truncateWidth(command, composerW - 4), makeStyle({ fg: selected ? t.secondary : t.text, bold: selected, bg }))
+        if (composerW >= 40) screen.text(composerX + 18, composerTop, truncateWidth(tr(description), composerW - 20), makeStyle({ fg: t.textMuted, bg }))
+        this.addHitRegion('command', composerX, composerTop, composerW, 1, { commandIndex: i })
         composerTop++
       }
     }
@@ -2377,42 +2591,23 @@ export class App {
       screen.text(composerX + 2, composerTop, truncateWidth(hint, composerW - 4), makeStyle({ fg: t.warning, bold: true, bg: t.background }))
       composerTop++
     }
-    // Composer frame: idle draws the static border. While a turn runs the
-    // frame flows instead of sitting flat yellow - gold dashes with a bright
-    // head chase each other clockwise around the box (marching ants),
-    // time-based like the transcript spinners.
     const running = this.status === 'running'
-    const framePhase = Math.floor(Date.now() / 80)
-    const frameH = inputRowsVisible + 2
-    const borderStyle = running ? null : makeStyle({ fg: t.border })
-    if (running) {
-      for (let i = 0; i < composerW; i++) {
-        screen.set(composerX + i, composerTop, i === 0 ? '╭' : i === composerW - 1 ? '╮' : '─', this._flowBorderStyle(i, framePhase))
-      }
-    } else {
-      screen.text(composerX, composerTop, '╭' + '─'.repeat(Math.max(0, composerW - 2)) + '╮', borderStyle)
+    const composerBg = t.backgroundPanel
+    const focusColor = this.pendingApproval ? t.warning : t.primary
+    for (let i = 0; i < inputRowsVisible + composerGap + 2; i++) {
+      screen.fill(composerX, composerTop + i, composerW, ' ', makeStyle({ bg: composerBg }))
+      screen.set(composerX, composerTop + i, '┃', makeStyle({ fg: focusColor, bg: composerBg }))
     }
     this._paintEffortLabel(screen, composerX, composerTop, composerW)
     const firstVisual = Math.max(0, visual.cursorRow - inputRowsVisible + 1)
     // The approval prompt replaces the composer's content. Computed once: the
     // same helper _layout used to size the box, so the two agree by construction.
     const approvalLines = this.pendingApproval
-      ? this._approvalLines(composerTextWidth(cols, sidebarW, railW), inputRowsVisible)
+      ? this._approvalLines(composerTextWidth(cols, sidebarW, railW, home), inputRowsVisible)
       : null
     for (let i = 0; i < inputRowsVisible; i++) {
       const y = composerTop + 1 + i
       const visualIndex = firstVisual + i
-      screen.fill(composerX, y, composerW, ' ', makeStyle({ bg: t.backgroundPanel }))
-      if (running) {
-        // Side edges follow the perimeter path: down the right edge, then
-        // back up the left one (see _flowBorderStyle for the mapping).
-        const edge = i + 1
-        screen.set(composerX + composerW - 1, y, '│', this._flowBorderStyle(composerW - 1 + edge, framePhase))
-        screen.set(composerX, y, '│', this._flowBorderStyle(2 * (composerW - 1) + (frameH - 1 - edge), framePhase))
-      } else {
-        screen.text(composerX, y, '│', borderStyle)
-        screen.text(composerX + composerW - 1, y, '│', borderStyle)
-      }
       if (approvalLines) {
         const line = approvalLines[i]
         if (line) {
@@ -2424,6 +2619,9 @@ export class App {
       const line = visual.rows[visualIndex] ?? ''
       let lx = composerX + 2
       const textStyle = makeStyle({ fg: t.text, bg: t.backgroundPanel })
+      if (!this.inputText && i === 0) {
+        screen.text(lx, y, truncateWidth(tr('splash.hint'), composerW - 4), makeStyle({ fg: t.textMuted, bg: composerBg }))
+      }
       const chipStyle = makeStyle({ fg: t.imageChipText, bg: t.imageChipBg, bold: true })
       const markerRe = /\[Image \d+\]/g
       let last = 0
@@ -2436,20 +2634,12 @@ export class App {
       if (last < line.length) lx = screen.text(lx, y, line.slice(last), textStyle)
       if (visualIndex === visual.cursorRow) {
         const cursorX = composerX + 2 + visual.cursorCol
-        const current = Array.from(this.inputText.slice(this.inputCursor))[0] ?? ' '
+        const current = Array.from(this.inputText.slice(this.inputCursor))[0] ?? (!this.inputText ? Array.from(tr('splash.hint'))[0] : ' ')
         screen.text(cursorX, y, current === '\n' ? ' ' : current, makeStyle({ fg: t.background, bg: t.primary }))
       }
     }
-    const bottom = composerTop + inputRowsVisible + 1
-    this.addHitRegion('composer', composerX, composerTop, composerW, inputRowsVisible + 2, { composerTop, firstVisual })
-    if (running) {
-      for (let i = 0; i < composerW; i++) {
-        // Bottom edge continues the perimeter: right -> left.
-        screen.set(composerX + i, bottom, i === 0 ? '╰' : i === composerW - 1 ? '╯' : '─', this._flowBorderStyle(composerW + frameH - 3 + (composerW - 1 - i), framePhase))
-      }
-    } else {
-      screen.text(composerX, bottom, '╰' + '─'.repeat(Math.max(0, composerW - 2)) + '╯', borderStyle)
-    }
+    const bottom = composerTop + inputRowsVisible + composerGap + 1
+    this.addHitRegion('composer', composerX, composerTop, composerW, inputRowsVisible + composerGap + 2, { composerTop, firstVisual })
     // The composer's mode label names the model that will receive the message.
     // With the status rail on screen the rail's MODEL section owns that fact,
     // so the label only stays for the interrupt hint.
@@ -2457,7 +2647,12 @@ export class App {
       ? tr('status.interrupt')
       : railW > 0 ? '' : (this.provider ? this.provider + ' · ' : '') + (this.model || tr('status.model'))
     if (mode !== '') {
-      screen.text(composerX + 2, bottom, ' ' + truncateWidth(mode, Math.max(0, composerW - 6)) + ' ', makeStyle({ fg: this.status === 'running' ? t.warning : t.textMuted, bg: t.background }))
+      screen.text(composerX + 2, bottom, truncateWidth(mode, Math.max(0, composerW - 4)), makeStyle({ fg: running ? t.warning : t.textMuted, bg: composerBg }))
+    }
+    const sendHints = tr('composer.keys').split(' · ').slice(0, 2).join(' · ')
+    const hintsW = displayWidth(sendHints)
+    if (!home && hintsW + displayWidth(mode) + 8 <= composerW) {
+      paintKeyHints(screen, composerX + composerW - hintsW - 2, bottom, sendHints, hintsW, t, makeStyle({ fg: t.textMuted, bg: composerBg }))
     }
 
     // Reasoning-effort slider: one row between the composer and the status
@@ -2470,12 +2665,8 @@ export class App {
     screen.fill(0, statusRow, cols, ' ', statusStyle)
     let leftX = 3
     if (this.status === 'running' && this.hasAnimation()) {
-      // Flowing wave indicator while the agent is working (read/write/tools/
-      // thinking): consecutive spinner frames render side by side so the
-      // pattern visibly flows left to right.
       const phase = Math.floor(Date.now() / 70) % SPINNER.length
-      const flow = SPINNER[phase] + SPINNER[(phase + 1) % SPINNER.length] + SPINNER[(phase + 2) % SPINNER.length]
-      screen.text(1, statusRow, flow, makeStyle({ fg: t.primary, bg: t.background }))
+      screen.text(1, statusRow, SPINNER[phase], makeStyle({ fg: t.primary, bg: t.background }))
       leftX = 4
     } else {
       const statusDot = this.status === 'running' ? '▮' : '·'
@@ -2513,6 +2704,14 @@ export class App {
       screen.text(leftX, statusRow, leftClipped, statusStyle)
       if (meterGeom) this._paintContextMeter(screen, statusRow, meterGeom)
     }
+    const keyHints = tr(suggestions > 0 ? 'composer.commandKeys' : 'composer.keys')
+    if (home || (suggestions > 0 && cols >= 76)) {
+      const hintW = displayWidth(keyHints)
+      if (hintW + 4 <= borderX) {
+        screen.fill(0, statusRow, borderX, ' ', statusStyle)
+        paintKeyHints(screen, borderX - hintW - 2, statusRow, keyHints, hintW, t, statusStyle)
+      }
+    }
 
     // Toast: bottom-center, on the same status row as the model/meter
     // readings; it auto-dismisses after 2 seconds.
@@ -2530,6 +2729,21 @@ export class App {
     if (railW > 0) this._paintRail(screen, { cols, rows, headerH, railW, borderX })
 
     // Overlays
+    if (this.overlay || this.pendingQuestions || this.pendingSecret || this.statsOpen) {
+      const shades = new Map()
+      for (const row of screen.cells) {
+        for (const cell of row) {
+          const style = cell.style ?? {}
+          const key = (style.fg ?? t.text) + ':' + (style.bg ?? t.background)
+          if (!shades.has(key)) shades.set(key, makeStyle({
+            fg: mixColor(style.fg ?? t.text, t.background, 0.6),
+            bg: mixColor(style.bg ?? t.background, t.background, 0.35),
+          }))
+          cell.style = shades.get(key)
+        }
+      }
+      screen.images = []
+    }
     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)
@@ -2540,6 +2754,32 @@ export class App {
     else if (this.statsOpen && !this.overlay) this._paintStats(screen, cols, rows, railW)
     if (this.pendingSecret) this._paintSecret(screen, cols, rows, railW)
 
+    // MCP connection notice: top-right, above the header, dismissed after two
+    // seconds. It is painted last so an overlay cannot bury the answer to
+    // "did that server come up".
+    if (this.mcpNotice && cols > 0 && rows > 0) {
+      const connected = this.mcpNotice.status === 'connected'
+      const label = tr(connected ? 'mcp.notice.connected' : 'mcp.notice.failed', { name: this.mcpNotice.name })
+      const text = truncateWidth(' ' + label + ' ', cols)
+      const width = displayWidth(text)
+      const x = Math.max(0, cols - width)
+      const style = makeStyle({ fg: connected ? t.success : t.error, bg: t.backgroundElement, bold: true })
+      screen.fill(x, 0, width, ' ', style)
+      screen.text(x, 0, text, style)
+    }
+    if (this.cornerNotice && cols > 0 && rows > 0) {
+      const width = Math.min(cols, Math.max(20, Math.min(64, Math.max(displayWidth(this.cornerNotice.title), displayWidth(this.cornerNotice.detail)) + 4)))
+      const x = cols - width
+      const titleStyle = makeStyle({ fg: this.cornerNotice.level === 'error' ? t.error : t.success, bg: t.backgroundElement, bold: true })
+      const detailStyle = makeStyle({ fg: t.text, bg: t.backgroundElement })
+      screen.fill(x, 0, width, ' ', titleStyle)
+      screen.text(x + 1, 0, truncateWidth(this.cornerNotice.title, Math.max(0, width - 2)), titleStyle)
+      if (rows > 1) {
+        screen.fill(x, 1, width, ' ', detailStyle)
+        screen.text(x + 1, 1, shortenPath(this.cornerNotice.detail, Math.max(0, width - 2)), detailStyle)
+      }
+    }
+
     // Normalize backgrounds: transcript markdown segments, indents, and row
     // tail fills carry fg-only styles, which would otherwise fall back to the
     // terminal's own default background (usually black). Every cell in the
@@ -2576,7 +2816,7 @@ export class App {
   // the origin and the policy-permitted details. The composer previously showed
   // the action alone, so three of the four were dropped.
   _approvalLines(width, maxRows) {
-    const t = THEME
+    const t = this.theme
     const state = this.pendingApproval
     const rows = Math.max(1, Math.floor(maxRows))
     if (!state || !(width >= 8)) return []
@@ -2667,7 +2907,7 @@ export class App {
   }
 
   _paintEffortSlider(screen, cols, rows, rightEdge = cols) {
-    const t = THEME
+    const t = this.theme
     const slider = this.effortSlider
     if (!slider || slider.levels.length === 0) return
     const y = rows - 2
@@ -2680,28 +2920,11 @@ export class App {
     const left = 2
     const trackWidth = Math.max(10, Math.min(26, rightEdge - left - 48))
     const fill = levels.length <= 1 ? 1 : Math.max(1, Math.round((index / (levels.length - 1)) * trackWidth))
-    const phase = Math.floor(Date.now() / 60)
-    const head = atMax ? phase % fill : -1
     for (let i = 0; i < trackWidth; i++) {
       if (i < fill) {
-        // Filled segment: flat primary, or at max a gradient that flows
-        // left -> right (wave index shrinks with position: (phase - i)), with
-        // a bright comet head sweeping across the fill and a short trail.
-        let color = t.primary
-        if (atMax) {
-          const wave = ((phase - i) % (fill + 1) + (fill + 1)) % (fill + 1) / Math.max(1, fill)
-          const base = mixColor(t.primary, t.accent, wave)
-          const dist = Math.abs(head - i)
-          color = dist === 0 ? mixColor(base, '#ffffff', 0.85)
-            : dist === 1 ? mixColor(base, '#ffffff', 0.45)
-              : dist === 2 ? mixColor(base, '#ffffff', 0.2)
-                : base
-        }
-        screen.text(left + i, y, '█', makeStyle({ fg: color, bg }))
+        screen.text(left + i, y, '█', makeStyle({ fg: t.primary, bg }))
       } else {
-        // Empty segment: at max the cells shimmer, moving rightward too.
-        const ch = atMax && ((phase - i) % 2 + 2) % 2 === 0 ? '▒' : '░'
-        screen.text(left + i, y, ch, makeStyle({ fg: t.border, bg }))
+        screen.text(left + i, y, '░', makeStyle({ fg: t.border, bg }))
       }
     }
     // Text-safe slider thumb on the right edge of the fill.
@@ -2711,7 +2934,7 @@ export class App {
     const current = levels[index] ?? levels[0]
     const name = truncateWidth(String(current?.name ?? current?.id ?? '—'), 18)
     let x = left + trackWidth + 2
-    screen.text(x, y, name, makeStyle({ fg: atMax ? t.warning : t.secondary, bold: true, bg }))
+    screen.text(x, y, name, makeStyle({ fg: t.secondary, bold: true, bg }))
     x += displayWidth(name)
     // The real range the provider exposed, so a boolean-thinking model shows
     // exactly its two ends rather than a fake none..max scale.
@@ -2739,7 +2962,7 @@ export class App {
   // panel background (the renderer's default-background pass would otherwise
   // repaint text cells with the page background over the rail's panel).
   _railLines(width) {
-    const t = THEME
+    const t = this.theme
     const bg = t.backgroundPanel
     const lines = []
     const st = (extra = {}) => makeStyle({ bg, ...extra })
@@ -2776,7 +2999,10 @@ export class App {
       const barW = Math.max(3, width - 2)
       const fill = Math.min(barW, Math.max(0, Math.round(meter.percent / 100 * barW)))
       const fillColor = meter.percent >= 100 ? t.error : meter.percent >= 90 ? t.warning : t.primary
-      lines.push([{ text: '█'.repeat(fill) + '░'.repeat(barW - fill), style: st({ fg: fillColor }) }])
+      lines.push([
+        { text: '━'.repeat(fill), style: st({ fg: fillColor }) },
+        { text: '─'.repeat(barW - fill), style: st({ fg: t.border }) },
+      ])
       row(tr('rail.percentUsed', { percent: meter.percent }), meter.percent >= 90 ? st({ fg: fillColor }) : muted)
       row(tr('rail.tokens', { used: formatTokens(meter.usedTokens), window: formatTokens(meter.contextWindow) }), muted)
       const m = this.metrics ?? {}
@@ -2799,9 +3025,10 @@ export class App {
 
     // The figures the narrow window's stats strip carries; the strip drops out
     // while the rail is up, so this is their only home in the wide layout.
-    if (this._statsStripVisible()) {
+    const sessionStats = this._statsGroups({ billing: !meter })
+    if (sessionStats.length > 0) {
       section(tr('rail.session'))
-      for (const group of this._statsGroups()) {
+      for (const group of sessionStats) {
         for (const piece of wrapText(group, width)) row(piece, muted)
       }
     }
@@ -2845,7 +3072,7 @@ export class App {
   }
 
   _paintRail(screen, { cols, rows, headerH, railW, borderX }) {
-    const t = THEME
+    const t = this.theme
     const bg = t.backgroundPanel
     const sideStyle = makeStyle({ fg: t.textMuted, bg })
     const x0 = borderX + 1
@@ -2919,37 +3146,17 @@ export class App {
     }
   }
 
-  // The current effort value, pinned to the top-right corner of the composer
-  // box — diagonally opposite the `provider · model` label at bottom-left.
-  // `↑ max` gets a blinking text arrow and per-letter flowing gradient; any
-  // other level is a static bold label.
+  // A stable label keeps the selected reasoning level visible while idle.
   _paintEffortLabel(screen, composerX, composerTop, composerW) {
-    const t = THEME
+    const t = this.theme
     const level = this._effortLevel()
     if (!level || composerW < 16) return
     const atMax = this._effortAtMax()
     const name = truncateWidth(String(level.name ?? level.id), Math.max(4, composerW - 16))
-    const bg = t.background
-    if (atMax) {
-      const text = '↑ ' + name
-      const x = composerX + composerW - displayWidth(text) - 2
-      const phase = Math.floor(Date.now() / 60)
-      const blink = Math.floor(Date.now() / 130) % 2 === 0 ? t.warning : mixColor(t.warning, '#ffffff', 0.75)
-      screen.text(x, composerTop, '↑', makeStyle({ fg: blink, bold: true, bg }))
-      let cx = x + 2
-      let glyphIndex = 0
-      for (const ch of Array.from(name)) {
-        const wave = (((phase - glyphIndex * 3) % 10) + 10) % 10 / 10
-        screen.text(cx, composerTop, ch, makeStyle({ fg: mixColor(t.primary, t.accent, wave), bold: true, bg }))
-        cx += displayWidth(ch)
-        glyphIndex++
-      }
-    } else {
-      // The level name alone labels the corner — no "effort" prefix.
-      const text = name
-      const x = composerX + composerW - displayWidth(text) - 2
-      screen.text(x, composerTop, text, makeStyle({ fg: t.secondary, bold: true, bg }))
-    }
+    const text = (atMax ? '↑ ' : '') + name + ' · Tab'
+    const x = composerX + composerW - displayWidth(text) - 2
+    screen.text(x, composerTop, text, makeStyle({ fg: t.secondary, bold: true, bg: t.backgroundPanel }))
+    this.addHitRegion('effort', x, composerTop, displayWidth(text))
   }
 
   // Port of the web composer's ContextMeter ring: an always-visible occupancy
@@ -2973,12 +3180,12 @@ export class App {
     if (x0 < leftFloor) return null
     return {
       x0, y, total, barW, used, cap, pct,
-      fillColor: pct >= 100 ? THEME.error : pct >= 90 ? THEME.warning : THEME.primary,
+      fillColor: pct >= 100 ? this.theme.error : pct >= 90 ? this.theme.warning : this.theme.primary,
     }
   }
 
   _paintContextMeter(screen, y, geom) {
-    const t = THEME
+    const t = this.theme
     let x = geom.x0
     x = screen.text(x, y, 'ctx', makeStyle({ fg: t.textMuted, bold: true, bg: t.background }))
     x += 1
@@ -3005,7 +3212,7 @@ export class App {
   // percent; a zero-width part is dropped. Opened by clicking the stats strip
   // or the context meter, or with `/stats`.
   _paintStats(screen, cols, rows, railW = 0) {
-    const t = THEME
+    const t = this.theme
     const m = this.metrics ?? {}
     const meter = this.contextMeter
     const body = []
@@ -3146,7 +3353,7 @@ export class App {
   // `plan-review` intent renders its `detail` — the plan under review — above
   // the choices; the answer encoding is identical either way.
   _paintQuestions(screen, cols, rows, railW = 0) {
-    const t = THEME
+    const t = this.theme
     const q = this.pendingQuestions
     if (!q) return
     const question = q.questions[q.index]
@@ -3295,7 +3502,7 @@ export class App {
   // have their own inline masked field; this is the same masking applied to a
   // one-field modal that a standard protocol request can drive.
   _paintSecret(screen, cols, rows, railW = 0) {
-    const t = THEME
+    const t = this.theme
     const state = this.pendingSecret
     // Clamped to the available columns as well as the 64-column cap: a 30-column
     // floor with a centred x would push the right edge past the frame on a very
@@ -3343,17 +3550,18 @@ export class App {
   // too; views without a menu (choice lists, session manager, model picker)
   // keep the classic single-column layout.
   _paintSettings(screen, cols, rows, railW = 0) {
-    const t = THEME
+    const t = this.theme
     const menu = Array.isArray(this.settingsMenu) ? this.settingsMenu : []
     const hasMenu = menu.length > 0
     // The menu column is sized from its labels: "Aggiornamento" or "Обновление"
     // must not be cut to the English "Update" width. Capped so a runaway label
     // cannot eat the content pane.
-    const menuW = hasMenu ? Math.min(20, Math.max(12, ...menu.map((entry) => displayWidth(entry.label))) + 5) : 0
     const w = Math.min(hasMenu ? 84 : 68, overlayRegion(cols, railW) - 4)
+    const menuW = hasMenu && w >= 72 ? Math.min(20, Math.max(12, ...menu.map((entry) => displayWidth(entry.label))) + 5) : 0
+    const stacked = w - menuW < 50
     // Display rows: group headers (kind 'header') break the list into
     // sections with a blank separator line; every selectable item is one
-    // compact row. Headers are never selectable and carry no hit region.
+    // compact row, or a label/value pair on narrow terminals.
     const display = []
     for (let i = 0; i < this.settingsItems.length; i++) {
       const item = this.settingsItems[i]
@@ -3362,6 +3570,9 @@ export class App {
         display.push({ header: item })
       } else {
         display.push({ item, index: i })
+        if (stacked && !item.wide && (item.value || item.valueLabel || item.version || this.settingsEditing === i || this.settingsConfirm?.item === item)) {
+          display.push({ item, index: i, detail: true })
+        }
       }
     }
     const h = Math.max(9, Math.min(rows - 4, display.length + 6))
@@ -3384,7 +3595,7 @@ export class App {
     // Content area: everything right of the menu column.
     const cx = x0 + menuW
     const cw = w - menuW
-    if (hasMenu) {
+    if (menuW > 0) {
       // Left menu column with a divider; the active entry is highlighted and
       // every entry is a click target.
       screen.set(x0 + menuW, y0, '┬', border)
@@ -3408,7 +3619,21 @@ export class App {
     screen.text(cx + 3, y0 + 1, truncateWidth(this.settingsTitle, cw - 6), makeStyle({ fg: t.primary, bold: true, bg: t.backgroundElement }))
 
     const subtitleText = (this.settingsBusy ? this.animChar() + ' ' : '') + (this.settingsSubtitle || tr('settings.shared'))
-    screen.text(cx + 3, y0 + 2, truncateWidth(subtitleText, cw - 6), makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+    if (hasMenu && menuW === 0) {
+      let mx = cx + 3
+      const order = [...menu.keys()].slice(this.settingsMenuIndex).concat([...menu.keys()].slice(0, this.settingsMenuIndex))
+      for (const i of order) {
+        const label = truncateWidth(menu[i].label, cw - 6)
+        const mw = displayWidth(label) + 2
+        if (mx + mw > cx + cw - 2) break
+        const active = i === this.settingsMenuIndex
+        screen.text(mx, y0 + 2, label, makeStyle({ fg: active ? t.secondary : t.textMuted, bold: active, bg: t.backgroundElement }))
+        this.addHitRegion('settings-menu', mx, y0 + 2, mw, 1, { menuIndex: i })
+        mx += mw
+      }
+    } else {
+      screen.text(cx + 3, y0 + 2, truncateWidth(subtitleText, cw - 6), makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+    }
     // Scroll window with explicit scroll offset (wheel scrolling support).
     // The scroll offset is clamped to ensure the window always shows content.
     const maxScroll = Math.max(0, display.length - contentH)
@@ -3418,7 +3643,8 @@ export class App {
     let first = scrollOffset
     if (selRow >= 0) {
       if (selRow < first) first = selRow
-      if (selRow >= first + contentH) first = selRow - contentH + 1
+      const selEnd = display[selRow + 1]?.detail && contentH > 1 ? selRow + 1 : selRow
+      if (selEnd >= first + contentH) first = selEnd - contentH + 1
     }
     first = Math.max(0, Math.min(first, maxScroll))
     this.settingsScrollOffset = first
@@ -3438,7 +3664,7 @@ export class App {
         })
         if (selected) screen.fill(cx + 2, y, cw - 4, ' ', style)
         this.addHitRegion('settings-item', cx + 2, y, cw - 4, 1, { settingsIndex: i })
-        screen.text(cx + 3, y, selected ? '› ' : '  ', makeStyle({ fg: item.disabled ? t.textMuted : t.primary, bg: style.bg }))
+        screen.text(cx + 3, y, selected ? '┃ ' : '  ', makeStyle({ fg: item.disabled ? t.textMuted : t.primary, bg: style.bg }))
         const draft = this.settingsSecret ? '•'.repeat(Array.from(this.settingsDraft).length) : this.settingsDraft
         const confirming = this.settingsConfirm?.item === item
         const confirmHint = confirming
@@ -3455,7 +3681,11 @@ export class App {
         const valueStyle = makeStyle({ fg: confirming ? t.warning : valueTone ? valueTone : selected && !item.disabled ? t.secondary : t.textMuted, bg: style.bg })
         // Nested rows (e.g. a provider's models) indent one step per level.
         const indent = (item.indent ?? 0) * 3
-        if (item.kind === 'session') {
+        if (stacked) {
+          const version = item.version ? [item.version, item.installed ? tr('common.installed') : '', ...(item.tags ?? []).map((tag) => '[' + tag + ']')].filter(Boolean).join(' · ') : ''
+          const text = entry.detail ? value || version : item.label
+          screen.text(cx + 6 + indent, y, truncateWidth(String(text ?? ''), cw - 9 - indent), entry.detail ? valueStyle : style)
+        } else if (item.kind === 'session') {
           // Session rows right-align the timestamp and clamp the title so the
           // name and time columns stay clearly separated instead of running
           // together at a fixed 36-column boundary.
@@ -3479,9 +3709,10 @@ export class App {
               bg: style.bg,
             })
             let vx = cx + 6 + indent
-            vx = screen.text(vx, y, item.version, item.installed ? installedStyle : baseStyle)
-            if (item.installed) vx = screen.text(vx, y, '  ' + tr('common.installed'), installedStyle)
-            for (const tag of item.tags ?? []) vx = screen.text(vx, y, '  [' + tag + ']', tagStyle(tag))
+            const piece = (text, style) => { vx = screen.text(vx, y, truncateWidth(text, Math.max(0, cx + cw - 3 - vx)), style) }
+            piece(item.version, item.installed ? installedStyle : baseStyle)
+            if (item.installed) piece('  ' + tr('common.installed'), installedStyle)
+            for (const tag of item.tags ?? []) piece('  [' + tag + ']', tagStyle(tag))
           }
         } else if (item.kind === 'update-progress') {
           // Live download bar: label, ten cells of █/░, then the byte progress
@@ -3507,6 +3738,12 @@ export class App {
       }
       y++
     }
+    if (display.length > contentH) {
+      const thumbH = Math.max(1, Math.round(contentH * contentH / display.length))
+      const thumbY = y0 + 4 + Math.round(first * (contentH - thumbH) / Math.max(1, maxScroll))
+      for (let i = 0; i < contentH; i++) screen.set(x0 + w - 2, y0 + 4 + i, '│', border)
+      for (let i = 0; i < thumbH; i++) screen.set(x0 + w - 2, thumbY + i, '┃', makeStyle({ fg: t.textMuted, bg: t.backgroundElement }))
+    }
     const footer = this.settingsEditing !== null
       ? tr('settings.footerEdit')
       : hasMenu
@@ -3516,17 +3753,17 @@ export class App {
     // 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 }))
+      screen.text(cx + 3, y0 + h - 2, truncateWidth(footer, cw - 6), 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) {
-    const t = THEME
+    const t = this.theme
     const region = overlayRegion(cols, railW)
     const w = Math.min(64, region - 4)
-    const h = 25
+    const h = Math.min(25, rows - 2)
     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 })
@@ -3542,12 +3779,13 @@ export class App {
     }
     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('help.title'), makeStyle({ fg: t.primary, bold: true, bg: t.backgroundElement }))
+    screen.text(x0 + 2, y0 + 1, truncateWidth(tr('help.title'), w - 4), makeStyle({ fg: t.primary, bold: true, bg: t.backgroundElement }))
     const rows2 = [
       [tr('help.enter'), tr('help.enterDesc')],
       [tr('help.ctrlEnter'), tr('help.ctrlEnterDesc')],
       [tr('help.ctrlC'), tr('help.ctrlCDesc')],
       [tr('help.ctrlP'), tr('help.ctrlPDesc')],
+      ['Ctrl+S', tr('screenshot.shortcut')],
       [tr('help.ctrlE'), tr('help.ctrlEDesc')],
       [tr('help.tab'), tr('help.tabDesc')],
       [tr('help.ctrlN'), tr('help.ctrlNDesc')],
@@ -3564,19 +3802,23 @@ export class App {
     // The key column is measured, not assumed: a translated key label ("Hoch /
     // Runter") must not push its description off the box, and every description
     // is truncated to what is left of the row.
-    const keyCol = Math.max(14, ...rows2.map(([key]) => displayWidth(key))) + 2
-    const descRoom = Math.max(8, w - 3 - keyCol - 2)
+    const keyCol = Math.min(Math.floor((w - 6) / 2), Math.max(14, ...rows2.map(([key]) => displayWidth(key))) + 2)
+    const descRoom = Math.max(1, w - 5 - keyCol)
+    const keyRows = h < 22 ? [...rows2.slice(0, Math.max(0, h - 7)), rows2.at(-1)] : rows2
     let yy = y0 + 3
-    for (const [key, desc] of rows2) {
-      screen.text(x0 + 3, yy, key, makeStyle({ fg: t.success, bg: t.backgroundElement }))
+    for (const [key, desc] of keyRows) {
+      screen.text(x0 + 3, yy, truncateWidth(key, keyCol - 2), makeStyle({ fg: t.success, bg: t.backgroundElement }))
       screen.text(x0 + 3 + keyCol, yy, truncateWidth(desc, descRoom), makeStyle({ fg: t.text, bg: t.backgroundElement }))
       yy++
     }
-    yy++
-    screen.text(x0 + 3, yy, tr('help.commands'), makeStyle({ fg: t.accent, bold: true, bg: t.backgroundElement }))
-    yy++
+    if (h === 25) {
+      yy++
+      screen.text(x0 + 3, yy, truncateWidth(tr('help.commands'), w - 6), makeStyle({ fg: t.accent, bold: true, bg: t.backgroundElement }))
+      yy++
+    }
     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 }))
+      if (yy >= y0 + h - 1) break
+      screen.text(x0 + 3, yy, truncateWidth(cmd, w - 6), makeStyle({ fg: t.text, bg: t.backgroundElement }))
       yy++
     }
   }
@@ -3584,7 +3826,7 @@ export class App {
   _paintRewind(screen, cols, rows, railW = 0) {
     const picker = this.rewind
     if (!picker) return
-    const t = THEME
+    const t = this.theme
     const listing = picker.step === 'restore' ? picker.restoreOptions : picker.items
     const sel = picker.step === 'restore' ? picker.modeIndex : picker.selected
     const region = overlayRegion(cols, railW)
@@ -3664,7 +3906,7 @@ export class App {
   _paintGitBranches(screen, cols, rows, railW = 0) {
     const picker = this.gitBranches
     if (!picker) return
-    const t = THEME
+    const t = this.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)))
@@ -3742,7 +3984,7 @@ export class App {
 // 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 keyStyle = makeStyle({ fg: theme.accent, bold: true, bg: base?.bg ?? theme.backgroundElement })
   const restStyle = base ?? makeStyle({ fg: theme.textMuted, bg: theme.backgroundElement })
   let cx = x
   const put = (chunk, style) => {
@@ -3771,4 +4013,4 @@ function rewindAgo(ms) {
   if (sec < 3600) return Math.round(sec / 60) + 'm'
   if (sec < 86400) return Math.round(sec / 3600) + 'h'
   return Math.round(sec / 86400) + 'd'
-}
+}