@north-light/crouter 0.3.170 → 0.3.172

package/dist/builtin-views/inbox/text.mjs

@@ -1,73 +0,0 @@
-// @ts-check
-/**
- * Combined `inbox` view — the text presenter (`dump`) for the non-TTY / piped
- * path (`crtr view run inbox | cat`). Node-only, no ANSI. A plain snapshot of
- * the merged list + each down source's banner + the host's current banner.
- *
- * The pure helpers `dump` shares with the TUI (badgeFor, unreadCount, labeled,
- * relTimestamp, …) are imported from `core.mjs`.
- *
- * @module inbox/text
- */
-
-import { badgeFor, unreadCount, labeled, relTimestamp, truncate, padEnd, SOURCES_META } from './core.mjs';
-
-/** @typedef {import('./core.mjs').InboxState} InboxState */
-
-const SOURCE_BY_ID = {};
-for (const m of SOURCES_META) SOURCE_BY_ID[m.id] = m;
-
-/**
- * Plain-text snapshot for the non-TTY / piped path.
- * @param {InboxState} state
- * @param {import('../../core/view/contract.js').DumpContext} [ctx]
- * @returns {string}
- */
-export function dump(state, ctx) {
-  const banner = ctx && ctx.banner ? ctx.banner : null;
-  const sigil = (lvl) => (lvl === 'error' ? '✗' : lvl === 'action' ? '▸' : 'ℹ');
-  /** @type {string[]} */
-  const lines = [];
-  const n = unreadCount(state);
-  let head = 'Inbox';
-  if (n) head += ` · ${n} unread`;
-  if (state.filter !== 'all') {
-    const s = SOURCE_BY_ID[state.filter];
-    head += ` · ${s ? s.label : state.filter} only`;
-  }
-  lines.push(head, '');
-
-  let anyDown = false;
-  for (const m of SOURCES_META) {
-    const e = state.banners[m.id];
-    if (e && e.display) {
-      anyDown = true;
-      lines.push(labeled(m.label, e.display.banner));
-    }
-  }
-  if (anyDown) lines.push('');
-
-  if (state.rows.length === 0) {
-    if (state.lastFetch === 0) lines.push('(loading…)');
-    else if (!anyDown) lines.push('✓ All caught up — no messages.');
-  } else {
-    for (const row of state.rows) {
-      const badge = padEnd(badgeFor(row.sourceId).glyph, 2);
-      const dot = row.unread ? '●' : ' ';
-      const snip = truncate((row.snippet || '').replace(/\s+/g, ' ').trim(), 48);
-      lines.push(`[${dot}] ${badge} ${padEnd(row.name || 'Unknown', 20)} ${padEnd(snip, 48)} ${relTimestamp(row.ts)}`);
-    }
-  }
-
-  if (state.openKey && state.thread) {
-    lines.push('', `— ${state.thread.title} —`);
-    if (state.thread.subtitle) lines.push(state.thread.subtitle);
-    for (const m of state.thread.messages || []) {
-      const who = m.fromMe ? 'You' : m.sender || 'Them';
-      lines.push(`${who}: ${(m.text || '').replace(/\s+/g, ' ').trim()}`);
-    }
-  }
-
-  if (banner) lines.push('', sigil(banner.level) + ' ' + banner.msg);
-  return lines.join('\n');
-}

package/dist/builtin-views/inbox/tui.mjs

