quoxcli 0.2.0 → 0.4.0

package/lib/tui/views/LucidDeck.jsx

@@ -1,11 +1,17 @@
 /**
- * LucidDeck: the full-screen live LUCID situation deck (`quox lucid deck`).
+ * LucidDeck: the full-screen live LUCID situation deck (`quox lucid deck`), in the Quoxon look.
  *
  * One vertical cursor. Up/Down (j/k) move through the focused pane's list,
  * Tab / Shift-Tab switch pane (Needs you, Since you looked, Areas), Enter
  * opens / acts, Esc backs out, ? is help, q quits. Every action echoes what it
  * did and why in a toast; keys that do nothing say so.
  *
+ * Look (Quoxon design system): theme roles for every colour, headings in the sky to violet gradient, the
+ * perpetual Q as the status glyph (needs you = waiting, fetching = working, unreachable = failing, quiet =
+ * resting), areas and Needs-you items as inline object cards (lucid/cards.js) that drop in through katakana.
+ * Motion: ONE shared clock (quoxon/motion/clock.js). Frames are demanded only while something moves; idle
+ * the deck has no animation timer and writes nothing (the only recurring work is the fetch interval).
+ *
  * Props are injected (api, intervalMs, intro) so the component is testable
  * without a network. api = { situation(), measure(ref, id), teach(body), ack(seq) }.
  * Never shows an empty all-quiet view on failure: errors render in the header
@@ -13,21 +19,22 @@
  */
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Box, Text, useInput, useApp, useStdout } from 'ink';
-import {
-  GLYPH, STATE_HEX, URGENCY, PALETTE, SPINNER, wrap, clip, ageOf, meter, clockLondonSec,
-  whenText, changedWords, blindSpots,
-} from '../../lucid/fmt.js';
+import { wrap, clip, ageOf, meter, clockLondon, whenText, changedWords, blindSpots } from '../../lucid/fmt.js';
 import { LucidIntro } from '../../lucid/LucidIntro.jsx';
+import { LucidCard } from '../../lucid/LucidCard.jsx';
+import { lucidArea, lucidNeed, cardHeight } from '../../lucid/cards.js';
+import { glyphStateOf, glyphAnimating, revealT, deckDemands, nextMinuteAt, SETTLE_MS, REVEAL_MS, STAGGER_MS } from '../../lucid/motion.js';
+import { QGlyph } from '../../quoxon/qmotion.js';
+import { c, gradient, mono } from '../../quoxon/theme.js';
+import { Clock, motionAllowed } from '../../quoxon/motion/clock.js';
 
 const PANES = ['needs', 'changed', 'areas'];
 const PANE_TITLE = { needs: 'NEEDS YOU', changed: 'SINCE YOU LOOKED', areas: 'AREAS' };
 const PANE_WORD = { needs: 'Needs you', changed: 'Since you looked', areas: 'Areas' };
 const BAR_BG = '#1E3A8A';       // selected row bar
-const BAR_BG_DIM = '#27272A';   // selected row in an unfocused pane
 const NEW_MS = 4000;
 const GHOST_MS = 4000;
 const TOAST_MS = 3000;
-const GRAD = ['#38BDF8', '#6366F1', '#8B5CF6', '#C084FC', '#8B5CF6'];
 
 const pad = (s, w) => { const a = [...String(s)]; return a.length >= w ? a.join('') : s + ' '.repeat(w - a.length); };
 const nm = (x) => (typeof x === 'string' ? x : (x && (x.label || x.name || x.L0 || x.id)) || '');
@@ -44,9 +51,8 @@ export function itemsLines(it, expanded, w, base = 1) {
   return n + 1;
 }
 
