@north-light/crouter 0.3.170 → 0.3.172

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

@@ -1,69 +0,0 @@
-// @ts-check
-/**
- * LinkedIn Messages — the text presenter (`dump`) for the non-TTY / piped path
- * (`crtr view run linkedin | cat`). Node-only, no ANSI. A plain snapshot of the
- * current state; the host threads its current banner via `ctx`. Surfaces the
- * guided recovery panel (its typed `display`) + the banner so the static path
- * shows guidance, not a blank screen.
- *
- * @module linkedin/text
- */
-
-import { relTimestamp, truncate, padEnd, sortConvos } from './core.mjs';
-
-/** @typedef {import('./core.mjs').LiState} LiState */
-
-/** @param {string|string[]|null|undefined} v @returns {string[]} */
-function toLinesArr(v) {
-  if (v == null) return [];
-  if (Array.isArray(v)) return v.map((s) => String(s == null ? '' : s));
-  return [String(v)];
-}
-
-/**
- * Plain-text snapshot for the non-TTY / piped path.
- * @param {LiState} 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 = [];
-  let n = 0;
-  for (const c of state.convos) if (c.unread) n++;
-  lines.push('LinkedIn Messages' + (n ? ` · ${n} unread` : ''), '');
-
-  if (state.recovery) {
-    const d = state.recovery.display;
-    lines.push(d.headline);
-    for (const e of toLinesArr(d.explanation)) if (e) lines.push('  ' + e);
-    if (d.nextStep) lines.push('  → ' + d.nextStep);
-    if (banner) lines.push('  ' + sigil(banner.level) + ' ' + banner.msg);
-    return lines.join('\n');
-  }
-
-  if (state.convos.length === 0) {
-    if (banner) lines.push(sigil(banner.level) + ' ' + banner.msg);
-    else lines.push(state.lastFetch === 0 ? '(loading…)' : '✓ All caught up — no conversations.');
-  } else {
-    for (const c of sortConvos(state.convos)) {
-      const badge = c.unread ? '●' : ' ';
-      const snip = truncate((c.lastMessage || '').replace(/\s+/g, ' ').trim(), 56);
-      lines.push(`[${badge}] ${padEnd(c.name || 'Unknown', 20)} ${padEnd(snip, 56)} ${relTimestamp(c.ts)}`);
-    }
-  }
-
-  if (state.openUrn && state.thread.length) {
-    const convo = state.convos.find((c) => c.urn === state.openUrn);
-    lines.push('', `— ${convo ? convo.name : state.openUrn} —`);
-    for (const m of state.thread) {
-      const who = m.fromMe ? 'You' : m.sender || 'Them';
-      lines.push(`${who}: ${(m.text || '').replace(/\s+/g, ' ').trim()}`);
-    }
-  }
-
-  if (banner && state.convos.length) lines.push('', sigil(banner.level) + ' ' + banner.msg);
-  return lines.join('\n');
-}

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

@@ -1,413 +0,0 @@
-// @ts-check
-/**
- * LinkedIn Messages — the TUI presenter (`render` + `keymap`) for the `linkedin`
- * view. Node-only (it uses the host's `Draw` API + the `_lib/states.mjs` draw
- * helpers). All state + behavior live in `core.mjs`; this is a pure read of
- * state. Keystrokes map to named intents via `keymap`.
- *
- * The recovery / degraded panels render the typed `SourceError.display` VERBATIM
- * (the contract display/kind split): the presenter maps only `display.level` →
- * glyph + hue, never branching on `kind` and never hardcoding error copy.
- *
- * SGR discipline (§2): all hue is NUMERIC SGR codes (36 cyan, 33 yellow, 32
- * green, 31 red, 90 grey, bg 236); every colored element pairs hue with a glyph
- * or weight so it survives NO_COLOR / dumb terminals.
- *
- * @module linkedin/tui
- */
-
-import { relTimestamp, EMOJIS } from './core.mjs';
-import { loadingState, emptyState, notReadyState } from '../_lib/states.mjs';
-
-/** @typedef {import('./core.mjs').LiState} LiState */
-/** @typedef {import('./core.mjs').Conversation} Conversation */
-/** @typedef {import('./core.mjs').Message} Message */
-/** @typedef {import('../../core/tui/draw.js').Draw} Draw */
-/** @typedef {import('../../core/tui/draw.js').Rect} Rect */
-/** @typedef {import('../../core/tui/draw.js').Span} Span */
-/** @typedef {import('../../core/tui/draw.js').ListItemRow} ListItemRow */
-
-/** Spinner frames for the auto-progress panel glyph (animates via the busy-tick). */
-const SPINNER = ['⟳', '⟲'];
-
-const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
-// ── Helpers (presentation-only) ───────────────────────────────────────────────
-
-/** @param {string|string[]|null|undefined} v @returns {string[]} */
-function toLinesArr(v) {
-  if (v == null) return [];
-  if (Array.isArray(v)) return v.map((s) => String(s == null ? '' : s));
-  return [String(v)];
-}
-
-/** Visible (column) width of a span group. @param {Span[]} spans */
-function spanWidth(spans) {
-  let n = 0;
-  for (const s of spans) n += Array.from(s.text).length;
-  return n;
-}
-
-/** Calendar-day key for day-divider grouping. @param {number} ts @returns {string} */
-function dayKey(ts) {
-  if (!ts) return '';
-  const d = new Date(ts);
-  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
-}
-
-/** Human day label for the divider: Today / Yesterday / Mon D / Mon D, YYYY. */
-function dayLabel(ts, now = Date.now()) {
-  const d = new Date(ts);
-  const n = new Date(now);
-  const same = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-  if (same(d, n)) return 'Today';
-  if (same(d, new Date(now - 86400000))) return 'Yesterday';
-  const mon = MONTHS[d.getMonth()] || '';
-  if (d.getFullYear() === n.getFullYear()) return `${mon} ${d.getDate()}`;
-  return `${mon} ${d.getDate()}, ${d.getFullYear()}`;
-}
-
-/**
- * Word-wrap text to a width (also hard-splits over-long words). Preserves
- * explicit newlines as paragraph breaks.
- * @param {string} text @param {number} width @returns {string[]}
- */
-function wrapText(text, width) {
-  const w = Math.max(1, width | 0);
-  /** @type {string[]} */
-  const out = [];
-  const paragraphs = String(text == null ? '' : text).split('\n');
-  for (const para of paragraphs) {
-    if (para.trim() === '') {
-      out.push('');
-      continue;
-    }
-    let line = '';
-    for (const word of para.split(/\s+/).filter(Boolean)) {
-      let wd = word;
-      while (wd.length > w) {
-        if (line) {
-          out.push(line);
-          line = '';
-        }
-        out.push(wd.slice(0, w));
-        wd = wd.slice(w);
-      }
-      if (line === '') line = wd;
-      else if (line.length + 1 + wd.length <= w) line += ' ' + wd;
-      else {
-        out.push(line);
-        line = wd;
-      }
-    }
-    if (line !== '') out.push(line);
-  }
-  return out;
-}
-
-/**
- * Place a vertically + horizontally centered stack of span-lines in `rect`.
- * @param {Draw} draw @param {Rect} rect @param {Span[][]} lines
- */
-function centeredStack(draw, rect, lines) {
-  if (!rect || rect.width <= 0 || rect.height <= 0 || lines.length === 0) return;
-  const start = rect.row + Math.max(0, Math.floor((rect.height - lines.length) / 2));
-  lines.forEach((spans, i) => {
-    const row = start + i;
-    if (row < rect.row || row >= rect.row + rect.height) return;
-    const w = spanWidth(spans);
-    const col = rect.col + Math.max(0, Math.floor((rect.width - w) / 2));
-    draw.spans(row, col, spans, rect.col + rect.width - col);
-  });
-}
-
-/**
- * Split the content rect into the 1:2 two-pane layout, drawing the `vline` rule.
- * @param {Draw} draw @param {Rect} content
- * @returns {{left: Rect, right: Rect}}
- */
-function splitPanes(draw, content) {
-  const cols = draw.columns(content, [1, 2]);
-  const l = cols[0];
-  const r = cols[1];
-  const vcol = r.col;
-  draw.vline(vcol, content.row, content.row + content.height);
-  const left = { row: content.row, col: l.col, width: Math.max(0, vcol - l.col - 1), height: content.height };
-  const right = { row: content.row, col: vcol + 2, width: Math.max(0, r.col + r.width - (vcol + 2)), height: content.height };
-  return { left, right };
-}
-
-// ── Recovery panel (renders display.* VERBATIM; level → glyph/hue) ────────────
-
-/**
- * Map a SourceError display level to a panel glyph + numeric SGR hue.
- * @param {import('../../core/view/contract.js').BannerLevel} level
- */
-function levelGlyph(level) {
-  if (level === 'action') return { glyph: '⚠', fg: '33' }; // yellow attention
-  if (level === 'info') return { glyph: 'ℹ', fg: '36' }; // cyan notice
-  return { glyph: '⚠', fg: '31' }; // red error
-}
-
-/**
- * The guided-recovery full-content takeover. The copy comes from the typed
- * SourceError display VERBATIM; only the glyph/hue are mapped off `display.level`
- * (or the live spinner frame on an auto-progress branch).
- * @param {LiState} state @param {Draw} draw @param {Rect} content
- */
-function renderRecovery(state, draw, content) {
-  const rec = state.recovery;
-  if (!rec) return;
-  const d = rec.display;
-  let glyph;
-  let glyphFg;
-  let explanation = d.explanation;
-  if (rec.spinner) {
-    glyph = SPINNER[Math.floor(Date.now() / 240) % SPINNER.length] || '⟳';
-    glyphFg = '36'; // cyan working
-    const secs = Math.max(0, Math.floor((Date.now() - (rec.startedAt || Date.now())) / 1000));
-    explanation = toLinesArr(d.explanation).concat([`(${secs}s)`]);
-  } else {
-    const g = levelGlyph(d.level);
-    glyph = g.glyph;
-    glyphFg = g.fg;
-  }
-  notReadyState(draw, content, {
-    glyph,
-    glyphFg,
-    headline: d.headline,
-    explanation,
-    nextStep: d.nextStep || undefined,
-  });
-}
-
-/** Two-pane loading skeleton. @param {LiState} state @param {Draw} draw @param {Rect} content */
-function renderLoadingSkeleton(state, 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 conversations…', style: { dim: true } }]]);
-}
-
-/** Left pane — the conversation list. @param {LiState} state @param {Draw} draw @param {Rect} left */
-function renderConvoList(state, draw, left) {
-  if (left.width <= 0 || left.height <= 0) return;
-  /** @type {ListItemRow[]} */
-  const items = state.convos.map((c, i) => {
-    const isCursor = i === state.convCursor;
-    /** @type {Span[]} */
-    const spans = [
-      { text: isCursor ? '▸' : ' ', style: isCursor ? { fg: '36', bold: true } : undefined },
-      { text: c.unread ? '●' : ' ', style: c.unread ? { fg: '36', bold: true } : undefined },
-      { text: ' ' + (c.name || 'Unknown'), style: c.unread ? { bold: true } : undefined },
-    ];
-    const snippet = (c.lastMessage || '').replace(/\s+/g, ' ').trim();
-    if (snippet) spans.push({ text: '  ' + snippet, style: { dim: true } });
-    const ts = relTimestamp(c.ts);
-    /** @type {ListItemRow} */
-    const item = { spans };
-    if (ts) item.right = [{ text: ts, style: { dim: true } }];
-    return item;
-  });
-  const res = draw.list(left, items, state.convCursor, state.convScroll);
-  state.convScroll = res.scroll;
-}
-
-/**
- * Build the thread's flat visual lines with you-vs-them grouping. Day dividers
- * between date changes; 1 blank spacer between groups. The react target's header
- * gets a cyan ▸ tick.
- * @param {LiState} state @param {number} width @param {number} reactTarget
- * @returns {ListItemRow[]}
- */
-function buildThreadLines(state, width, reactTarget) {
-  /** @type {ListItemRow[]} */
-  const lines = [];
-  let prevDay = null;
-  state.thread.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 < state.thread.length - 1) lines.push({ spans: [{ text: '' }] });
-  });
-  return lines;
-}
-
-/** Paint the thread body (tail-windowed). @param {LiState} state @param {Draw} draw @param {Rect} rect @param {number} reactTarget */
-function renderThreadBody(state, draw, rect, reactTarget) {
-  if (rect.width <= 0 || rect.height <= 0) return;
-  const lines = buildThreadLines(state, 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). @param {LiState} state @param {Draw} draw @param {Rect} right */
-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);
-  let shown = state.draft;
-  const arr = Array.from(shown);
-  if (arr.length > avail - 1) shown = arr.slice(arr.length - (avail - 1)).join('');
-  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). @param {LiState} state @param {Draw} draw @param {Rect} right */
-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 {Span[]} */
-  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 } });
-    } else {
-      spans.push({ text: '  ' + e + ' ' });
-    }
-  });
-  draw.spans(barRow, right.col, spans, right.width);
-}
-
-/** Right pane — the open thread + the compose/react bar when in a mode. @param {LiState} state @param {Draw} draw @param {Rect} right */
-function renderThread(state, draw, right) {
-  if (right.width <= 0 || right.height <= 0) return;
-  const openConvo = state.openUrn ? state.convos.find((c) => c.urn === state.openUrn) : null;
-
-  if (!state.openUrn) {
-    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 headerName = openConvo ? openConvo.name : 'Conversation';
-  const convTs = openConvo ? relTimestamp(openConvo.ts) : '';
-  const rw = convTs ? Array.from(convTs).length : 0;
-  draw.spans(right.row, right.col, [{ text: headerName, style: { bold: true } }], Math.max(0, right.width - rw - 1));
-  if (convTs) draw.spansRight(right.row, right.col + right.width, [{ text: convTs, style: { dim: true } }], rw);
-  draw.hline(right.row + 1, 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 + 2;
-  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 (state.thread.length === 0) {
-    centeredStack(draw, bodyRect, [[{ text: 'Loading messages…', style: { dim: true } }]]);
-  } else {
-    renderThreadBody(state, draw, bodyRect, reacting ? state.thread.length - 1 : -1);
-  }
-
-  if (composing) renderComposer(state, draw, right);
-  else if (reacting) renderReactBar(state, draw, right);
-}
-
-// ── render ─────────────────────────────────────────────────────────────────────
-
-/**
- * Paint the view. Precedence: recovery takeover → loading skeleton → empty
- * reward → the two-pane inbox.
- * @param {LiState} state @param {Draw} draw @param {Rect} content
- */
-export function render(state, draw, content) {
-  if (content.width <= 0 || content.height <= 0) return;
-  if (state.recovery) {
-    renderRecovery(state, draw, content);
-    return;
-  }
-  if (state.convos.length === 0) {
-    if (state.lastFetch === 0) {
-      renderLoadingSkeleton(state, draw, content);
-      return;
-    }
-    emptyState(draw, content, {
-      headline: 'All caught up',
-      secondary: ['No conversations in your inbox.', 'Refresh to check again.'],
-    });
-    return;
-  }
-  const { left, right } = splitPanes(draw, content);
-  renderConvoList(state, draw, left);
-  renderThread(state, draw, right);
-}
-
-// ── keymap (mode-gated bindings → named intents) ──────────────────────────────
-
-/** @param {LiState} s */
-const isList = (s) => s.mode === 'list';
-/** @param {LiState} s */
-const isReply = (s) => s.mode === 'reply';
-/** @param {LiState} s */
-const isReact = (s) => s.mode === 'react';
-/** @param {LiState} s */
-const isComposeOrReact = (s) => s.mode === 'reply' || s.mode === 'react';
-
-/**
- * Input→intent map. List-mode navigation + entry into compose/react; the compose
- * bar uses a `capture` binding (the host's line-editor dispatches setDraft with
- * the next draft). Footer hints come from these `hint` fields (single source of
- * truth).
- * @type {import('../../core/view/contract.js').KeyBinding<LiState>[]}
- */
-export const keymap = [
-  // ── List mode ──
-  { bindingId: 'crtr.view.linkedin.down', intent: 'cursorDown', when: isList, hint: { label: 'move' } },
-  { bindingId: 'crtr.view.linkedin.up', intent: 'cursorUp', when: isList },
-  { bindingId: 'crtr.view.linkedin.open', intent: 'openThread', payload: (s) => s.convCursor, when: isList, hint: { label: 'open' } },
-  { bindingId: 'crtr.view.linkedin.reply', intent: 'startReply', when: isList, hint: { label: 'reply' } },
-  { bindingId: 'crtr.view.linkedin.react', intent: 'startReact', when: isList, hint: { label: 'react' } },
-  { bindingId: 'crtr.view.linkedin.refresh', intent: 'refresh', when: isList, hint: { label: 'refresh' } },
-  { bindingId: 'crtr.view.linkedin.quit', intent: 'quit', when: isList, hint: { label: 'quit' } },
-  // ── Reply mode ──
-  { capture: 'setDraft', when: isReply, hint: { label: 'reply' } },
-  { bindingId: 'crtr.view.linkedin.submit-reply', intent: 'submitReply', when: isReply, hint: { label: 'send' } },
-  { bindingId: 'crtr.view.linkedin.cancel', intent: 'cancelCompose', when: isComposeOrReact, hint: { label: 'cancel' } },
-  // ── React mode ──
-  { bindingId: 'crtr.view.linkedin.reaction-previous', intent: 'reactPrev', when: isReact, hint: { label: 'pick' } },
-  { bindingId: 'crtr.view.linkedin.reaction-next', intent: 'reactNext', when: isReact },
-  { bindingId: 'crtr.view.linkedin.submit-reaction', intent: 'submitReact', when: isReact, hint: { label: 'react' } },
-];

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

@@ -1,206 +0,0 @@
-// @ts-check
-/**
- * LinkedIn Messages — the WEB presenter for the `linkedin` 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 (the two-pane inbox: conversation list
- * 1 : thread 2, compose/react modes, the discover→auth→settle recovery panel)
- * read from the SAME portable `core.mjs` — zero shared rendering code with
- * `tui.mjs`. The recovery / degraded panels render the typed `SourceError.
- * display` VERBATIM (the contract display/kind split): the presenter maps only
- * `display.level` → a four-state component, never branching on `kind`. Outer
- * chrome (title / status / banner / chip) is rendered by `<ViewChrome>`.
- *
- * @module linkedin/web
- */
-
-import { relTimestamp, EMOJIS } from './core.mjs';
-import { Loading, Empty, ErrorState, NotReady } from '@north-light/crouter/web';
-
-/** @typedef {import('./core.mjs').LiState} LiState */
-
-// ── Recovery takeover (renders display.* VERBATIM; level → component) ──────────
-
-/** @param {{ rec: import('./core.mjs').Recovery, dispatch: (i:string, p?:unknown)=>void }} props */
-function Recovery({ rec, dispatch }) {
-  const d = rec.display;
-  if (rec.spinner) return <Loading label={d.headline} />;
-  const Comp = d.level === 'error' ? ErrorState : NotReady;
-  return (
-    <Comp
-      headline={d.headline}
-      explanation={d.explanation}
-      nextStep={d.nextStep || undefined}
-      onRetry={() => dispatch('refresh')}
-    />
-  );
-}
-
-// ── Conversation list (left pane) ──────────────────────────────────────────────
-
-/** @param {{ state: LiState, dispatch: (i:string, p?:unknown)=>void }} props */
-function ConvoList({ state, dispatch }) {
-  return (
-    <ul className="divide-y divide-slate-100 overflow-y-auto">
-      {state.convos.map((c, i) => {
-        const selected = i === state.convCursor;
-        const open = c.urn === state.openUrn;
-        const ts = relTimestamp(c.ts);
-        return (
-          <li
-            key={c.urn || i}
-            onClick={() => dispatch('openThread', i)}
-            className={`flex cursor-pointer items-baseline gap-2 px-3 py-2 ${selected ? 'bg-slate-100' : ''} ${open ? 'border-l-2 border-cyan-500' : 'border-l-2 border-transparent'}`}
-          >
-            <span className={`shrink-0 ${c.unread ? 'text-cyan-600' : 'text-transparent'}`}>●</span>
-            <span className="min-w-0 flex-1">
-              <span className={c.unread ? 'font-semibold' : ''}>{c.name || 'Unknown'}</span>
-              {c.lastMessage ? (
-                <span className="ml-2 truncate text-slate-400">{c.lastMessage.replace(/\s+/g, ' ').trim()}</span>
-              ) : null}
-            </span>
-            {ts ? <span className="shrink-0 text-xs text-slate-400">{ts}</span> : null}
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-// ── Thread (right pane) ────────────────────────────────────────────────────────
-
-/** @param {{ m: import('./core.mjs').Message }} props */
-function MessageGroup({ m }) {
-  const ts = relTimestamp(m.ts);
-  if (m.fromMe) {
-    return (
-      <div className="border-l-2 border-green-500 pl-2">
-        <div className="flex items-baseline justify-between">
-          <span className="font-semibold text-green-600">You</span>
-          {ts ? <span className="text-xs text-slate-400">{ts}</span> : null}
-        </div>
-        <div className="whitespace-pre-wrap text-slate-700">{m.text}</div>
-      </div>
-    );
-  }
-  return (
-    <div>
-      <div className="flex items-baseline justify-between">
-        <span className="font-semibold text-cyan-700">{m.sender || 'Them'}</span>
-        {ts ? <span className="text-xs text-slate-400">{ts}</span> : null}
-      </div>
-      <div className="whitespace-pre-wrap text-slate-700">{m.text}</div>
-    </div>
-  );
-}
-
-/** @param {{ state: LiState, dispatch: (i:string, p?:unknown)=>void }} props */
-function Thread({ state, dispatch }) {
-  const openConvo = state.openUrn ? state.convos.find((c) => c.urn === state.openUrn) : null;
-  if (!state.openUrn) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-1 p-8 text-center text-slate-400">
-        <div>✉ No conversation open</div>
-        <div className="text-sm">Select a conversation to open it.</div>
-      </div>
-    );
-  }
-  return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-baseline justify-between border-b border-slate-200 px-3 py-2">
-        <span className="font-semibold">{openConvo ? openConvo.name : 'Conversation'}</span>
-        {openConvo && relTimestamp(openConvo.ts) ? (
-          <span className="text-xs text-slate-400">{relTimestamp(openConvo.ts)}</span>
-        ) : null}
-      </div>
-      <div className="flex-1 space-y-3 overflow-y-auto px-3 py-3">
-        {state.thread.length === 0 ? (
-          <div className="text-slate-400">Loading messages…</div>
-        ) : (
-          state.thread.map((m, i) => <MessageGroup key={m.urn || i} m={m} />)
-        )}
-      </div>
-      {state.mode === 'reply' ? <Composer state={state} dispatch={dispatch} /> : null}
-      {state.mode === 'react' ? <ReactBar state={state} dispatch={dispatch} /> : null}
-    </div>
-  );
-}
-
-/** @param {{ state: LiState, dispatch: (i:string, p?:unknown)=>void }} props */
-function Composer({ state, dispatch }) {
-  return (
-    <div className="border-t border-slate-200 p-2">
-      <textarea
-        autoFocus
-        rows={2}
-        value={state.draft}
-        placeholder="Reply…  (Enter to send · Esc to cancel)"
-        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 resize-none rounded border border-slate-300 p-2 font-mono text-sm outline-none focus:border-amber-500"
-      />
-    </div>
-  );
-}
-
-/** @param {{ state: LiState, dispatch: (i:string, p?:unknown)=>void }} props */
-function ReactBar({ state, dispatch }) {
-  return (
-    <div className="flex items-center gap-2 border-t border-slate-200 p-2">
-      <span className="text-amber-600">☺ React</span>
-      {EMOJIS.map((e, i) => (
-        <button
-          key={e}
-          type="button"
-          onClick={() => { dispatch('reactPick', i); dispatch('submitReact'); }}
-          className={`rounded px-2 py-1 text-lg ${i === state.reactCursor ? 'bg-slate-200' : ''} hover:bg-slate-100`}
-        >
-          {e}
-        </button>
-      ))}
-      <button type="button" onClick={() => dispatch('cancelCompose')} className="ml-auto text-sm text-slate-500 hover:text-slate-700">
-        Esc cancel
-      </button>
-    </div>
-  );
-}
-
-// ── The view ───────────────────────────────────────────────────────────────────
-
-/** @param {import('../../core/view/contract.js').ViewProps<LiState>} props */
-export default function LinkedIn({ state, dispatch }) {
-  if (state.recovery) return <Recovery rec={state.recovery} dispatch={dispatch} />;
-
-  if (state.convos.length === 0) {
-    if (state.lastFetch === 0) return <Loading label="Loading conversations…" />;
-    return <Empty label="All caught up — no conversations in your inbox." />;
-  }
-
-  return (
-    <div
-      className="grid h-full grid-cols-3 font-mono text-sm outline-none"
-      tabIndex={0}
-      onKeyDown={(e) => {
-        if (state.mode !== 'list') return;
-        if (e.key === 'j' || e.key === 'ArrowDown') { e.preventDefault(); dispatch('cursorDown'); }
-        else if (e.key === 'k' || e.key === 'ArrowUp') { e.preventDefault(); dispatch('cursorUp'); }
-        else if (e.key === 'Enter') { e.preventDefault(); dispatch('openThread', state.convCursor); }
-        else if (e.key === 'r') { e.preventDefault(); dispatch('startReply'); }
-        else if (e.key === 'e') { e.preventDefault(); dispatch('startReact'); }
-        else if (e.key === 'g') { dispatch('refresh'); }
-      }}
-    >
-      <div className="col-span-1 border-r border-slate-200">
-        <ConvoList state={state} dispatch={dispatch} />
-      </div>
-      <div className="col-span-2">
-        <Thread state={state} dispatch={dispatch} />
-      </div>
-    </div>
-  );
-}