@north-light/api 0.3.579 → 0.3.587

package/dist/commands/canvas-analytics/graphs.js

@@ -0,0 +1,365 @@
+// The Graphs tab: how big did my graphs get, and what kinds did they spawn?
+//
+// Chart 1 buckets graphs in the window by active-agent count; chart 2 counts
+// spawned agents by kind. `Enter` on a bar filters the graph list below them
+// (a filter line names it; `Esc` clears it); `Enter` on a graph opens its
+// detail. `c` cycles the list's sort column. Narrow: chart 2 sits behind an
+// "Agents spawned in window, by kind →" row.
+import { matchesKey, visibleWidth } from '@earendil-works/pi-tui';
+import { rule, theme, wrapText } from '../../core/tui/panel.js';
+import { foldRanked, hbar } from './chart.js';
+import { formatCount, formatPrice, formatTokens, padLeft, padRight, plural, unavailable } from './format.js';
+import { NARROW_BAR_CELLS, isNarrow, listWindow, markRow, moreRow, textWidth, } from './view.js';
+/** A graph's name as its rows show it: "(root deleted)" when the root's parent row is gone. */
+export function graphLabel(graph) {
+    return graph.root_deleted ? `${graph.name} (root deleted)` : graph.name;
+}
+/** Graphs by API-price estimate, largest first; ties by name so the order is stable. */
+export function byEstimate(a, b) {
+    return b.api_price_estimate - a.api_price_estimate || a.name.localeCompare(b.name);
+}
+/** A chart title with its value unit right-aligned over the value column; the
+ *  unit is dropped when the title would run into it (narrow). */
+function chartTitle(title, unit, barEnd, valueWidth) {
+    return visibleWidth(title) < barEnd ? `${padRight(title, barEnd)}${padLeft(unit, valueWidth)}` : title;
+}
+/** The line under a list that shows the selected row's whole name, when its row cut it. */
+export function fullNameLine(label, shownWidth) {
+    return visibleWidth(label) > shownWidth ? theme.fg('dim', `  ${label}`) : undefined;
+}
+const SORTS = [
+    { key: 'estimate', label: 'API est.', value: (g) => g.api_price_estimate },
+    { key: 'agents', label: 'agents', value: (g) => g.active_agents },
+    { key: 'depth', label: 'depth', value: (g) => g.depth },
+    { key: 'tokens', label: 'tokens', value: (g) => g.tokens },
+];
+const SIZE_RANGES = {
+    '1': [1, 1],
+    '2–5': [2, 5],
+    '6–10': [6, 10],
+    '11–20': [11, 20],
+    '21+': [21, Number.POSITIVE_INFINITY],
+};
+function kindRows(graphs) {
+    const all = graphs.spawned_by_kind;
+    const folded = all.length > 5 ? foldRanked(all, 4, (row) => row.agents) : { top: all, rest: undefined };
+    const rows = folded.top.map((row) => ({ label: row.kind, agents: row.agents, kinds: [row.kind] }));
+    if (folded.rest !== undefined) {
+        rows.push({ label: `${formatCount(folded.rest.count)} more kinds`, agents: folded.rest.sum, kinds: all.slice(4).map((row) => row.kind) });
+    }
+    return rows;
+}
+const sizeLabel = (label) => (label === '1' ? '1 agent' : `${label} agents`);
+class GraphsView {
+    ctx;
+    zone = 'list';
+    /** The chart ↑ returns to from the top of the list. */
+    lastChart = 'size';
+    sizeIndex = 0;
+    /** In the narrow layout, index 5 is the "Agents spawned … →" row. */
+    kindIndex = 0;
+    listIndex = 0;
+    sort = 0;
+    filter;
+    /** Narrow only: chart 2 is shown in place of chart 1. */
+    secondOpen = false;
+    narrow = false;
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    get graphs() {
+        return this.ctx.data.graphs.ok ? this.ctx.data.graphs.value : undefined;
+    }
+    get kinds() {
+        return this.graphs === undefined ? [] : kindRows(this.graphs);
+    }
+    listed() {
+        const graphs = this.graphs?.graphs ?? [];
+        const sort = SORTS[this.sort];
+        const filter = this.filter;
+        return graphs
+            .filter((g) => filter === undefined || filter.match(g))
+            .sort((a, b) => sort.value(b) - sort.value(a) || byEstimate(a, b));
+    }
+    /** Chart 1's bars; none when no graph is in the window ("None in this window."). */
+    get buckets() {
+        const buckets = this.graphs?.size_buckets ?? [];
+        return buckets.some((b) => b.graphs > 0) ? buckets : [];
+    }
+    /** Rows of chart 1 the cursor may visit; narrow adds the "→" row. */
+    sizeRowCount() {
+        return this.buckets.length + (this.narrow ? 1 : 0);
+    }
+    // keys
+    land(landing) {
+        if (landing.tab !== 'graphs')
+            return;
+        this.filter = undefined;
+        this.listIndex = 0;
+        if (landing.at === 'size-chart') {
+            this.zone = 'size';
+            this.lastChart = 'size';
+            this.sizeIndex = 0;
+            this.secondOpen = false;
+        }
+        else if (landing.at === 'kind-chart') {
+            this.zone = 'kind';
+            this.lastChart = 'kind';
+            this.kindIndex = 0;
+            this.secondOpen = true;
+        }
+        else {
+            this.zone = 'list';
+            this.sort = 0;
+        }
+    }
+    handleKey(key) {
+        if (this.graphs === undefined)
+            return matchesKey(key, 'escape') ? 'back' : 'unhandled';
+        if (matchesKey(key, 'escape')) {
+            if (this.narrow && this.secondOpen) {
+                this.secondOpen = false;
+                if (this.zone === 'kind') {
+                    this.zone = 'size';
+                    this.sizeIndex = this.sizeRowCount() - 1;
+                }
+                this.lastChart = 'size';
+                return 'handled';
+            }
+            if (this.filter !== undefined) {
+                this.filter = undefined;
+                this.listIndex = 0;
+                return 'handled';
+            }
+            return 'back';
+        }
+        if (matchesKey(key, 'c')) {
+            this.sort = (this.sort + 1) % SORTS.length;
+            this.listIndex = 0;
+            return 'handled';
+        }
+        if (matchesKey(key, 'up') || matchesKey(key, 'k'))
+            return this.move(-1);
+        if (matchesKey(key, 'down') || matchesKey(key, 'j'))
+            return this.move(1);
+        if (matchesKey(key, 'left') || matchesKey(key, 'h'))
+            return this.side('size');
+        if (matchesKey(key, 'right') || matchesKey(key, 'l'))
+            return this.side('kind');
+        if (matchesKey(key, 'enter'))
+            return this.enter();
+        return 'unhandled';
+    }
+    /** The chart the cursor enters from the list, given the layout. */
+    visibleChart() {
+        if (this.narrow)
+            return this.secondOpen ? 'kind' : 'size';
+        return this.lastChart;
+    }
+    move(step) {
+        const listed = this.listed().length;
+        if (this.zone === 'list') {
+            if (step === -1 && this.listIndex === 0) {
+                const chart = this.visibleChart();
+                const rows = chart === 'size' ? this.sizeRowCount() : this.kinds.length;
+                if (rows > 0) {
+                    this.zone = chart;
+                    if (chart === 'size')
+                        this.sizeIndex = rows - 1;
+                    else
+                        this.kindIndex = rows - 1;
+                }
+            }
+            else
+                this.listIndex = Math.max(0, Math.min(listed - 1, this.listIndex + step));
+            return 'handled';
+        }
+        const rows = this.zone === 'size' ? this.sizeRowCount() : this.kinds.length;
+        const at = this.zone === 'size' ? this.sizeIndex : this.kindIndex;
+        const next = at + step;
+        if (next >= rows) {
+            if (listed > 0) {
+                this.lastChart = this.zone;
+                this.zone = 'list';
+                this.listIndex = 0;
+            }
+        }
+        else if (next >= 0) {
+            if (this.zone === 'size')
+                this.sizeIndex = next;
+            else
+                this.kindIndex = next;
+        }
+        return 'handled';
+    }
+    side(chart) {
+        if (this.narrow || this.zone === 'list' || this.zone === chart)
+            return 'unhandled';
+        const rows = chart === 'size' ? this.sizeRowCount() : this.kinds.length;
+        if (rows === 0)
+            return 'handled';
+        const at = this.zone === 'size' ? this.sizeIndex : this.kindIndex;
+        this.zone = chart;
+        this.lastChart = chart;
+        if (chart === 'size')
+            this.sizeIndex = Math.min(at, rows - 1);
+        else
+            this.kindIndex = Math.min(at, rows - 1);
+        return 'handled';
+    }
+    enter() {
+        if (this.zone === 'list') {
+            const graph = this.listed()[this.listIndex];
+            if (graph !== undefined)
+                this.ctx.nav.openGraphDetail(graph.graph_id);
+            return 'handled';
+        }
+        if (this.zone === 'size') {
+            const bucket = this.buckets[this.sizeIndex];
+            if (bucket === undefined) {
+                // The narrow "Agents spawned … →" row.
+                this.secondOpen = true;
+                this.zone = 'kind';
+                this.lastChart = 'kind';
+                this.kindIndex = 0;
+                if (this.kinds.length === 0)
+                    this.zone = 'size';
+                return 'handled';
+            }
+            const [min, max] = SIZE_RANGES[bucket.label];
+            this.filter = { label: `graphs with ${sizeLabel(bucket.label)}`, match: (g) => g.active_agents >= min && g.active_agents <= max };
+        }
+        else {
+            const row = this.kinds[this.kindIndex];
+            if (row === undefined)
+                return 'handled';
+            const kinds = new Set(row.kinds);
+            const label = row.kinds.length === 1 ? `graphs that spawned ${article(row.label)} in this window` : `graphs that spawned one of the ${row.label} in this window`;
+            this.filter = { label, match: (g) => g.spawned_kinds.some((kind) => kinds.has(kind)) };
+        }
+        this.listIndex = 0;
+        return 'handled';
+    }
+    keyLine(narrow) {
+        if (this.graphs === undefined)
+            return '';
+        if (narrow)
+            return '←→↑↓ · Enter · c sort';
+        const enter = this.zone === 'list' ? 'Enter open graph' : this.zone === 'size' && this.buckets[this.sizeIndex] === undefined ? 'Enter open chart' : 'Enter filter the list';
+        return `←→↑↓ select · ${enter} · c sort`;
+    }
+    escapeLabel() {
+        if (this.narrow && this.secondOpen)
+            return 'close chart';
+        if (this.filter !== undefined)
+            return 'clear filter';
+        return undefined;
+    }
+    // rendering
+    render(width, height, data) {
+        this.narrow = isNarrow(width);
+        if (!data.graphs.ok)
+            return [unavailable(data.graphs.reason)];
+        const graphs = data.graphs.value;
+        if (this.narrow && this.zone === 'kind' && !this.secondOpen)
+            this.zone = 'size';
+        this.sizeIndex = Math.min(this.sizeIndex, Math.max(0, this.sizeRowCount() - 1));
+        const charts = this.narrow ? this.narrowCharts(width) : this.wideCharts(width);
+        const list = this.listLines(width, Math.max(3, height - charts.length), graphs);
+        return [...charts, ...list];
+    }
+    sizeChart(width) {
+        const labelWidth = 12;
+        const valueWidth = 6;
+        const barCells = this.narrow ? NARROW_BAR_CELLS : Math.max(4, width - 2 - labelWidth - 1 - valueWidth - 1);
+        const title = chartTitle('Agents per graph', 'graphs', 2 + labelWidth + 1 + barCells, valueWidth);
+        const buckets = this.buckets;
+        if (buckets.length === 0)
+            return [title, '  None in this window.'];
+        const max = Math.max(...buckets.map((b) => b.graphs));
+        const rows = buckets.map((bucket, i) => {
+            const text = `${padRight(sizeLabel(bucket.label), labelWidth)} ${hbar(bucket.graphs, max, barCells)}${padLeft(formatCount(bucket.graphs), valueWidth)}`;
+            return markRow(text, this.zone === 'size' && this.sizeIndex === i);
+        });
+        return [title, ...rows];
+    }
+    kindChart(width) {
+        const rows = this.kinds;
+        const labelWidth = Math.max(14, Math.min(this.narrow ? 14 : 24, Math.max(0, ...rows.map((row) => visibleWidth(row.label)))));
+        const valueWidth = 6;
+        const barCells = this.narrow ? NARROW_BAR_CELLS : Math.max(4, width - 2 - labelWidth - 1 - valueWidth - 1);
+        const title = chartTitle('Agents spawned in window, by kind', 'agents', 2 + labelWidth + 1 + barCells, valueWidth);
+        if (rows.length === 0)
+            return [title, '  None in this window.'];
+        const max = Math.max(...rows.map((row) => row.agents));
+        const lines = rows.map((row, i) => {
+            const text = `${padRight(row.label, labelWidth)} ${hbar(row.agents, max, barCells)}${padLeft(formatCount(row.agents), valueWidth)}`;
+            return markRow(text, this.zone === 'kind' && this.kindIndex === i);
+        });
+        return [title, ...lines];
+    }
+    wideCharts(width) {
+        const leftWidth = Math.floor((width - 3) / 2);
+        const rightWidth = width - leftWidth - 3;
+        const left = this.sizeChart(leftWidth);
+        const right = this.kindChart(rightWidth);
+        const rows = Math.max(left.length, right.length);
+        const out = [];
+        for (let i = 0; i < rows; i += 1)
+            out.push(`${padRight(left[i] ?? '', leftWidth)} │ ${right[i] ?? ''}`);
+        out.push(theme.fg('border', `${'─'.repeat(leftWidth + 1)}┴${'─'.repeat(Math.max(0, width - leftWidth - 2))}`));
+        return out;
+    }
+    narrowCharts(width) {
+        if (this.secondOpen)
+            return [...this.kindChart(width), rule(width)];
+        const link = markRow('Agents spawned in window, by kind →', this.zone === 'size' && this.sizeIndex === this.buckets.length);
+        return [...this.sizeChart(width), link, rule(width)];
+    }
+    listLines(width, height, graphs) {
+        const narrow = this.narrow;
+        const sort = SORTS[this.sort];
+        const summary = `${plural(graphs.count, 'graph', 'graphs')} · deepest ${plural(graphs.deepest, 'level', 'levels')} below root`;
+        const sortLine = narrow
+            ? `sort: ${sort.label}`
+            : `sort: ${SORTS.map((s) => (s === sort ? `[${s.label}]` : s.label)).join('  ')}`;
+        const listed = this.listed();
+        const [agentsW, depthW, estW, tokensW] = narrow ? [7, 6, 9, 7] : [9, 8, 12, 9];
+        const numbers = agentsW + depthW + estW + tokensW;
+        const natural = Math.max(0, ...listed.map((g) => visibleWidth(graphLabel(g))));
+        const nameWidth = narrow ? Math.max(8, Math.min(width, width - 2 - numbers)) : Math.max(8, Math.min(width - 2 - numbers, textWidth(width - 2 - numbers, natural, 44)));
+        // Wide: the sort line ends where the table ends, not at the page's far edge.
+        const edge = narrow ? width : Math.max(2 + nameWidth + numbers, visibleWidth(summary) + visibleWidth(sortLine) + 2);
+        const gap = Math.min(width, edge) - visibleWidth(summary) - visibleWidth(sortLine);
+        const out = [gap >= 2 ? `${summary}${' '.repeat(gap)}${sortLine}` : `${summary} · ${sortLine}`];
+        if (this.filter !== undefined) {
+            const line = `Filter: ${this.filter.label} · ${plural(listed.length, 'graph', 'graphs')} · Esc clears`;
+            out.push(...wrapText(line, width).map((part) => theme.fg('accent', part)));
+        }
+        out.push(theme.fg('dim', `  ${padRight('Graph', nameWidth)}${padLeft('agents', agentsW)}${padLeft('depth', depthW)}${padLeft('est.', estW)}${padLeft('tokens', tokensW)}`));
+        if (listed.length === 0) {
+            out.push(this.filter !== undefined ? '  No graphs match this filter.' : '  None in this window.');
+            return out;
+        }
+        this.listIndex = Math.min(this.listIndex, listed.length - 1);
+        const selected = this.zone === 'list' ? listed[this.listIndex] : undefined;
+        const fullName = selected === undefined ? undefined : fullNameLine(graphLabel(selected), nameWidth);
+        const capacity = Math.max(1, height - out.length - (fullName !== undefined ? 1 : 0));
+        const range = listWindow(listed.length, this.zone === 'list' ? this.listIndex : 0, capacity);
+        for (let i = range.start; i < range.end; i += 1) {
+            const g = listed[i];
+            const text = `${padRight(graphLabel(g), nameWidth)}${padLeft(formatCount(g.active_agents), agentsW)}${padLeft(formatCount(g.depth), depthW)}${padLeft(formatPrice(g.api_price_estimate), estW)}${padLeft(formatTokens(g.tokens), tokensW)}`;
+            out.push(markRow(text, g === selected));
+        }
+        if (range.more > 0)
+            out.push(moreRow(range.more, 'graphs'));
+        if (fullName !== undefined)
+            out.push(fullName);
+        return out;
+    }
+}
+/** "a developer" / "an explore". */
+function article(kind) {
+    return /^[aeiou]/i.test(kind) ? `an ${kind}` : `a ${kind}`;
+}
+export const createGraphsView = (ctx) => new GraphsView(ctx);