-/** Window of items to render so the selected one is visible within `rows` lines. */
-export function windowItems(items, sel, expandedRef, rows, w, base) {
-  const heights = items.map((it) => itemsLines(it, it.ref === expandedRef, w, base ? base(it) : 1));
+/** Window over items of known line heights so the selected one is visible within `rows` lines. */
+export function windowHeights(heights, sel, rows) {
   let start = 0;
   const fits = (s) => {
     let used = 0;
@@ -55,26 +61,29 @@ export function windowItems(items, sel, expandedRef, rows, w, base) {
   };
   while (start < sel && !fits(start)) start++;
   let used = 0; let end = start;
-  while (end < items.length && used + heights[end] <= rows) { used += heights[end]; end++; }
-  if (end === start && items.length) end = start + 1;
+  while (end < heights.length && used + heights[end] <= rows) { used += heights[end]; end++; }
+  if (end === start && heights.length) end = start + 1;
   return { start, end };
 }
 
+/** Window of items to render so the selected one is visible within `rows` lines. */
+export function windowItems(items, sel, expandedRef, rows, w, base) {
+  const heights = items.map((it) => itemsLines(it, it.ref === expandedRef, w, base ? base(it) : 1));
+  return windowHeights(heights, sel, rows);
+}
+
 /** Window by rendered line heights; when the list overflows, 2 lines are kept for the "N more" markers. */
+export function fitHeights(heights, sel, rows) {
+  let win = windowHeights(heights, sel, rows);
+  if (win.start > 0 || win.end < heights.length) win = windowHeights(heights, sel, Math.max(1, rows - 2));
+  return win;
+}
 export function fitWindow(items, sel, expandedRef, rows, w, base) {
   let win = windowItems(items, sel, expandedRef, rows, w, base);
   if (win.start > 0 || win.end < items.length) win = windowItems(items, sel, expandedRef, Math.max(1, rows - 2), w, base);
   return win;
 }
 
-/** Simple window for single-line lists. */
-function winLines(n, sel, rows) {
-  rows = Math.max(1, rows);
-  if (n <= rows) return { start: 0, end: n };
-  let start = Math.max(0, Math.min(sel - Math.floor(rows / 2), n - rows));
-  return { start, end: start + rows };
-}
-
 export function signature(sit) {
   if (!sit) return '';
   return JSON.stringify([
@@ -84,56 +93,51 @@ export function signature(sit) {
   ]);
 }
 
-function Pill({ urgency }) {
-  const u = URGENCY[urgency] || URGENCY.whenever;
-  const hot = urgency === 'now' || urgency === 'today' || urgency === 'this week';
-  const label = ` ${u.label} `;
-  return hot
-    ? <Text backgroundColor={u.hex} color="#0B1220" bold>{pad(label, 11)}</Text>
-    : <Text color={u.hex}>{pad(label, 11)}</Text>;
+/** A heading in the Quoxon gradient (plain muted under NO_COLOR). */
+function Grad({ text, bold = true }) {
+  return <>{gradient(text).map((g, i) => <Text key={i} bold={bold} color={g.color}>{g.ch}</Text>)}</>;
 }
 
-function Hints({ items, cols }) {
+function Hints({ items }) {
   return (
-    <Text wrap="truncate" color={PALETTE.dim}>
+    <Text wrap="truncate" color={c('muted')}>
       {items.map(([k, l], i) => (
-        <Text key={k + l}>{i ? '   ' : ''}<Text bold color={PALETTE.brand}>{k}</Text><Text color={PALETTE.muted}> {l}</Text></Text>
+        <Text key={k + l}>{i ? '   ' : ''}<Text bold color={c('key')}>{k}</Text><Text color={c('muted')}> {l}</Text></Text>
       ))}
     </Text>
   );
 }
 
-function Panel({ title, count, focused, width, height, note, children }) {
+/** A pane title rule: gradient heading when focused, quiet when not, a rule running to the pane's edge. */
+function PaneTitle({ title, count, focused, width, note }) {
+  const head = ` ${title} `;
+  const tail = `${count === '' ? '' : ` ${count}`}${note ? `  ${note}` : ''} `;
+  const fill = Math.max(0, width - 3 - [...head].length - [...tail].length);
   return (
-    <Box flexDirection="column" width={width} height={height} borderStyle="round"
-      borderColor={focused ? PALETTE.brand : '#3F3F46'} paddingX={1}>
-      <Box>
-        {focused
-          ? <Text backgroundColor={PALETTE.brand} color="#0B1220" bold> ▶ {title} </Text>
-          : <Text color={PALETTE.dim} bold>  {title} </Text>}
-        <Text color={focused ? PALETTE.text : PALETTE.dim}> {count}</Text>
-        {note ? <Text color={PALETTE.dim}>  {note}</Text> : null}
-      </Box>
-      {children}
-    </Box>
+    <Text wrap="truncate">
+      <Text color={focused ? c('sky') : c('faint')}>{focused ? '▶' : '─'}</Text>
+      <Text color={focused ? c('sky') : c('faint')}>─</Text>
+      {focused ? <Grad text={head} /> : <Text color={c('muted')} bold>{head}</Text>}
+      <Text color={focused ? c('value') : c('muted')}>{tail}</Text>
+      <Text color={focused ? c('sky') : c('faint')}>{'─'.repeat(fill)}</Text>
+    </Text>
   );
 }
 
-export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onExit, intro = false }) {
+export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onExit, intro = false, motion }) {
   const { exit } = useApp();
   const { stdout } = useStdout();
   const [, setSizeTick] = useState(0);
   const cols = (stdout && stdout.columns) || 100;
   const rows = (stdout && stdout.rows) || 30;
+  const motionOn = useMemo(() => (motion != null ? Boolean(motion) : motionAllowed(stdout && stdout.isTTY)), [motion, stdout]);
 
   const [phase, setPhase] = useState(intro ? 'intro' : 'deck');
-  const [slide, setSlide] = useState(intro ? 3 : 0);
   const [data, setData] = useState(null);       // last good response
   const [err, setErr] = useState(null);
   const [fetchedAt, setFetchedAt] = useState(null);
   const [fetching, setFetching] = useState(false);
-  const [tick, setTick] = useState(0);
-  const [spin, setSpin] = useState(0);
+  const [, setFrame] = useState(0);             // bumped by the shared clock
   const [pane, setPane] = useState('needs');
   const [filter, setFilter] = useState(null);   // area key or null
   const [sel, setSel] = useState(0);
@@ -151,6 +155,10 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
   const newAt = useRef(new Map());
   const ghosts = useRef([]);
   const inflight = useRef(false);
+  const startAt = useRef(new Map());            // card key -> when its drop-in starts (may be a few ms ahead)
+  const revealUntil = useRef(0);
+  const errAt = useRef(null);
+  const glyph = useRef({ state: null, since: null });
 
   const flash = useCallback((text, tone = 'ok') => {
     setNote({ text, tone, at: Date.now() });
@@ -171,6 +179,12 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
   apiRef.current = api;
   nowRef.current = now;
 
+  const startCard = (key, at) => {
+    startAt.current.set(key, at);
+    revealUntil.current = Math.max(revealUntil.current, at + REVEAL_MS);
+    if (startAt.current.size > 400) for (const [k, v] of startAt.current) if (Date.now() - v > 60000) startAt.current.delete(k);
+  };
+
   const refresh = useCallback(async () => {
     if (inflight.current) return;
     inflight.current = true;
@@ -179,20 +193,28 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
       const res = await apiRef.current.situation();
       const sit = res && res.situation;
       const cur = (sit && sit.needs_you) || [];
+      const at = Date.now();
       if (prevNeeds.current) {
         const have = new Set(prevNeeds.current.map((i) => i.ref));
         const nowRefs = new Set(cur.map((i) => i.ref));
         let fresh = 0;
-        for (const i of cur) if (!have.has(i.ref)) { newAt.current.set(i.ref, Date.now()); fresh++; }
-        for (const i of prevNeeds.current) if (!nowRefs.has(i.ref)) ghosts.current.push({ item: i, at: Date.now() });
+        for (const i of cur) if (!have.has(i.ref)) { newAt.current.set(i.ref, at); startCard('n:' + i.ref, at); fresh++; }
+        for (const i of prevNeeds.current) if (!nowRefs.has(i.ref)) ghosts.current.push({ item: i, at });
         if (fresh) setArrived((n) => n + fresh);
+      } else {
+        // the first board: cards drop in top to bottom
+        cur.forEach((i, k) => startCard('n:' + i.ref, at + k * STAGGER_MS));
+        ((sit && sit.areas) || []).forEach((a, k) => startCard('a:' + a.area, at + (k + 1) * STAGGER_MS));
+        startCard('a:', at);
       }
       prevNeeds.current = cur;
       sigRef.current = signature(sit);
       setData(res);
       setErr(null);
+      errAt.current = null;
       setFetchedAt(nowRef.current());
     } catch (e) {
+      if (errAt.current == null) errAt.current = Date.now();
       setErr(e);
     } finally {
       inflight.current = false;
@@ -203,21 +225,16 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
   useEffect(() => {
     refresh();
     const t = setInterval(refresh, intervalMs);
-    const h = setInterval(() => setTick((x) => x + 1), 500);
-    return () => { clearInterval(t); clearInterval(h); };
+    return () => clearInterval(t);
   }, [refresh, intervalMs]);
 
-  useEffect(() => {
-    if (!fetching) return undefined;
-    const s = setInterval(() => setSpin((x) => x + 1), 120);
-    return () => clearInterval(s);
-  }, [fetching]);
-
-  useEffect(() => {
-    if (phase !== 'deck' || slide <= 0) return undefined;
-    const s = setTimeout(() => setSlide((x) => x - 1), 60);
-    return () => clearTimeout(s);
-  }, [phase, slide]);
+  // ---- the one clock -------------------------------------------------------------------------------
+  // Each render declares what it still needs (see lucid/motion.js); with nothing declared there is no timer.
+  const clockRef = useRef(null);
+  if (!clockRef.current) clockRef.current = new Clock(() => setFrame((x) => x + 1));
+  const demandRef = useRef(null);
+  useEffect(() => { if (demandRef.current) clockRef.current.schedule(demandRef.current()); });
+  useEffect(() => () => clockRef.current.stop(), []);
 
   const introDone = useCallback(() => setPhase((p) => (p === 'intro' ? 'deck' : p)), []);
 
@@ -241,8 +258,8 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
   }, [allNeeds, expanded]);
 
   const runConfirmed = () => {
-    const c = confirm; setConfirm(null);
-    if (c) c.run();
+    const c0 = confirm; setConfirm(null);
+    if (c0) c0.run();
   };
 
   const askMeasure = (item, m) => {
@@ -310,9 +327,9 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
       }
       setPane('needs'); setSel(0); setExpanded(null);
     } else {
-      const c = changed[safeCh];
-      if (!c) { flash('Nothing is selected.', 'dim'); return; }
-      flash(`${c.L0 || 'Change'}${changedWords(c) ? ': ' + changedWords(c) : ''}`, 'ok');
+      const c1 = changed[safeCh];
+      if (!c1) { flash('Nothing is selected.', 'dim'); return; }
+      flash(`${c1.L0 || 'Change'}${changedWords(c1) ? ': ' + changedWords(c1) : ''}`, 'ok');
     }
   };
 
@@ -379,11 +396,10 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
   keyRef.current = onKey;
   useInput((input, key) => keyRef.current(input, key));
 
-
   if (phase === 'intro') {
     return (
       <Box flexDirection="column" height={Math.max(10, rows - 1)} width={cols}>
-        <LucidIntro data={data} err={err} onDone={introDone} rows={rows} />
+        <LucidIntro data={data} err={err} onDone={introDone} rows={rows} cols={cols} motion={motionOn} />
       </Box>
     );
   }
@@ -391,63 +407,82 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
   const wall = Date.now();
   const t = now();
   const cov = (sit && sit.cannot_see && sit.cannot_see.coverage) || { live: 0, expected: 0 };
-  const agoS = fetchedAt ? Math.max(0, Math.floor((t - fetchedAt) / 1000)) : null;
   const stale = Boolean(err && data);
+  const ageText = fetchedAt ? ageOf(fetchedAt, t) : null;
   const noteLive = note && wall - note.at < (note.tone === 'bad' ? 6000 : TOAST_MS) ? note : null;
-  const noteHex = noteLive ? ({ ok: STATE_HEX.ok, bad: STATE_HEX.blind, busy: PALETTE.brand, dim: PALETTE.muted }[noteLive.tone]) : null;
+  const noteRole = noteLive ? ({ ok: 'ok', bad: 'error', busy: 'sky', dim: 'muted' }[noteLive.tone]) : null;
   const spots = blindSpots(sit && sit.cannot_see);
   const dau = (sit && sit.doesnt_add_up) || [];
-  const flashOn = tick % 2 === 0;
   ghosts.current = ghosts.current.filter((g) => wall - g.at < GHOST_MS);
   const liveGhosts = ghosts.current.filter((g) => !filter || g.item.area === filter);
 
+  // ---- the Q: LUCID state -> glyph state, animated only for a short window after a change ----------------
+  const gState = glyphStateOf({ err, fetching, needs: allNeeds.length });
+  if (glyph.current.state !== gState) glyph.current = { state: gState, since: wall };
+  const gAnimating = glyphAnimating({ state: gState, since: glyph.current.since, now: wall, motion: motionOn });
+  const headGlyph = <QGlyph state={gState} ms={wall} since={gState === 'failing' ? glyph.current.since : null} quiet={!gAnimating} />;
+
+  // ---- what this render still needs from the clock --------------------------------------------------------
+  const newExpiries = [...newAt.current.values()].map((v) => v + NEW_MS);
+  demandRef.current = () => {
+    const w = Date.now();
+    return deckDemands({
+      motion: motionOn,
+      frames: gAnimating || w < revealUntil.current,
+      now: w,
+      at: [
+        noteLive ? noteLive.at + (noteLive.tone === 'bad' ? 6000 : TOAST_MS) : null,
+        ...ghosts.current.map((g) => g.at + GHOST_MS),
+        ...newExpiries,
+        motionOn && glyph.current.since != null ? glyph.current.since + SETTLE_MS : null,
+        nextMinuteAt(w, t),
+      ],
+    });
+  };
+  const revealOf = (key) => revealT(startAt.current.get(key), wall, motionOn);
+
   // ── layout ──────────────────────────────────────────────────────────
   const wide = cols >= 80;
   const big = cols >= 110;
   const leftW = big ? 24 : 22;
   const avail = cols - 2 - leftW;
   const rightW = big ? avail - Math.round(avail * 0.55) : 0;   // below 110 cols Since-you-looked stacks under Needs-you
-  const mainW = avail - rightW - (slide ? slide * 4 : 0);
-  const bannerOn = Boolean(err) || hinted;
+  const mainW = avail - rightW;
   const headerH = 3 + (err ? 1 : 0);
   const hintH = hinted && !err ? 1 : 0;
   const footerH = 3;
   const bodyH = Math.max(8, rows - headerH - hintH - footerH - 1);
-  const listRows = bodyH - 3;
-  const innerOf = (w) => Math.max(10, w - 4);
+  const listRows = bodyH - 1;                                  // one line for the pane title rule
 
   // ── header ──────────────────────────────────────────────────────────
-  const covHex = cov.expected && cov.live < cov.expected ? STATE_HEX.attention : STATE_HEX.ok;
-  const badgeBg = allNeeds.length ? (arrived > 0 && !flashOn ? '#B45309' : STATE_HEX.attention) : null;
+  const covRole = cov.expected && cov.live < cov.expected ? 'warn' : 'ok';
+  const hot = arrived > 0 && gState === 'waiting' && gAnimating;
   const header = (
     <Box flexDirection="column">
-      <Box borderStyle="round" borderColor={err ? (stale ? STATE_HEX.attention : STATE_HEX.blind) : '#3F3F46'} paddingX={1}>
+      <Box borderStyle="round" borderColor={err ? (stale ? c('warn') : c('error')) : c('faint')} paddingX={1}>
         <Text wrap="truncate">
-          {[...'◉ LUCID'].map((ch, i) => <Text key={i} bold color={GRAD[i % GRAD.length]}>{ch}</Text>)}
-          <Text color={PALETTE.dim}>  │  </Text>
-          <Text bold>{clockLondonSec(t)}</Text><Text color={PALETTE.dim}> London</Text>
-          <Text color={PALETTE.dim}>  │  </Text>
-          {sit ? <Text color={covHex}>{meter(cov.live, cov.expected)} {cov.live}/{cov.expected}</Text> : <Text color={PALETTE.dim}>▱▱▱▱▱ -/-</Text>}
-          <Text color={PALETTE.dim}>  │  </Text>
-          {!sit ? <Text color={PALETTE.dim}>- need you</Text> : badgeBg
-            ? <Text backgroundColor={badgeBg} color="#0B1220" bold> {allNeeds.length} need you </Text>
-            : <Text bold color={STATE_HEX.ok}>0 need you</Text>}
-          {filterLabel ? <Text bold color={PALETTE.accent}>  │  filter: {filterLabel}</Text> : null}
-          {arrived > 0 ? <Text bold color={STATE_HEX.ok}> +{arrived} new</Text> : null}
-          <Text color={PALETTE.dim}>  │  </Text>
-          <Text color={PALETTE.muted}>
-            {fetching ? <Text color={PALETTE.brand}>{SPINNER[spin % SPINNER.length]} </Text> : null}
-            {agoS == null ? 'connecting' : `updated ${agoS}s ago`}
-          </Text>
+          {headGlyph}<Text> </Text><Grad text="LUCID" />
+          <Text color={c('muted')}>  │  </Text>
+          <Text bold color={c('value')}>{clockLondon(t)}</Text><Text color={c('muted')}> London</Text>
+          <Text color={c('muted')}>  │  </Text>
+          {sit ? <Text color={c(covRole)}>{meter(cov.live, cov.expected)} {cov.live}/{cov.expected}</Text> : <Text color={c('muted')}>▱▱▱▱▱ -/-</Text>}
+          <Text color={c('muted')}>  │  </Text>
+          {!sit ? <Text color={c('muted')}>- need you</Text> : allNeeds.length
+            ? <Text bold color={c('warn')}>{allNeeds.length} need you</Text>
+            : <Text bold color={c('ok')}>0 need you</Text>}
+          {filterLabel ? <Text bold color={c('key')}>  │  filter: {filterLabel}</Text> : null}
+          {arrived > 0 ? <Text bold color={hot ? c('warn') : c('ok')}> +{arrived} new</Text> : null}
+          <Text color={c('muted')}>  │  </Text>
+          <Text color={c('muted')}>{ageText == null ? 'connecting' : `updated ${ageText} ago`}</Text>
         </Text>
       </Box>
       {err ? (
-        <Text bold wrap="truncate" color={stale ? STATE_HEX.attention : STATE_HEX.blind}>
-          {stale ? `⚠ STALE ${agoS}s` : '✖ NO DATA'} · LUCID unreachable: {err.status || err.code || err.message} · retrying, {stale ? 'showing the last good data' : 'nothing is known yet (this is not "all quiet")'}
+        <Text bold wrap="truncate" color={stale ? c('warn') : c('error')}>
+          {stale ? `⚠ STALE ${ageText}` : '✖ NO DATA'} · LUCID unreachable: {err.status || err.code || err.message} · retrying, {stale ? 'showing the last good data' : 'nothing is known yet (this is not "all quiet")'}
         </Text>
       ) : null}
       {hinted && !err ? (
-        <Text wrap="truncate" backgroundColor={PALETTE.brand} color="#0B1220" bold>{pad(' ↑↓ move · Enter open · Tab switch panel · ? help ', cols - 2)}</Text>
+        <Text wrap="truncate" backgroundColor={mono() ? undefined : BAR_BG} color={mono() ? undefined : '#FFFFFF'} inverse={mono()} bold>{pad(' ↑↓ move · Enter open · Tab switch panel · ? help ', cols - 2)}</Text>
       ) : null}
     </Box>
   );
@@ -457,143 +492,105 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
       <Box flexDirection="column" paddingX={1}>
         {header}
         <Box marginTop={1}>
-          <Text color={err ? STATE_HEX.blind : PALETTE.dim}>
+          <Text color={err ? c('error') : c('muted')}>
             {err ? 'No data yet. LUCID cannot be reached, so nothing is known (this is not "all quiet").' : 'Connecting to LUCID...'}
           </Text>
         </Box>
-        <Box marginTop={1}><Text color={PALETTE.dim}>r refresh · q quit</Text></Box>
+        <Box marginTop={1}><Text color={c('muted')}>r refresh · q quit</Text></Box>
       </Box>
     );
   }
 
   // ── panes ───────────────────────────────────────────────────────────
   const focus = (p) => pane === p;
+  const isNewOf = (it) => newAt.current.has(it.ref) && wall - newAt.current.get(it.ref) < NEW_MS;
+  const areaLabelOf = (k) => ((areas.find((a) => a.area === k) || {}).label || '');
 
   const needsBody = (w, rowsAvail) => {
-    const iw = innerOf(w);
+    const cw = Math.max(24, w - 1);
     const f = focus('needs');
     if (needs.length === 0 && !liveGhosts.length) {
       return (
-        <Text color={STATE_HEX.ok}>{filter ? 'Nothing needs you in this area.' : 'Nothing needs you right now.'}{spots.length ? <Text color={PALETTE.dim}> (check what I can't see)</Text> : null}</Text>
+        <Text color={c('ok')}>{filter ? 'Nothing needs you in this area.' : 'Nothing needs you right now.'}{spots.length ? <Text color={c('muted')}> (check what I can't see)</Text> : null}</Text>
       );
     }
-    const tw = iw - 14;
-    const isNewOf = (it) => newAt.current.has(it.ref) && wall - newAt.current.get(it.ref) < NEW_MS;
-    const textOf = (it) => (isNewOf(it) ? '● ' : '') + (it.L0 || '');
+    const views = needs.map((it, i) => lucidNeed({
+      item: it, areaLabel: filter ? '' : areaLabelOf(it.area), isNew: isNewOf(it), selected: i === safeSel, focused: f,
+      open: expandedRef === it.ref, mSel, now: t,
+    }, cw));
     const nGhost = Math.min(2, liveGhosts.length);
-    const win = fitWindow(needs, safeSel, expandedRef, rowsAvail - nGhost, iw, (it) => wrap(textOf(it), tw).length);
+    const win = fitHeights(views.map(cardHeight), safeSel, rowsAvail - nGhost);
     const above = win.start;
     const below = needs.length - win.end;
     return (
       <>
-        {above > 0 ? <Text color={PALETTE.dim}>  ↑ {above} more</Text> : null}
-        {needs.slice(win.start, win.end).map((it, k) => {
-          const i = win.start + k;
-          const on = i === safeSel;
-          const open = expandedRef === it.ref;
-          const a = it.L1 || {};
-          const ms = (it.L2 && it.L2.measures) || [];
-          const isNew = isNewOf(it);
-          const bg = on ? (f ? BAR_BG : BAR_BG_DIM) : undefined;
-          const lines = wrap(textOf(it), tw);
-          const fg = isNew ? STATE_HEX.ok : on ? '#FFFFFF' : PALETTE.muted;
-          return (
-            <Box key={it.ref} flexDirection="column">
-              {lines.map((ln, li) => (
-                <Text key={li} wrap="truncate" backgroundColor={bg} bold={on && f} dimColor={!f && !on}>
-                  <Text bold color={on ? (f ? '#FFFFFF' : PALETTE.muted) : PALETTE.dim}>{li === 0 ? (on ? '▶ ' : '  ') : '  '}</Text>
-                  {li === 0 ? <Pill urgency={it.urgency} /> : <Text>{' '.repeat(11)}</Text>}
-                  <Text color={fg}> {pad(ln, tw)}</Text>
-                </Text>
-              ))}
-              {open ? (
-                <Box flexDirection="column" marginLeft={3} marginBottom={1}>
-                  {[['Who', a.who], ['What', a.what], ['Why', a.why], ['When', whenText(a.when, t)]].filter(([, v]) => v).map(([lbl, v]) => (
-                    <Box key={lbl}><Box width={6}><Text color={PALETTE.dim}>{lbl}</Text></Box><Box width={iw - 9}><Text color={PALETTE.text}>{wrap(v, iw - 9).join('\n')}</Text></Box></Box>
-                  ))}
-                  {(a.affected || []).length ? (
-                    <Text wrap="truncate" color={PALETTE.dim}>{pad('Affects', 6)} <Text color={PALETTE.muted}>{clip(a.affected.map(nm).filter(Boolean).join(', '), iw - 14)}</Text></Text>
-                  ) : null}
-                  {ms.length ? <Text bold color={PALETTE.accent}>What you can do</Text> : <Text color={PALETTE.dim}>No actions to offer here. Esc closes.</Text>}
-                  {ms.map((m, mi) => {
-                    const mOn = mi === mSel;
-                    return (
-                      <Text key={m.id} wrap="truncate" backgroundColor={mOn ? '#6D28D9' : undefined} bold={mOn}>
-                        <Text color={mOn ? '#FFFFFF' : PALETTE.dim}>{mOn ? '❯ ' : '  '}</Text>
-                        <Text color={mOn ? '#FFFFFF' : PALETTE.text}>{pad(clip(m.say || m.label, iw - 24), iw - 24)}</Text>
-                        <Text color={m.risk === 'dangerous' ? STATE_HEX.blind : m.risk === 'gated' ? STATE_HEX.attention : mOn ? '#FFFFFF' : PALETTE.dim}> {m.risk}</Text>
-                      </Text>
-                    );
-                  })}
-                  {ms.some((m) => m.command) && ms[mSel] && ms[mSel].command
-                    ? <Text wrap="truncate" color={PALETTE.code}>  $ {clip(ms[mSel].command, iw - 12)}</Text> : (ms.some((m) => m.command) ? <Text> </Text> : null)}
-                </Box>
-              ) : null}
-            </Box>
-          );
-        })}
+        {above > 0 ? <Text color={c('muted')}>  ↑ {above} more</Text> : null}
+        {needs.slice(win.start, win.end).map((it, k) => (
+          <LucidCard key={it.ref} view={views[win.start + k]} t={revealOf('n:' + it.ref)} />
+        ))}
         {liveGhosts.slice(0, 2).map((g) => (
-          <Text key={'g' + g.item.ref} wrap="truncate" color={PALETTE.dim} dimColor>  ✓ resolved  {clip(g.item.L0 || '', iw - 14)}</Text>
+          <Text key={'g' + g.item.ref} wrap="truncate" color={c('muted')} dimColor>  ✓ resolved  {clip(g.item.L0 || '', Math.max(10, w - 16))}</Text>
         ))}
-        {below > 0 ? <Text color={PALETTE.dim}>  ↓ {below} more</Text> : null}
+        {below > 0 ? <Text color={c('muted')}>  ↓ {below} more</Text> : null}
       </>
     );
   };
 
   const changedBody = (w, rowsAvail) => {
-    const iw = innerOf(w);
+    const iw = Math.max(10, w - 2);
     const f = focus('changed');
-    if (!changed.length) return <Text color={PALETTE.dim}>Nothing has changed.</Text>;
+    if (!changed.length) return <Text color={c('muted')}>Nothing has changed.</Text>;
     const tw = iw - 7;
-    const textOf = (c) => {
-      const words = changedWords(c);
-      return (c.L0 || '') + (words ? ` · ${words}` : '');
+    const textOf = (c0) => {
+      const words = changedWords(c0);
+      return (c0.L0 || '') + (words ? ` · ${words}` : '');
     };
-    const win = fitWindow(changed, safeCh, null, rowsAvail, iw, (c) => wrap(textOf(c), tw).length);
+    const win = fitHeights(changed.map((c0) => wrap(textOf(c0), tw).length), safeCh, rowsAvail);
     const above = win.start;
     const below = changed.length - win.end;
     return (
       <>
-        {above > 0 ? <Text color={PALETTE.dim}>  ↑ {above} more</Text> : null}
-        {changed.slice(win.start, win.end).map((c, k) => {
+        {above > 0 ? <Text color={c('muted')}>  ↑ {above} more</Text> : null}
+        {changed.slice(win.start, win.end).map((c0, k) => {
           const i = win.start + k;
           const on = i === safeCh && f;
           return (
-            <Box key={c.ref + c.ts} flexDirection="column">
-              {wrap(textOf(c), tw).map((ln, li) => (
-                <Text key={li} wrap="truncate" backgroundColor={on ? BAR_BG : undefined} bold={on} dimColor={!f}>
-                  <Text color={on ? '#FFFFFF' : PALETTE.dim}>{li === 0 ? `${on ? '▶ ' : '  '}${pad(ageOf(c.ts, t), 3)} ` : ' '.repeat(7)}</Text>
-                  <Text color={on ? '#FFFFFF' : PALETTE.text}>{pad(ln, tw)}</Text>
+            <Box key={c0.ref + c0.ts} flexDirection="column">
+              {wrap(textOf(c0), tw).map((ln, li) => (
+                <Text key={li} wrap="truncate" backgroundColor={on && !mono() ? BAR_BG : undefined} inverse={on && mono()} bold={on}>
+                  <Text color={on ? '#FFFFFF' : c('muted')}>{li === 0 ? `${on ? '▶ ' : '  '}${pad(ageOf(c0.ts, t), 3)} ` : ' '.repeat(7)}</Text>
+                  <Text color={on ? '#FFFFFF' : (li === 0 ? c('text') : c('muted'))}>{pad(ln, tw)}</Text>
                 </Text>
               ))}
             </Box>
           );
         })}
-        {below > 0 ? <Text color={PALETTE.dim}>  ↓ {below} more</Text> : null}
+        {below > 0 ? <Text color={c('muted')}>  ↓ {below} more</Text> : null}
       </>
     );
   };
 
   const areasBody = (w, rowsAvail) => {
-    const iw = innerOf(w);
+    const cw = Math.max(18, w - 1);
     const f = focus('areas');
     const list = [{ area: null, label: 'All areas', state: null }, ...areas];
-    const win = winLines(list.length, safeAr, rowsAvail);
-    return list.slice(win.start, win.end).map((a, k) => {
-      const i = win.start + k;
-      const on = i === safeAr && f;
-      const active = (a.area || null) === filter;
+    const views = list.map((a, i) => {
       const n = a.area ? allNeeds.filter((x) => x.area === a.area).length : allNeeds.length;
-      return (
-        <Text key={a.area || 'all'} wrap="truncate" backgroundColor={on ? BAR_BG : undefined} bold={on} dimColor={!f && !active}>
-          <Text color={on ? '#FFFFFF' : PALETTE.dim}>{on ? '▶ ' : '  '}</Text>
-          <Text color={a.state ? (STATE_HEX[a.state] || PALETTE.muted) : PALETTE.muted}>{a.state ? (GLYPH[a.state] || '?') : '◉'} </Text>
-          <Text color={on ? '#FFFFFF' : PALETTE.text}>{pad(clip(a.label || a.area, iw - 9), iw - 9)}</Text>
-          <Text color={n ? STATE_HEX.attention : PALETTE.dim}> {n ? String(n).padStart(2) : ' ·'}</Text>
-          <Text color={PALETTE.accent}>{active ? ' ●' : '  '}</Text>
-        </Text>
-      );
+      return lucidArea({
+        area: a.area, label: a.label, state: a.state, L0: a.L0, last: a.last, n, active: (a.area || null) === filter && filter != null,
+        selected: i === safeAr && f, focused: f, expanded: i === safeAr && f, now: t,
+      }, cw);
     });
+    const win = fitHeights(views.map(cardHeight), safeAr, rowsAvail);
+    return (
+      <>
+        {win.start > 0 ? <Text color={c('muted')}>  ↑ {win.start} more</Text> : null}
+        {list.slice(win.start, win.end).map((a, k) => (
+          <LucidCard key={a.area || 'all'} view={views[win.start + k]} t={revealOf('a:' + (a.area || ''))} />
+        ))}
+        {win.end < list.length ? <Text color={c('muted')}>  ↓ {list.length - win.end} more</Text> : null}
+      </>
+    );
   };
 
   const counts = {
@@ -602,14 +599,21 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
     areas: areas.length,
   };
   const bodies = { needs: needsBody, changed: changedBody, areas: areasBody };
+  const col = (p, w, h0, children, note0) => (
+    <Box flexDirection="column" width={w} height={h0}>
+      <PaneTitle title={PANE_TITLE[p]} count={counts[p]} focused={focus(p)} width={w - 1} note={note0} />
+      {children}
+    </Box>
+  );
 
   let body;
   if (help) {
     const K = (k, d) => (
-      <Text key={k}><Text bold color={PALETTE.brand}>{pad(k, 14)}</Text><Text color={PALETTE.text}>{d}</Text></Text>
+      <Text key={k}><Text bold color={c('key')}>{pad(k, 14)}</Text><Text color={c('text')}>{d}</Text></Text>
     );
     body = (
-      <Panel title="KEYS" count="" focused width={cols - 2} height={bodyH}>
+      <Box flexDirection="column" height={bodyH}>
+        <PaneTitle title="KEYS" count="" focused width={cols - 2} />
         {K('↑ ↓  j k', 'move the highlighted row (inside an open item: pick an action)')}
         {K('Tab / S-Tab', 'switch panel: Needs you, Since you looked, Areas')}
         {K('Enter', 'open an item / do the highlighted action / filter by area')}
@@ -621,35 +625,25 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
         {K('r', 'refresh now (it also refreshes every 10s)')}
         {K('?', 'close this help')}
         {K('q  Ctrl-C', 'quit')}
-        <Text color={PALETTE.dim}>Press ? or Esc to go back.</Text>
-      </Panel>
+        <Text color={c('muted')}>Press ? or Esc to go back.</Text>
+      </Box>
     );
   } else if (wide) {
-    const sl = slide ? slide * 4 : 0;
     const needsH = big ? bodyH : Math.ceil(bodyH * 0.6);
     const chH = bodyH - needsH;
+    const nNote = filterLabel ? `· ${filterLabel}` : '';
     body = (
-      <Box width={cols - 2 - sl} marginLeft={sl}>
-        <Panel title={PANE_TITLE.areas} count={counts.areas} focused={focus('areas')} width={leftW} height={bodyH}>
-          {areasBody(leftW, listRows)}
-        </Panel>
+      <Box width={cols - 2}>
+        {col('areas', leftW, bodyH, areasBody(leftW, listRows))}
         {big ? (
           <>
-            <Panel title={PANE_TITLE.needs} count={counts.needs} focused={focus('needs')} width={mainW + sl} height={bodyH} note={filterLabel ? `· ${filterLabel}` : ''}>
-              {needsBody(mainW, listRows)}
-            </Panel>
-            <Panel title={PANE_TITLE.changed} count={counts.changed} focused={focus('changed')} width={rightW} height={bodyH}>
-              {changedBody(rightW, listRows)}
-            </Panel>
+            {col('needs', mainW, bodyH, needsBody(mainW, listRows), nNote)}
+            {col('changed', rightW, bodyH, changedBody(rightW, listRows))}
           </>
         ) : (
-          <Box flexDirection="column">
-            <Panel title={PANE_TITLE.needs} count={counts.needs} focused={focus('needs')} width={mainW + sl} height={needsH} note={filterLabel ? `· ${filterLabel}` : ''}>
-              {needsBody(mainW, needsH - 3)}
-            </Panel>
-            <Panel title={PANE_TITLE.changed} count={counts.changed} focused={focus('changed')} width={mainW + sl} height={chH}>
-              {changedBody(mainW, chH - 3)}
-            </Panel>
+          <Box flexDirection="column" width={mainW}>
+            {col('needs', mainW, needsH, needsBody(mainW, needsH - 1), nNote)}
+            {col('changed', mainW, chH, changedBody(mainW, chH - 1))}
           </Box>
         )}
       </Box>
@@ -660,11 +654,9 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
     const focH = Math.max(6, bodyH - others.length);
     body = (
       <Box flexDirection="column">
-        <Panel title={PANE_TITLE[pane]} count={counts[pane]} focused width={stackW} height={focH} note={filterLabel && pane === 'needs' ? `· ${filterLabel}` : ''}>
-          {bodies[pane](stackW, focH - 3)}
-        </Panel>
+        {col(pane, stackW, focH, bodies[pane](stackW, focH - 1), filterLabel && pane === 'needs' ? `· ${filterLabel}` : '')}
         {others.map((p) => (
-          <Text key={p} wrap="truncate" color={PALETTE.dim}> ▸ {PANE_TITLE[p]} {counts[p]}  (Tab)</Text>
+          <Text key={p} wrap="truncate" color={c('muted')}> ▸ {PANE_TITLE[p]} {counts[p]}  (Tab)</Text>
         ))}
       </Box>
     );
@@ -687,8 +679,8 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
       act = [['Enter', 'open'], ['d', 'do something'], ['u', 'not urgent'], ['c', 'I care'], ['m', 'mark all seen']];
     }
   } else if (pane === 'changed') {
-    const c = changed[safeCh];
-    where = c ? `▶ Since you looked · ${safeCh + 1} of ${changed.length} · ${clip(c.L0 || '', 60)}` : '▶ Since you looked · nothing changed';
+    const c1 = changed[safeCh];
+    where = c1 ? `▶ Since you looked · ${safeCh + 1} of ${changed.length} · ${clip(c1.L0 || '', 60)}` : '▶ Since you looked · nothing changed';
     act = [['Enter', 'show detail'], ['m', 'mark all seen'], ['Tab', 'next panel']];
   } else {
     const a = areas[safeAr - 1];
@@ -706,22 +698,22 @@ export function LucidDeck({ api, intervalMs = 10000, now = () => Date.now(), onE
       {header}
       {body}
       {confirm ? (
-        <Text wrap="truncate" backgroundColor={STATE_HEX.attention} color="#0B1220" bold> {confirm.text.endsWith('y/n') ? confirm.text : confirm.text + ' y/n'}{confirm.extra ? '  ·  ' + confirm.extra : ''} </Text>
+        <Text wrap="truncate" backgroundColor={mono() ? undefined : c('warn')} inverse={mono()} color={mono() ? undefined : '#0B1220'} bold> {confirm.text.endsWith('y/n') ? confirm.text : confirm.text + ' y/n'}{confirm.extra ? '  ·  ' + confirm.extra : ''} </Text>
       ) : noteLive ? (
-        <Text wrap="truncate" bold color={noteHex}>{noteLive.tone === 'ok' ? '✔ ' : noteLive.tone === 'bad' ? '✖ ' : noteLive.tone === 'busy' ? '◐ ' : 'ℹ '}{noteLive.text}</Text>
+        <Text wrap="truncate" bold color={c(noteRole)}>{noteLive.tone === 'ok' ? '✔ ' : noteLive.tone === 'bad' ? '✖ ' : noteLive.tone === 'busy' ? '◐ ' : 'ℹ '}{noteLive.text}</Text>
       ) : (
-        <Text wrap="truncate" color={spots.length || dau.length ? STATE_HEX.attention : PALETTE.dim}>
+        <Text wrap="truncate" color={spots.length || dau.length ? c('warn') : c('muted')}>
           {dau.length ? `doesn't add up (${dau.length}): ${clip(dau[0].L0 || '', 60)} · ` : ''}{spots.length ? `can't see: ${spots.map((s) => s.text).join(' · ')}` : 'Every expected source is speaking.'}
         </Text>
       )}
       <Text wrap="truncate">
-        <Text bold color={PALETTE.accent}>{where}</Text>
-        <Text color={PALETTE.dim}>  ·  </Text>
+        <Text bold color={c('key')}>{where}</Text>
+        <Text color={c('muted')}>  ·  </Text>
         {act.map(([k, l], i) => (
-          <Text key={k}>{i ? '  ' : ''}<Text bold color={PALETTE.brand}>{k}:</Text><Text color={PALETTE.muted}> {l}</Text></Text>
+          <Text key={k}>{i ? '  ' : ''}<Text bold color={c('sky')}>{k}:</Text><Text color={c('muted')}> {l}</Text></Text>
         ))}
       </Text>
-      <Hints items={hints} cols={cols} />
+      <Hints items={hints} />
     </Box>
   );
 }