@pellux/goodvibes-tui 0.26.0 → 0.28.0

package/src/panels/file-explorer-panel.ts

@@ -9,14 +9,15 @@ import { createEmptyLine } from '../types/grid.ts';
 import { BasePanel } from './base-panel.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildSearchInputLine,
-  buildSelectablePanelLine,
+  buildTreeRow,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
-import { getDisplayWidth } from '../utils/terminal-width.ts';
 import {
   getPanelSearchFocusTransition,
   isPanelSearchBackspace,
@@ -24,6 +25,7 @@ import {
   isPanelSearchCommit,
   isPanelSearchPrintable,
 } from './search-focus.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -83,15 +85,12 @@ interface TreeNode {
 // ---------------------------------------------------------------------------
 // Colour palette
 // ---------------------------------------------------------------------------
-const CLR_DIR      = '#00ffff'; // cyan — directories
-const CLR_FILE     = '#e0e0e0'; // near-white — files
-const CLR_SIZE     = '244';     // dim grey — sizes
-const CLR_CURSOR   = '#1a2a3a'; // cursor background
-const CLR_CURSOR_FG = '#ffffff';
-const CLR_SEARCH_BG = '#2a1a3a';
-const CLR_SEARCH_FG = '#ff79c6';
-const CLR_TOGGLE   = '244';     // ▶/▼ toggle arrows
-const CLR_ICON     = '244';     // file type icon
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
+  dirColor: '#00ffff',   // cyan — directories
+  fileColor: '#e0e0e0',  // near-white — files
+  sizeColor: '244',      // dim grey — sizes
+  cursorBg: '#1a2a3a',   // cursor background
+});
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -214,21 +213,29 @@ export class FileExplorerPanel extends BasePanel {
         ? `Filter: ${this.searchQuery}  (/ or up at top to edit)`
         : `Root: ${relative(this.workingDirectory, this.rootPath) || '.'}  (/ or up at top to search)`;
 
+    // Context-aware hints: only surface keys that act in the current mode.
+    const hintsLine = this.searchMode
+      ? buildKeyboardHints(width, [
+          { keys: 'type', label: 'filter' },
+          { keys: '↑/↓', label: 'move' },
+          { keys: 'Enter', label: 'keep results' },
+          { keys: 'Esc', label: 'clear' },
+        ], C)
+      : buildKeyboardHints(width, [
+          { keys: '↑/↓', label: 'navigate' },
+          { keys: 'Enter/→', label: 'expand' },
+          { keys: '←', label: 'collapse' },
+          { keys: '/', label: 'search' },
+          { keys: 'r', label: 'refresh' },
+        ], C);
+
     if (this.flat.length === 0) {
       return buildPanelWorkspace(width, height, {
         title: ' Explorer',
         intro: 'Browse the project tree, expand directories, and search for paths.',
         sections: [
           {
-            lines: buildEmptyState(
-              width,
-              ' No files found',
-              this.searchQuery
-                ? 'No files or directories match the current search.'
-                : 'This root did not produce any visible files after the explorer filters were applied.',
-              [],
-              DEFAULT_PANEL_PALETTE,
-            ),
+            lines: buildEmptyState(width, ' No files found', this.searchQuery ? 'No files or directories match the current search.' : 'This root did not produce any visible files after the explorer filters were applied.', this.searchQuery ? [{ command: 'Esc', summary: 'clear the filter to show the full tree again' }] : [{ command: 'r', summary: 'rescan this root from disk' }], C),
           },
         ],
         footerLines: [
@@ -236,7 +243,7 @@ export class FileExplorerPanel extends BasePanel {
             active: this.searchMode,
             valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim,
           }),
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter/Right', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim], ['   Left', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+          hintsLine,
         ],
         palette: DEFAULT_PANEL_PALETTE,
       });
@@ -278,7 +285,7 @@ export class FileExplorerPanel extends BasePanel {
           active: this.searchMode,
           valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim,
         }),
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter/Right', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim], ['   Left', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+        hintsLine,
       ],
       palette: DEFAULT_PANEL_PALETTE,
       beforeSections: [summarySection],
