@north-light/crouter 0.3.154

package/dist/builtin-views/git-pr/text.mjs

@@ -0,0 +1,84 @@
+// @ts-check
+/**
+ * Git / PR board — the text presenter (`dump`) for the non-TTY / piped path of
+ * the `git-pr` view (`crtr view run git-pr | cat`). Node-only, no ANSI. A plain
+ * snapshot of the current state; the host threads its current banner via `ctx`.
+ *
+ * The pure helpers `dump` shares with the TUI (relAge, treePhrase) are imported
+ * from `core.mjs`.
+ *
+ * @module git-pr/text
+ */
+
+import { relAge, treePhrase } from './core.mjs';
+
+/** @typedef {import('./core.mjs').GitPrState} GitPrState */
+
+/**
+ * Plain-text snapshot for the non-TTY / piped path.
+ * @param {GitPrState} state
+ * @param {import('../../core/view/contract.js').DumpContext} [ctx]
+ * @returns {string}
+ */
+export function dump(state, ctx) {
+  /** @type {string[]} */
+  const lines = ['Git / PR board'];
+  const banner = ctx && ctx.banner ? ctx.banner : null;
+  if (banner) lines.push('', `[${banner.level}] ${banner.msg}`);
+  else if (state.gitErr) lines.push('', `[${state.gitErr.display.level}] ${state.gitErr.display.explanation}`);
+
+  const g = state.git;
+  if (!g) {
+    lines.push('', state.lastFetch === 0 ? '(reading git…)' : '(git unavailable)');
+    return lines.join('\n');
+  }
+
+  const now = Date.now();
+
+  // Header.
+  let head = `⎇ ${g.branch}`;
+  if (g.upstream) {
+    head += ` → ${g.upstream}`;
+    if (g.ahead) head += ` ↑${g.ahead}`;
+    if (g.behind) head += ` ↓${g.behind}`;
+    if (!g.ahead && !g.behind) head += ' (up to date)';
+  } else {
+    head += ' (no upstream)';
+  }
+  head += `  ·  ${treePhrase(g)}`;
+  lines.push('', head);
+  if (g.lastCommit) {
+    lines.push(`⊙ ${g.lastCommit.sha} ${g.lastCommit.subject}  (${relAge(g.lastCommit.when, now)})`);
+  } else {
+    lines.push('⊙ no commits yet');
+  }
+
+  // Working tree.
+  lines.push('', 'Working tree');
+  if (g.files.length === 0) {
+    lines.push('  ✓ nothing to commit, working tree clean');
+  } else {
+    for (const f of g.files) {
+      const churn = f.add || f.del ? `  +${f.add} −${f.del}` : '';
+      lines.push(`  ${f.xy.replace(/ /g, '·')}  ${f.path}${churn}  [${f.cls}]`);
+    }
+  }
+
+  // Pull requests.
+  lines.push('', 'Pull requests');
+  if (state.prNote) {
+    lines.push(`  · ${state.prNote}`);
+  } else if (state.prs.length === 0) {
+    lines.push('  · No open pull requests.');
+  } else {
+    for (const pr of state.prs) {
+      const mark = pr.current ? '*' : ' ';
+      const draft = pr.isDraft ? ' (draft)' : '';
+      lines.push(
+        `  ${mark}#${pr.number} ${pr.title}${draft}  [review:${pr.review} ci:${pr.ci}]  (${relAge(pr.updatedAt, now)})`
+      );
+    }
+  }
+
+  return lines.join('\n');
+}

package/dist/builtin-views/git-pr/tui.mjs