@@ -1,314 +0,0 @@
-// @ts-check
-/**
- * Combined `inbox` view — the TUI presenter (`render` + `keymap`). Node-only (it
- * uses the host's `Draw` API + the `_lib` draw helpers).
- *
- * `render` is a pure read of state; keystrokes map to named intents through
- * `keymap`. The compose/react bars READ `state.draft`/`state.reactCursor`/
- * `state.mode` (input flows through the `setDraft` capture intent, not a buffer
- * owned here). All state + data logic lives in `core.mjs`.
- *
- * SGR discipline (§2): all hue is NUMERIC SGR codes; every colored element pairs
- * hue with a glyph or weight so it survives NO_COLOR / dumb terminals.
- *
- * @module inbox/tui
- */
-
-import { loadingState, emptyState, errorState, notReadyState } from '../_lib/states.mjs';
-import { spanWidth, centeredStack, splitPanes, wrapText } from './_lib/render.mjs';
-import { badgeFor, pickGuided, EMOJIS, relTimestamp, dayKey, dayLabel } from './core.mjs';
-
-/** @typedef {import('./core.mjs').InboxState} InboxState */
-
-// ── Render ───────────────────────────────────────────────────────────────────
-
-/**
- * The no-rows guided full-content takeover, built from a down source's display.
- * @param {object} draw @param {object} content @param {{label:string, d:any}} guide
- */
-function renderGuided(draw, content, guide) {
-  const d = guide.d;
-  const headline = `${guide.label}: ${d.headline}`;
-  if (d.level === 'error') {
-    errorState(draw, content, {
-      headline,
-      cause: d.explanation,
-      hint: d.nextStep || 'Refresh to retry.',
-    });
-    return;
-  }
-  notReadyState(draw, content, {
-    glyph: d.level === 'action' ? '⚠' : '⊙',
-    glyphFg: d.level === 'action' ? '33' : '36',
-    headline,
-    explanation: d.explanation,
-    nextStep: d.nextStep || undefined,
-  });
-}
-
-/** Two-pane loading skeleton: dim placeholder rows left, a dim caption right. */
-function renderLoadingSkeleton(draw, content) {
-  const { left, right } = splitPanes(draw, content);
-  loadingState(draw, left, { rows: Math.min(5, Math.max(1, left.height)) });
-  centeredStack(draw, right, [[{ text: 'Loading inbox…', style: { dim: true } }]]);
-}
-
-/**
- * Left pane — the merged row list: cursor ▸ · unread ● · source badge · name ·
- * right-flush relative ts, with the dim snippet wrapped onto indented
- * continuation lines beneath the name so it is readable in full.
- * @param {InboxState} state @param {object} draw @param {object} left
- */
-function renderRowList(state, draw, left) {
-  if (left.width <= 0 || left.height <= 0) return;
-  const items = state.rows.map((row, i) => {
-    const isCursor = i === state.cursor;
-    const b = badgeFor(row.sourceId);
-    const glyph = padEnd2(b.glyph || '?'); // 'in' / '@ ' — align names
-    /** @type {object[]} */
-    const spans = [
-      { text: isCursor ? '▸' : ' ', style: isCursor ? { fg: '36', bold: true } : undefined },
-      { text: row.unread ? '●' : ' ', style: row.unread ? { fg: '36', bold: true } : undefined },
-      { text: ' ' },
-      { text: glyph, style: { fg: b.fg || '37', bold: true } }, // badge: hue + glyph (mono-safe)
-      { text: ' ' + (row.name || 'Unknown'), style: row.unread ? { bold: true } : undefined },
-    ];
-    /** @type {any} */
-    const item = { spans };
-    const snip = (row.snippet || '').replace(/\s+/g, ' ').trim();
-    if (snip) {
-      // Wrap under the name (past the cursor/unread/badge gutter) and cap the
-      // block so one chatty row cannot swallow the pane.
-      const indent = ' '.repeat(SNIPPET_INDENT);
-      const wrapped = wrapText(snip, Math.max(1, left.width - SNIPPET_INDENT));
-      const shown = wrapped.slice(0, SNIPPET_MAX_LINES);
-      if (wrapped.length > SNIPPET_MAX_LINES && shown.length) {
-        shown[shown.length - 1] = shown[shown.length - 1].replace(/.$/, '…');
-      }
-      item.lines = shown.map((ln) => [{ text: indent + ln, style: { dim: true } }]);
-    }
-    const ts = relTimestamp(row.ts);
-    if (ts) item.right = [{ text: ts, style: { dim: true } }];
-    return item;
-  });
-  const res = draw.list(left, items, state.cursor, state.scroll);
-  state.scroll = res.scroll;
-}
-
-/** Gutter width the wrapped snippet aligns to (cursor + unread + space + badge). */
-const SNIPPET_INDENT = 6;
-/** Most snippet lines any one row may occupy. */
-const SNIPPET_MAX_LINES = 3;
-
-/** Pad a badge glyph to 2 cols. */
-function padEnd2(s) {
-  const str = String(s == null ? '' : s);
-  return str.length >= 2 ? str.slice(0, 2) : str + ' '.repeat(2 - str.length);
-}
-
-/**
- * Build the thread's flat visual lines with you-vs-them grouping.
- * @param {object[]} messages @param {number} width @param {number} reactTarget index, or -1
- * @returns {object[]}
- */
-function buildThreadLines(messages, width, reactTarget) {
-  /** @type {object[]} */
-  const lines = [];
-  let prevDay = null;
-  messages.forEach((m, idx) => {
-    const day = dayKey(m.ts);
-    if (m.ts && day !== prevDay) {
-      const txt = `── ${dayLabel(m.ts)} ──`;
-      const pad = Math.max(0, Math.floor((width - Array.from(txt).length) / 2));
-      lines.push({ spans: [{ text: ' '.repeat(pad) + txt, style: { dim: true } }] });
-      prevDay = day;
-    }
-    const tick = idx === reactTarget ? [{ text: '▸ ', style: { fg: '36', bold: true } }] : [];
-    const ts = relTimestamp(m.ts);
-    const right = ts ? [{ text: ts, style: { dim: true } }] : undefined;
-    if (m.fromMe) {
-      lines.push({
-        spans: [...tick, { text: '▎ ', style: { fg: '32', bold: true } }, { text: 'You', style: { fg: '32', bold: true } }],
-        right,
-      });
-      for (const bl of wrapText(m.text || '', Math.max(1, width - 2))) {
-        lines.push({ spans: [{ text: '▎ ', style: { fg: '32' } }, { text: bl }] });
-      }
-    } else {
-      lines.push({ spans: [...tick, { text: m.sender || 'Them', style: { fg: '36', bold: true } }], right });
-      for (const bl of wrapText(m.text || '', width)) {
-        lines.push({ spans: [{ text: bl }] });
-      }
-    }
-    if (idx < messages.length - 1) lines.push({ spans: [{ text: '' }] }); // spacer BETWEEN groups
-  });
-  return lines;
-}
-
-/** Paint the thread body (tail-windowed) into `rect`. */
-function renderThreadBody(state, draw, rect, reactTarget) {
-  if (rect.width <= 0 || rect.height <= 0) return;
-  const messages = (state.thread && state.thread.messages) || [];
-  const lines = buildThreadLines(messages, rect.width, reactTarget);
-  const start = Math.max(0, lines.length - rect.height);
-  state.threadScroll = start;
-  let r = rect.row;
-  for (let i = start; i < lines.length && r < rect.row + rect.height; i++, r++) {
-    const ln = lines[i];
-    if (ln.right && ln.right.length) {
-      const rw = spanWidth(ln.right);
-      draw.spans(r, rect.col, ln.spans, Math.max(0, rect.width - rw - 1));
-      draw.spansRight(r, rect.col + rect.width, ln.right, rw);
-    } else {
-      draw.spans(r, rect.col, ln.spans, rect.width);
-    }
-  }
-}
-
-/** The compose bar (reply mode): hairline + label + draft + cursor. */
-function renderComposer(state, draw, right) {
-  const hairRow = right.row + right.height - 2;
-  const barRow = right.row + right.height - 1;
-  draw.hline(hairRow, right.col, right.col + right.width);
-  const label = '✎ Reply ';
-  const labelW = Array.from(label).length;
-  const avail = Math.max(1, right.width - labelW - 1); // 1 cell reserved for the cursor
-  let shown = state.draft;
-  const arr = Array.from(shown);
-  if (arr.length > avail - 1) shown = arr.slice(arr.length - (avail - 1)).join(''); // keep the tail/cursor visible
-  draw.spans(barRow, right.col, [
-    { text: label, style: { fg: '33', bold: true } },
-    { text: shown },
-    { text: '█', style: { fg: '33' } },
-  ], right.width);
-}
-
-/** The react picker bar (react mode): hairline + emoji chip row. */
-function renderReactBar(state, draw, right) {
-  const hairRow = right.row + right.height - 2;
-  const barRow = right.row + right.height - 1;
-  draw.hline(hairRow, right.col, right.col + right.width);
-  /** @type {object[]} */
-  const spans = [{ text: '☺ React ', style: { fg: '33', bold: true } }];
-  EMOJIS.forEach((e, i) => {
-    if (i === state.reactCursor) {
-      spans.push({ text: ' ' });
-      spans.push({ text: '[' + e + ']', style: { bg: '236', reverse: true } }); // accent-bg + brackets/reverse (mono carrier)
-    } else {
-      spans.push({ text: '  ' + e + ' ' });
-    }
-  });
-  draw.spans(barRow, right.col, spans, right.width);
-}
-
-/**
- * Right pane — header (+ optional subtitle) + hairline + grouped body, plus the
- * compose/react bar when in a mode.
- * @param {InboxState} state @param {object} draw @param {object} right
- */
-function renderDetail(state, draw, right) {
-  if (right.width <= 0 || right.height <= 0) return;
-  if (!state.openKey || !state.thread) {
-    centeredStack(draw, right, [
-      [{ text: '✉  ', style: { dim: true } }, { text: 'No conversation open', style: { dim: true } }],
-      [{ text: '' }],
-      [{ text: 'Open a conversation to view it.', style: { dim: true } }],
-    ]);
-    return;
-  }
-  const thread = state.thread;
-  const messages = thread.messages || [];
-  const hasSub = !!thread.subtitle;
-
-  // Header: bold title + right-flush relative time of the latest message.
-  const lastTs = messages.length ? messages[messages.length - 1].ts : (state.openRow ? state.openRow.ts : 0);
-  const ts = relTimestamp(lastTs);
-  const rw = ts ? Array.from(ts).length : 0;
-  draw.spans(right.row, right.col, [{ text: thread.title || 'Conversation', style: { bold: true } }], Math.max(0, right.width - rw - 1));
-  if (ts) draw.spansRight(right.row, right.col + right.width, [{ text: ts, style: { dim: true } }], rw);
-  let headerRows = 1;
-  if (hasSub) {
-    draw.spans(right.row + 1, right.col, [{ text: thread.subtitle, style: { dim: true } }], right.width);
-    headerRows = 2;
-  }
-  draw.hline(right.row + headerRows, right.col, right.col + right.width);
-
-  const composing = state.mode === 'reply';
-  const reacting = state.mode === 'react';
-  const composerRows = composing || reacting ? 2 : 0;
-  const bodyTop = right.row + headerRows + 1;
-  const bodyBottom = right.row + right.height - 1 - composerRows;
-  const bodyRect = { row: bodyTop, col: right.col, width: right.width, height: Math.max(0, bodyBottom - bodyTop + 1) };
-
-  if (messages.length === 0) {
-    centeredStack(draw, bodyRect, [[{ text: 'Loading messages…', style: { dim: true } }]]);
-  } else {
-    renderThreadBody(state, draw, bodyRect, reacting ? messages.length - 1 : -1);
-  }
-
-  if (composing) renderComposer(state, draw, right);
-  else if (reacting) renderReactBar(state, draw, right);
-}
-
-/**
- * Paint. Precedence: no rows → loading skeleton (first paint) / guided panel (a
- * down source) / empty reward; else the two-pane merged inbox.
- * @param {InboxState} 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;
-  if (state.rows.length === 0) {
-    if (state.lastFetch === 0) {
-      renderLoadingSkeleton(draw, content);
-      return;
-    }
-    const guide = pickGuided(state);
-    if (guide) {
-      renderGuided(draw, content, guide);
-      return;
-    }
-    emptyState(draw, content, {
-      headline: 'All caught up',
-      secondary: ['No messages in your inbox.', 'Refresh to check again.'],
-    });
-    return;
-  }
-  const { left, right } = splitPanes(draw, content);
-  renderRowList(state, draw, left);
-  renderDetail(state, draw, right);
-}
-
-// ── keymap ───────────────────────────────────────────────────────────────
-
-/** @param {InboxState} s */
-const listMode = (s) => s.mode === 'list';
-/** @param {InboxState} s */
-const replyMode = (s) => s.mode === 'reply';
-/** @param {InboxState} s */
-const reactMode = (s) => s.mode === 'react';
-
-/** @type {import('../../core/view/contract.js').KeyBinding<InboxState>[]} */
-export const keymap = [
-  // list
-  { bindingId: 'crtr.view.inbox.down', intent: 'cursorDown', when: listMode, hint: { label: 'move' } },
-  { bindingId: 'crtr.view.inbox.up', intent: 'cursorUp', when: listMode },
-  { bindingId: 'crtr.view.inbox.open', intent: 'open', payload: (s) => s.cursor, when: listMode, hint: { label: 'open' } },
-  { bindingId: 'crtr.view.inbox.reply', intent: 'startReply', when: listMode, hint: { label: 'reply' } },
-  { bindingId: 'crtr.view.inbox.react', intent: 'startReact', when: listMode, hint: { label: 'react' } },
-  { bindingId: 'crtr.view.inbox.filter', intent: 'cycleFilter', when: listMode, hint: { label: 'filter' } },
-  { bindingId: 'crtr.view.inbox.refresh', intent: 'refresh', when: listMode, hint: { label: 'refresh' } },
-  { bindingId: 'crtr.view.inbox.connect-linkedin', intent: 'connectLinkedin', when: listMode },
-  { bindingId: 'crtr.view.inbox.connect-gmail', intent: 'connectGmail', when: listMode, hint: { label: 'connect' } },
-  { bindingId: 'crtr.view.inbox.quit', intent: 'quit', when: listMode, hint: { label: 'quit' } },
-  // reply
-  { capture: 'setDraft', when: replyMode, hint: { label: 'reply' } },
-  { bindingId: 'crtr.view.inbox.submit-reply', intent: 'submitReply', when: replyMode, hint: { label: 'send' } },
-  { bindingId: 'crtr.view.inbox.cancel', intent: 'cancelCompose', when: replyMode, hint: { label: 'cancel' } },
-  // react
-  { bindingId: 'crtr.view.inbox.reaction-previous', intent: 'reactPrev', when: reactMode, hint: { label: 'pick' } },
-  { bindingId: 'crtr.view.inbox.reaction-next', intent: 'reactNext', when: reactMode },
-  { bindingId: 'crtr.view.inbox.submit-reaction', intent: 'submitReact', when: reactMode, hint: { label: 'react' } },
-  { bindingId: 'crtr.view.inbox.cancel', intent: 'cancelCompose', when: reactMode, hint: { label: 'cancel' } },
-];