@@ -286,24 +293,17 @@ export class FileExplorerPanel extends BasePanel {
         title: 'Tree',
         scrollableLines: this.flat.map((node, absoluteIdx) => {
           const isCursor = absoluteIdx === this.cursor;
-          const baseBg = isCursor ? CLR_CURSOR : '';
-          const baseFg = isCursor ? CLR_CURSOR_FG : (node.isDir ? CLR_DIR : CLR_FILE);
-          const indent = '  '.repeat(node.depth);
-          const segments = [
-            { text: indent, fg: baseFg },
-            node.isDir
-              ? { text: node.expanded ? '▾ ' : '▸ ', fg: CLR_TOGGLE, bold: isCursor }
-              : { text: `${fileIcon(node.name)} `, fg: CLR_ICON, dim: !isCursor },
-            { text: node.name, fg: baseFg, bold: node.isDir || isCursor },
-          ];
-          if (!node.isDir && node.size > 0) {
-            const sizeStr = ` ${formatSize(node.size)}`;
-            const contentWidth = getDisplayWidth(indent) + 2 + getDisplayWidth(node.name);
-            const gap = Math.max(1, width - contentWidth - getDisplayWidth(sizeStr));
-            segments.push({ text: ' '.repeat(gap), fg: baseFg });
-            segments.push({ text: sizeStr, fg: CLR_SIZE, dim: true });
-          }
-          return buildSelectablePanelLine(width, segments, { selected: isCursor, selectedBg: baseBg, fillFg: baseFg });
+          return buildTreeRow(width, {
+            depth: node.depth,
+            label: node.name,
+            icon: node.isDir ? undefined : fileIcon(node.name),
+            expandable: node.isDir,
+            expanded: node.expanded,
+            labelColor: node.isDir ? C.dirColor : C.fileColor,
+            metadata: (!node.isDir && node.size > 0)
+              ? [{ text: formatSize(node.size), fg: C.sizeColor }]
+              : undefined,
+          }, C, { selected: isCursor, selectedBg: C.cursorBg });
         }),
         selectedIndex: this.cursor,
         scrollOffset: this.scrollTop,
@@ -325,7 +325,7 @@ export class FileExplorerPanel extends BasePanel {
           active: this.searchMode,
           valueColor: this.searchMode ? DEFAULT_PANEL_PALETTE.info : DEFAULT_PANEL_PALETTE.dim,
         }),
-        buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter/Right', DEFAULT_PANEL_PALETTE.info], [' expand', DEFAULT_PANEL_PALETTE.dim], ['   Left', DEFAULT_PANEL_PALETTE.info], [' collapse', DEFAULT_PANEL_PALETTE.dim], ['   /', DEFAULT_PANEL_PALETTE.info], [' search', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+        hintsLine,
       ],
       palette: DEFAULT_PANEL_PALETTE,
     });
@@ -342,7 +342,7 @@ export class FileExplorerPanel extends BasePanel {
           this.cacheValid = true;
         });
       } catch (err) {
-        this.setError(err instanceof Error ? err.message : String(err));
+        this.setError(summarizeError(err));
       }
       this.markDirty();
     })();

package/src/panels/file-preview-panel.ts

@@ -8,11 +8,13 @@ import { SyntaxHighlighter, type SyntaxToken } from '../renderer/syntax-highligh
 import { getDisplayWidth } from '../utils/terminal-width.ts';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
   DEFAULT_PANEL_PALETTE,
 } from './polish.ts';
+import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 
 // ─── Constants ────────────────────────────────────────────────────────────────
 
@@ -144,7 +146,7 @@ export class FilePreviewPanel extends BasePanel {
         this.clampScroll(0);
       });
     } catch (err) {
-      this.setError(err instanceof Error ? err.message : String(err));
+      this.setError(summarizeError(err));
     }
     this.markDirty();
   }
@@ -272,7 +274,11 @@ export class FilePreviewPanel extends BasePanel {
       ],
     } as const;
     const footerLines = [
-      buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim], ['   PgUp/PgDn', DEFAULT_PANEL_PALETTE.info], [' page', DEFAULT_PANEL_PALETTE.dim], ['   Home/End', DEFAULT_PANEL_PALETTE.info], [' bounds', DEFAULT_PANEL_PALETTE.dim]]),
+      buildKeyboardHints(width, [
+        { keys: '↑/↓', label: 'scroll' },
+        { keys: 'PgUp/PgDn', label: 'page' },
+        { keys: 'Home/End', label: 'top/bottom' },
+      ], DEFAULT_PANEL_PALETTE),
     ];
     const fullCode = this.fileLines.join('\n');
     const hlLines = this.fenceTag