@@ -0,0 +1,301 @@
+// @ts-check
+/**
+ * Git / PR board — the TUI presenter (`render` + `keymap`) for the `git-pr` view.
+ * Node-only (it uses the host's `Draw` API + the `_lib/states.mjs` draw helpers).
+ *
+ * `render` is a pure read of state; keystrokes map to named intents through
+ * `keymap`. All state + data logic lives in `core.mjs`.
+ *
+ * VISUAL LANGUAGE (crtr-views-visual-design §2/§3/§4): hierarchy by weight + hue
+ * + position, never boxes. Hues are NUMERIC SGR only — green=clean/passing/
+ * staged/ahead (32), yellow=attention/pending/modified/behind (33), red=failing/
+ * conflicted (31), cyan=identity/branch/PR# (36), grey=metadata (90). Every hue
+ * is paired with a glyph + the git-native XY code so it survives NO_COLOR.
+ *
+ * @module git-pr/tui
+ */
+
+import { relAge } from './core.mjs';
+import { loadingState, emptyState, notReadyState } from '../_lib/states.mjs';
+
+/** @typedef {import('./core.mjs').GitState} GitState */
+/** @typedef {import('./core.mjs').ChangedFile} ChangedFile */
+/** @typedef {import('./core.mjs').Pr} Pr */
+/** @typedef {import('./core.mjs').BoardRow} BoardRow */
+/** @typedef {import('./core.mjs').GitPrState} GitPrState */
+
+// ── Status vocabulary (triple-coded: hue + glyph + the git-native XY code) ─────
+
+/** @type {Record<string,{glyph:string, fg:string}>} */
+const FILE_GLYPH = {
+  staged: { glyph: '●', fg: '32' }, // green — in the index, ready
+  modified: { glyph: '○', fg: '33' }, // yellow — unstaged worktree edit
+  untracked: { glyph: '?', fg: '90' }, // grey — not tracked
+  conflict: { glyph: '✗', fg: '31' }, // red — merge conflict
+};
+
+/** PR review decision → glyph + hue. Pending review is neutral (grey), not red. */
+const REVIEW = {
+  approved: { glyph: '✓', fg: '32' }, // green
+  changes: { glyph: '✗', fg: '31' }, // red — changes requested (attention)
+  review: { glyph: '◌', fg: '90' }, // grey — review required / pending
+};
+
+/** PR CI rollup → glyph + hue. */
+const CI = {
+  pass: { glyph: '✓', fg: '32' }, // green
+  fail: { glyph: '✗', fg: '31' }, // red
+  pending: { glyph: '⟳', fg: '33' }, // yellow
+  none: { glyph: '·', fg: '90' }, // grey — no checks
+};
+
+// ── Row → ListItemRow (left spans + right-flushed metadata) ────────────────────
+
+/**
+ * Build one board list row. A 1-cell left gutter rides the cursor bg (§2).
+ * @param {BoardRow} row @param {number} now
+ * @returns {import('../../core/tui/draw.js').ListItemRow}
+ */
+function rowToItem(row, now) {
+  /** @type {import('../../core/tui/draw.js').Span[]} */
+  const spans = [{ text: ' ', style: undefined }];
+
+  if (row.kind === 'label') {
+    spans.push({ text: row.text, style: { fg: '90', dim: true } });
+    return { spans };
+  }
+  if (row.kind === 'spacer') {
+    return { spans: [{ text: '', style: undefined }] };
+  }
+  if (row.kind === 'clean') {
+    spans.push({ text: '✓', style: { fg: '32' } });
+    spans.push({ text: '  nothing to commit, working tree clean', style: { dim: true } });
+    return { spans };
+  }
+  if (row.kind === 'note') {
+    spans.push({ text: '·', style: { fg: '90', dim: true } });
+    spans.push({ text: '  ' + row.text, style: { dim: true } });
+    return { spans };
+  }
+  if (row.kind === 'file') {
+    const f = row.file;
+    const g = FILE_GLYPH[f.cls] || FILE_GLYPH.modified;
+    spans.push({ text: g.glyph, style: { fg: g.fg } }); // hue + shape (mono carrier)
+    spans.push({ text: ' ', style: undefined });
+    spans.push({ text: f.xy.replace(/ /g, '·'), style: { fg: '90', dim: true } }); // git-native XY code
+    spans.push({ text: ' ', style: undefined });
+    spans.push({ text: f.path, style: f.cls === 'conflict' ? { fg: '31' } : undefined });
+    if (f.add || f.del) {
+      /** @type {import('../../core/tui/draw.js').Span[]} */
+      const right = [
+        { text: `+${f.add}`, style: { fg: '90', dim: true } },
+        { text: ' ', style: undefined },
+        { text: `−${f.del}`, style: { fg: '90', dim: true } },
+      ];
+      return { spans, right };
+    }
+    return { spans };
+  }
+  // row.kind === 'pr'
+  const pr = row.pr;
+  const rv = REVIEW[pr.review] || REVIEW.review;
+  const ci = CI[pr.ci] || CI.none;
+  spans.push({ text: `#${pr.number}`, style: { fg: '36', bold: pr.current } }); // cyan identity; current branch bold
+  spans.push({ text: ' ', style: undefined });
+  spans.push({ text: pr.title, style: pr.isDraft ? { dim: true } : undefined });
+  if (pr.isDraft) spans.push({ text: ' (draft)', style: { fg: '90', dim: true } });
+
+  const age = relAge(pr.updatedAt, now);
+  /** @type {import('../../core/tui/draw.js').Span[]} */
+  const right = [
+    { text: rv.glyph, style: { fg: rv.fg } }, // review (color + glyph)
+    { text: ' ', style: undefined },
+    { text: ci.glyph, style: { fg: ci.fg } }, // CI rollup (color + glyph)
+  ];
+  if (age) {
+    right.push({ text: '  ', style: undefined });
+    right.push({ text: age, style: { fg: '90', dim: true } });
+  }
+  return { spans, right };
+}
+
+// ── Header zone (drawn manually above the board list) ──────────────────────────
+
+/**
+ * Visible (column) width of a span group — ANSI-free cell count. Mirrors
+ * draw.ts's internal `spanWidth` so the header can reserve room for a
+ * right-flushed group before clipping the left line.
+ * @param {import('../../core/tui/draw.js').Span[]} spans @returns {number}
+ */
+function spanWidth(spans) {
+  let n = 0;
+  for (const s of spans) n += Array.from(s.text).length;
+  return n;
+}
+
+/**
+ * Paint the always-on header gauges into the top of `content`: branch line then
+ * commit line, with right-flushed metadata. Returns the number of rows consumed
+ * (incl. the trailing hairline) so render can place the board below it.
+ * @param {GitState} g
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} content
+ * @param {number} now
+ * @returns {number} rows consumed
+ */
+function drawHeader(g, draw, content, now) {
+  const right = content.col + content.width; // exclusive right edge for spansRight
+  let r = content.row;
+
+  // ── Branch line: ⎇ branch → upstream  ↑N ↓M   ·····  [tree chip right-flush]
+  /** @type {import('../../core/tui/draw.js').Span[]} */
+  const left = [
+    { text: ' ', style: undefined },
+    { text: '⎇ ', style: { fg: '36' } },
+    { text: g.branch, style: { fg: '36', bold: true } }, // cyan identity
+  ];
+  if (g.upstream) {
+    left.push({ text: ` → ${g.upstream}`, style: { fg: '90', dim: true } });
+    if (g.ahead) left.push({ text: ` ↑${g.ahead}`, style: { fg: '32' } }); // green ahead-ok
+    if (g.behind) left.push({ text: ` ↓${g.behind}`, style: { fg: '33' } }); // yellow attention
+    if (!g.ahead && !g.behind) left.push({ text: ' ✓ up to date', style: { fg: '32' } });
+  } else {
+    left.push({ text: ' · no upstream', style: { fg: '90', dim: true } });
+  }
+  // Tree chip, right-flushed on the same row (clean = green ✓, else colored counts).
+  /** @type {import('../../core/tui/draw.js').Span[]} */
+  const chip = [];
+  if (g.files.length === 0) {
+    chip.push({ text: '✓ clean', style: { fg: '32' } });
+  } else {
+    const c = g.counts;
+    /** @param {number} n @param {string} word @param {string} glyph @param {string} fg */
+    const seg = (n, word, glyph, fg) => {
+      if (!n) return;
+      if (chip.length) chip.push({ text: '  ', style: undefined });
+      chip.push({ text: `${glyph} ${n} ${word}`, style: { fg } });
+    };
+    seg(c.conflict, 'conflict', '✗', '31');
+    seg(c.staged, 'staged', '●', '32');
+    seg(c.modified, 'modified', '○', '33');
+    seg(c.untracked, 'untracked', '?', '90');
+  }
+  // Clip the left line so the right-flushed chip never overpaints its tail
+  // (mirror draw.list's leftLimit = width − rightWidth − 1).
+  const chipW = spanWidth(chip);
+  draw.spans(r, content.col, left, chipW ? Math.max(0, content.width - chipW - 1) : content.width);
+  draw.spansRight(r, right, chip);
+  r++;
+
+  // ── Commit line: ⊙ sha subject ............................ age (right-flush)
+  if (g.lastCommit) {
+    /** @type {import('../../core/tui/draw.js').Span[]} */
+    const commit = [
+      { text: ' ', style: undefined },
+      { text: '⊙ ', style: { fg: '90', dim: true } },
+      { text: g.lastCommit.sha, style: { fg: '33' } }, // yellow sha (git-native)
+      { text: '  ', style: undefined },
+      { text: g.lastCommit.subject, style: undefined },
+    ];
+    // Build the right-flushed age first, then clip the subject so the age never
+    // overpaints it (mirror draw.list's leftLimit).
+    const age = relAge(g.lastCommit.when, now);
+    /** @type {import('../../core/tui/draw.js').Span[]} */
+    const ageSpans = age ? [{ text: age, style: { fg: '90', dim: true } }] : [];
+    const ageW = spanWidth(ageSpans);
+    draw.spans(r, content.col, commit, ageW ? Math.max(0, content.width - ageW - 1) : content.width);
+    if (age) draw.spansRight(r, right, ageSpans);
+  } else {
+    draw.spans(r, content.col, [
+      { text: ' ', style: undefined },
+      { text: '⊙ ', style: { fg: '90', dim: true } },
+      { text: 'no commits yet', style: { dim: true } },
+    ]);
+  }
+  r++;
+
+  // Hairline separating the gauges from the board (figure-ground, §3).
+  draw.hline(r, content.col, content.col + content.width);
+  r++;
+
+  return r - content.row;
+}
+
+// ── render ─────────────────────────────────────────────────────────────────────
+
+/**
+ * Paint the header + board, or one of the four standard states. Pure (reads
+ * state, calls draw.*); the only write is storing draw.list's adjusted scroll.
+ * @param {GitPrState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} content
+ */
+export function render(state, draw, content) {
+  if (content.width <= 0 || content.height <= 0) return;
+
+  // ── Whole-screen takeovers (no git data to anchor a header) ──
+  // The copy comes from the typed SourceError's `display` VERBATIM (the contract
+  // display/kind split — we never branch on `kind`); only the glyph + hue are a
+  // presentation map off `display.level` (action → ⊙ yellow, error → ⚠ red).
+  if (!state.git) {
+    if (state.gitErr) {
+      const d = state.gitErr.display;
+      const g = d.level === 'action' ? { glyph: '⊙', fg: '33' } : { glyph: '⚠', fg: '31' };
+      notReadyState(draw, content, {
+        glyph: g.glyph,
+        glyphFg: g.fg,
+        headline: d.headline,
+        explanation: d.explanation,
+        nextStep: d.nextStep,
+      });
+      return;
+    }
+    // No error yet → first-load loading skeleton.
+    loadingState(draw, content, { rows: Math.min(5, content.height), label: 'Reading git…' });
+    return;
+  }
+
+  const now = Date.now();
+  const g = state.git;
+
+  // ── Header gauges (always on when we have git data) ──
+  // Need ≥3 rows for the 2-row header + hairline; below that, skip straight to
+  // the board so a tiny pane still shows the changes.
+  let bodyRow = content.row;
+  let bodyHeight = content.height;
+  if (content.height >= 4) {
+    const used = drawHeader(g, draw, content, now);
+    bodyRow = content.row + used + (content.height - used > 2 ? 1 : 0); // 1-row section gap when there's room
+    bodyHeight = content.row + content.height - bodyRow;
+  }
+  if (bodyHeight <= 0) return;
+  const bodyRect = { row: bodyRow, col: content.col, width: content.width, height: bodyHeight };
+
+  // ── Empty reward: clean tree + no open PRs + gh healthy → "All clear" ──
+  if (g.files.length === 0 && state.prs.length === 0 && !state.prNote) {
+    emptyState(draw, bodyRect, {
+      headline: 'All clear',
+      secondary: [`${g.branch} — clean working tree, no open PRs.`, 'Use refresh to update.'],
+    });
+    return;
+  }
+
+  // ── The board ──
+  const items = state.board.map((row) => rowToItem(row, now));
+  const res = draw.list(bodyRect, items, state.cursor, state.scroll);
+  state.scroll = res.scroll; // store adjusted scroll back (Draw.list contract)
+}
+
+// ── keymap ───────────────────────────────────────────────────────────────
+
+/**
+ * Read-only navigation. No async actions from input — this is a monitor, not a
+ * controller. Footer hints come from these bindings' `hint` fields.
+ * @type {import('../../core/view/contract.js').KeyBinding<GitPrState>[]}
+ */
+export const keymap = [
+  { bindingId: 'crtr.view.git-pr.down', intent: 'cursorDown', hint: { label: 'move' } },
+  { bindingId: 'crtr.view.git-pr.up', intent: 'cursorUp' },
+  { bindingId: 'crtr.view.git-pr.refresh', intent: 'refresh', hint: { label: 'refresh' } },
+  { bindingId: 'crtr.view.git-pr.quit', intent: 'quit', hint: { label: 'quit' } },
+];

