@mnemahq/cli 0.7.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mnemahq/cli",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Mnema CLI — connect a repo to your Mnema workspace: install session capture, sweep past sessions, and search from the terminal.",
   "type": "module",
   "bin": {

package/src/cli.mjs

@@ -493,7 +493,9 @@ async function cmdUninstall(flags) {
 function help() {
   console.log(`mnema ${VERSION} — connect a repo to your Mnema workspace
 
-Usage: mnema <command> [options]
+Usage: mnema [command] [options]
+
+  mnema                Open the interactive briefing (a terminal, Node 20+)
 
 Commands:
   login        Sign in (opens a browser; tokens go to your OS keychain)
@@ -512,13 +514,23 @@ Read your workspace:
   tasks        List tasks            [--status --project --limit]
   next         The next task to pick up, with a ready-made branch name
   docs         List documents        [--limit]
-  doc <id>     Print one document as markdown
+  doc [id]     Print one document as markdown; no id opens a picker
   projects     List projects
   briefing     What deserves attention — pulse, deltas, findings
 
 Ask the knowledge graph (paid feature):
   ask "q"      A cited answer, with the confidence it deserves
-  graph <a> [b]  Neighbourhood of a, or the shortest path from a to b
+  graph        Neighbourhood of a node, or the path between two
+
+Examples:
+  mnema                                  the interactive briefing
+  mnema tasks --status in_progress
+  mnema doc                              pick a document from a list
+  mnema ask "why did we drop the queue?"
+  mnema graph "Workspace Security & Management"
+
+  ⚠️  Quote anything with spaces or & — otherwise your SHELL eats it before
+      mnema sees it, and zsh reports a parse error that looks like a broken CLI.
 
 Options:
   --workspace <id>   Workspace id (else prompted / MNEMA_WORKSPACE_ID)
@@ -560,6 +572,7 @@ async function openTuiOrHelp(flags) {
     const ctx = resolveContext(flags);
     return startTui({
       ...ctx,
+      version: VERSION,
       call: (fn) => call(ctx, fn),
     });
   }

package/src/render/mark-art.mjs

@@ -0,0 +1,160 @@
+/**
+ * The Mnema mark, drawn in a terminal (t-636).
+ *
+ * ⭐ THE TRICK IS '▀'. One character cell carries TWO vertical pixels: the
+ * foreground colour paints the upper half, the background colour the lower half.
+ * That doubles vertical resolution, which matters enormously because a terminal
+ * cell is roughly twice as tall as it is wide — without it, any mark comes out
+ * squashed to half height and reads as a smudge.
+ *
+ * ⚠️ RASTERISED FROM THE REAL GEOMETRY, NOT EYEBALLED. The mark is
+ * apps/web/public/favicon.svg and it is three shapes on a 100×100 field:
+ *
+ *     left stem   rect x=24 y=13 w=11 h=74     (full height, has the descender)
+ *     right stem  rect x=65 y=13 w=11 h=47     (stops where the arch meets it)
+ *     arch        M24,60 C24,80 76,80 76,60 L65,60 C65,73 35,73 35,60 Z
+ *
+ * Hand-drawing an ASCII approximation would drift from the brand the first time
+ * either changed, and nothing would catch it. Evaluating the actual geometry means
+ * the terminal mark IS the mark — and it costs about forty lines, no dependency,
+ * and no SVG parser.
+ */
+
+const BLACK = [0x00, 0x00, 0x00];
+const CREAM = [0xed, 0xe8, 0xdc];
+
+// ── the geometry, straight from favicon.svg ──────────────────────────────────
+
+/** Cubic Bézier, flattened to points. */
+function cubic(p0, p1, p2, p3, steps = 24) {
+  const out = [];
+  for (let i = 0; i <= steps; i += 1) {
+    const t = i / steps;
+    const u = 1 - t;
+    out.push([
+      u * u * u * p0[0] + 3 * u * u * t * p1[0] + 3 * u * t * t * p2[0] + t * t * t * p3[0],
+      u * u * u * p0[1] + 3 * u * u * t * p1[1] + 3 * u * t * t * p2[1] + t * t * t * p3[1],
+    ]);
+  }
+  return out;
+}
+
+/**
+ * The arch as one closed polygon: the outer curve, across, then the inner curve
+ * back. It is a single subpath in the SVG and does not self-intersect, so
+ * even-odd and nonzero agree and a plain point-in-polygon test is exact.
+ */
+const ARCH = [
+  ...cubic([24, 60], [24, 80], [76, 80], [76, 60]),
+  [65, 60],
+  ...cubic([65, 60], [65, 73], [35, 73], [35, 60]),
+];
+
+function inPolygon(x, y, poly) {
+  let inside = false;
+  for (let i = 0, j = poly.length - 1; i < poly.length; j = i, i += 1) {
+    const [xi, yi] = poly[i];
+    const [xj, yj] = poly[j];
+    if ((yi > y) !== (yj > y) && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
+}
+
+const inRect = (x, y, rx, ry, w, h) => x >= rx && x < rx + w && y >= ry && y < ry + h;
+
+/** Is this point on the cream part of the mark? */
+function inMark(x, y) {
+  return inRect(x, y, 24, 13, 11, 74)      // left stem
+    || inRect(x, y, 65, 13, 11, 47)        // right stem
+    || inPolygon(x, y, ARCH);              // arch
+}
+
+// ── rasterising ──────────────────────────────────────────────────────────────
+
+/**
+ * Coverage of one output pixel, 0..1, by supersampling.
+ *
+ * Antialiasing is not decoration here: at ~14 pixels across, a hard threshold
+ * turns the arch's curve into a staircase, and the two stems end up different
+ * widths depending on where the sample grid happens to land.
+ */
+function coverage(px, py, cols, pxRows, viewW, viewH, samples = 4) {
+  // ⚠️ CROPPED TO THE GLYPH, NOT THE ARTBOARD. The SVG's 100×100 field carries
+  // generous margins (the mark itself only occupies x 24..76, y 13..87), so
+  // rasterising the whole artboard spends a third of a small tile on emptiness
+  // and leaves the stems under a pixel wide. `view` is a square window centred on
+  // the glyph, which is what lets it stay legible at header size.
+  let hit = 0;
+  for (let sy = 0; sy < samples; sy += 1) {
+    for (let sx = 0; sx < samples; sx += 1) {
+      const x = 50 - viewW / 2 + ((px + (sx + 0.5) / samples) / cols) * viewW;
+      const y = 50 - viewH / 2 + ((py + (sy + 0.5) / samples) / pxRows) * viewH;
+      if (inMark(x, y)) hit += 1;
+    }
+  }
+  return hit / (samples * samples);
+}
+
+// The glyph's own bounding box, plus a little air. Cropping to THIS rather than to
+// a square is what makes the tile compact: the mark is 52 wide and 74 tall, so a
+// square tile would spend a third of its width on nothing.
+const GLYPH_W = 52 + 10;
+const GLYPH_H = 74 + 10;
+
+const mix = (a, b, t) => a.map((v, i) => Math.round(v + (b[i] - v) * t));
+
+/** Nearest xterm-256 index, for terminals without truecolour. */
+function to256([r, g, b]) {
+  const q = (v) => (v < 48 ? 0 : v < 114 ? 1 : Math.min(5, Math.round((v - 35) / 40)));
+  return 16 + 36 * q(r) + 6 * q(g) + q(b);
+}
+
+/**
+ * How much colour this terminal can actually show.
+ *
+ * ⚠️ TRUECOLOUR IS NOT IMPLIED BY 256-COLOUR SUPPORT and there is no query for it
+ * that works everywhere — COLORTERM is the convention. Guessing wrong does not
+ * degrade gracefully: a 24-bit sequence on a terminal that cannot read it prints
+ * the escape as literal text across the screen.
+ */
+export function colourDepth(env = process.env) {
+  const ct = String(env.COLORTERM ?? '').toLowerCase();
+  if (ct.includes('truecolor') || ct.includes('24bit')) return 24;
+  if (/-256(color)?$/.test(String(env.TERM ?? ''))) return 8;
+  return 4;
+}
+
+/**
+ * The mark, as an array of lines ready to print.
+ *
+ * @param size  pixels across; the output is `size` columns and `size/2` rows.
+ */
+export function markLines({ rows: wantRows = 5, depth = colourDepth(), tile = BLACK, ink = CREAM } = {}) {
+  // Below 24-bit there is no honest way to draw a two-tone antialiased mark, and a
+  // banded approximation looks like a rendering fault rather than a logo. The
+  // caller falls back to a wordmark.
+  if (depth < 8) return null;
+
+  // Half-blocks give SQUARE pixels — one cell is one column wide and two pixel
+  // rows tall — so the aspect ratio is preserved by matching the pixel grid to the
+  // glyph's box rather than by fudging either dimension.
+  const pxRows = wantRows * 2;
+  const cols = Math.max(3, Math.round(pxRows * (GLYPH_W / GLYPH_H)));
+
+  const rows = [];
+  for (let y = 0; y < pxRows; y += 2) {
+    let line = '';
+    for (let x = 0; x < cols; x += 1) {
+      const top = mix(tile, ink, coverage(x, y, cols, pxRows, GLYPH_W, GLYPH_H));
+      const bot = mix(tile, ink, coverage(x, y + 1, cols, pxRows, GLYPH_W, GLYPH_H));
+      line += depth >= 24
+        ? `\x1b[38;2;${top.join(';')}m\x1b[48;2;${bot.join(';')}m▀`
+        : `\x1b[38;5;${to256(top)}m\x1b[48;5;${to256(bot)}m▀`;
+    }
+    rows.push(`${line}\x1b[0m`);
+  }
+  return rows;
+}
+
+/** Plain-text identity for terminals that cannot draw, and for pipes. */
+export const WORDMARK = 'mnema';

package/src/tui/app.mjs

@@ -18,6 +18,8 @@ import { Box, Text, useApp, useInput } from 'ink';
 import { html } from './h.mjs';
 import { Briefing } from './screens/briefing.mjs';
 import { Finding } from './screens/finding.mjs';
+import { NodeScreen } from './screens/node.mjs';
+import { Header } from './components/header.mjs';
 
 const HOME = { name: 'briefing' };
 
@@ -65,25 +67,61 @@ export function App({ ctx }) {
       <//>`;
   }
 
-  const body = top.name === 'briefing'
-    ? html`<${Briefing} ctx=${wrapped} focused=${true} onOpen=${(f) => push({ name: 'finding', finding: f })} />`
-    : html`<${Finding} finding=${top.finding} />`;
+  // The trail is the stack's node screens, so the breadcrumb is derived rather
+  // than tracked separately — one source of truth for "where am I".
+  const trail = stack.filter((s) => s.name === 'node').map((s) => s.target.label ?? s.target.id);
+
+  let body;
+  if (top.name === 'briefing') {
+    body = html`<${Briefing} ctx=${wrapped} focused=${true} onOpen=${(f) => push({ name: 'finding', finding: f })} />`;
+  } else if (top.name === 'node') {
+    body = html`<${NodeScreen}
+      ctx=${wrapped}
+      target=${top.target}
+      trail=${trail}
+      focused=${true}
+      onOpen=${(n) => push({ name: 'node', target: n })}
+    />`;
+  } else {
+    // ⭐ A FINDING IS NO LONGER A DEAD END. Most carry subjectNodeId, so `enter`
+    // walks from "276 merged PRs have no task" into the actual node it is about —
+    // which is the difference between a report and something you can investigate.
+    body = html`<${Finding}
+      finding=${top.finding}
+      focused=${true}
+      onOpenSubject=${(t) => push({ name: 'node', target: t })}
+    />`;
+  }
 
   return html`
     <${Box} flexDirection="column">
-      <${Box} paddingX=${1}>
-        <${Text} bold color="cyan">mnema<//>
-        <${Text} dimColor>  ${ctx.workspaceName ?? ctx.workspaceId ?? ''}<//>
-        ${ctx.plan ? html`<${Text} dimColor>  ${ctx.plan}<//>` : null}
-        ${ctx.edition === 'core' ? html`<${Text} dimColor>  core<//>` : null}
-      <//>
+      <${Header}
+        version=${ctx.version ?? ''}
+        workspace=${ctx.workspaceName ?? ctx.workspaceId ?? ''}
+        plan=${ctx.plan}
+        edition=${ctx.edition}
+        cwd=${ctx.root}
+      />
       ${body}
       <${Box} paddingX=${1} marginTop=${1}>
-        <${Text} dimColor>${top.name === 'briefing'
-          ? '↑↓ move · enter open · r refresh · q quit'
-          : 'esc back · q quit'}<//>
+        <${Text} dimColor>${footerFor(top)}<//>
       <//>
     <//>`;
 }
 
+/** The keys that actually do something on THIS screen — never a generic legend. */
+function footerFor(top) {
+  if (top.name === 'briefing') return '↑↓ move · enter open · r refresh · q quit';
+  if (top.name === 'node') return '↑↓ move · enter walk in · esc back · r refresh · q quit';
+  if (top.name === 'finding') {
+    // Only offer the key that works. A grouped finding has members to open; a
+    // single one is an aggregate with nothing beneath it, and advertising `enter`
+    // there teaches people the UI is unresponsive.
+    return top.finding?.members?.length
+      ? '↑↓ move · enter open in graph · esc back · q quit'
+      : 'esc back · q quit';
+  }
+  return 'esc back · q quit';
+}
+
 export { HOME };

package/src/tui/components/header.mjs

@@ -0,0 +1,66 @@
+/**
+ * The identity block (t-636).
+ *
+ * ⭐ WHAT MAKES A TERMINAL APP LOOK LIKE A PRODUCT rather than a shell prompt is
+ * this exact thing: a mark, then who you are and where you are, before anything
+ * else. The old header was one line of text and read as output; this reads as an
+ * application you have opened.
+ *
+ *     ░█░···░█░   Mnema  0.8.0
+ *     ░█░···░█░   Mnema · team · a67e6584
+ *     ░█▓░░░▓▓    ~/Projects/project-x
+ *     ░█▓▓▓▓░
+ *     ░█░
+ *
+ * ⚠️ THE MARK IS NOT ALWAYS DRAWABLE, and the failure is ugly rather than subtle:
+ * a 24-bit escape on a terminal that cannot read it prints as literal text across
+ * the screen. markLines() returns null below 256 colours and the header falls back
+ * to the wordmark, which is a real state and not a theoretical one — TERM=xterm
+ * over a plain ssh hits it.
+ */
+
+import { Box, Text } from 'ink';
+import { html } from '../h.mjs';
+import { markLines, WORDMARK } from '../../render/mark-art.mjs';
+
+/** Shorten a home-relative path the way a shell prompt would. */
+function shortPath(cwd, home = process.env.HOME) {
+  if (!cwd) return '';
+  return home && cwd.startsWith(home) ? `~${cwd.slice(home.length)}` : cwd;
+}
+
+export function Header({ version, workspace, plan, edition, cwd, rows = 6 }) {
+  const art = markLines({ rows });
+
+  const facts = [workspace, plan, edition === 'core' ? 'core' : null].filter(Boolean).join(' · ');
+
+  const info = html`
+    <${Box} flexDirection="column">
+      <${Box}>
+        <${Text} bold>Mnema<//>
+        <${Text} dimColor>  ${version}<//>
+      <//>
+      ${facts ? html`<${Text} dimColor>${facts}<//>` : null}
+      ${cwd ? html`<${Text} dimColor>${shortPath(cwd)}<//>` : null}
+    <//>`;
+
+  if (!art) {
+    // No mark: keep the same shape, just without the tile. Dropping the block
+    // entirely would make the app look different on different machines for a
+    // reason the user cannot see.
+    return html`
+      <${Box} paddingX=${1} paddingY=${0}>
+        <${Text} bold color="cyan">${WORDMARK}<//>
+        <${Text}>  <//>
+        ${info}
+      <//>`;
+  }
+
+  return html`
+    <${Box} paddingX=${1}>
+      <${Box} flexDirection="column" marginRight=${2}>
+        ${art.map((line, i) => html`<${Text} key=${i}>${line}<//>`)}
+      <//>
+      ${info}
+    <//>`;
+}

package/src/tui/components/list.mjs

@@ -15,32 +15,66 @@ import { Box, Text, useInput } from 'ink';
 import { html } from '../h.mjs';
 
 export function List({ items, focused = true, height = 10, onSelect }) {
-  const [cursor, setCursor] = useState(0);
+  // ⭐ START ON A REAL ROW, NOT A HEADING. In the graph walker the very first row
+  // is always a type header ("rationale  97"), so a cursor initialised to 0 sits
+  // on something that cannot be opened — the user's first `enter` does nothing at
+  // all, which reads as a broken UI rather than a misplaced cursor. Caught by the
+  // test, not by looking at it.
+  const [cursor, setCursor] = useState(() => {
+    const i = items.findIndex((it) => !it.header);
+    return i === -1 ? 0 : i;
+  });
   const [top, setTop] = useState(0);
 
+  // ⚠️ HEADERS ARE ROWS BUT NOT DESTINATIONS. The graph walker groups 201
+  // neighbours under type headings so the structure is visible, and a cursor that
+  // can land on "concept  46" would let you press enter on a heading — which has
+  // nothing to open. Movement skips them, in the direction you were already going.
+  const selectable = (i) => items[i] && !items[i].header;
+
   const move = (delta) => {
-    const next = Math.min(items.length - 1, Math.max(0, cursor + delta));
+    const step = delta > 0 ? 1 : -1;
+    let next = cursor + delta;
+    while (next >= 0 && next < items.length && !selectable(next)) next += step;
+    // Ran off the end past a trailing header — fall back to the nearest selectable
+    // row rather than parking the cursor on a heading or losing it entirely.
+    if (next < 0 || next >= items.length) {
+      next = cursor;
+      let probe = delta > 0 ? items.length - 1 : 0;
+      while (probe >= 0 && probe < items.length && !selectable(probe)) probe += (delta > 0 ? -1 : 1);
+      if (selectable(probe)) next = probe;
+    }
     setCursor(next);
     if (next < top) setTop(next);
     if (next >= top + height) setTop(next - height + 1);
   };
 
+  const firstSelectable = items.findIndex((it) => !it.header);
+
   useInput((input, key) => {
     if (key.upArrow || input === 'k') move(-1);
     else if (key.downArrow || input === 'j') move(1);
-    else if (input === 'g') { setCursor(0); setTop(0); }
-    else if (input === 'G') { setCursor(items.length - 1); setTop(Math.max(0, items.length - height)); }
-    else if (key.return && onSelect) onSelect(cursor);
-  }, { isActive: Boolean(focused) && items.length > 0 });
+    else if (input === 'g') { setCursor(Math.max(0, firstSelectable)); setTop(0); }
+    else if (input === 'G') { move(items.length); }
+    else if (key.return && onSelect && selectable(cursor)) onSelect(cursor);
+  }, { isActive: Boolean(focused) && items.some((i) => !i.header) });
 
   const view = items.slice(top, top + height);
-  const leftWidth = Math.max(0, ...items.map((i) => (i.left ?? '').length));
+  const leftWidth = Math.max(0, ...items.filter((i) => !i.header).map((i) => (i.left ?? '').length));
 
   return html`
     <${Box} flexDirection="column">
       ${view.map((item, i) => {
         const idx = top + i;
         const on = idx === cursor && focused;
+        if (item.header) {
+          return html`
+            <${Box} key=${item.key ?? idx} marginTop=${idx === top ? 0 : 1}>
+              <${Text}>  <//>
+              <${Text} bold color="yellow">${item.label}<//>
+              ${item.count !== undefined ? html`<${Text} dimColor>  ${item.count}<//>` : null}
+            <//>`;
+        }
         return html`
           <${Box} key=${item.key ?? idx}>
             <${Text} color=${on ? 'cyan' : undefined}>${on ? '❯ ' : '  '}<//>

package/src/tui/screens/finding.mjs

@@ -1,53 +1,89 @@
 /**
- * One finding, in full (t-632).
+ * One finding, and the way into the graph beneath it (t-632, corrected t-634).
  *
- * ⚠️ THE HEADLINE IS A SUMMARY, AND A SUMMARY OF A FINDING IS EXACTLY WHERE A
- * NUMBER LOSES ITS CAVEATS. "0 of 1238 decisions turned into work" reads as an
- * indictment until you know the window is 90 days and the engine only sees
- * decisions that were recorded. So the detail view shows what the engine actually
- * had — subject, evidence, window — rather than restating the headline larger.
+ * ⭐ I BUILT THE FIRST VERSION AGAINST THE SDK'S `Finding` INTERFACE AND IT WAS
+ * THE WRONG SHAPE. That interface describes a MEMBER of a grouped finding; a
+ * briefing row is something else entirely. Checked against prod, a briefing row
+ * carries:
+ *
+ *     id, grouped, kind, rule, headline, count, score, members, subjectKeys
+ *
+ * and NOT `subject`, `subjectNodeId`, `evidence`, `detail`, `severity` or
+ * `window` — every one of which the first version rendered. So every finding
+ * showed "No evidence rows came back with this finding", which reads as the engine
+ * returning nothing when in fact the screen was reading fields that were never
+ * there. A feature running clean and producing nothing, again, and it survived a
+ * PR because the tests used the shape I had invented rather than the shape prod
+ * sends.
+ *
+ * ⚠️ TWO GENUINELY DIFFERENT SHAPES, and conflating them is what caused it:
+ *
+ *   grouped   has `members[]`, and each member IS a full finding WITH a
+ *             subjectNodeId — so this is the real drill-down: finding → the
+ *             specific pair of contradicting decisions → that node in the graph.
+ *   single    is an aggregate over thousands of rows ("1,238 decisions have no
+ *             task"). There is no one node it is about, and inventing a subject
+ *             so the UI looks uniform would be worse than saying so.
+ *
+ * Live when this was written: 2 grouped (4 and 5 members), 7 single.
  */
 
 import { Box, Text } from 'ink';
 import { html } from '../h.mjs';
+import { List } from '../components/list.mjs';
 
 const Row = ({ label, children }) => html`
   <${Box}>
-    <${Text} dimColor>${String(label).padEnd(10)}  <//>
+    <${Text} dimColor>${String(label).padEnd(9)}  <//>
     <${Text}>${children}<//>
   <//>`;
 
-export function Finding({ finding }) {
+export function Finding({ finding, focused, onOpenSubject }) {
   if (!finding) {
     return html`<${Box} paddingX=${1}><${Text} dimColor>Nothing selected.<//><//>`;
   }
 
-  const evidence = finding.evidence ?? finding.subjects ?? [];
+  const members = Array.isArray(finding.members) ? finding.members : [];
+  const pct = typeof finding.score === 'number' ? `${Math.round(finding.score * 100)}%` : null;
 
   return html`
     <${Box} flexDirection="column" paddingX=${1}>
       <${Text} bold>${finding.headline ?? '(no headline)'}<//>
+
       <${Box} flexDirection="column" marginTop=${1}>
         ${html`<${Row} label="kind">${finding.kind ?? '—'}<//>`}
-        ${finding.grouped ? html`<${Row} label="grouped">${finding.count} occurrences<//>` : null}
-        ${finding.severity ? html`<${Row} label="severity">${finding.severity}<//>` : null}
-        ${finding.window ? html`<${Row} label="window">${finding.window}<//>` : null}
+        ${finding.rule ? html`<${Row} label="rule">${finding.rule}<//>` : null}
+        ${pct ? html`<${Row} label="score">${pct}<//>` : null}
       <//>
 
-      ${finding.detail
-        ? html`<${Box} marginTop=${1}><${Text} dimColor>${finding.detail}<//><//>`
-        : null}
-
-      ${Array.isArray(evidence) && evidence.length
+      ${members.length
         ? html`
           <${Box} flexDirection="column" marginTop=${1}>
-            <${Text} bold>Evidence<//>
-            ${evidence.slice(0, 8).map((e, i) => html`
-              <${Text} key=${i} dimColor>  ${typeof e === 'string' ? e : (e.label ?? e.title ?? JSON.stringify(e))}<//>`)}
-            ${evidence.length > 8
-              ? html`<${Text} dimColor>  … ${evidence.length - 8} more — mnema briefing --json<//>`
-              : null}
+            <${Box}>
+              <${Text} bold>Occurrences<//>
+              <${Text} dimColor>  ${members.length} · enter opens one in the graph<//>
+            <//>
+            <${List}
+              items=${members.map((m) => ({
+                key: m.id,
+                left: m.subject ?? '',
+                label: m.headline ?? '',
+              }))}
+              focused=${focused}
+              height=${8}
+              onSelect=${(i) => {
+                const m = members[i];
+                if (m?.subjectNodeId && onOpenSubject) {
+                  onOpenSubject({ id: m.subjectNodeId, label: m.subject ?? undefined });
+                }
+              }}
+            />
           <//>`
-        : html`<${Box} marginTop=${1}><${Text} dimColor>No evidence rows came back with this finding.<//><//>`}
+        : html`
+          <${Box} marginTop=${1} flexDirection="column">
+            <${Text} dimColor>An aggregate across the whole workspace, not one node —<//>
+            <${Text} dimColor>so there is nothing single to open from here.<//>
+            <${Text} dimColor>\`mnema briefing --json\` has the full row.<//>
+          <//>`}
     <//>`;
 }

package/src/tui/screens/node.mjs

@@ -0,0 +1,106 @@
+/**
+ * One graph node, and everything connected to it (t-634).
+ *
+ * ⭐ THIS IS THE SCREEN THE TUI WAS MISSING. The briefing ended at a finding and
+ * stopped, so the most interesting surface Mnema has — the graph — could only be
+ * reached by typing a node label into a one-shot command and reading a flat list.
+ * A community connects to concepts, concepts to rationales; the point is to walk
+ * that, not to print it.
+ *
+ * ⚠️ GROUPED BY TYPE, IN ONE LIST, and that shape is a decision rather than a
+ * default. A real hub returns 201 neighbours across 8 types — concept 46,
+ * rationale 97, gap 37, decision 6, issue 10, and so on. A flat list of 201 is
+ * unusable; a type picker that then opens a second list makes every node two
+ * keystrokes further away and hides the interesting fact that there are 97
+ * rationales here. Headers in a single scrolling list show the structure AND keep
+ * every node one keystroke away.
+ *
+ * ⚠️ AND WE WALK BY ID, NOT BY LABEL. traverse() accepts both — verified against
+ * prod — but re-resolving a label could land on a different node that happens to
+ * share a name, which in a knowledge graph is not a hypothetical.
+ */
+
+import { Box, Text, useInput } from 'ink';
+import { html } from '../h.mjs';
+import { useResource, ago } from '../store.mjs';
+import { List } from '../components/list.mjs';
+
+/** Most numerous first: the shape of a neighbourhood is itself information. */
+function group(nodes, centreId) {
+  const byType = new Map();
+  for (const n of nodes) {
+    if (n.id === centreId) continue;
+    if (!byType.has(n.type)) byType.set(n.type, []);
+    byType.get(n.type).push(n);
+  }
+  const rows = [];
+  for (const [type, list] of [...byType.entries()].sort((a, b) => b[1].length - a[1].length)) {
+    rows.push({ header: true, key: `h:${type}`, label: type, count: list.length });
+    for (const n of list) rows.push({ key: n.id, label: n.label ?? '(unlabelled)', node: n });
+  }
+  return rows;
+}
+
+export function NodeScreen({ ctx, target, focused, onOpen, trail = [] }) {
+  const key = target.id ?? target.label;
+  const { status, data, error, elapsed, at, reload } = useResource(`node:${key}`, () =>
+    ctx.call((m) => m.graph.traverse(key)));
+
+  useInput((input) => { if (input === 'r') reload(); }, { isActive: Boolean(focused) });
+
+  if (status === 'loading') {
+    return html`<${Box} flexDirection="column" paddingX=${1}>
+      ${trail.length ? html`<${Text} dimColor>${trail.join(' › ')}<//>` : null}
+      <${Text} dimColor>Walking to ${target.label ?? key}… ${elapsed > 1 ? `${elapsed}s` : ''}<//>
+    <//>`;
+  }
+
+  if (error && !data) {
+    return html`<${Box} flexDirection="column" paddingX=${1}>
+      <${Text} color="red">${error.message ?? String(error)}<//>
+      <${Text} dimColor>r to retry · esc to go back<//>
+    <//>`;
+  }
+
+  const g = data ?? { nodes: [], edges: [] };
+  // The centre is the node we asked for. Match on id when we have one, and fall
+  // back to the label only when we arrived here by name from the command line.
+  const centre = g.nodes.find((n) => n.id === target.id)
+    ?? g.nodes.find((n) => n.label === target.label)
+    ?? { label: target.label ?? key, type: '?' };
+  const rows = group(g.nodes, centre.id);
+  const neighbours = rows.filter((r) => !r.header).length;
+
+  return html`
+    <${Box} flexDirection="column" paddingX=${1}>
+      ${trail.length > 1
+        ? html`<${Text} dimColor>${trail.slice(0, -1).join(' › ')} ›<//>`
+        : null}
+
+      <${Box}>
+        <${Text} bold>${centre.label}<//>
+        <${Text} dimColor>  ${centre.type}<//>
+        ${centre.isGodNode ? html`<${Text} color="yellow">  ★ load-bearing<//>` : null}
+      <//>
+
+      ${centre.summary
+        ? html`<${Box} marginTop=${1}><${Text} dimColor>${centre.summary}<//><//>`
+        : null}
+
+      <${Box} marginTop=${1}>
+        <${Text} bold>Connected<//>
+        <${Text} dimColor>  ${neighbours} node${neighbours === 1 ? '' : 's'} · ${g.edges.length} edge${g.edges.length === 1 ? '' : 's'} · ${ago(at)}<//>
+      <//>
+
+      ${neighbours === 0
+        ? html`<${Text} dimColor>  Nothing is connected to this node yet.<//>`
+        : html`<${List}
+            items=${rows}
+            focused=${focused}
+            height=${12}
+            onSelect=${(i) => onOpen(rows[i].node)}
+          />`}
+
+      ${error ? html`<${Box} marginTop=${1}><${Text} color="yellow">refresh failed — ${error.message ?? String(error)}<//><//>` : null}
+    <//>`;
+}