@@ -318,8 +324,10 @@ export class FilePreviewPanel extends BasePanel {
             buildPanelLine(width, [
               [' Lines ', DEFAULT_PANEL_PALETTE.label],
               [String(this.fileLines.length), DEFAULT_PANEL_PALETTE.value],
-              ['   Scroll ', DEFAULT_PANEL_PALETTE.label],
+              ['   Viewing ', DEFAULT_PANEL_PALETTE.label],
               [`${window.start + 1}-${window.end}`, DEFAULT_PANEL_PALETTE.info],
+              ['   Lang ', DEFAULT_PANEL_PALETTE.label],
+              [this.fenceTag || 'text', this.fenceTag ? DEFAULT_PANEL_PALETTE.value : DEFAULT_PANEL_PALETTE.dim],
             ]),
           ],
         },

package/src/panels/forensics-panel.ts

@@ -7,6 +7,7 @@
  * Open via /forensics or the panel picker.
  */
 import type { Line } from '../types/grid.ts';
+import { fitDisplay, truncateDisplay } from '../utils/terminal-width.ts';
 import type { ForensicsRegistry } from '@/runtime/index.ts';
 import type { FailureReport, CausalChainEntry, PhaseTimingEntry } from '@/runtime/index.ts';
 import { ForensicsDataPanel } from '@/runtime/index.ts';
@@ -20,6 +21,7 @@ import {
   DEFAULT_PANEL_PALETTE,
   type PanelWorkspaceSection,
 } from './polish.ts';
