@inerrata-corporation/errata 2.0.21 → 2.0.22-dev.4049

package/resources/claude-mods/errata-minimap/hooks/register.tsx

@@ -1,44 +1,41 @@
 import { atom, read, update } from 'claude-code'
 import type { EngineInterface, Register, Timer } from 'claude-code'
 
-import type { Burst, MapGraph, Verdict } from '../types'
+import type { Burst, ChainFacts, MapGraph, Verdict } from '../types'
+import { BINDING_GLYPH, BINDING_NAME, bindingOf, fitTitle, focusBook, librarySpots, PALETTE, rasterizeLibrary } from './bookcase'
+import type { Binding, LibraryFrame, LibraryOptions, Room } from './bookcase'
+import { bookHolding, callNumber, catalogue, enrichTargets, parseNeighbors } from './chains'
+import type { Catalog } from './chains'
+import { colorOf, crossEdges, DARK_BG, glyphOf, layoutRadial, LIGHT_BG, rasterizeGraph, SCOPE_COLOR, SCOPE_ORDER, VERDICT_COLOR } from './graph'
+import type { RasterOptions } from './graph'
 import {
-  colorOf,
-  DARK_BG,
-  FULL,
-  LIGHT_BG,
   displayName,
-  glyphOf,
-  hex,
   JUDGMENT_STYLE,
   layoutBurst,
-  parseJudgments,
-  resolveJudgmentRef,
-  neighborIds,
   parseAgentBurst,
   parseAgentSearch,
   parseFileRecall,
+  parseJudgments,
   parsePromptPrime,
-  rasterize,
-  SCOPE_COLOR,
-  SCOPE_ORDER,
-  seedNode,
   relPath,
+  resolveJudgmentRef,
+  seedNode,
   shortName,
   statusLine,
   textsOf,
 } from './minimap'
-import type { Frame, HandleTable, JudgmentKind, RasterOptions } from './minimap'
+import type { HandleTable, JudgmentKind } from './minimap'
+import { hasTags, TAG_MODES, tidyTags } from './tags'
+import type { TagMode } from './tags'
 
 const PANE = 'errata-minimap'
 const ERRATA = 'errata'
-const ENRICH_MAX = 8
-const TOP_ITEMS = 3
 
 const focus = atom({ plugin: 'errata-minimap', key: 'focus' } as const, '')
 const burst = atom({ plugin: 'errata-minimap', key: 'burst' } as const, null as Burst | null)
-const graph = atom({ plugin: 'errata-minimap', key: 'graph' } as const, { title: '', nodes: [], edges: [], at: 0 } as MapGraph)
+const graph = atom({ plugin: 'errata-minimap', key: 'graph' } as const, { title: '', nodes: [], at: 0 } as MapGraph)
 const verdicts = atom({ plugin: 'errata-minimap', key: 'verdicts' } as const, [] as Verdict[])
+const facts = atom({ plugin: 'errata-minimap', key: 'facts' } as const, {} as Record<string, ChainFacts | null>)
 
 const FILE_TOOLS = new Set(['Read', 'Edit', 'Write', 'MultiEdit', 'NotebookEdit'])
 const BURST_FILE = /\.errata\/g\/burst\/([^/]+)/
@@ -46,67 +43,138 @@ const BURST_FILE = /\.errata\/g\/burst\/([^/]+)/
 const ORIGIN_LABEL = { agent: 'agent burst', 'daemon-file': 'file recall', 'daemon-prompt': 'prompt prime' } as const
 
 // Module-level on purpose: a reload starts by redrawing whatever burst the session holds.
-const pending = { isRefreshing: false, drawnAt: -1 }
+const pending = { isRefreshing: false, drawnAt: -1, cataloguedAt: -1, askedFor: -1, asked: 0 }
+
+/**
+ * `errata_neighbors` calls per burst: each completes and places one chain (its
+ * cause/fix beyond the burst, package, local community, patterns, anchor). Run
+ * after the first draw, a few per tick, so the shelves fill in without ever
+ * holding the first picture back.
+ */
+const ENRICH_PER_BURST = 10
+const ENRICH_PER_TICK = 4
+/** Facts kept across bursts (the same chains recur); past this the cache keeps only the current burst's. */
+const FACTS_KEPT = 300
 
 /**
  * Whether the pane is drawn decides the UI. Drawn — docked beside a fullscreen
- * transcript, or inline above the prompt — it is the full map; waiting undrawn
- * on a narrow terminal, behind another tab or closed by hand, the map collapses
- * into the status line. The engine does the seating: an unasked pane waits
- * below 144 columns and takes its place once the terminal widens. The pane is
- * never closed here — closing an inline one dropped that request, and outside
- * fullscreen every seat is inline, so the map stayed collapsed for the session.
+ * transcript, or inline above the prompt — it is the full library; waiting
+ * undrawn on a narrow terminal, behind another tab or closed by hand, it
+ * collapses into the status line. The engine does the seating: an unasked pane
+ * waits below 144 columns and takes its place once the terminal widens. The
+ * pane is never closed here — closing an inline one dropped that request, and
+ * outside fullscreen every seat is inline, so the map stayed collapsed for the
+ * session.
  */
 const view = { isShown: false, status: undefined as string | undefined }
 