package/dist/builtin-views/inbox/web.jsx

@@ -1,188 +0,0 @@
-// @ts-check
-/**
- * Combined `inbox` view — the WEB presenter (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 (merged `state.rows` + `state.cursor`
- * + `state.thread`) read from the SAME portable `core.mjs` — zero shared
- * rendering code with `tui.mjs`. The outer chrome (title / status / banner) is
- * rendered by `<ViewChrome>`, which wraps this component — so do NOT render it.
- *
- * @module inbox/web
- */
-
-import { Loading, Empty, ErrorState, NotReady } from '@north-light/crouter/web';
-import { badgeFor, pickGuided, EMOJIS, relTimestamp, dayKey, dayLabel } from './core.mjs';
-
-/** @typedef {import('./core.mjs').InboxState} InboxState */
-
-// ── Source badge hues (the web analog of tui.mjs's NUMERIC-SGR badge map) ─────
-
-const BADGE_CLS = { linkedin: 'text-cyan-600', gmail: 'text-red-600' };
-
-/** @param {{ row: import('./core.mjs').UnifiedRow, selected: boolean, onClick: () => void }} props */
-function Row({ row, selected, onClick }) {
-  const cls = BADGE_CLS[row.sourceId] || 'text-slate-400';
-  const snip = (row.snippet || '').replace(/\s+/g, ' ').trim();
-  const ts = relTimestamp(row.ts);
-  return (
-    <li
-      onClick={onClick}
-      className={`flex items-baseline gap-1.5 rounded px-2 py-1 cursor-pointer ${selected ? 'bg-slate-200' : 'hover:bg-slate-100'}`}
-    >
-      <span className={`shrink-0 ${row.unread ? 'text-cyan-600' : 'text-transparent'}`}>●</span>
-      <span className={`shrink-0 font-bold ${cls}`}>{badgeFor(row.sourceId).glyph}</span>
-      <span className={`shrink-0 ${row.unread ? 'font-semibold' : ''}`}>{row.name || 'Unknown'}</span>
-      {snip ? <span className="truncate text-slate-400">{snip}</span> : null}
-      {ts ? <span className="ml-auto shrink-0 text-slate-400">{ts}</span> : null}
-    </li>
-  );
-}
-
-// ── Thread detail (the web analog of tui.mjs's renderDetail) ──────────────────
-
-/** @param {{ state: InboxState, dispatch: (i:string,p?:unknown)=>void }} props */
-function Detail({ state, dispatch }) {
-  if (!state.openKey || !state.thread) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-1 text-slate-400">
-        <div>✉ No conversation open</div>
-        <div className="text-slate-500">Click a conversation to open it.</div>
-      </div>
-    );
-  }
-  const thread = state.thread;
-  const messages = thread.messages || [];
-  let prevDay = null;
-
-  return (
-    <div className="flex h-full flex-col">
-      <div className="border-b border-slate-200 pb-1">
-        <div className="font-semibold">{thread.title || 'Conversation'}</div>
-        {thread.subtitle ? <div className="text-slate-400">{thread.subtitle}</div> : null}
-      </div>
-
-      <div className="flex-1 overflow-y-auto py-2">
-        {messages.length === 0 ? (
-          <div className="text-slate-400">Loading messages…</div>
-        ) : (
-          messages.map((m, i) => {
-            const day = dayKey(m.ts);
-            const divider = m.ts && day !== prevDay ? dayLabel(m.ts) : null;
-            if (m.ts) prevDay = day;
-            return (
-              <div key={i}>
-                {divider ? <div className="my-1 text-center text-xs text-slate-400">── {divider} ──</div> : null}
-                {m.fromMe ? (
-                  <div className="border-l-2 border-green-600 pl-2">
-                    <div className="font-semibold text-green-700">You</div>
-                    <div className="whitespace-pre-wrap">{m.text}</div>
-                  </div>
-                ) : (
-                  <div className="mb-2">
-                    <div className="font-semibold text-cyan-700">{m.sender || 'Them'}</div>
-                    <div className="whitespace-pre-wrap">{m.text}</div>
-                  </div>
-                )}
-              </div>
-            );
-          })
-        )}
-      </div>
-
-      {state.mode === 'reply' ? (
-        <div className="border-t border-slate-200 pt-2">
-          <textarea
-            autoFocus
-            value={state.draft}
-            onChange={(e) => dispatch('setDraft', e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); dispatch('submitReply'); }
-              else if (e.key === 'Escape') { e.preventDefault(); dispatch('cancelCompose'); }
-            }}
-            className="w-full rounded border border-slate-300 p-2 font-mono text-sm outline-none focus:border-slate-500"
-            rows={3}
-            placeholder="Type a reply…"
-          />
-          <div className="mt-1 flex gap-2">
-            <button type="button" onClick={() => dispatch('submitReply')} className="rounded bg-slate-700 px-3 py-1 text-white hover:bg-slate-800">Send</button>
-            <button type="button" onClick={() => dispatch('cancelCompose')} className="rounded border border-slate-300 px-3 py-1 text-slate-700 hover:bg-slate-100">Cancel</button>
-          </div>
-        </div>
-      ) : null}
-
-      {state.mode === 'react' ? (
-        <div className="border-t border-slate-200 pt-2">
-          <div className="flex items-center gap-2">
-            <span className="text-amber-600">☺ React</span>
-            {EMOJIS.map((emoji, i) => (
-              <button
-                type="button"
-                key={emoji}
-                onClick={() => dispatch('submitReact', i)}
-                className={`rounded px-2 py-1 text-lg ${i === state.reactCursor ? 'bg-slate-200' : 'hover:bg-slate-100'}`}
-              >
-                {emoji}
-              </button>
-            ))}
-            <button type="button" onClick={() => dispatch('cancelCompose')} className="ml-auto rounded border border-slate-300 px-3 py-1 text-slate-700 hover:bg-slate-100">Cancel</button>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-// ── The view ───────────────────────────────────────────────────────────────────
-
-/**
- * @param {import('../../core/view/contract.js').ViewProps<InboxState>} props
- */
-export default function Inbox({ state, dispatch }) {
-  // ── Whole-view states (no rows). ──
-  if (state.rows.length === 0) {
-    if (state.lastFetch === 0) return <Loading label="Loading inbox…" />;
-    const guide = pickGuided(state);
-    if (guide) {
-      const d = guide.d;
-      const Takeover = d.level === 'error' ? ErrorState : NotReady;
-      return (
-        <Takeover
-          headline={`${guide.label}: ${d.headline}`}
-          explanation={d.explanation}
-          nextStep={d.nextStep || undefined}
-          onRetry={() => dispatch('refresh')}
-        />
-      );
-    }
-    return <Empty label="All caught up — no messages." />;
-  }
-
-  return (
-    <div
-      className="flex h-full gap-3 font-mono text-sm outline-none"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (state.mode !== 'list') return;
-        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 === 'Enter') { dispatch('open', state.cursor); e.preventDefault(); }
-        else if (e.key === 'g') { dispatch('refresh'); }
-        else if (e.key === 'r') { dispatch('startReply'); }
-        else if (e.key === 'e') { dispatch('startReact'); }
-        else if (e.key === 'f') { dispatch('cycleFilter'); }
-      }}
-    >
-      <ul className="w-2/5 shrink-0 overflow-y-auto border-r border-slate-200 pr-2">
-        {state.rows.map((row, i) => (
-          <Row key={row.key} row={row} selected={i === state.cursor} onClick={() => dispatch('open', i)} />
-        ))}
-      </ul>
-      <div className="min-w-0 flex-1">
-        <Detail state={state} dispatch={dispatch} />
-      </div>
-    </div>
-  );
-}