+import { formatShortDuration } from '../utils/format-duration.ts';
 
 // ── Colour palette ────────────────────────────────────────────────────────────
 const C = {
@@ -59,9 +61,7 @@ function fmtTime(ts: number): string {
 }
 
 function fmtDuration(ms: number | undefined): string {
-  if (ms === undefined) return '?ms';
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
+  return formatShortDuration(ms);
 }
 
 function classificationColor(cls: FailureReport['classification']): string {
@@ -195,7 +195,21 @@ export class ForensicsPanel extends BasePanel {
   // ── List view ──────────────────────────────────────────────────────────────
 
   private _renderList(lines: Line[], reports: FailureReport[], width: number, height: number, intro: string): void {
+    // Posture summary: how many reports and how many are hard errors, so the
+    // most important signal (recent failures) is visible before scrolling.
+    const errorCount = reports.filter((r) => classificationColor(r.classification) === C.classError).length;
+    const newest = reports[0];
+    const summaryLine = buildPanelLine(width, [
+      [' reports ', C.label],
+      [String(reports.length), C.value],
+      ['  errors ', C.label],
+      [String(errorCount), errorCount > 0 ? C.classError : C.classOk],
+      ['  newest ', C.label],
+      [newest ? fmtTime(newest.generatedAt) : 'n/a', C.timestamp],
+    ]);
+
     const reportRows: Line[] = [
+      summaryLine,
       buildPanelLine(width, [['  ID       TIME      CLASS                 SUMMARY', C.label]]),
     ];
 
@@ -204,12 +218,12 @@ export class ForensicsPanel extends BasePanel {
       const isSelected = i === this._selectedIndex;
       const bg = isSelected ? C.selectBg : undefined;
 
-      const idStr   = report.id.slice(0, 8).padEnd(8, ' ');
+      const idStr   = fitDisplay(report.id, 8);
       const timeStr = fmtTime(report.generatedAt);
-      const cls     = report.classification.slice(0, 20).padEnd(20, ' ');
+      const cls     = fitDisplay(report.classification, 20);
       const clsColor = classificationColor(report.classification);
       const summaryMax = Math.max(0, width - 42);
-      const summaryStr = report.summary.slice(0, summaryMax);
+      const summaryStr = truncateDisplay(report.summary, summaryMax);
 
       const segs: Array<[string, string, string?]> = [
         [isSelected ? '▸' : ' ', C.jumpLink, bg],
@@ -226,12 +240,12 @@ export class ForensicsPanel extends BasePanel {
       section: {
         title: 'Reports',
         scrollableLines: reportRows,
-        selectedIndex: this._selectedIndex + 1,
+        selectedIndex: this._selectedIndex + 2,
         scrollOffset: this._scrollOffset,
         minRows: 4,
         appendWindowSummary: {
           dimColor: C.label,
-          formatter: () => buildPanelLine(width, [[` [${this._selectedIndex + 1}/${reports.length}] Up/Down navigate  Enter expand`, C.label]]),
+          formatter: () => buildPanelLine(width, [[` [${this._selectedIndex + 1}/${reports.length}] ↑/↓ navigate  Enter expand report`, C.label]]),
         },
       },
     });
@@ -262,13 +276,13 @@ export class ForensicsPanel extends BasePanel {
     ]));
     detailLines.push(buildPanelLine(width, [
       [' Summary: ', C.label],
-      [report.summary.slice(0, width - 11), C.summaryText],
+      [truncateDisplay(report.summary, Math.max(0, width - 11)), C.summaryText],
     ]));
 
     if (report.errorMessage) {
       detailLines.push(buildPanelLine(width, [
         [' Error:   ', C.label],
-        [report.errorMessage.slice(0, width - 11), C.classError],
+        [truncateDisplay(report.errorMessage, Math.max(0, width - 11)), C.classError],
       ]));
     }
     if (report.stopReason) {
@@ -339,8 +353,8 @@ export class ForensicsPanel extends BasePanel {
     const statusChar = pt.success ? '✓' : '✕';
     const statusColor = pt.success ? C.phaseOk : C.phaseFail;
     const dur = fmtDuration(pt.durationMs);
-    const phaseLabel = pt.phase.slice(0, 14).padEnd(14, ' ');
-    const errPart = pt.error ? `  ${pt.error.slice(0, Math.max(0, width - 32))}` : '';
+    const phaseLabel = fitDisplay(pt.phase, 14);
+    const errPart = pt.error ? `  ${truncateDisplay(pt.error, Math.max(0, width - 32))}` : '';
     lines.push(buildPanelLine(width, [
       ['  ', C.dim],
       [statusChar + ' ', statusColor],
@@ -358,7 +372,7 @@ export class ForensicsPanel extends BasePanel {
     lines.push(buildPanelLine(width, [
       [prefix, color],
       [`${timeStr} `, C.timestamp],
-      [entry.description.slice(0, descMax), color],
+      [truncateDisplay(entry.description, descMax), color],
     ]));
   }
 }

package/src/panels/git-panel.ts

@@ -1,15 +1,19 @@
 import { BasePanel } from './base-panel.ts';
 import { createEmptyLine, createStyledCell, type Line } from '../types/grid.ts';
+import { truncateDisplay, getDisplayWidth } from '../utils/terminal-width.ts';
 import { GitService } from '@pellux/goodvibes-sdk/platform/git';
 import { logger } from '@pellux/goodvibes-sdk/platform/utils';
 import { summarizeError } from '@pellux/goodvibes-sdk/platform/utils';
 import {
   buildEmptyState,
+  buildKeyboardHints,
   buildPanelLine,
   buildPanelWorkspace,
   resolveScrollablePanelSection,
+  buildSelectablePanelLine,
   buildStyledPanelLine,
   DEFAULT_PANEL_PALETTE,
+  extendPalette,
 } from './polish.ts';
 
 // ---------------------------------------------------------------------------
@@ -56,25 +60,17 @@ const MIN_VISIBLE_DIFF_LINES = 5;
 // Colors
 // ---------------------------------------------------------------------------
 
-const C = {
+const C = extendPalette(DEFAULT_PANEL_PALETTE, {
   branch: '#00d7ff',
-  clean: '#5fd700',
-  dirty: '#ffaf00',
-  ahead: '#5fd700',
-  behind: '#ff5f5f',
   sectionHeader: '244',
-  staged: '#5fd700',
-  unstaged: '#ff5f5f',
   commit: '250',
   commitHash: '238',
   commitAuthor: '244',
   selected: '#1c1c1c',
   selectedFg: '#ffffff',
-  diffAdd: '#5fd700',
-  diffRemove: '#ff5f5f',
   diffMeta: '#5f87ff',
   diffNeutral: '250',
-} as const;
+});
 
 // ---------------------------------------------------------------------------
 // GitPanel
@@ -107,11 +103,16 @@ export class GitPanel extends BasePanel {
   private loading = true;
   private error: string | null = null;
 
-  constructor(workingDirectory: string) {
+  constructor(workingDirectory: string, private readonly requestRender: () => void = () => {}) {
     super('git', 'Git', 'G', 'development');
     this.workingDirectory = workingDirectory;
   }
 
+  private _markDirtyAndRender(): void {
+    this.markDirty();
+    this.requestRender();
+  }
+
   // ---------------------------------------------------------------------------
   // Lifecycle
   // ---------------------------------------------------------------------------
@@ -179,7 +180,7 @@ export class GitPanel extends BasePanel {
       this.error = null;
       this.rebuildItems();
       // Do not clear expandedDiff during auto-refresh — only clear on explicit user action
-      this.markDirty();
+      this._markDirtyAndRender();
     } catch (err) {
       const msg = summarizeError(err);
       // If the failure is because this directory isn't a git repo, auto-initialise
@@ -203,7 +204,7 @@ export class GitPanel extends BasePanel {
       }
       this.loading = false;
       logger.debug('GitPanel: refresh failed', { error: this.error });
-      this.markDirty();
+      this._markDirtyAndRender();
     }
   }
 
@@ -352,7 +353,7 @@ export class GitPanel extends BasePanel {
       return this.renderMessage(width, height, 'Loading git status...', C.branch);
     }
     if (this.error) {
-      return this.renderMessage(width, height, `Git error: ${this.error}`, C.unstaged);
+      return this.renderMessage(width, height, `Git error: ${this.error}`, C.bad);
     }
     // I3: spinner during openDiff() async fetch
     if (this.loadingState === 'loading') {
@@ -390,77 +391,49 @@ export class GitPanel extends BasePanel {
   }
 
   private renderBranchLine(width: number): Line {
-    const line = createEmptyLine(width);
-    let x = 0;
-
-    const branchIcon = ' git: ';
-    x = this.paintText(line, branchIcon, x, width, C.sectionHeader);
-    x = this.paintText(line, this.data.branch, x, width, C.branch, { bold: true });
-
-    if (this.data.ahead > 0) {
-      x = this.paintText(line, ` +${this.data.ahead}`, x, width, C.ahead);
-    }
-    if (this.data.behind > 0) {
-      x = this.paintText(line, ` -${this.data.behind}`, x, width, C.behind);
-    }
-
     const isDirty = this.data.stagedFiles.length > 0 || this.data.unstagedFiles.length > 0;
-    const statusText = isDirty ? ' * dirty' : ' y clean';
-    const statusFg = isDirty ? C.dirty : C.clean;
-    this.paintText(line, statusText, x, width, statusFg);
-
-    return line;
+    const segments: Array<{ text: string; fg: string; bold?: boolean }> = [
+      { text: ' ⎇ ', fg: C.sectionHeader },
+      { text: this.data.branch, fg: C.branch, bold: true },
+    ];
+    if (this.data.ahead > 0) segments.push({ text: ` ↑${this.data.ahead}`, fg: C.good });
+    if (this.data.behind > 0) segments.push({ text: ` ↓${this.data.behind}`, fg: C.bad });
+    if (this.data.ahead === 0 && this.data.behind === 0) {
+      segments.push({ text: ' ≡ up to date', fg: C.dim });
+    }
+    segments.push({
+      text: isDirty ? '  ● dirty' : '  ✓ clean',
+      fg: isDirty ? C.warn : C.good,
+      bold: true,
+    });
+    segments.push({ text: `  ${this.data.stagedFiles.length} staged`, fg: this.data.stagedFiles.length > 0 ? C.good : C.dim });
+    segments.push({ text: ` · ${this.data.unstagedFiles.length} unstaged`, fg: this.data.unstagedFiles.length > 0 ? C.warn : C.dim });
+    return buildStyledPanelLine(width, segments);
   }
 
   private renderSectionHeader(label: string, width: number): Line {
-    return buildStyledPanelLine(width, [{ text: `-- ${label} `, fg: C.sectionHeader, dim: true }]);
+    return buildStyledPanelLine(width, [{ text: ` ◆ ${label}`, fg: C.sectionHeader, bold: true }]);
   }
 
   private renderFileRow(entry: GitFileEntry, selected: boolean, width: number): Line {
-    const line = createEmptyLine(width);
-    const fg = entry.staged ? C.staged : C.unstaged;
-    const prefix = '  ';
-    const label = `${prefix}${entry.path}`;
-
-    if (selected) {
-      // Fill background highlight
-      for (let i = 0; i < width; i++) {
-        line[i] = createStyledCell(' ', { bg: C.selected, fg: C.selectedFg });
-      }
-      let x = 0;
-      for (const ch of label) {
-        if (x >= width) break;
-        line[x++] = createStyledCell(ch, { fg, bg: C.selected, bold: true });
-      }
-    } else {
-      this.paintText(line, label, 0, width, fg);
-    }
-    return line;
+    const fg = entry.staged ? C.good : C.bad;
+    // Single-char status marker: + staged (ready to commit), M modified/unstaged.
+    const statusGlyph = entry.staged ? '+' : 'M';
+    const path = truncateDisplay(entry.path, Math.max(0, width - 6));
+    return buildSelectablePanelLine(width, [
+      { text: ` ${statusGlyph} `, fg, bg: selected ? C.selected : undefined, bold: true },
+      { text: path, fg: selected ? C.selectedFg : fg, bg: selected ? C.selected : undefined, bold: selected },
+    ], { selected, selectedBg: C.selected, fillFg: selected ? C.selectedFg : '', leadingMarker: '▸' });
   }
 
   private renderCommitRow(entry: CommitEntry, selected: boolean, width: number): Line {
-    const line = createEmptyLine(width);
-    const hashPart = `  ${entry.hash} `;
-    const msgPart = entry.message.length > 60 ? `${entry.message.slice(0, 57)}...` : entry.message;
-
-    if (selected) {
-      for (let i = 0; i < width; i++) {
-        line[i] = createStyledCell(' ', { bg: C.selected, fg: C.selectedFg });
-      }
-      let x = 0;
-      for (const ch of hashPart) {
-        if (x >= width) break;
-        line[x++] = createStyledCell(ch, { fg: C.commitHash, bg: C.selected });
-      }
-      for (const ch of msgPart) {
-        if (x >= width) break;
-        line[x++] = createStyledCell(ch, { fg: C.selectedFg, bg: C.selected });
-      }
-    } else {
-      let x = this.paintText(line, hashPart, 0, width, C.commitHash);
-      this.paintText(line, msgPart, x, width, C.commit);
-    }
-    return line;
+    const hashPart = ` ${entry.hash} `;
+    const msgBudget = Math.max(0, width - getDisplayWidth(hashPart) - 3);
+    const msgPart = truncateDisplay(entry.message, msgBudget);
+    return buildSelectablePanelLine(width, [
+      { text: hashPart, fg: selected ? C.selectedFg : C.commitHash, bg: selected ? C.selected : undefined },
+      { text: msgPart, fg: selected ? C.selectedFg : C.commit, bg: selected ? C.selected : undefined, bold: selected },
+    ], { selected, selectedBg: C.selected, fillFg: selected ? C.selectedFg : '', leadingMarker: '▸' });
   }
 
   private renderList(width: number, height: number): Line[] {
@@ -535,7 +508,7 @@ export class GitPanel extends BasePanel {
       const workspaceSection = resolveScrollablePanelSection(width, height, {
         intro: 'Review branch status, staged and unstaged files, and recent commits. Open a file row to inspect its diff.',
         footerLines: [
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' diff', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+          buildKeyboardHints(width, [{ keys: '↑/↓', label: 'navigate' }, { keys: 'Enter', label: 'open diff →' }, { keys: 'r', label: 'refresh' }], DEFAULT_PANEL_PALETTE),
         ],
         palette: DEFAULT_PANEL_PALETTE,
         beforeSections: [summarySection],
@@ -555,11 +528,11 @@ export class GitPanel extends BasePanel {
         intro: 'Review branch status, staged and unstaged files, and recent commits. Open a file row to inspect its diff.',
         sections: [
           summarySection,
-          workspaceSection.section.lines.length > 0 ? workspaceSection.section : { title: 'Workspace', lines: buildEmptyState(width, ' No git rows', 'This repository has no files or commits to display yet.', [], DEFAULT_PANEL_PALETTE) },
+          workspaceSection.section.lines.length > 0 ? workspaceSection.section : { title: 'Workspace', lines: buildEmptyState(width, ' No git rows', 'This repository has no staged or unstaged changes and no commits to display yet.', [{ command: '/git status', summary: 'refresh working-tree status, or stage changes to populate this view' }], DEFAULT_PANEL_PALETTE) },
           selectedSection,
         ],
         footerLines: [
-          buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' navigate', DEFAULT_PANEL_PALETTE.dim], ['   Enter', DEFAULT_PANEL_PALETTE.info], [' diff', DEFAULT_PANEL_PALETTE.dim], ['   r', DEFAULT_PANEL_PALETTE.info], [' refresh', DEFAULT_PANEL_PALETTE.dim]]),
+          buildKeyboardHints(width, [{ keys: '↑/↓', label: 'navigate' }, { keys: 'Enter', label: 'open diff →' }, { keys: 'r', label: 'refresh' }], DEFAULT_PANEL_PALETTE),
         ],
         palette: DEFAULT_PANEL_PALETTE,
       });
@@ -569,7 +542,7 @@ export class GitPanel extends BasePanel {
       intro: 'Review branch status, staged and unstaged files, and recent commits. Open a file row to inspect its diff.',
       sections: [
         {
-          lines: buildEmptyState(width, ' No git rows', 'This repository has no files or commits to display yet.', [], DEFAULT_PANEL_PALETTE),
+          lines: buildEmptyState(width, ' No git rows', 'This repository has no staged or unstaged changes and no commits to display yet.', [{ command: '/git status', summary: 'refresh working-tree status, or stage changes to populate this view' }], DEFAULT_PANEL_PALETTE),
         },
       ],
       palette: DEFAULT_PANEL_PALETTE,
@@ -595,16 +568,24 @@ export class GitPanel extends BasePanel {
 
   private renderDiff(width: number, height: number): Line[] {
     const item = this.items[this.selectedIndex];
-    const title =
-      item?.kind === 'file' ? `Diff: ${item.entry.path}` : 'Diff';
     const diffLines = this.expandedDiff ?? [];
+    let added = 0;
+    let removed = 0;
+    for (const l of diffLines) {
+      if (l.startsWith('+') && !l.startsWith('+++')) added++;
+      else if (l.startsWith('-') && !l.startsWith('---')) removed++;
+    }
+    const title =
+      item?.kind === 'file'
+        ? `Diff: ${item.entry.path}  +${added} -${removed}`
+        : 'Diff';
     const renderedLines = diffLines.map((rawLine) => {
       const dLine = createEmptyLine(width);
       let fg: string;
       if (rawLine.startsWith('+') && !rawLine.startsWith('+++')) {
-        fg = C.diffAdd;
+        fg = C.good;
       } else if (rawLine.startsWith('-') && !rawLine.startsWith('---')) {
-        fg = C.diffRemove;
+        fg = C.bad;
       } else if (rawLine.startsWith('@@') || rawLine.startsWith('diff') || rawLine.startsWith('index')) {
         fg = C.diffMeta;
       } else {
@@ -614,7 +595,7 @@ export class GitPanel extends BasePanel {
       return dLine;
     });
     const footerLines = [
-      buildPanelLine(width, [[' Up/Down', DEFAULT_PANEL_PALETTE.info], [' scroll', DEFAULT_PANEL_PALETTE.dim], ['   Esc/q', DEFAULT_PANEL_PALETTE.info], [' close', DEFAULT_PANEL_PALETTE.dim]]),
+      buildKeyboardHints(width, [{ keys: '↑/↓', label: 'scroll' }, { keys: 'Esc/q', label: 'back to files' }], DEFAULT_PANEL_PALETTE),
     ];
     const diffSection = resolveScrollablePanelSection(width, height, {
       palette: DEFAULT_PANEL_PALETTE,