@crouton-kit/crouter 0.3.18 → 0.3.20

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

@@ -0,0 +1,1171 @@
+// @ts-check
+/**
+ * LinkedIn Messages — the crtr `linkedin` view, reskinned to the approved
+ * crtr-views visual + interaction design (§5 of crtr-views-visual-design.md).
+ *
+ * Self-contained ESM. Imports its data layer from `./client.mjs` and the shared
+ * standard-state body helpers from `../_lib/states.mjs` RELATIVELY — and imports
+ * NOTHING from crtr. The host injects the `Draw` + `ViewHost` API and dynamically
+ * `import()`s this module's DEFAULT EXPORT.
+ *
+ * Two-pane inbox (conversation list 1 : thread 2, split by a `vline`):
+ *   • conversation rows: cursor tick ▸ · unread dot ● · name · dim snippet ·
+ *     right-flush relative timestamp; sorted unread-first then newest.
+ *   • thread: you-vs-them grouping (cyan them / green ▎ tick you), day dividers,
+ *     tail-windowing; compose (`r`) + react (`e`) as first-class modes.
+ *   • the not-ready / auto-open recovery state machine: each ClientError maps to
+ *     a behavior + guided full-content panel + state chip; auto-fixes drive the
+ *     browser to the inbox and bounded-poll for readiness — never a dead-end.
+ *
+ * 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/view
+ */
+
+import {
+  discoverTab,
+  getContext,
+  listConversations,
+  viewConversation,
+  sendMessage,
+  markConversationAsRead,
+  reactToMessage,
+  openMessagingTab,
+  navigateToMessaging,
+} from './client.mjs';
+import { loadingState, emptyState, errorState, notReadyState } from '../_lib/states.mjs';
+
+/** @typedef {import('./client.mjs').LiContext} LiContext */
+/** @typedef {import('./client.mjs').Conversation} Conversation */
+/** @typedef {import('./client.mjs').Message} Message */
+/** @typedef {import('./client.mjs').ClientError} ClientError */
+
+/**
+ * A guided-recovery panel descriptor (the full-content takeover, §5). `null` when
+ * the view is ready (or keeping last-known content under a banner).
+ * @typedef {Object} Recovery
+ * @property {'guided'|'error'} variant  'error' → the ✗ red errorState block; else notReadyState.
+ * @property {string} glyph              Panel glyph (overridden by the live spinner frame when `spinner`).
+ * @property {string} glyphFg            Numeric SGR hue for the glyph ('36' working, '33'/'31' blocked).
+ * @property {string} headline           Bold headline naming the state.
+ * @property {string|string[]} explanation  Dim explanatory line(s).
+ * @property {string|null} nextStep      The explicit call-to-action (default weight).
+ * @property {boolean} spinner           Auto-progress: animate the glyph + show elapsed (Ns).
+ * @property {number} [startedAt]        Epoch ms the auto-progress began (for the live (Ns) counter).
+ */
+
+/**
+ * The view's single mutable state object. The view owns it; hooks mutate it in
+ * place.
+ * @typedef {Object} LiState
+ * @property {LiContext|null} ctx        Cached after the first getContext().
+ * @property {string|null} target        Discovered/opened CDP tab id (or options.target).
+ * @property {string|undefined} port     options.port passthrough.
+ * @property {Conversation[]} convos     Inbox, sorted unread-first then newest.
+ * @property {number} convCursor         Index into convos (left pane cursor).
+ * @property {number} convScroll         draw.list scroll for the left pane.
+ * @property {string|null} openUrn       URN of the open conversation (right pane).
+ * @property {Message[]} thread          Messages of the open conversation.
+ * @property {number} threadScroll       Computed top line of the thread window.
+ * @property {'list'|'reply'|'react'} mode  Input mode.
+ * @property {string} draft              Reply input buffer (view owns input).
+ * @property {number} reactCursor        Index into EMOJIS.
+ * @property {number} lastFetch          Epoch ms of the last successful refresh.
+ * @property {Recovery|null} recovery    Active guided-recovery panel (full-content takeover), or null.
+ * @property {boolean} loginTabOpened   True once the login tab has been opened for the current not-logged-in episode; reset on ready so a later logout re-opens exactly once.
+ */
+
+/** Fixed emoji set for the react picker. */
+const EMOJIS = ['👍', '❤️', '😂', '🔥', '👏', '😮'];
+
+/** How many conversations to request per refresh. */
+const CONVO_COUNT = 25;
+
+/** Settle-poll bounds (§5): retry readiness up to N times, spaced ~MS, after an
+ *  auto open/navigate — a hard ceiling so the flow never spins forever. */
+const SETTLE_MAX = 5;
+const SETTLE_INTERVAL_MS = 1200;
+
+/** ClientError kinds that waiting can't fix — stop the settle-poll and guide. */
+const HARD_STOP = new Set(['no-cdp', 'not-logged-in', 'capture-not-dev']);
+
+/** Spinner frames for the auto-progress panel glyph (animates via the busy-tick). */
+const SPINNER = ['⟳', '⟲'];
+
+/** Month abbreviations for the timestamp / day-divider ladder. */
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+/** @param {number} ms @returns {Promise<void>} */
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+/**
+ * Sort conversations unread-first, then newest (ts desc). Non-mutating.
+ * @param {Conversation[]} convos
+ * @returns {Conversation[]}
+ */
+function sortConvos(convos) {
+  return convos.slice().sort((a, b) => {
+    if (!!a.unread !== !!b.unread) return a.unread ? -1 : 1;
+    return (b.ts || 0) - (a.ts || 0);
+  });
+}
+
+/** @param {LiState} state @returns {{target:string|undefined, port:string|undefined}} */
+function baseOpts(state) {
+  return { target: state.target || undefined, port: state.port };
+}
+
+/** @param {string} s @param {number} n @returns {string} */
+function truncate(s, n) {
+  const str = String(s == null ? '' : s);
+  return str.length > n ? str.slice(0, Math.max(0, n - 1)) + '…' : str;
+}
+
+/** @param {string} s @param {number} n @returns {string} */
+function padEnd(s, n) {
+  const str = String(s == null ? '' : s);
+  return str.length >= n ? str.slice(0, n) : str + ' '.repeat(n - str.length);
+}
+
+/** @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)];
+}
+
+/**
+ * Relative-timestamp ladder (§5), max ~5 cols: now / {m}m / {h}h / {d}d /
+ * `Mon D` (this year) / `Mon ʼYY` (prior year).
+ * @param {number} ts epoch ms (0 ⇒ '')
+ * @param {number} [now]
+ * @returns {string}
+ */
+function relTimestamp(ts, now = Date.now()) {
+  if (!ts) return '';
+  const s = Math.floor((now - ts) / 1000);
+  if (s < 60) return 'now';
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h`;
+  const d = Math.floor(h / 24);
+  if (d < 7) return `${d}d`;
+  const dt = new Date(ts);
+  const mon = MONTHS[dt.getMonth()] || '';
+  const cur = new Date(now);
+  if (dt.getFullYear() === cur.getFullYear()) return `${mon} ${dt.getDate()}`;
+  return `${mon} ʼ${String(dt.getFullYear()).slice(-2)}`;
+}
+
+/** 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;
+}
+
+/**
+ * Decide whether a keystroke is a printable character to append to the draft.
+ * @param {{input:string, key:any}} k @returns {boolean}
+ */
+function isPrintable(k) {
+  const key = k.key || {};
+  if (key.ctrl || key.meta) return false;
+  if (key.return || key.escape || key.backspace || key.tab || key.shiftTab) return false;
+  if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow) return false;
+  const ch = k.input;
+  if (!ch || ch.length === 0) return false;
+  const code = ch.codePointAt(0);
+  if (code == null) return false;
+  if (code < 0x20 || code === 0x7f) return false; // C0 controls + DEL
+  return true;
+}
+
+/** Visible (column) width of a span group. @param {import('../../core/tui/draw.js').Span[]} spans */
+function spanWidth(spans) {
+  let n = 0;
+  for (const s of spans) n += Array.from(s.text).length;
+  return n;
+}
+
+/**
+ * Place a vertically + horizontally centered stack of span-lines in `rect`.
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} rect
+ * @param {import('../../core/tui/draw.js').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
+ * between the panes (§5 / §2: a quiet separator, not a box). Returns the inner
+ * list/thread rects (the left list owns col 0 for its cursor tick = the gutter;
+ * the thread sits one cell right of the rule).
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} content
+ * @returns {{left: import('../../core/tui/draw.js').Rect, right: import('../../core/tui/draw.js').Rect}}
+ */
+function splitPanes(draw, content) {
+  const cols = draw.columns(content, [1, 2]);
+  const l = cols[0];
+  const r = cols[1];
+  const vcol = r.col; // the boundary column carries the rule
+  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 };
+}
+
+// ── Error → guided recovery descriptor ──────────────────────────────────────
+
+/**
+ * Map a typed {@link ClientError} to its recovery descriptor (the §5 state-
+ * machine table). `autoFix` marks the self-healing branches; the rest carry the
+ * guided panel text + the banner that drives the title state chip.
+ * @param {ClientError} error
+ * @returns {{autoFix?:'open'|'navigate', variant?:'error'|'inline', glyph?:string, glyphFg?:string,
+ *   headline?:string, explanation?:string|string[], nextStep?:string, keepContent?:boolean,
+ *   bannerMsg?:string, bannerLevel?:import('../../core/tui/contract.js').BannerLevel}}
+ */
+function describeError(error) {
+  const kind = error && error.kind;
+  switch (kind) {
+    case 'no-tab':
+      return {
+        autoFix: 'open',
+        headline: 'Opening LinkedIn…',
+        explanation: 'No messaging tab was open — opening one and waiting for it to load.',
+      };
+    case 'not-messaging':
+      return {
+        autoFix: 'navigate',
+        headline: 'Opening your inbox…',
+        explanation: 'Found LinkedIn on another page — switching it to Messages.',
+      };
+    case 'not-logged-in':
+      return {
+        glyph: '⚠', glyphFg: '33',
+        headline: 'Log in to continue',
+        explanation: 'LinkedIn needs a sign-in in the browser.',
+        bannerMsg: 'Log in in the opened tab, then press r', bannerLevel: 'action',
+      };
+    case 'no-cdp':
+      return {
+        glyph: '⚠', glyphFg: '31',
+        headline: 'No debuggable browser',
+        explanation: 'crtr drives a browser over CDP and none is running.',
+        nextStep: 'Launch Arc, or Chrome with --remote-debugging-port=9222, then press r',
+        bannerMsg: 'No debuggable browser — launch one, then press r', bannerLevel: 'error',
+      };
+    case 'rate-limited':
+      return {
+        glyph: '⚠', glyphFg: '33',
+        headline: 'LinkedIn is throttling',
+        explanation: 'Too many requests — waiting before trying again.',
+        nextStep: 'Press g to retry',
+        keepContent: true,
+        bannerMsg: 'LinkedIn is throttling — waiting, then retry with g', bannerLevel: 'info',
+      };
+    case 'not-connection':
+      return { variant: 'inline', bannerMsg: 'Can only message 1st-degree connections', bannerLevel: 'error' };
+    case 'capture-not-dev':
+      return {
+        glyph: '⚠', glyphFg: '31',
+        headline: 'Browser bridge unavailable',
+        explanation: 'This view needs a capture dev checkout (vault/ + esbuild).',
+        bannerMsg: 'Browser bridge unavailable — capture dev checkout required', bannerLevel: 'error',
+      };
+    case 'error':
+    default:
+      return {
+        variant: 'error',
+        headline: 'Something went wrong',
+        explanation: (error && /** @type {any} */ (error).message) || 'Unknown error.',
+        nextStep: 'Press g to retry.',
+        bannerMsg: (error && /** @type {any} */ (error).message) || 'Something went wrong', bannerLevel: 'error',
+      };
+  }
+}
+
+/**
+ * Apply a non-auto-fix descriptor: set (or clear) the guided panel + the banner
+ * that drives the state chip. `inline` errors and `keepContent` (rate-limited
+ * with a populated inbox) keep the last-known content instead of taking over.
+ * @param {LiState} state
+ * @param {import('../../core/tui/contract.js').ViewHost} host
+ * @param {ReturnType<typeof describeError>} d
+ */
+function applyGuided(state, host, d) {
+  host.setStatus(null);
+  host.setMode(null);
+  if (d.variant === 'inline' || (d.keepContent && state.convos.length)) {
+    state.recovery = null;
+  } else {
+    state.recovery = {
+      variant: d.variant === 'error' ? 'error' : 'guided',
+      glyph: d.glyph || '⚠',
+      glyphFg: d.glyphFg || '31',
+      headline: d.headline || 'Not ready',
+      explanation: d.explanation || '',
+      nextStep: d.nextStep || null,
+      spinner: false,
+    };
+  }
+  if (d.bannerMsg) host.setBanner(d.bannerMsg, d.bannerLevel || 'error');
+  else host.setError(null);
+}
+
+/**
+ * The recovery state machine. Runs inside `refresh` (the single-flight lane).
+ * Auto-fix branches drive the browser (open/navigate) then settle-poll; the rest
+ * fall straight to a guided panel. Never re-entrant, never a dead-end.
+ * @param {LiState} state
+ * @param {import('../../core/tui/contract.js').ViewHost} host
+ * @param {ClientError} error
+ */
+async function recover(state, host, error) {
+  const d = describeError(error);
+  if (d.autoFix) {
+    host.setMode(null);
+    host.setError(null);
+    state.recovery = {
+      variant: 'guided', glyph: '⟳', glyphFg: '36',
+      headline: d.headline || 'Working…', explanation: d.explanation || '',
+      nextStep: null, spinner: true, startedAt: Date.now(),
+    };
+    host.setStatus(d.headline || 'Working…');
+    const fix = d.autoFix === 'open'
+      ? await openMessagingTab({ port: state.port })
+      : await navigateToMessaging({ target: state.target || undefined, port: state.port });
+    if (!fix.ok) {
+      applyGuided(state, host, describeError(fix.error));
+      return;
+    }
+    if (d.autoFix === 'open' && fix.data) state.target = fix.data;
+    state.ctx = null; // re-read auth for the (possibly new) tab/page
+    await settlePoll(state, host);
+    return;
+  }
+  // not-logged-in: open the messaging tab ONCE so the login page is visible, then
+  // STOP (§5). Logged out, LinkedIn redirects /messaging/ → /login|/authwall, so
+  // capture's URL-match misses and a NEW tab would be spawned on EVERY 30s
+  // auto-poll. Gate the open to once per episode; onReady() resets the flag so a
+  // later logout re-opens exactly once.
+  if (error && error.kind === 'not-logged-in' && !state.loginTabOpened) {
+    const o = await openMessagingTab({ port: state.port });
+    if (o.ok && o.data) state.target = o.data;
+    state.loginTabOpened = true;
+  }
+  applyGuided(state, host, d);
+}
+
+/**
+ * Bounded settle-poll after an auto open/navigate (§5): retry readiness up to
+ * SETTLE_MAX times spaced SETTLE_INTERVAL_MS, narrating elapsed seconds via
+ * setStatus (visible through the busy-tick repaint) and the panel's live (Ns).
+ * On success → ready + paint. On a hard-stop error → guided. On exhaustion →
+ * action banner "Still loading — press g to retry" over the panel (no infinite
+ * spin).
+ * @param {LiState} state
+ * @param {import('../../core/tui/contract.js').ViewHost} host
+ */
+async function settlePoll(state, host) {
+  for (let i = 1; i <= SETTLE_MAX; i++) {
+    await sleep(SETTLE_INTERVAL_MS);
+    const secs = state.recovery && state.recovery.startedAt
+      ? Math.max(0, Math.floor((Date.now() - state.recovery.startedAt) / 1000))
+      : i;
+    host.setStatus(`Loading messages… (${secs}s)`);
+    const r = await attemptLoad(state);
+    if (r.ok) {
+      onReady(state, host);
+      return;
+    }
+    if (HARD_STOP.has(r.error.kind)) {
+      applyGuided(state, host, describeError(r.error));
+      return;
+    }
+    // transient (no-tab / not-messaging / rate-limited / error) → keep polling
+  }
+  if (state.recovery) state.recovery.spinner = false;
+  host.setStatus(null);
+  host.setBanner('Still loading — press g to retry', 'action');
+}
+
+/**
+ * One readiness attempt: discover the tab (unless supplied/known), read auth
+ * context once, list conversations, and reload the open thread if any. Returns a
+ * Result-shaped value ({ok:true} or the first ClientError) — never throws.
+ * @param {LiState} state
+ * @returns {Promise<{ok:true} | {ok:false, error:ClientError}>}
+ */
+async function attemptLoad(state) {
+  if (!state.target) {
+    const r = await discoverTab({ port: state.port });
+    if (!r.ok) return r;
+    state.target = r.data;
+  }
+  if (!state.ctx) {
+    const r = await getContext(baseOpts(state));
+    if (!r.ok) return r;
+    state.ctx = r.data;
+  }
+  const lc = await listConversations({
+    ...baseOpts(state),
+    csrf: state.ctx.csrf,
+    memberId: state.ctx.memberId,
+    count: CONVO_COUNT,
+  });
+  if (!lc.ok) return lc;
+  state.convos = sortConvos(lc.data);
+  if (state.convCursor >= state.convos.length) state.convCursor = Math.max(0, state.convos.length - 1);
+  if (state.openUrn) {
+    const vc = await viewConversation({
+      ...baseOpts(state),
+      csrf: state.ctx.csrf,
+      conversationUrn: state.openUrn,
+      myMemberId: state.ctx.memberId,
+    });
+    if (vc.ok) state.thread = vc.data; // a thread-only failure is non-fatal
+  }
+  return { ok: true };
+}
+
+/**
+ * Mark the view ready: clear the recovery panel + banner, refresh the live
+ * unread subtitle, stamp lastFetch.
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ */
+function onReady(state, host) {
+  state.recovery = null;
+  state.lastFetch = Date.now();
+  state.loginTabOpened = false; // a fresh ready resets the once-per-episode login-tab gate
+  host.setStatus(null);
+  host.setError(null);
+  if (state.mode === 'list') host.setMode(null);
+  updateUnread(state, host);
+}
+
+/** Drive the live "N unread" title subtitle (null ⇒ manifest default / nothing). */
+function updateUnread(state, host) {
+  let n = 0;
+  for (const c of state.convos) if (c.unread) n++;
+  host.setSubtitle(n > 0 ? `${n} unread` : null);
+}
+
+/**
+ * Set the right severity banner for a per-action ClientError (open/send/react).
+ * @param {import('../../core/tui/contract.js').ViewHost} host @param {ClientError} error
+ */
+function bannerError(host, error) {
+  const d = describeError(error);
+  if (d.bannerMsg) host.setBanner(d.bannerMsg, d.bannerLevel || 'error');
+  else host.setError(d.headline || (error && /** @type {any} */ (error).message) || 'Error');
+}
+
+// ── Refresh (data lane) ──────────────────────────────────────────────────────
+
+/**
+ * Fetch the inbox (and the open thread). Runs in the host's single-flight lane:
+ * on launch, on `refreshMs`, and on `{type:'refresh'}`. On failure, hands off to
+ * the recovery state machine. Skips auto-polls while composing/reacting so a poll
+ * can't disrupt input.
+ * @param {LiState} state
+ * @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {Promise<void>}
+ */
+async function refresh(state, host) {
+  if (state.mode !== 'list') return;
+  host.setStatus('Loading…');
+  const r = await attemptLoad(state);
+  if (r.ok) {
+    onReady(state, host);
+    return;
+  }
+  await recover(state, host, r.error);
+}
+
+// ── Render ───────────────────────────────────────────────────────────────────
+
+/**
+ * The guided-recovery full-content takeover (§4 not-ready / §5 panels).
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} content
+ */
+function renderRecovery(state, draw, content) {
+  const rec = state.recovery;
+  if (!rec) return;
+  if (rec.variant === 'error') {
+    errorState(draw, content, {
+      headline: rec.headline,
+      cause: rec.explanation,
+      hint: rec.nextStep || 'Press g to retry.',
+    });
+    return;
+  }
+  let glyph = rec.glyph;
+  let explanation = rec.explanation;
+  if (rec.spinner) {
+    glyph = SPINNER[Math.floor(Date.now() / 240) % SPINNER.length] || rec.glyph;
+    const secs = Math.max(0, Math.floor((Date.now() - (rec.startedAt || Date.now())) / 1000));
+    explanation = toLinesArr(rec.explanation).concat([`(${secs}s)`]);
+  }
+  notReadyState(draw, content, {
+    glyph,
+    glyphFg: rec.glyphFg,
+    headline: rec.headline,
+    explanation,
+    nextStep: rec.nextStep || undefined,
+  });
+}
+
+/**
+ * Two-pane loading skeleton (§4 loading): dim placeholder rows on the left, a dim
+ * caption on the right, split by the rule.
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').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 (§5 row anatomy), drawn through draw.list so
+ * the host owns the cursor highlight + windowing; the right-flush relative time
+ * rides on ListItemRow.right.
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} left
+ */
+function renderConvoList(state, draw, left) {
+  if (left.width <= 0 || left.height <= 0) return;
+  /** @type {import('../../core/tui/draw.js').ListItemRow[]} */
+  const items = state.convos.map((c, i) => {
+    const isCursor = i === state.convCursor;
+    /** @type {import('../../core/tui/draw.js').Span[]} */
+    const spans = [
+      { text: isCursor ? '▸' : ' ', style: isCursor ? { fg: '36', bold: true } : undefined }, // cursor tick
+      { text: c.unread ? '●' : ' ', style: c.unread ? { fg: '36', bold: true } : undefined },   // unread dot
+      { text: ' ' + (c.name || 'Unknown'), style: c.unread ? { bold: true } : undefined },        // name (bold if unread)
+    ];
+    const snippet = (c.lastMessage || '').replace(/\s+/g, ' ').trim();
+    if (snippet) spans.push({ text: '  ' + snippet, style: { dim: true } });
+    const ts = relTimestamp(c.ts);
+    /** @type {import('../../core/tui/draw.js').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; // store adjusted scroll back (Draw.list contract)
+}
+
+/**
+ * Build the thread's flat visual lines with you-vs-them grouping (§5): them =
+ * cyan sender + dim right time + default body at gutter; you = green ▎ rail +
+ * green You + dim right time + rail-indented default body. 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 index, or -1
+ * @returns {import('../../core/tui/draw.js').ListItemRow[]}
+ */
+function buildThreadLines(state, width, reactTarget) {
+  /** @type {import('../../core/tui/draw.js').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: '' }] }); // spacer BETWEEN groups only (no trailing waste under tail-windowing)
+  });
+  return lines;
+}
+
+/**
+ * Paint the thread body (tail-windowed) into `rect`.
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').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 lifted compose bar (§5 reply mode): a hairline, a `✎ Reply ` yellow-bold
+ * label + draft + `█` block cursor (horizontal-scrolled to the tail), and a dim
+ * `enter send · esc cancel` hint.
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} right
+ */
+function renderComposer(state, draw, right) {
+  const hairRow = right.row + right.height - 3;
+  const barRow = right.row + right.height - 2;
+  const hintRow = 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' } }, // block cursor (glyph carries it in mono)
+  ], right.width);
+  draw.spans(hintRow, right.col, [
+    { text: 'enter', style: { bold: true } }, { text: ' send', style: { dim: true } },
+    { text: ' · ', style: { dim: true } },
+    { text: 'esc', style: { bold: true } }, { text: ' cancel', style: { dim: true } },
+  ], right.width);
+}
+
+/**
+ * The react picker bar (§5 react mode): a hairline, the emoji chip row with the
+ * selected chip in accent-bg + brackets (mono-safe), and a dim hint.
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').Rect} right
+ */
+function renderReactBar(state, draw, right) {
+  const hairRow = right.row + right.height - 3;
+  const barRow = right.row + right.height - 2;
+  const hintRow = right.row + right.height - 1;
+  draw.hline(hairRow, right.col, right.col + right.width);
+  /** @type {import('../../core/tui/draw.js').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 } }); // accent-bg (color) + brackets+reverse (mono carrier, §2)
+    } else {
+      spans.push({ text: '  ' + e + ' ' });
+    }
+  });
+  draw.spans(barRow, right.col, spans, right.width);
+  draw.spans(hintRow, right.col, [
+    { text: '←/→', style: { bold: true } }, { text: ' pick', style: { dim: true } },
+    { text: ' · ', style: { dim: true } },
+    { text: 'enter', style: { bold: true } }, { text: ' react', style: { dim: true } },
+    { text: ' · ', style: { dim: true } },
+    { text: 'esc', style: { bold: true } }, { text: ' cancel', style: { dim: true } },
+  ], right.width);
+}
+
+/**
+ * Right pane — the open thread (header + hairline + grouped body) plus the
+ * compose/react bar when in a mode. Closed: a guided empty stack.
+ * @param {LiState} state
+ * @param {import('../../core/tui/draw.js').Draw} draw
+ * @param {import('../../core/tui/draw.js').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: 'Press ' }, { text: 'Enter', style: { bold: true } }, { text: ' to open a conversation' }],
+    ]);
+    return;
+  }
+
+  // Header: bold name + right-flush dim conversation time, hairline beneath.
+  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 ? 3 : 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);
+}
+
+// ── onKey handlers ───────────────────────────────────────────────────────────
+
+/**
+ * Open the conversation under the cursor: view it, then auto-mark it read.
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {Promise<import('../../core/tui/contract.js').ViewAction>}
+ */
+async function openThread(state, host) {
+  const convo = state.convos[state.convCursor];
+  if (!convo) return { type: 'none' };
+  if (!state.ctx) {
+    host.setBanner('Not ready yet — press g to refresh', 'action');
+    return { type: 'render' };
+  }
+  state.openUrn = convo.urn;
+  state.thread = [];
+  state.threadScroll = 0;
+  host.setStatus('Loading thread…');
+
+  const vc = await viewConversation({
+    ...baseOpts(state),
+    csrf: state.ctx.csrf,
+    conversationUrn: convo.urn,
+    myMemberId: state.ctx.memberId,
+  });
+  if (!vc.ok) {
+    host.setStatus(null);
+    bannerError(host, vc.error);
+    return { type: 'render' };
+  }
+  state.thread = vc.data;
+
+  // Auto mark read; clear the unread flag locally (optimistic) + refresh the count.
+  await markConversationAsRead({ ...baseOpts(state), csrf: state.ctx.csrf, conversationUrn: convo.urn });
+  convo.unread = false;
+
+  host.setStatus(null);
+  host.setError(null);
+  updateUnread(state, host);
+  return { type: 'render' };
+}
+
+/**
+ * Send the current draft to the open conversation's recipient.
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {Promise<import('../../core/tui/contract.js').ViewAction>}
+ */
+async function sendReply(state, host) {
+  const text = state.draft.trim();
+  if (!text) {
+    state.mode = 'list';
+    host.setMode(null);
+    return { type: 'render' };
+  }
+  const convo = state.openUrn ? state.convos.find((c) => c.urn === state.openUrn) : null;
+  if (!convo || !state.ctx) {
+    host.setError('No open conversation to reply to.');
+    state.mode = 'list';
+    host.setMode(null);
+    return { type: 'render' };
+  }
+  // Leave compose mode before the async send so the working chip shows.
+  state.mode = 'list';
+  host.setMode(null);
+  host.setStatus('Sending…');
+  const r = await sendMessage({
+    ...baseOpts(state),
+    csrf: state.ctx.csrf,
+    myMemberId: state.ctx.memberId,
+    recipient: convo.recipientId,
+    text,
+    conversationUrn: state.openUrn,
+  });
+  if (!r.ok) {
+    host.setStatus(null);
+    bannerError(host, r.error); // not-connection → inline error banner over the open thread
+    return { type: 'render' };
+  }
+
+  // Optimistic append, then reconcile by re-viewing the thread.
+  state.thread.push({ urn: '', sender: 'You', text, ts: Date.now(), fromMe: true });
+  state.draft = '';
+  const vc = await viewConversation({
+    ...baseOpts(state),
+    csrf: state.ctx.csrf,
+    conversationUrn: state.openUrn,
+    myMemberId: state.ctx.memberId,
+  });
+  if (vc.ok) state.thread = vc.data;
+  host.setError(null);
+  host.setStatus('Sent');
+  return { type: 'render' };
+}
+
+/**
+ * React to the most recent message in the open thread with the selected emoji.
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {Promise<import('../../core/tui/contract.js').ViewAction>}
+ */
+async function doReact(state, host) {
+  const target = state.thread.length ? state.thread[state.thread.length - 1] : null;
+  state.mode = 'list';
+  host.setMode(null);
+  if (!target || !target.urn || !state.ctx) {
+    host.setError('No message to react to.');
+    return { type: 'render' };
+  }
+  const emoji = EMOJIS[state.reactCursor] || EMOJIS[0];
+  host.setStatus('Reacting…');
+  const r = await reactToMessage({ ...baseOpts(state), csrf: state.ctx.csrf, messageUrn: target.urn, emoji });
+  if (!r.ok) {
+    host.setStatus(null);
+    bannerError(host, r.error);
+    return { type: 'render' };
+  }
+  host.setError(null);
+  host.setStatus('Reacted ' + emoji);
+  return { type: 'render' };
+}
+
+/**
+ * List-mode keystrokes.
+ * @param {import('../../core/tui/contract.js').ViewKey} k
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {import('../../core/tui/contract.js').ViewAction | Promise<import('../../core/tui/contract.js').ViewAction>}
+ */
+function onKeyList(k, state, host) {
+  const key = k.key;
+  const ch = k.input;
+
+  if (ch === 'q') return { type: 'quit' };
+  if (ch === 'g') return { type: 'refresh' };
+
+  if (key.downArrow || ch === 'j') {
+    if (state.convos.length) state.convCursor = Math.min(state.convos.length - 1, state.convCursor + 1);
+    return { type: 'render' };
+  }
+  if (key.upArrow || ch === 'k') {
+    state.convCursor = Math.max(0, state.convCursor - 1);
+    return { type: 'render' };
+  }
+  if (key.return) return openThread(state, host);
+  if (ch === 'r') {
+    if (!state.openUrn) {
+      host.setBanner('Open a conversation first', 'action');
+      return { type: 'render' };
+    }
+    state.mode = 'reply';
+    state.draft = '';
+    host.setMode('compose');
+    host.setError(null);
+    return { type: 'render' };
+  }
+  if (ch === 'e') {
+    if (!state.openUrn || state.thread.length === 0) {
+      host.setBanner('Open a conversation first', 'action');
+      return { type: 'render' };
+    }
+    state.mode = 'react';
+    state.reactCursor = 0;
+    host.setMode('react');
+    host.setError(null);
+    return { type: 'render' };
+  }
+  return { type: 'none' };
+}
+
+/**
+ * Reply-mode keystrokes. Printable chars edit the draft; Enter sends; Esc cancels.
+ * @param {import('../../core/tui/contract.js').ViewKey} k
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {import('../../core/tui/contract.js').ViewAction | Promise<import('../../core/tui/contract.js').ViewAction>}
+ */
+function onKeyReply(k, state, host) {
+  const key = k.key;
+  if (key.escape) {
+    state.mode = 'list';
+    state.draft = '';
+    host.setMode(null);
+    return { type: 'render' };
+  }
+  if (key.return) return sendReply(state, host);
+  if (key.backspace) {
+    state.draft = state.draft.slice(0, -1);
+    return { type: 'render' };
+  }
+  if (isPrintable(k)) {
+    state.draft += k.input;
+    return { type: 'render' };
+  }
+  return { type: 'none' };
+}
+
+/**
+ * React-mode keystrokes. h/l or ←/→ move the chip cursor; Enter reacts; Esc cancels.
+ * @param {import('../../core/tui/contract.js').ViewKey} k
+ * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+ * @returns {import('../../core/tui/contract.js').ViewAction | Promise<import('../../core/tui/contract.js').ViewAction>}
+ */
+function onKeyReact(k, state, host) {
+  const key = k.key;
+  const ch = k.input;
+  if (key.escape) {
+    state.mode = 'list';
+    host.setMode(null);
+    return { type: 'render' };
+  }
+  if (key.leftArrow || ch === 'h') {
+    state.reactCursor = Math.max(0, state.reactCursor - 1);
+    return { type: 'render' };
+  }
+  if (key.rightArrow || ch === 'l') {
+    state.reactCursor = Math.min(EMOJIS.length - 1, state.reactCursor + 1);
+    return { type: 'render' };
+  }
+  if (key.return) return doReact(state, host);
+  return { type: 'none' };
+}
+
+// ── ViewModule ───────────────────────────────────────────────────────────────
+
+/** @type {import('../../core/tui/contract.js').ViewModule<LiState>} */
+const view = {
+  manifest: {
+    id: 'linkedin',
+    title: 'LinkedIn Messages',
+    description: 'Inbox — read, reply, react',
+    refreshMs: 30000,
+    keymap: [
+      { keys: 'j/k', label: 'move' },
+      { keys: 'enter', label: 'open' },
+      { keys: 'r', label: 'reply' },
+      { keys: 'e', label: 'react' },
+      { keys: 'g', label: 'refresh' },
+      { keys: 'q', label: 'quit' },
+    ],
+  },
+
+  /**
+   * Build initial state. Cheap + synchronous — NO slow fetch (the host paints the
+   * loading skeleton, then calls refresh()).
+   * @param {import('../../core/tui/contract.js').ViewHost} host
+   * @returns {LiState}
+   */
+  init(host) {
+    const opts = host.options || {};
+    return {
+      ctx: null,
+      target: opts.target || null,
+      port: opts.port || undefined,
+      convos: [],
+      convCursor: 0,
+      convScroll: 0,
+      openUrn: null,
+      thread: [],
+      threadScroll: 0,
+      mode: 'list',
+      draft: '',
+      reactCursor: 0,
+      lastFetch: 0,
+      recovery: null,
+      loginTabOpened: false,
+    };
+  },
+
+  refresh,
+
+  /**
+   * Paint the view. Precedence: recovery takeover → loading skeleton → empty
+   * reward → the two-pane inbox.
+   * @param {LiState} state
+   * @param {import('../../core/tui/draw.js').Draw} draw
+   * @param {import('../../core/tui/draw.js').Rect} content
+   */
+  render(state, draw, content) {
+    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.', 'Press g to refresh.'],
+      });
+      return;
+    }
+    const { left, right } = splitPanes(draw, content);
+    renderConvoList(state, draw, left);
+    renderThread(state, draw, right);
+  },
+
+  /**
+   * One keystroke → next action. Dispatches by mode.
+   * @param {import('../../core/tui/contract.js').ViewKey} k
+   * @param {LiState} state @param {import('../../core/tui/contract.js').ViewHost} host
+   * @returns {import('../../core/tui/contract.js').ViewAction | Promise<import('../../core/tui/contract.js').ViewAction>}
+   */
+  onKey(k, state, host) {
+    switch (state.mode) {
+      case 'reply':
+        return onKeyReply(k, state, host);
+      case 'react':
+        return onKeyReact(k, state, host);
+      default:
+        return onKeyList(k, state, host);
+    }
+  },
+
+  /**
+   * Plain-text snapshot for the non-TTY / piped path (exit 0). No ANSI. Surfaces
+   * the guided recovery panel + the host's current banner (threaded via ctx) so
+   * the static path shows guidance, not a blank screen.
+   * @param {LiState} state
+   * @param {import('../../core/tui/contract.js').DumpContext} [ctx]
+   * @returns {string}
+   */
+  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 r = state.recovery;
+      lines.push(r.headline);
+      for (const e of toLinesArr(r.explanation)) if (e) lines.push('  ' + e);
+      if (r.nextStep) lines.push('  → ' + r.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');
+  },
+};
+
+export default view;