-/** Rows an inline pane asks for: room for the map without burying the transcript. */
+/** How the chat draws inline tags; kept in the plugin's store between sessions. */
+const tags = { mode: 'margin' as TagMode }
+const TAG_MODE_KEY = 'tagMode'
+
+/**
+ * What the pane draws: the library (default) or the original radial graph.
+ * Same burst, same enrichment — the graph's cross edges come from the facts
+ * the library fetched. Kept in the plugin's store between sessions.
+ */
+type PaneView = 'books' | 'graph'
+const PANE_VIEWS: readonly PaneView[] = ['books', 'graph']
+const pane = { view: 'books' as PaneView }
+const PANE_VIEW_KEY = 'paneView'
+
+/** Rows an inline pane asks for: room for a tier of bookcases and the card without burying the transcript. */
 const INLINE_ROWS = 20
+/** Rows on a portrait terminal: the header, one tier of shelves, a short card. */
+const COMPACT_ROWS = 11
+/** The terminal's own colour in a raster cell (bit 24 alone). */
+const DEFAULT_CELL = 0x01000000
 
-const GROW_MS = 1200
-const TYPE_MS = 600
+const GROW_MS = 900
+const TYPE_MS = 500
 const FRAME_MS = 33
 const HOLD_MS = 700
 const PULSE_MS = 180
 
 /**
- * The reveal and the highlight run on blits, not render passes: a new map's
- * routes grow out ring by ring, then its names type out; a prior the agent
- * bursts off pulses (its route to the seed lit) until the fresh results replace
- * the map. Only while docked — the status line has nothing to animate.
+ * The reveal and the highlight run on blits, not render passes: a new burst's
+ * books rise onto their shelves, then the catalog card inks in; a book the
+ * agent bursts off flashes gilt until the fresh results replace the shelves; a
+ * verdict turns the card to its book and flashes its stamp. Only while drawn —
+ * the status line has nothing to animate.
  */
 const MARK_MS = 4000
-/** How long a verdict stays in the footer and on the status line. */
+/** How long a verdict stays stamped on its book's plank, and on the status line. */
 const VERDICT_SHOWN_MS = 10 * 60 * 1000
 const VERDICT_STATUS_MS = 60 * 1000
 const VERDICTS_KEPT = 6
 
+const FULL: LibraryFrame = { grow: 1, type: 1 }
+
 const motion = {
-  /** Priors the agent just judged → their verdict, pulsing until `markUntil`. */
+  /** Priors the agent just judged → their verdict, flashing until `markUntil`. */
   marks: {} as Record<string, JudgmentKind>,
   markUntil: 0,
   isMarkOn: true,
   graphAt: -1,
   start: 0,
-  frame: FULL as Frame,
+  frame: FULL,
   highlight: undefined as string | undefined,
   highlightStart: 0,
   isPulseOn: true,
   raster: undefined as { columns: number; rows: number } | undefined,
-  bg: DARK_BG,
+  room: 'stacks' as Room,
   timer: undefined as Timer | undefined,
+  /** The node whose book the card reads: the latest one judged on the shelves; unset = the seed's book. */
+  focus: undefined as string | undefined,
+}
+
+async function catalogOf($: EngineInterface, map: MapGraph): Promise<Catalog> {
+  return catalogue(map, await read($, facts))
+}
+
+async function stamps($: EngineInterface): Promise<Record<string, JudgmentKind>> {
+  const now = await $.clock.now()
+  const out: Record<string, JudgmentKind> = {}
+  for (const v of (await read($, verdicts)).filter(v => now - v.at < VERDICT_SHOWN_MS).reverse()) out[v.id] = v.kind
+  return out
 }
 