package/dist/commands/canvas-analytics/memory.d.ts

@@ -0,0 +1,2 @@
+import { type AnalyticsViewFactory } from './view.js';
+export declare const createMemoryView: AnalyticsViewFactory;

package/dist/commands/canvas-analytics/memory.js

@@ -0,0 +1,211 @@
+// Memory tab: which documents did agents read?
+//
+// `t` switches between "Read on purpose" and "Loaded automatically"; every
+// number on the tab belongs to the current view, and the two are never added
+// together. Chart 1 lists documents; chart 2 counts the selected document's
+// readers by kind and follows the cursor. `Enter` on a document lists its
+// readers; `Enter` on one opens its graph detail with that agent selected.
+import { matchesKey, visibleWidth } from '@earendil-works/pi-tui';
+import { columns, theme, wrapText } from '../../core/tui/panel.js';
+import { foldRanked, hbar } from './chart.js';
+import { AgentDrilldown, graphName } from './drilldown.js';
+import { formatCount, formatDateTime, padLeft, padRight, plural, truncate, unavailable } from './format.js';
+import { NARROW_BAR_CELLS, isNarrow, listWindow, markRow, moreRow, textWidth } from './view.js';
+const SHOW_LABEL = { read: 'Read on purpose', loaded: 'Loaded automatically' };
+/** Words for one entry of each view, so the loaded view never says "read". */
+const WORDS = {
+    read: { one: 'read', many: 'reads', verb: 'read', first: 'first read' },
+    loaded: { one: 'load', many: 'loads', verb: 'loaded', first: 'first loaded' },
+};
+const FOOTER = 'A read does not show whether the document changed the work.';
+const NUMBER = 7;
+class MemoryView {
+    ctx;
+    show = 'read';
+    cursor = 0;
+    /** The document chart 2 describes; in the narrow layout the cursor can sit on
+     *  the "→" row, and that row still names the last document selected. */
+    doc = 0;
+    layers = [];
+    narrow = false;
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    get view() {
+        return this.ctx.data.memory.ok ? this.ctx.data.memory.value[this.show] : undefined;
+    }
+    /** Rows the cursor moves over: the documents, then (narrow) the "→" row. */
+    count() {
+        const rows = this.view?.rows.length ?? 0;
+        return rows === 0 ? 0 : rows + (this.narrow ? 1 : 0);
+    }
+    render(width, height, data) {
+        if (!data.memory.ok)
+            return [`Memory: ${unavailable(data.memory.reason)}`];
+        const view = data.memory.value[this.show];
+        const narrow = isNarrow(width);
+        this.narrow = narrow;
+        if (!narrow)
+            this.layers = this.layers.filter((l) => l.kind !== 'readers');
+        this.cursor = Math.min(this.cursor, Math.max(0, this.count() - 1));
+        const head = [this.switchLine(), ...wrapText(this.summary(view, data), width)];
+        const footer = wrapText(FOOTER, width).map((line) => theme.fg('dim', line));
+        const top = this.layers.at(-1);
+        if (top?.kind === 'drill')
+            return [...head, '', ...top.list.render(width, height - head.length - 1)];
+        const labels = this.labels(view);
+        if (top?.kind === 'readers')
+            return [...head, '', ...this.readersChart(view.rows[this.doc], labels[this.doc], width, height - head.length - 1)];
+        if (view.rows.length === 0)
+            return [...head, '', `No documents ${SHOW_LABEL[this.show].toLowerCase()} in this window.`, '', ...footer];
+        const bodyHeight = Math.max(3, height - head.length - 1 - footer.length - 1);
+        if (narrow) {
+            const list = this.documents(view, labels, width, bodyHeight - 1);
+            const arrow = markRow(truncate(`Who ${WORDS[this.show].verb} ${labels[this.doc]} →`, width - 2), this.cursor === view.rows.length);
+            return [...head, '', ...list, arrow, '', ...footer];
+        }
+        // The document list takes its names' natural width; chart 2 takes the rest.
+        const free = width - 3 - 2 - 3 * NUMBER;
+        const natural = Math.max(8, ...labels.map((label) => visibleWidth(label)));
+        const leftWidth = 2 + textWidth(free, natural, 24) + 3 * NUMBER;
+        const rightWidth = width - leftWidth - 3;
+        const left = this.documents(view, labels, leftWidth, bodyHeight);
+        const right = this.readersChart(view.rows[this.doc], labels[this.doc], rightWidth, bodyHeight);
+        right.push('', theme.fg('dim', truncate('Enter: agents and graphs', rightWidth)));
+        return [...head, '', ...columns(left, leftWidth, right.slice(0, bodyHeight), rightWidth), '', ...footer];
+    }
+    switchLine() {
+        const other = this.show === 'read' ? 'loaded' : 'read';
+        const on = theme.bold(`[${SHOW_LABEL[this.show]}]`);
+        const off = ` ${SHOW_LABEL[other]} `;
+        return `Show: ${this.show === 'read' ? `${on}  ${off}` : `${off}  ${on}`}`;
+    }
+    summary(view, data) {
+        const words = WORDS[this.show];
+        const text = `${plural(view.entries, words.one, words.many)} of ${plural(view.documents, 'document', 'documents')} · ${formatCount(view.agents_with_entry)} of ${plural(view.active_agents, 'agent', 'agents')} ${words.verb} at least one`;
+        const started = data.memory_log_started_at;
+        const partial = started !== null && Date.parse(data.window_start) < Date.parse(started);
+        return partial ? `${text} · recorded since ${formatDateTime(started)}` : text;
+    }
+    /** Row labels: the canonical name, plus its scope when another row in this
+     *  view has the same name. */
+    labels(view) {
+        const seen = new Map();
+        for (const row of view.rows)
+            seen.set(row.name, (seen.get(row.name) ?? 0) + 1);
+        return view.rows.map((row) => (seen.get(row.name) > 1 ? `${row.name} · ${row.scope}` : row.name));
+    }
+    /** Chart 1: document, entries, distinct agents, distinct graphs. */
+    documents(view, labels, width, height) {
+        const nameWidth = Math.max(8, width - 2 - 3 * NUMBER);
+        const words = WORDS[this.show];
+        const out = [theme.fg('dim', `  ${padRight('Document', nameWidth)}${padLeft(words.many, NUMBER)}${padLeft('agents', NUMBER)}${padLeft('graphs', NUMBER)}`)];
+        const range = listWindow(view.rows.length, Math.min(this.cursor, view.rows.length - 1), Math.max(1, height - 1));
+        for (let i = range.start; i < range.end; i += 1) {
+            const row = view.rows[i];
+            const text = `${padRight(labels[i], nameWidth)}${padLeft(formatCount(row.reads), NUMBER)}${padLeft(formatCount(row.agents), NUMBER)}${padLeft(formatCount(row.graphs), NUMBER)}`;
+            out.push(markRow(text, i === this.cursor));
+        }
+        if (range.more > 0)
+            out.push(moreRow(range.more, 'documents'));
+        return out;
+    }
+    /** Chart 2: the document's distinct readers counted by kind. */
+    readersChart(row, label, width, height) {
+        const words = WORDS[this.show];
+        const out = wrapText(`${label} · who ${words.verb} it`, width).slice(0, 2).map((line) => theme.bold(line));
+        out.push(theme.fg('dim', `${padRight(`scope: ${row.scope}`, width - NUMBER)}${padLeft('agents', NUMBER)}`));
+        const labelWidth = 14;
+        const cells = this.narrow ? NARROW_BAR_CELLS : Math.max(4, width - 2 - labelWidth - 1 - NUMBER);
+        const capacity = Math.max(2, height - out.length - 2);
+        const { top, rest } = foldRanked(row.readers_by_kind, row.readers_by_kind.length > capacity ? capacity - 1 : capacity, (k) => k.agents);
+        const bars = [...top.map((k) => ({ label: k.kind, agents: k.agents })), ...(rest !== undefined ? [{ label: `${plural(rest.count, 'more kind', 'more kinds')}`, agents: rest.sum }] : [])];
+        const max = Math.max(0, ...bars.map((b) => b.agents));
+        for (const bar of bars)
+            out.push(`  ${padRight(bar.label, labelWidth)}${hbar(bar.agents, max, cells)} ${padLeft(formatCount(bar.agents), NUMBER - 1)}`);
+        return out;
+    }
+    handleKey(key) {
+        if (matchesKey(key, 't') && this.ctx.data.memory.ok) {
+            this.show = this.show === 'read' ? 'loaded' : 'read';
+            this.cursor = 0;
+            this.doc = 0;
+            this.layers = [];
+            return 'handled';
+        }
+        const top = this.layers.at(-1);
+        if (top?.kind === 'drill') {
+            if (top.list.handleKey(key) === 'close')
+                this.layers.pop();
+            return 'handled';
+        }
+        if (top?.kind === 'readers') {
+            if (!matchesKey(key, 'escape'))
+                return 'unhandled';
+            this.layers.pop();
+            return 'handled';
+        }
+        if (matchesKey(key, 'escape'))
+            return 'back';
+        const view = this.view;
+        if (view === undefined || view.rows.length === 0)
+            return 'unhandled';
+        if (matchesKey(key, 'down') || matchesKey(key, 'j'))
+            this.cursor = Math.min(this.count() - 1, this.cursor + 1);
+        else if (matchesKey(key, 'up') || matchesKey(key, 'k'))
+            this.cursor = Math.max(0, this.cursor - 1);
+        else if (matchesKey(key, 'enter')) {
+            if (this.cursor < view.rows.length)
+                this.layers.push({ kind: 'drill', list: this.drill(view, this.cursor) });
+            else
+                this.layers.push({ kind: 'readers' });
+            return 'handled';
+        }
+        else
+            return 'unhandled';
+        if (this.cursor < view.rows.length)
+            this.doc = this.cursor;
+        return 'handled';
+    }
+    /** The agents that read the document: kind, name, graph, entries, first time. */
+    drill(view, index) {
+        const data = this.ctx.data;
+        const row = view.rows[index];
+        const words = WORDS[this.show];
+        return new AgentDrilldown(`${this.labels(view)[index]} · agents that ${words.verb} it`, [
+            { header: 'kind', kind: 'text', max: 18 },
+            { header: 'agent', kind: 'text' },
+            { header: 'graph', kind: 'text' },
+            { header: words.many, kind: 'number' },
+            { header: words.first, kind: 'number' },
+        ], row.readers.map((r) => ({
+            node_id: r.node_id,
+            graph_id: r.graph_id,
+            cells: [r.kind, r.name, graphName(data, r.graph_id), formatCount(r.reads), formatDateTime(r.first_at)],
+        })), this.ctx.nav);
+    }
+    keyLine(narrow) {
+        const top = this.layers.at(-1);
+        const toggle = narrow ? 't' : `t ${this.show === 'read' ? 'loaded automatically' : 'read on purpose'}`;
+        if (top?.kind === 'drill')
+            return [top.list.keyLine(narrow), toggle].filter((part) => part !== '').join(' · ');
+        if (top?.kind === 'readers' || (this.view?.rows.length ?? 0) === 0)
+            return toggle;
+        return [narrow ? '↑↓ Enter' : `↑↓ document · Enter: agents that ${WORDS[this.show].verb} it`, toggle].join(' · ');
+    }
+    escapeLabel() {
+        const top = this.layers.at(-1);
+        if (top?.kind === 'drill')
+            return 'back to documents';
+        if (top?.kind === 'readers')
+            return 'back';
+        return undefined;
+    }
+    land() {
+        this.show = 'read';
+        this.layers = [];
+        this.cursor = 0;
+        this.doc = 0;
+    }
+}
+export const createMemoryView = (ctx) => new MemoryView(ctx);

package/dist/commands/canvas-analytics/overview.d.ts

@@ -0,0 +1,2 @@
+import { type AnalyticsViewFactory } from './view.js';
+export declare const createOverviewView: AnalyticsViewFactory;