package/dist/builtin-views/git-pr/web.jsx

@@ -0,0 +1,216 @@
+// @ts-check
+/**
+ * Git / PR board — the WEB presenter for the `git-pr` view (React + Tailwind).
+ * Browser-only: consumed solely by the web serve path (Vite owns JSX +
+ * Tailwind); NEVER Node-imported. The default export is a pure function of
+ * `state`; DOM events call `dispatch(intentName, payload?)`.
+ *
+ * Same logical model as the TUI presenter (`state.board` + `state.cursor`) read
+ * from the SAME portable `core.mjs` — zero shared rendering code with `tui.mjs`
+ * (the contract's accepted hard fork: `draw.*` has no web analog). The outer
+ * chrome (title / status / banner / state chip) is rendered by `<ViewChrome>`,
+ * which wraps this component — so do NOT render it here.
+ *
+ * @module git-pr/web
+ */
+
+import { relAge } from './core.mjs';
+import { Loading, NotReady, ErrorState, Empty } from '@north-light/crouter/web';
+
+/** @typedef {import('./core.mjs').GitPrState} GitPrState */
+
+// ── Status vocabulary (the web analog of tui.mjs's NUMERIC-SGR maps) ──────────
+
+const FILE_GLYPH = {
+  staged: { glyph: '●', cls: 'text-green-600' },
+  modified: { glyph: '○', cls: 'text-amber-600' },
+  untracked: { glyph: '?', cls: 'text-slate-400' },
+  conflict: { glyph: '✗', cls: 'text-red-600' },
+};
+const REVIEW = {
+  approved: { glyph: '✓', cls: 'text-green-600' },
+  changes: { glyph: '✗', cls: 'text-red-600' },
+  review: { glyph: '◌', cls: 'text-slate-400' },
+};
+const CI = {
+  pass: { glyph: '✓', cls: 'text-green-600' },
+  fail: { glyph: '✗', cls: 'text-red-600' },
+  pending: { glyph: '⟳', cls: 'text-amber-600' },
+  none: { glyph: '·', cls: 'text-slate-400' },
+};
+
+// ── Header gauges (the web analog of tui.mjs's drawHeader) ─────────────────────
+
+/** @param {{ g: import('./core.mjs').GitState }} props */
+function Header({ g }) {
+  const now = Date.now();
+  return (
+    <div className="border-b border-slate-200 pb-2">
+      <div className="flex items-baseline gap-2">
+        <span className="font-semibold text-cyan-700">⎇ {g.branch}</span>
+        {g.upstream ? (
+          <span className="text-slate-400">
+            → {g.upstream}
+            {g.ahead ? <span className="ml-1 text-green-600">↑{g.ahead}</span> : null}
+            {g.behind ? <span className="ml-1 text-amber-600">↓{g.behind}</span> : null}
+            {!g.ahead && !g.behind ? <span className="ml-1 text-green-600">✓ up to date</span> : null}
+          </span>
+        ) : (
+          <span className="text-slate-400">· no upstream</span>
+        )}
+        <span className="ml-auto">{treeChip(g)}</span>
+      </div>
+      <div className="mt-0.5 text-slate-600">
+        {g.lastCommit ? (
+          <span className="flex items-baseline gap-2">
+            <span className="text-slate-400">⊙</span>
+            <span className="text-amber-600">{g.lastCommit.sha}</span>
+            <span className="truncate">{g.lastCommit.subject}</span>
+            <span className="ml-auto shrink-0 text-slate-400">{relAge(g.lastCommit.when, now)}</span>
+          </span>
+        ) : (
+          <span className="text-slate-400">⊙ no commits yet</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** @param {import('./core.mjs').GitState} g */
+function treeChip(g) {
+  if (g.files.length === 0) return <span className="text-green-600">✓ clean</span>;
+  const c = g.counts;
+  /** @type {Array<{n:number, word:string, glyph:string, cls:string}>} */
+  const segs = [
+    { n: c.conflict, word: 'conflict', glyph: '✗', cls: 'text-red-600' },
+    { n: c.staged, word: 'staged', glyph: '●', cls: 'text-green-600' },
+    { n: c.modified, word: 'modified', glyph: '○', cls: 'text-amber-600' },
+    { n: c.untracked, word: 'untracked', glyph: '?', cls: 'text-slate-400' },
+  ].filter((s) => s.n);
+  return (
+    <span className="flex gap-3">
+      {segs.map((s, i) => (
+        <span key={i} className={s.cls}>{s.glyph} {s.n} {s.word}</span>
+      ))}
+    </span>
+  );
+}
+
+// ── Board rows (the web analog of tui.mjs's rowToItem) ─────────────────────────
+
+/** @param {{ row: import('./core.mjs').BoardRow, selected: boolean, onClick: () => void }} props */
+function BoardRow({ row, selected, onClick }) {
+  const now = Date.now();
+  const base = `flex items-baseline gap-1.5 rounded px-2 py-0.5 ${selected ? 'bg-slate-200' : ''}`;
+
+  if (row.kind === 'label') {
+    return <li className="px-2 pt-2 pb-0.5 text-xs uppercase tracking-wide text-slate-400">{row.text}</li>;
+  }
+  if (row.kind === 'spacer') {
+    return <li className="h-2" aria-hidden />;
+  }
+  if (row.kind === 'clean') {
+    return (
+      <li className={base} onClick={onClick}>
+        <span className="text-green-600">✓</span>
+        <span className="text-slate-400">nothing to commit, working tree clean</span>
+      </li>
+    );
+  }
+  if (row.kind === 'note') {
+    return (
+      <li className={base} onClick={onClick}>
+        <span className="text-slate-400">·</span>
+        <span className="text-slate-400">{row.text}</span>
+      </li>
+    );
+  }
+  if (row.kind === 'file') {
+    const f = row.file;
+    const g = FILE_GLYPH[f.cls] || FILE_GLYPH.modified;
+    return (
+      <li className={base} onClick={onClick}>
+        <span className={g.cls}>{g.glyph}</span>
+        <span className="text-slate-400">{f.xy.replace(/ /g, '·')}</span>
+        <span className={f.cls === 'conflict' ? 'text-red-600' : ''}>{f.path}</span>
+        {f.add || f.del ? (
+          <span className="ml-auto shrink-0 text-slate-400">+{f.add} −{f.del}</span>
+        ) : null}
+      </li>
+    );
+  }
+  // row.kind === 'pr'
+  const pr = row.pr;
+  const rv = REVIEW[pr.review] || REVIEW.review;
+  const ci = CI[pr.ci] || CI.none;
+  const age = relAge(pr.updatedAt, now);
+  return (
+    <li className={base} onClick={onClick}>
+      <span className={`text-cyan-700 ${pr.current ? 'font-bold' : ''}`}>#{pr.number}</span>
+      <span className={pr.isDraft ? 'text-slate-400' : ''}>{pr.title}</span>
+      {pr.isDraft ? <span className="text-slate-400">(draft)</span> : null}
+      <span className="ml-auto flex shrink-0 items-baseline gap-2">
+        <span className={rv.cls}>{rv.glyph}</span>
+        <span className={ci.cls}>{ci.glyph}</span>
+        {age ? <span className="text-slate-400">{age}</span> : null}
+      </span>
+    </li>
+  );
+}
+
+// ── The view ───────────────────────────────────────────────────────────────────
+
+/**
+ * @param {import('../../core/view/contract.js').ViewProps<GitPrState>} props
+ */
+export default function GitPr({ state, dispatch }) {
+  // ── Whole-view takeovers (no git data to anchor a header). The copy comes
+  //    from the typed SourceError's `display` VERBATIM (the contract display/kind
+  //    split — we never branch on `kind`); only the four-state component is a
+  //    presentation map off `display.level` so the hue matches the TUI (error →
+  //    red ErrorState, action → amber NotReady). ──
+  if (!state.git) {
+    if (state.gitErr) {
+      const d = state.gitErr.display;
+      const Takeover = d.level === 'error' ? ErrorState : NotReady;
+      return (
+        <Takeover
+          headline={d.headline}
+          explanation={d.explanation}
+          nextStep={d.nextStep}
+          onRetry={() => dispatch('refresh')}
+        />
+      );
+    }
+    // No error yet → first-load loading state.
+    return <Loading label="Reading git…" />;
+  }
+
+  const g = state.git;
+
+  // ── Empty reward: clean tree + no open PRs + gh healthy → "All clear". ──
+  const allClear = g.files.length === 0 && state.prs.length === 0 && !state.prNote;
+
+  return (
+    <div
+      className="font-mono text-sm outline-none"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'j' || e.key === 'ArrowDown') { dispatch('cursorDown'); e.preventDefault(); }
+        else if (e.key === 'k' || e.key === 'ArrowUp') { dispatch('cursorUp'); e.preventDefault(); }
+        else if (e.key === 'g') { dispatch('refresh'); }
+      }}
+    >
+      <Header g={g} />
+      {allClear ? (
+        <Empty label={`${g.branch} — clean working tree, no open PRs.`} />
+      ) : (
+        <ul className="mt-1">
+          {state.board.map((row, i) => (
+            <BoardRow key={i} row={row} selected={i === state.cursor} onClick={() => dispatch('select', i)} />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}