-function rasterOptions(map: MapGraph): RasterOptions {
+async function libraryOptions($: EngineInterface, map: MapGraph): Promise<LibraryOptions> {
   return {
+    room: motion.room,
     frame: motion.graphAt === map.at ? motion.frame : FULL,
-    bg: motion.bg,
+    focus: motion.focus,
     highlight: motion.highlight,
     isPulseOn: motion.isPulseOn,
     marks: motion.marks,
     isMarkOn: motion.isMarkOn,
+    stamps: await stamps($),
   }
 }
 
+function graphOptions(map: MapGraph): RasterOptions {
+  return {
+    frame: motion.graphAt === map.at ? motion.frame : FULL,
+    bg: motion.room === 'reading' ? LIGHT_BG : DARK_BG,
+    highlight: motion.highlight,
+    isPulseOn: motion.isPulseOn,
+    marks: motion.marks,
+    isMarkOn: motion.isMarkOn,
+  }
+}
+
+/** The pane's cells for the current view. */
+async function paneCells($: EngineInterface, map: MapGraph, columns: number, rows: number): Promise<string> {
+  if (pane.view === 'graph') return rasterizeGraph(layoutRadial(map, crossEdges(map, await read($, facts))), columns, rows, graphOptions(map))
+  return rasterizeLibrary(await catalogOf($, map), columns, rows, await libraryOptions($, map))
+}
+
+/** Whether the current view shows this node (a book holding it, or a node on the graph). */
+async function isOnView($: EngineInterface, map: MapGraph, id: string): Promise<boolean> {
+  if (pane.view === 'graph') return map.nodes.some(n => !n.isSeed && n.id === id)
+  return !!bookHolding(await catalogOf($, map), id)
+}
+
 async function animate($: EngineInterface): Promise<void> {
   const now = await $.clock.now()
   const t = now - motion.start
@@ -119,13 +187,16 @@ async function animate($: EngineInterface): Promise<void> {
   if (isMarking) motion.isMarkOn = Math.floor((now - (motion.markUntil - MARK_MS)) / PULSE_MS) % 2 === 0
   else motion.marks = {}
   const map = await read($, graph)
-  if (motion.raster && map.nodes.length > 0) {
+  if (motion.raster && map.nodes.length > 1) {
     const { columns, rows } = motion.raster
-    await $.ui.blit({ requestId: PANE, key: 'map', columns, rows, cells: rasterize(map, columns, rows, rasterOptions(map)) }).catch(() => undefined)
+    const cells = await paneCells($, map, columns, rows)
+    await $.ui.blit({ requestId: PANE, key: 'map', columns, rows, cells }).catch(() => undefined)
   }
   if (!isRevealing && !motion.highlight && !isMarking) {
     motion.timer?.cancel()
     motion.timer = undefined
+    // At rest again: redraw once so the books' hover and click targets are laid (they stay off while blits run).
+    if (pane.view === 'books') $.ui.invalidate('ui.render')
   }
 }
 
@@ -133,10 +204,10 @@ function startMotion($: EngineInterface): void {
   motion.timer ??= $.clock.every(FRAME_MS, () => void animate($))
 }
 
-/** Lights the prior the agent is about to burst off, if the map shows it. */
+/** Flashes the book the agent is about to burst off, if the shelves hold it. */
 async function highlightSeed($: EngineInterface, id: string): Promise<boolean> {
   const map = await read($, graph)
-  if (!view.isShown || !map.nodes.some(n => !n.isSeed && n.id === id)) return false
+  if (!view.isShown || !(await isOnView($, map, id))) return false
   motion.highlight = id
   motion.highlightStart = await $.clock.now()
   motion.isPulseOn = true
@@ -144,7 +215,7 @@ async function highlightSeed($: EngineInterface, id: string): Promise<boolean> {
   return true
 }
 
-/** Holds the highlight at least HOLD_MS, so the target reads before the map moves on. */
+/** Holds the highlight at least HOLD_MS, so the target reads before the shelves move on. */
 async function holdHighlight($: EngineInterface): Promise<void> {
   if (!motion.highlight) return
   const left = HOLD_MS - ((await $.clock.now()) - motion.highlightStart)
@@ -153,23 +224,33 @@ async function holdHighlight($: EngineInterface): Promise<void> {
 
 /**
  * The agent's reply judged some priors (cite / confirm / fix / refute tags):
- * record each, and pulse the ones on the map in their verdict's colour. Refs
- * that resolve to no node — `[id]` in prose ABOUT the protocol — are ignored.
+ * record each, flash the stamp of the ones on the shelves, and turn the card
+ * to the first book judged. Refs that resolve to no node — `[id]` in prose
+ * ABOUT the protocol — are ignored.
  */
 async function recordJudgments($: EngineInterface, text: string): Promise<void> {
   const judgments = parseJudgments(text)
   if (judgments.length === 0) return
   const handles = await primingHandles($)
   const map = await read($, graph)
+  const catalog = await catalogOf($, map)
   const now = await $.clock.now()
   const fresh: Verdict[] = []
+  let judged: string | undefined
   for (const j of judgments) {
     const id = resolveJudgmentRef(j.ref, handles)
     if (!id) continue
-    const onMap = map.nodes.find(n => n.id === id)
-    fresh.push({ id, kind: j.kind, name: onMap ? displayName(onMap.label, onMap.name) : j.ref, at: now })
-    if (onMap) motion.marks[id] = j.kind
+    // A part the graph completed (not in the burst) is on the shelves too: judge it there.
+    const book = bookHolding(catalog, id)
+    const part = book && [book.cause, book.problem, book.fix].find(p => p?.id === id)
+    const node = map.nodes.find(n => n.id === id)
+    fresh.push({ id, kind: j.kind, name: part?.name ?? (node ? displayName(node.label, node.name) : j.ref), at: now })
+    if (book || (pane.view === 'graph' && (await isOnView($, map, id)))) {
+      motion.marks[id] = j.kind
+      judged ??= id
+    }
   }
+  if (judged) motion.focus = judged
   if (fresh.length === 0) return
   await update($, verdicts, list => [...fresh, ...list.filter(v => !fresh.some(f => f.id === v.id))].slice(0, VERDICTS_KEPT))
   if (Object.keys(motion.marks).length > 0 && view.isShown) {
@@ -179,9 +260,10 @@ async function recordJudgments($: EngineInterface, text: string): Promise<void>
   }
 }
 
-async function themeBackground($: EngineInterface): Promise<number> {
+/** A light terminal theme reads in the reading room; a dark one in the stacks. */
+async function themeRoom($: EngineInterface): Promise<Room> {
   const row = (await $.config.list().catch(() => [])).find(r => r.key === 'theme')
-  return String(row?.value ?? '').includes('light') ? LIGHT_BG : DARK_BG
+  return String(row?.value ?? '').includes('light') ? 'reading' : 'stacks'
 }
 
 async function tick($: EngineInterface): Promise<void> {
@@ -207,15 +289,12 @@ async function syncLayout($: EngineInterface): Promise<void> {
   }
 }
 
-/**
- * Draws a burst the moment it lands and starts its reveal. Enrichment waits:
- * the first cut walked up to 12 neighbor calls before drawing anything, so an
- * MCP burst showed up seconds after the agent had already read it.
- */
+/** Shelves a burst the moment it lands and starts its reveal; the seed's name and the chains' facts are looked up on later ticks. */
 async function draw($: EngineInterface, b: Burst): Promise<void> {
   const laid = layoutBurst(b)
-  // Set the reveal up before the graph lands, so its first render is frame 0, not a flash of the finished map.
+  // Set the reveal up before the graph lands, so its first render is frame 0, not a flash of the full shelves.
   motion.highlight = undefined
+  motion.focus = undefined
   if (view.isShown) {
     motion.graphAt = laid.at
     motion.start = await $.clock.now()
@@ -226,7 +305,7 @@ async function draw($: EngineInterface, b: Burst): Promise<void> {
   pending.drawnAt = b.at
 }
 
-/** Catches up a burst not drawn yet, then fills in the real edges among what it delivered. */
+/** Catches up a burst not drawn yet, names its seed (a burst names it by id), then catalogues its chains. */
 async function refresh($: EngineInterface): Promise<void> {
   if (pending.isRefreshing) return
   const current = await read($, burst)
@@ -234,21 +313,16 @@ async function refresh($: EngineInterface): Promise<void> {
   pending.isRefreshing = true
   try {
     if (current.at !== pending.drawnAt) await draw($, current)
-    if (current.isEnriched) return
-    // Background, after the draw: the seed's real name first (cheap, visible), then the cross edges.
-    const named = (await resolveSeed($, current)) ?? current
-    if (named !== current) {
+    if (!current.isEnriched) {
+      const named = { ...((await resolveSeed($, current)) ?? current), isEnriched: true }
+      // A newer burst landed while we asked: it is drawn already; drop this one.
       if ((await read($, burst))?.at !== current.at) return
       await update($, burst, () => named)
+      // Same `at`: the header renames in place, the reveal keeps running.
       await update($, graph, () => layoutBurst(named))
+      return
     }
-    const enriched = { ...named, extra: await crossEdges($, named), isEnriched: true }
-    // A newer burst landed while we walked: it is drawn already; drop this one.
-    const latest = await read($, burst)
-    if (latest && latest.at !== current.at) return
-    await update($, burst, () => enriched)
-    // Same `at`, same positions: the cross edges appear in place, the reveal keeps running.
-    await update($, graph, () => layoutBurst(enriched))
+    await enrich($, current.at)
   } catch (err) {
     await update($, graph, g => ({ ...g, note: `minimap: ${String(err).slice(0, 80)}` }))
   } finally {
@@ -256,24 +330,35 @@ async function refresh($: EngineInterface): Promise<void> {
   }
 }
 
-async function crossEdges($: EngineInterface, b: Burst): Promise<[string, string][]> {
-  const ids = new Set([b.seed.id, ...b.nodes.map(n => n.id)])
-  const answers = await Promise.all(
-    b.nodes.slice(0, ENRICH_MAX).map(n =>
-      $.mcp.call(ERRATA, 'errata_neighbors', { nodeId: n.id, limit: 30 }).then(
-        res => [n.id, res] as const,
-        () => [n.id, undefined] as const,
-      ),
-    ),
-  )
-  const out: [string, string][] = []
-  for (const [id, res] of answers) {
-    if (!res || res.isError) continue
-    for (const hop of neighborIds(textsOf(res.content))) {
-      if (ids.has(hop.id) && hop.id !== id) out.push([id, hop.id])
-    }
+/**
+ * Completes and places a few more chains: one `errata_neighbors` call per
+ * chain, strongest first, at most ENRICH_PER_BURST for one burst. A lone fix's
+ * answer names its problem, which becomes a target of its own next time round
+ * (the problem is where the chain's package lives).
+ */
+async function enrich($: EngineInterface, at: number): Promise<void> {
+  if (pending.cataloguedAt === at) return
+  const map = await read($, graph)
+  const known = await read($, facts)
+  const catalog = catalogue(map, known)
+  if (pending.askedFor !== at) Object.assign(pending, { askedFor: at, asked: 0 })
+  const budget = Math.min(ENRICH_PER_TICK, ENRICH_PER_BURST - pending.asked)
+  const targets = budget > 0 ? enrichTargets(catalog, known, budget) : []
+  if (targets.length === 0) {
+    pending.cataloguedAt = at
+    return
+  }
+  const heads = new Set(catalog.books.map(b => b.problem?.id ?? b.key))
+  for (const id of targets) {
+    pending.asked++
+    const res = await $.mcp.call(ERRATA, 'errata_neighbors', { nodeId: id, limit: 40 }).catch(() => undefined)
+    const answer = res && !res.isError ? parseNeighbors(textsOf(res.content)) : undefined
+    if ((await read($, burst))?.at !== at) return
+    await update($, facts, cache => {
+      const next = { ...cache, [id]: answer ?? null }
+      return Object.keys(next).length <= FACTS_KEPT ? next : Object.fromEntries(Object.entries(next).filter(([k]) => heads.has(k)))
+    })
   }
-  return out
 }
 
 /** A burst names its seed by id (`file_fb8c…`): ask the graph what that node is. */
@@ -284,7 +369,7 @@ async function resolveSeed($: EngineInterface, b: Burst | null): Promise<Burst |
   return node ? { ...b, seed: { id: b.seed.id, label: node.label, name: node.name } } : b
 }
 
-/** Sets the burst the map shows and draws it now; the next tick enriches it. */
+/** Sets the burst the shelves show and draws it now; the next tick names its seed. */
 async function show($: EngineInterface, next: Burst | null): Promise<void> {
   if (!next) return
   await update($, burst, () => next)
@@ -297,18 +382,37 @@ async function primingHandles($: EngineInterface): Promise<HandleTable> {
   return JSON.parse(String(text)) as HandleTable
 }
 
+function isTagMode(value: unknown): value is TagMode {
+  return TAG_MODES.includes(value as TagMode)
+}
+
+/** A book's hover group: its spine rows and its card light together. */
+function scopeOf(book: { key: string }): string {
+  return `book:${book.key}`.slice(0, 64)
+}
+
+function isPaneView(value: unknown): value is PaneView {
+  return PANE_VIEWS.includes(value as PaneView)
+}
+
 export const register: Register = on => {
   on('session.start', async ($, e, next) => {
-    await $.command.register({ name: 'minimap', description: 'Open the errata minimap: the latest burst neighborhood that entered context' })
+    await $.command.register({ name: 'minimap', description: 'Open the errata library: the causal chains of the latest burst, in bookcases by technology' })
+    await $.command.register({ name: 'errata-tags', description: 'How the chat draws errata inline tags: margin (marks), quiet (hidden) or raw' })
+    await $.command.register({ name: 'errata-view', description: 'Switch the errata pane between the library (books) and the graph' })
     void $.ui.open({ id: PANE, title: 'errata', rows: INLINE_ROWS })
-    motion.bg = await themeBackground($)
+    motion.room = await themeRoom($)
+    const saved = await $.store.get(TAG_MODE_KEY).catch(() => undefined)
+    if (isTagMode(saved)) tags.mode = saved
+    const savedView = await $.store.get(PANE_VIEW_KEY).catch(() => undefined)
+    if (isPaneView(savedView)) pane.view = savedView
     $.clock.every(1500, () => void tick($))
     return next(e)
   })
 
   on('config.set', { key: 'theme' }, async ($, e, next) => {
     const done = await next(e)
-    motion.bg = await themeBackground($)
+    motion.room = await themeRoom($)
     return done
   })
 
@@ -316,28 +420,56 @@ export const register: Register = on => {
     const opened = await $.ui.open({ id: PANE, title: 'errata', columns: 56, rows: INLINE_ROWS })
     pending.drawnAt = -1
     void refresh($)
-    return { text: opened.isPlaced ? 'errata minimap opened.' : `minimap waits: ${opened.reason}` }
+    return { text: opened.isPlaced ? 'errata library opened.' : `the library waits: ${opened.reason}` }
+  })
+
+  // `/errata-tags` cycles margin → quiet → raw; `/errata-tags quiet` sets one. Display only: capture reads the stored reply.
+  on('command.run', { command: 'errata-tags' }, async ($, e) => {
+    const asked = e.args.trim().toLowerCase()
+    const nextMode = isTagMode(asked) ? asked : TAG_MODES[(TAG_MODES.indexOf(tags.mode) + 1) % TAG_MODES.length]!
+    tags.mode = nextMode
+    await $.store.set(TAG_MODE_KEY, nextMode)
+    $.ui.invalidate('ui.render')
+    const said = { margin: 'tags drawn as margin marks', quiet: 'tags hidden', raw: 'tags drawn as written' }[nextMode]
+    return { text: `errata: ${said} (${nextMode}). Capture is unchanged; it reads the stored reply.` }
+  })
+
+  // `/errata-view` flips books ↔ graph; `/errata-view graph` sets one. The burst stays; only the drawing changes.
+  on('command.run', { command: 'errata-view' }, async ($, e) => {
+    const asked = e.args.trim().toLowerCase()
+    const nextView = isPaneView(asked) ? asked : pane.view === 'books' ? 'graph' : 'books'
+    pane.view = nextView
+    motion.marks = {}
+    motion.focus = undefined
+    await $.store.set(PANE_VIEW_KEY, nextView)
+    $.ui.invalidate('ui.render')
+    return { text: nextView === 'books' ? 'errata pane: the library (books).' : 'errata pane: the graph.' }
+  })
+
+  // The agent's inline tags, tidied in the chat. The stored reply keeps them: the daemon harvests from the transcript.
+  on('ui.render', { component: 'AssistantMessage' }, async ($, e, next) => {
+    if (tags.mode === 'raw' || !hasTags(e.props.text)) return next(e)
+    return next({ ...e, props: { ...e.props, text: tidyTags(e.props.text, tags.mode) } })
   })
 
   // The agent bursts through MCP: the result IS the neighborhood that entered its context.
   on('tool.call', { tool: 'mcp__errata__errata_burst' }, async ($, e, next) => {
     const input = e as unknown as Record<string, unknown>
     const seed = String(input['nodeId'] ?? input['qname'] ?? '')
-    // Bursting off a prior the map already shows: light it while the burst runs.
+    // Bursting off a prior the shelves already hold: pull it out while the burst runs.
     await highlightSeed($, seed)
     const ran = await next(e)
     if (ran.deny !== undefined || ran.isError) {
       motion.highlight = undefined
       return ran
     }
-    // No MCP call before the draw: the seed's name is looked up on the next tick (refresh).
     const fresh = parseAgentBurst(textsOf([ran.text, ran.result]), seed)
     await holdHighlight($)
     await show($, fresh)
     return ran
   })
 
-  // A search is a neighborhood too: the hits that entered context, ringed around the query.
+  // A search is a neighborhood too: the hits that entered context, catalogued under the query.
   on('tool.call', { tool: 'mcp__errata__errata_search' }, async ($, e, next) => {
     const ran = await next(e)
     if (ran.deny !== undefined || ran.isError) return ran
@@ -400,85 +532,245 @@ export const register: Register = on => {
   on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
     const { Box, Text } = $.ui.resolve(e)
     const width = Math.max(24, e.props.bodyColumns)
-    // Docked, the map takes the screen's height; inline it sits above the prompt and keeps to its row budget.
+    // Docked, the library takes the screen's height; inline it sits above the prompt and keeps to its row budget.
+    // A portrait terminal (taller than wide, at ~2 rows per column of width) can't dock and has the least
+    // transcript to spare, so inline there the library is compact: one tier of shelves and a short card.
     const screenRows = e.viewport?.rows ?? 30
-    const height = e.props.placement === 'inline' ? Math.max(14, Math.min(INLINE_ROWS, screenRows - 10)) : Math.max(14, screenRows - 4)
+    const isPortrait = e.props.placement === 'inline' && !!e.viewport && e.viewport.rows * 2 > e.viewport.columns
+    const height = isPortrait
+      ? Math.max(10, Math.min(COMPACT_ROWS, screenRows - 6))
+      : e.props.placement === 'inline'
+        ? Math.max(12, Math.min(INLINE_ROWS, screenRows - 10))
+        : Math.max(12, screenRows - 4)
     const map = await read($, graph)
+    const hex = (color: number) => `#${color.toString(16).padStart(6, '0')}`
+
+    if (pane.view === 'graph') {
+      const delivered = map.nodes.filter(n => !n.isSeed).sort((a, b) => b.score - a.score)
+      const counts = new Map<string, number>()
+      for (const n of delivered) counts.set(n.label, (counts.get(n.label) ?? 0) + 1)
+      const legend = [...counts].sort((a, b) => b[1] - a[1])
+      const legendRows = Math.ceil(legend.reduce((w, [l, c]) => w + l.length + String(c).length + 6, 0) / width)
+      const tiers = SCOPE_ORDER.filter(s => delivered.some(n => n.scope === s))
+      const now = await $.clock.now()
+      const recent = (await read($, verdicts)).filter(v => now - v.at < VERDICT_SHOWN_MS).slice(0, 3)
+      const topItems = Math.min(3, delivered.length)
+      const mapRows = Math.max(5, height - legendRows - (tiers.length > 0 ? 1 : 0) - topItems - recent.length - 2)
+      // Blits must match the mounted size: remember what this pass mounts.
+      motion.raster = { columns: width, rows: mapRows }
+      const cells = await paneCells($, map, width, mapRows)
+      return (
+        <Box flexDirection="column" width={width}>
+          <Text bold wrap="truncate-end">
+            {map.origin ? ORIGIN_LABEL[map.origin] : 'burst'}
+            <Text dimColor> · {delivered.length} in context · </Text>
+            <Text color="#ffd75f">◉ </Text>
+            <Text>{shortName(map.title, Math.max(8, width - 30))}</Text>
+            <Text dimColor> {map.seedLabel ?? ''}</Text>
+          </Text>
+          {delivered.length > 0 && e.surface === 'terminal' ? (
+            (() => {
+              const { Raster } = $.ui.resolve(e)
+              return <Raster key="map" columns={width} rows={mapRows} cells={cells} />
+            })()
+          ) : (
+            <Box height={mapRows}>
+              <Text dimColor>{map.note ?? (delivered.length === 0 ? 'no burst yet — touch a file or burst a seed' : 'the graph draws in the terminal')}</Text>
+            </Box>
+          )}
+          {tiers.length > 0 && (
+            <Text wrap="truncate-end">
+              {tiers.map(s => (
+                <Text>
+                  <Text color={hex(SCOPE_COLOR[s])}>━━</Text>
+                  <Text dimColor> {s}  </Text>
+                </Text>
+              ))}
+            </Text>
+          )}
+          {legend.length > 0 && (
+            <Text wrap="wrap">
+              {legend.map(([label, count]) => (
+                <Text>
+                  <Text color={hex(colorOf(label))}>{String.fromCodePoint(glyphOf(label))}</Text>
+                  <Text dimColor> {count} {label}   </Text>
+                </Text>
+              ))}
+            </Text>
+          )}
+          {recent.map(v => (
+            <Text wrap="truncate-end">
+              <Text color={hex(VERDICT_COLOR[v.kind])} bold>
+                {JUDGMENT_STYLE[v.kind].glyph} {JUDGMENT_STYLE[v.kind].verb}{' '}
+              </Text>
+              <Text>{v.name}</Text>
+            </Text>
+          ))}
+          {delivered.slice(0, topItems).map(n => (
+            <Text wrap="truncate-end">
+              <Text color={hex(colorOf(n.label))}>{String.fromCodePoint(glyphOf(n.label))} </Text>
+              <Text dimColor>{displayName(n.label, n.name)}</Text>
+            </Text>
+          ))}
+        </Box>
+      )
+    }
 
-    const delivered = map.nodes.filter(n => !n.isSeed).sort((a, b) => b.score - a.score)
-    const counts = new Map<string, number>()
-    for (const n of delivered) counts.set(n.label, (counts.get(n.label) ?? 0) + 1)
-    const legend = [...counts].sort((a, b) => b[1] - a[1])
-    const legendRows = Math.ceil(legend.reduce((w, [l, c]) => w + l.length + String(c).length + 6, 0) / width)
-    const tiers = SCOPE_ORDER.filter(s => delivered.some(n => n.scope === s))
+    const catalog = await catalogOf($, map)
+    const palette = PALETTE[motion.room]
+
+    const books = catalog.books
+    const bound = new Set(books.flatMap(b => b.memberIds))
+    const others = map.nodes.filter(n => !n.isSeed && !bound.has(n.id)).length
+    // The spines carry no words: a one-line key says what their bands mean.
+    const kinds = new Set<Binding>()
+    for (const b of books) for (const part of [b.cause, b.problem, b.fix]) if (part) kinds.add(bindingOf(part.label))
+    const legend = (['cause', 'problem', 'claim', 'fix'] as Binding[]).filter(b => kinds.has(b))
     const now = await $.clock.now()
-    const recent = (await read($, verdicts)).filter(v => now - v.at < VERDICT_SHOWN_MS).slice(0, 3)
-    const footRows =
-      legendRows + (tiers.length > 0 ? 1 : 0) + Math.min(TOP_ITEMS, delivered.length) + recent.length
-    const mapRows = Math.max(5, height - footRows - 2)
+    // A verdict on a prior not on the shelves has no plank to be stamped on: it gets a line.
+    const unshelved = (await read($, verdicts)).filter(v => now - v.at < VERDICT_SHOWN_MS && !bookHolding(catalog, v.id)).slice(0, 2)
+    const showLegend = legend.length > 0 && !isPortrait
+    const libraryRows = Math.max(8, height - 1 - (showLegend ? 1 : 0) - unshelved.length)
     // Blits must match the mounted size: remember what this pass mounts.
-    motion.raster = { columns: width, rows: mapRows }
-
-    const minimap =
-      e.surface === 'terminal' && map.nodes.length > 0
-        ? (() => {
-            const { Raster } = $.ui.resolve(e)
-            return <Raster key="map" columns={width} rows={mapRows} cells={rasterize(map, width, mapRows, rasterOptions(map))} />
-          })()
-        : (
-            <Box height={mapRows}>
-              <Text dimColor>
-                {map.note ?? (map.nodes.length === 0 ? 'no burst yet — touch a file or burst a seed' : 'map draws in the terminal')}
-              </Text>
+    motion.raster = { columns: width, rows: libraryRows }
+    const options = await libraryOptions($, map)
+    const focus = focusBook(catalog, options.focus)
+    const empty = others > 0 ? `no causal chains in this burst — ${others} other ${others === 1 ? 'hit' : 'hits'}` : 'the shelves are empty — touch a file or burst a seed'
+
+    const library =
+      books.length === 0 ? (
+        <Box height={libraryRows}>
+          <Text dimColor>{map.note ?? empty}</Text>
+        </Box>
+      ) : e.surface === 'terminal' ? (
+        (() => {
+          const { Raster, Button } = $.ui.resolve(e)
+          const cells = rasterizeLibrary(catalog, width, libraryRows, options)
+          // Hover and click ride on positioned replicas of each spine (same glyphs, same colours) laid
+          // over the raster, since pointer feedback attaches to elements, not cells. Laid only at rest:
+          // a reveal, a burst highlight or a flashing stamp repaints the raster by blit, which a static
+          // replica would hide.
+          const isAtRest = motion.frame.type >= 1 && !motion.highlight && Object.keys(motion.marks).length === 0
+          const spots = isAtRest ? librarySpots(catalog, width, libraryRows, options.focus) : []
+          const grid = new Uint32Array(Uint8Array.fromBase64(cells).buffer)
+          const cell = (x: number, y: number) => {
+            const i = (y * width + x) * 3
+            return { ch: String.fromCodePoint(grid[i]!), fg: grid[i + 1]!, bg: grid[i + 2]! }
+          }
+          const colourOf = (c: number) => (c === DEFAULT_CELL ? undefined : hex(c))
+          const cardWidth = Math.min(46, width - 2)
+          return (
+            <Box key="library" position="relative" width={width} height={libraryRows}>
+              <Raster key="map" columns={width} rows={libraryRows} cells={cells} />
+              {/* Every book's hit-area first… */}
+              {spots.flatMap(s => {
+                const scope = scopeOf(s.book)
+                const pin = () => {
+                  motion.focus = s.book.problem?.id ?? s.book.memberIds[0]
+                  $.ui.invalidate('ui.render')
+                }
+                return [...Array(s.height).keys()].map(r => (
+                  <Box key={`${scope}:${r}`} position="absolute" top={s.top + r} left={s.x} hover={{ scope }}>
+                    <Button key={`${scope}:press:${r}`} plain onPress={pin}>
+                      {[...Array(s.width).keys()].map(dx => {
+                        const c = cell(s.x + dx, s.top + r)
+                        return <Text color={colourOf(c.fg)} backgroundColor={colourOf(c.bg)}>{c.ch}</Text>
+                      })}
+                    </Button>
+                  </Box>
+                ))
+              })}
+              {/* …then every card. Positioned boxes paint in tree order, so a card emitted beside its own
+                  book was painted over by every book after it. Last in the tree, a card is over all of them;
+                  the background makes it opaque, or the books behind would show through its blank cells. */}
+              {spots.map(s => {
+                const scope = scopeOf(s.book)
+                const parts = (['cause', 'problem', 'fix'] as const).flatMap(r => (s.book[r] ? [s.book[r]!] : []))
+                const cardHeight = parts.length + 3
+                const cardLeft = s.x + s.width + 1 + cardWidth <= width ? s.x + s.width + 1 : Math.max(0, s.x - cardWidth - 1)
+                const cardTop = Math.max(0, Math.min(s.top, libraryRows - cardHeight))
+                const paper = hex(palette.card)
+                return (
+                  <Box
+                    key={`${scope}:card`}
+                    position="absolute"
+                    top={cardTop}
+                    left={cardLeft}
+                    width={cardWidth}
+                    display="none"
+                    hover={{ scope, display: 'flex', backgroundColor: paper }}
+                    flexDirection="column"
+                    borderStyle="round"
+                    borderColor={hex(palette.gilt)}
+                  >
+                    <Text bold wrap="truncate-end" color={hex(palette.binding.problem)} backgroundColor={paper}>
+                      {fitTitle(`${callNumber(catalog, s.book)}  ${s.book.tech ?? 'general'}`, cardWidth - 2).padEnd(cardWidth - 2)}
+                    </Text>
+                    {parts.map(part => (
+                      <Text wrap="truncate-end" backgroundColor={paper}>
+                        <Text color={hex(palette.binding[bindingOf(part.label)])}>{BINDING_GLYPH[bindingOf(part.label)]} </Text>
+                        <Text color={hex(part.isDelivered ? palette.cardInk : palette.cardFaint)}>
+                          {fitTitle(part.name, cardWidth - 4).padEnd(cardWidth - 4)}
+                        </Text>
+                      </Text>
+                    ))}
+                    <Text color={hex(palette.cardFaint)} backgroundColor={paper} wrap="truncate-end">
+                      {'click to read it on the card'.padEnd(cardWidth - 2)}
+                    </Text>
+                  </Box>
+                )
+              })}
             </Box>
           )
+        })()
+      ) : (
+        // No cell grid off the terminal: the catalog as a reading list, the book in focus first.
+        <Box flexDirection="column" height={libraryRows}>
+          {[...(focus ? [focus] : []), ...books.filter(b => b !== focus)].slice(0, libraryRows).map(b => {
+            const head = (b.problem ?? b.fix ?? b.cause)!
+            return (
+              <Text wrap="truncate-end">
+                <Text color={hex(palette.binding[bindingOf(head.label)])}>{BINDING_GLYPH[bindingOf(head.label)]} </Text>
+                <Text dimColor>{callNumber(catalog, b)} </Text>
+                <Text>{fitTitle(head.name, width - 12)}</Text>
+              </Text>
+            )
+          })}
+        </Box>
+      )
 
     return (
       <Box flexDirection="column" width={width}>
         <Text bold wrap="truncate-end">
-          {map.origin ? ORIGIN_LABEL[map.origin] : 'burst'}
-          <Text dimColor> · {delivered.length} in context · </Text>
-          <Text color="#ffd75f">◉ </Text>
-          <Text>{shortName(map.title, Math.max(8, width - 30))}</Text>
-          <Text dimColor> {map.seedLabel ?? ''}</Text>
+          <Text color={hex(palette.gilt)}>◉ </Text>
+          <Text>{shortName(map.title || 'errata library', Math.max(8, width - 44))}</Text>
+          <Text dimColor>
+            {' '}
+            {map.seedLabel ?? ''} · {map.origin ? ORIGIN_LABEL[map.origin] : 'burst'} · {books.length} {books.length === 1 ? 'chain' : 'chains'} ·{' '}
+            {catalog.cases.length} {catalog.cases.length === 1 ? 'case' : 'cases'}
+          </Text>
         </Text>
-        {minimap}
-        {tiers.length > 0 && (
+        {library}
+        {showLegend && (
           <Text wrap="truncate-end">
-            {tiers.map(s => (
+            {legend.map(b => (
               <Text>
-                <Text color={hex(SCOPE_COLOR[s])}>━━</Text>
-                <Text dimColor> {s}  </Text>
+                <Text color={hex(palette.binding[b])}>█</Text>
+                <Text dimColor> {BINDING_NAME[b]}  </Text>
               </Text>
             ))}
+            <Text dimColor>· spines read top to bottom · the card reads the marked book</Text>
           </Text>
         )}
-        {legend.length > 0 && (
-          <Text wrap="wrap">
-            {legend.map(([label, count]) => (
-              <Text>
-                <Text color={hex(colorOf(label))}>{String.fromCodePoint(glyphOf(label))}</Text>
-                <Text dimColor> {count} {label}   </Text>
-              </Text>
-            ))}
-          </Text>
-        )}
-        {recent.map(v => (
+        {unshelved.map(v => (
           <Text wrap="truncate-end">
-            <Text color={hex(JUDGMENT_STYLE[v.kind].color)} bold>
+            <Text color={hex(palette.verdict[v.kind])} bold>
               {JUDGMENT_STYLE[v.kind].glyph} {JUDGMENT_STYLE[v.kind].verb}{' '}
             </Text>
-            <Text>{v.name}</Text>
-          </Text>
-        ))}
-        {delivered.slice(0, TOP_ITEMS).map(n => (
-          <Text wrap="truncate-end">
-            <Text color={hex(colorOf(n.label))}>{String.fromCodePoint(glyphOf(n.label))} </Text>
-            <Text dimColor>{displayName(n.label, n.name)}</Text>
+            <Text>{shortName(v.name, width - 14)}</Text>
           </Text>
         ))}
       </Box>
     )
   })
 }
-