@xingular/harness 2.0.0 → 2.0.1-unstable

package/dist/sdk/terminal/tui/pages/contextPage.js

@@ -0,0 +1,585 @@
+import { matchesKey, parseColor, truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
+import { CHROME_PAD, padded, selectedRow } from "../chrome.js";
+import { SERIES_COLORS } from "../theme.js";
+const BARS = '▁▂▃▄▅▆▇█';
+/** Characters per token, for the budget column: the same ratio the attribution estimates with. */
+const CHARS = 4;
+const OWNER_TITLES = {
+    foundation: 'Foundation · harness',
+    variant: 'Variant',
+    application: 'Your application',
+    conversation: 'Conversation',
+    reserved: 'Reserved and free'
+};
+const OWNER_ORDER = ['foundation', 'variant', 'application', 'conversation', 'reserved'];
+const KIND_ORDER = ['System prompt', 'Tools', 'Memory', 'Skills', 'Messages', 'Reserved'];
+function kindOf(row) {
+    if (row.group === 'reserved')
+        return 'Reserved';
+    if (row.id === 'messages' || row.id === 'context-update' || row.id === 'references' || row.id === 'required-skills' || row.id === 'wiki' || row.id === 'session-state')
+        return 'Messages';
+    if (row.id === 'memory')
+        return 'Memory';
+    if (row.id === 'skills')
+        return 'Skills';
+    if (row.id === 'tools' || row.id === 'tools-harness' || row.id === 'tools-application' || row.id === 'tool-guidance')
+        return 'Tools';
+    return 'System prompt';
+}
+function count(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return '0';
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}M`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(1)}K`;
+    return String(Math.round(value));
+}
+function percent(value) {
+    return value === null ? '?' : `${value.toFixed(1)}%`;
+}
+/** One rule for capacity, shared with the App's `Meter`: amber at 80, red at 95. */
+function tone(share) {
+    if (share === null)
+        return 'dim';
+    if (share >= 95)
+        return 'error';
+    if (share >= 80)
+        return 'warning';
+    return 'success';
+}
+/** What a bar's run is called, short enough to sit in a legend. */
+const SERIES_LABELS = {
+    foundation: 'foundation',
+    variant: 'variant',
+    application: 'your app',
+    conversation: 'conversation',
+    reserved: 'reserved'
+};
+/** The categorical colour of an owner group: the App's `--data-1..4`, in the same order. */
+function seriesColor(theme, index) {
+    const palette = theme.appearance === 'light' ? SERIES_COLORS.light : SERIES_COLORS.dark;
+    return palette[index] ?? palette[palette.length - 1];
+}
+/** Cells for each value out of `total`, by largest remainder, so the runs always add up. */
+export function allocateCells(values, total) {
+    const cells = Math.max(0, Math.floor(total));
+    const sum = values.reduce((acc, value) => acc + Math.max(0, value), 0);
+    if (sum <= 0 || cells <= 0)
+        return values.map(() => 0);
+    const present = values.map((value, index) => ({ value: Math.max(0, value), index })).filter((entry) => entry.value > 0);
+    if (cells < present.length) {
+        const out = values.map(() => 0);
+        for (const entry of [...present].sort((left, right) => right.value - left.value).slice(0, cells))
+            out[entry.index] = 1;
+        return out;
+    }
+    const exact = values.map((value) => (Math.max(0, value) / sum) * cells);
+    const out = exact.map((value) => Math.floor(value));
+    let left = cells - out.reduce((acc, value) => acc + value, 0);
+    for (const entry of exact.map((value, index) => ({ rest: value - Math.floor(value), index })).sort((left_, right) => right.rest - left_.rest)) {
+        if (left <= 0)
+            break;
+        out[entry.index] = (out[entry.index] ?? 0) + 1;
+        left -= 1;
+    }
+    // A kind with tokens gets one cell while there is room to spare, so it never vanishes silently.
+    for (const entry of present) {
+        if ((out[entry.index] ?? 0) > 0)
+            continue;
+        const donor = out.map((value, index) => ({ value, index })).filter((candidate) => candidate.index !== entry.index && candidate.value > 1).sort((a, b) => b.value - a.value)[0];
+        if (!donor)
+            break;
+        out[donor.index] = (out[donor.index] ?? 0) - 1;
+        out[entry.index] = 1;
+    }
+    return out;
+}
+/** The bar and its legend: one colour per kind of context, the track for free space, a marker at the reserve. */
+export function contextBar(data, width, theme) {
+    const room = Math.max(1, width - 2);
+    const parts = OWNER_ORDER.slice(0, 4)
+        .map((group, index) => ({ group, tokens: data.totals[group], color: seriesColor(theme, index) }))
+        .filter((part) => part.tokens > 0);
+    const window = data.window;
+    const share = window === null || window <= 0 ? 100 : Math.min(100, (data.used / window) * 100);
+    const filled = Math.max(0, Math.min(room, Math.round((share / 100) * room)));
+    const cells = allocateCells(parts.map((part) => part.tokens), filled);
+    const runs = parts.flatMap((part, index) => (cells[index] ?? 0) > 0 ? [{ text: '█'.repeat(cells[index]), color: part.color }] : []);
+    const trackCells = Math.max(0, room - filled);
+    const reserve = data.compaction?.reserveTokens ?? null;
+    const markerAt = reserve !== null && window !== null && window > 0 ? Math.round(((data.used + reserve) / window) * room) : null;
+    const inTrack = markerAt !== null && markerAt >= filled && markerAt < room ? markerAt - filled : null;
+    const bar = '[' + runs.map((run) => theme.style(run.text, { fg: parseColor(run.color) })).join('')
+        + (trackCells > 0
+            ? theme.fg('dim', '░'.repeat(inTrack ?? trackCells))
+                + (inTrack === null ? '' : theme.fg('warning', '│') + theme.fg('dim', '░'.repeat(Math.max(0, trackCells - inTrack - 1))))
+            : (inTrack === null ? '' : theme.fg('warning', '│')))
+        + ']';
+    const entries = parts.map((part) => ({ text: `▌${SERIES_LABELS[part.group]} ${count(part.tokens)}`, color: part.color }));
+    entries.push({ text: `free ${data.free === null ? '?' : count(data.free)}`, color: null });
+    if (reserve !== null)
+        entries.push({ text: `│ compaction at ${count(Math.min(window ?? data.used + reserve, data.used + reserve))}`, color: null });
+    const legend = [];
+    let line = '';
+    for (const entry of entries) {
+        const piece = entry.color ? theme.style(entry.text, { fg: parseColor(entry.color) }) : theme.fg('dim', entry.text);
+        const candidate = line ? `${line}  ${piece}` : piece;
+        if (line && visibleWidth(candidate) > width) {
+            legend.push(line);
+            line = piece;
+        }
+        else
+            line = candidate;
+    }
+    if (line)
+        legend.push(line);
+    return { bar, legend };
+}
+/** A label on the left and a quiet value at the right edge of the same row. */
+function spread(left, right, width) {
+    if (!right)
+        return truncateToWidth(left, width, '');
+    const room = Math.max(0, width - visibleWidth(left) - 2);
+    const value = truncateToWidth(right, room, '');
+    return left + ' '.repeat(Math.max(1, width - visibleWidth(left) - visibleWidth(value))) + value;
+}
+export class ContextPage {
+    options;
+    presentation = 'fullscreen';
+    focused = false;
+    tab;
+    runs = [];
+    runIndex = 0;
+    runDetails = null;
+    runError = null;
+    runLoading = false;
+    runGeneration = 0;
+    grouping = 'owner';
+    data = null;
+    detail = null;
+    selectedId = null;
+    folded = new Set();
+    offset = 0;
+    detailOffset = 0;
+    maxOffset = 0;
+    scrollRows = 1;
+    busy = false;
+    reloadPending = false;
+    error = null;
+    disposed = false;
+    constructor(options) {
+        this.options = options;
+        this.tab = options.initialTab ?? 'request';
+    }
+    tabs() {
+        return [{ id: 'details', title: 'Run details' }, { id: 'request', title: 'Context usage' }];
+    }
+    activeTab() {
+        return this.tab === 'growth' ? 'request' : this.tab;
+    }
+    selectTab(id) {
+        if (id !== 'details' && id !== 'request' && id !== 'growth')
+            return;
+        if (id === this.tab)
+            return;
+        this.tab = id;
+        this.offset = 0;
+        this.detail = null;
+        this.options.changed();
+        if (!this.data)
+            void this.load();
+    }
+    hint() {
+        if (this.detail)
+            return '↑/↓ scroll · esc close · q close page';
+        if (this.tab === 'details')
+            return '[ ] runs · t trajectory · r refresh · ↑/↓ scroll · q close';
+        return this.tab === 'request'
+            ? '↑/↓ move · space fold · enter text · g group · h growth · c compact · v variant · r refresh · q close'
+            : '↑/↓ scroll · r refresh · q close';
+    }
+    activate() {
+        if (!this.data)
+            void this.load();
+        if (this.options.runs)
+            void this.loadRuns();
+    }
+    async loadRuns() {
+        try {
+            this.runs = await this.options.runs();
+            const at = this.options.initialRunId ? this.runs.findIndex(run => run.id === this.options.initialRunId) : 0;
+            if (this.options.initialRunId && at < 0)
+                throw new Error('Run not found in this native session');
+            this.runIndex = Math.max(0, at);
+            await this.loadRun();
+            await this.load();
+        }
+        catch (error) {
+            this.runError = error instanceof Error ? error.message : String(error);
+            this.options.changed();
+        }
+    }
+    async loadRun() {
+        const run = this.runs[this.runIndex];
+        const generation = ++this.runGeneration;
+        this.runDetails = null;
+        this.runError = null;
+        if (!run || !this.options.readDetails) {
+            this.options.changed();
+            return;
+        }
+        this.runLoading = true;
+        this.options.changed();
+        try {
+            const details = await this.options.readDetails(run.id);
+            if (!this.disposed && generation === this.runGeneration)
+                this.runDetails = details;
+        }
+        catch (error) {
+            if (!this.disposed && generation === this.runGeneration)
+                this.runError = error instanceof Error ? error.message : String(error);
+        }
+        finally {
+            if (!this.disposed && generation === this.runGeneration) {
+                this.runLoading = false;
+                this.options.changed();
+            }
+        }
+    }
+    dispose() {
+        this.disposed = true;
+    }
+    async load(section) {
+        if (this.disposed)
+            return;
+        if (this.busy) {
+            this.reloadPending = true;
+            return;
+        }
+        this.busy = true;
+        this.error = null;
+        this.options.changed();
+        try {
+            const runId = this.runs[this.runIndex]?.id;
+            const answer = await this.options.call('terminal.context', { ...(runId ? { runId } : {}), ...(section ? { section } : {}) });
+            if (this.disposed)
+                return;
+            this.data = answer.attribution ?? null;
+            // Start on the first row so space and enter act on something the person can see.
+            if (!this.entries().some((entry) => entry.row.id === this.selectedId))
+                this.selectedId = this.entries()[0]?.row.id ?? null;
+            if (section) {
+                if (answer.text)
+                    this.detail = answer.text;
+                else
+                    this.error = 'That row carries no text: it is measured, not written.';
+                this.detailOffset = 0;
+            }
+        }
+        catch (cause) {
+            this.error = cause instanceof Error ? cause.message : 'The context could not be read.';
+        }
+        finally {
+            this.busy = false;
+            this.options.changed();
+            if (this.reloadPending) {
+                this.reloadPending = false;
+                void this.load();
+            }
+        }
+    }
+    handleInput(data) {
+        if (this.detail) {
+            const page = Math.max(1, this.scrollRows - 2);
+            if (matchesKey(data, 'up'))
+                this.detailOffset = Math.max(0, this.detailOffset - 1);
+            else if (matchesKey(data, 'down'))
+                this.detailOffset += 1;
+            else if (matchesKey(data, 'pageUp'))
+                this.detailOffset = Math.max(0, this.detailOffset - page);
+            else if (matchesKey(data, 'pageDown'))
+                this.detailOffset += page;
+            else if (matchesKey(data, 'escape') || data === 'q') {
+                this.detail = null;
+                this.options.changed();
+            }
+            else
+                return false;
+            this.options.changed();
+            return true;
+        }
+        if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
+            const tabs = ['details', 'request'];
+            const direction = matchesKey(data, 'shift+tab') ? -1 : 1;
+            this.selectTab(tabs[(tabs.indexOf(this.tab === 'growth' ? 'request' : this.tab) + direction + tabs.length) % tabs.length]);
+            return true;
+        }
+        if (this.tab === 'details') {
+            if (data === '[' || data === ']') {
+                const next = this.runIndex + (data === '[' ? 1 : -1);
+                if (next >= 0 && next < this.runs.length) {
+                    this.runIndex = next;
+                    this.offset = 0;
+                    void this.loadRun();
+                    void this.load();
+                }
+            }
+            else if (data === 't' && this.runs[this.runIndex])
+                this.options.openTrajectory?.(this.runs[this.runIndex].id);
+            else if (data === 'r')
+                void this.loadRuns();
+            else if (matchesKey(data, 'down'))
+                this.offset++;
+            else if (matchesKey(data, 'up'))
+                this.offset = Math.max(0, this.offset - 1);
+            else
+                return false;
+            this.options.changed();
+            return true;
+        }
+        if (data === 'h') {
+            this.tab = this.tab === 'growth' ? 'request' : 'growth';
+            this.offset = 0;
+            this.options.changed();
+            return true;
+        }
+        const entries = this.entries();
+        const found = entries.findIndex((entry) => entry.row.id === this.selectedId);
+        const current = found >= 0 ? found : 0;
+        if (!entries.length)
+            return false;
+        if (matchesKey(data, 'up'))
+            this.move(entries, current - 1);
+        else if (matchesKey(data, 'down'))
+            this.move(entries, current + 1);
+        else if (matchesKey(data, 'home'))
+            this.offset = 0;
+        else if (matchesKey(data, 'end'))
+            this.offset = this.maxOffset;
+        else if (data === ' ' && entries[current]) {
+            const row = entries[current].row;
+            if (this.folded.has(row.group))
+                this.folded.delete(row.group);
+            else
+                this.folded.add(row.group);
+        }
+        else if (matchesKey(data, 'enter') && entries[current]) {
+            void this.load(entries[current].row.id);
+            return true;
+        }
+        else if (data === 'g') {
+            this.grouping = this.grouping === 'owner' ? 'kind' : 'owner';
+            this.folded.clear();
+            this.offset = 0;
+        }
+        else if (data === 'r') {
+            void this.load();
+            return true;
+        }
+        else if (data === 'c') {
+            void this.compact();
+            return true;
+        }
+        else if (data === 'v') {
+            this.options.openVariant?.();
+            return true;
+        }
+        else
+            return false;
+        this.options.changed();
+        return true;
+    }
+    move(entries, index) {
+        if (!entries.length)
+            return;
+        const next = entries[Math.max(0, Math.min(entries.length - 1, index))];
+        if (next)
+            this.selectedId = next.row.id;
+    }
+    async compact() {
+        if (!this.options.compact)
+            return;
+        const free = this.data?.free === null || this.data?.free === undefined ? null : this.data.free;
+        const question = free === null
+            ? 'Pi will summarize this conversation and start the next request from the summary.'
+            : `Pi will summarize this conversation. About ${count(free)} tokens are free before it does.`;
+        if (this.options.confirm && !(await this.options.confirm('Compact the conversation now?', question)))
+            return;
+        try {
+            await this.options.compact();
+            await this.load();
+        }
+        catch (cause) {
+            this.error = cause instanceof Error ? cause.message : 'Compaction failed.';
+            this.options.changed();
+        }
+    }
+    /** The rows in the order the page draws them, with the heading each one introduces. */
+    entries() {
+        const rows = this.data?.rows ?? [];
+        if (this.grouping === 'owner') {
+            const ordered = [...rows].sort((left, right) => OWNER_ORDER.indexOf(left.group) - OWNER_ORDER.indexOf(right.group));
+            const out = [];
+            for (const row of ordered) {
+                const previous = out.at(-1)?.row.group;
+                out.push({ row, heading: previous === row.group ? null : (OWNER_TITLES[row.group] ?? row.group), folded: this.folded.has(row.group) });
+            }
+            return out;
+        }
+        const ordered = [...rows].sort((left, right) => KIND_ORDER.indexOf(kindOf(left)) - KIND_ORDER.indexOf(kindOf(right)));
+        const out = [];
+        let last = null;
+        for (const row of ordered) {
+            const kind = kindOf(row);
+            const folded = this.folded.has(kind);
+            out.push({ row, heading: last === kind ? null : kind, folded });
+            last = kind;
+        }
+        return out;
+    }
+    render(width, rows) {
+        if (width < 1 || rows < 1)
+            return [];
+        const theme = this.options.theme();
+        // The overlay owns the tab strip, both rules and the hint; the body starts at the reading.
+        const body = this.detail ? this.detailBody(width, theme) : this.tab === 'details' ? this.runBody(width, theme) : this.tab === 'growth' ? this.growthBody(width, theme) : this.requestBody(width, theme);
+        const room = Math.max(1, rows);
+        this.scrollRows = room;
+        this.maxOffset = Math.max(0, body.length - room);
+        const wanted = this.detail ? this.detailOffset : this.offset;
+        const offset = Math.max(0, Math.min(wanted, this.maxOffset));
+        if (this.detail)
+            this.detailOffset = offset;
+        else
+            this.offset = offset;
+        return body.slice(offset, offset + room).map((line) => truncateToWidth(line, width, ''));
+    }
+    runBody(width, theme) {
+        if (this.runError)
+            return [padded(theme.fg('error', this.runError), width)];
+        const run = this.runs[this.runIndex];
+        if (!run)
+            return [padded(theme.fg('dim', 'No runs recorded for this conversation.'), width)];
+        if (this.runLoading || !this.runDetails)
+            return [padded(theme.fg('dim', 'Loading run details…'), width)];
+        const details = this.runDetails;
+        const fields = [
+            ['Status', details.status], ['Mode', details.mode], ['Model', details.model], ['Effort', details.effort],
+            ['Variant scope', details.variantScope], ['Variant version', details.variantVersion], ['Workspace root', details.workspaceRoot],
+            ['Tools', details.tools], ['Connectors', details.connectors], ['Skills loaded via skill_load', details.skills], ['Activated extensions', details.plugins]
+        ];
+        const inner = Math.max(8, width - CHROME_PAD * 2);
+        return [padded(theme.bold(theme.fg('accent', `Run ${this.runIndex + 1}/${this.runs.length} · ${run.id}`)), width), '',
+            ...fields.flatMap(([label, value]) => wrapTextWithAnsi(`${label}: ${value === null ? 'Unknown' : Array.isArray(value) ? (value.length ? value.join(', ') : 'None') : value}`, inner).map(line => padded(line, width))),
+            '', padded(theme.fg('accent', 't  Open trajectory'), width)];
+    }
+    requestBody(width, theme) {
+        const data = this.data;
+        if (!data) {
+            return [padded(theme.fg(this.error ? 'error' : 'dim', this.error ?? (this.busy ? 'Reading the recorded context…' : 'No reply yet: the next request records what it is made of.')), width)];
+        }
+        const inner = Math.max(8, width - CHROME_PAD * 2);
+        const body = [];
+        body.push(padded(spread(theme.fg('text', `${count(data.used)} of ${data.window === null ? 'an unknown window' : count(data.window)}`), theme.fg(tone(data.share), `${percent(data.share)} used · ${data.source}`), inner), width));
+        const chart = contextBar(data, inner, theme);
+        body.push(padded(chart.bar, width));
+        for (const line of chart.legend)
+            body.push(padded(line, width));
+        body.push('');
+        for (const entry of this.entries()) {
+            if (entry.heading) {
+                const total = data.rows.filter((row) => (this.grouping === 'owner' ? OWNER_TITLES[row.group] === entry.heading : kindOf(row) === entry.heading)).reduce((sum, row) => sum + row.tokens, 0);
+                // The heading carries its group's colour, so the list and the bar read as one picture.
+                const owner = this.grouping === 'owner' ? OWNER_ORDER.find((group) => OWNER_TITLES[group] === entry.heading) : undefined;
+                const swatch = owner ? theme.style('█ ', { fg: parseColor(seriesColor(theme, OWNER_ORDER.indexOf(owner))) }) : '';
+                body.push(padded(swatch + theme.bold(theme.fg('accent', entry.heading)) + theme.fg('dim', `  ${count(total)}`), width));
+            }
+            if (entry.folded)
+                continue;
+            body.push(this.rowLine(entry.row, inner, width, theme));
+        }
+        if (data.onDemand.length) {
+            body.push('');
+            body.push(padded(theme.fg('accent', 'On demand') + theme.fg('dim', '  not in this request'), width));
+            for (const item of data.onDemand) {
+                const cost = item.tokensEach === null ? (item.note ?? '') : `about ${count(item.tokensEach)} each · ${item.note ?? ''}`;
+                body.push(padded(`  ${theme.fg('text', item.title)}  ${theme.fg('dim', `${item.items} available · ${cost}`)}`, width));
+            }
+        }
+        if (data.note) {
+            body.push('');
+            body.push(...wrapTextWithAnsi(theme.fg('dim', data.note), inner).map((line) => padded(line, width)));
+        }
+        if (this.error)
+            body.push(padded(theme.fg('error', this.error), width));
+        return body;
+    }
+    rowLine(row, inner, width, theme) {
+        const selected = row.id === this.selectedId;
+        const marker = selected ? '❯ ' : row.always ? '  ' : '· ';
+        const tail = `${count(row.tokens).padStart(7)}${percent(row.share).padStart(7)}`;
+        // The note says why a figure is not exact, so it outranks the budget and the tool breakdown.
+        const extras = [
+            row.note ? row.note : '',
+            row.budget ? `${count(row.chars ?? row.tokens * CHARS)} of ${count(row.budget)} chars` : '',
+            row.tools?.length ? row.tools.map((tool) => `${tool.group} ${tool.count}`).join(' · ') : ''
+        ].filter(Boolean);
+        const room = () => Math.max(12, inner - visibleWidth(tail) - 1 - (extras.length ? visibleWidth(extras.join('  ')) + 2 : 0));
+        let left = truncateToWidth(`${marker}${row.title}`, room(), '…');
+        while (extras.length && visibleWidth(left) + visibleWidth(tail) + 2 + visibleWidth(extras.join('  ')) > inner)
+            extras.pop();
+        const rest = extras.join('  ');
+        const gap = Math.max(1, inner - visibleWidth(left) - visibleWidth(tail) - (rest ? visibleWidth(rest) + 2 : 0));
+        const line = `${left}${' '.repeat(gap)}${rest ? theme.fg('dim', rest) + '  ' : ''}${tail}`;
+        if (selected)
+            return selectedRow(padded(line, width), width, theme);
+        return padded(line, width);
+    }
+    growthBody(width, theme) {
+        const data = this.data;
+        if (!data)
+            return [padded(theme.fg('dim', this.busy ? 'Reading the recorded context…' : 'No reply yet.'), width)];
+        const inner = Math.max(8, width - CHROME_PAD * 2);
+        const body = [];
+        const history = data.history.slice(-24);
+        if (history.length) {
+            const peak = Math.max(...history.map((point) => point.used), 1);
+            const spark = history.map((point) => BARS[Math.min(BARS.length - 1, Math.round((point.used / peak) * (BARS.length - 1)))]).join('');
+            body.push(padded(theme.fg('accent', spark), width));
+            body.push(padded(theme.fg('dim', `${history.length} requests · peak ${count(peak)}${data.compactions.length ? ` · ${data.compactions.length} compaction${data.compactions.length === 1 ? '' : 's'}` : ''}`), width));
+        }
+        else {
+            body.push(padded(theme.fg('dim', 'No measured request yet.'), width));
+        }
+        body.push('');
+        body.push(padded(spread(theme.fg('dim', 'REQUEST'), theme.fg('dim', 'USED      SHARE'), inner), width));
+        for (const point of history.slice().reverse().slice(0, 12)) {
+            body.push(padded(spread(`  ${point.request}`, `${count(point.used).padStart(8)}${percent(point.share).padStart(8)}`, inner), width));
+        }
+        for (const compaction of data.compactions.slice(-3)) {
+            const before = compaction.before === null ? '?' : count(compaction.before);
+            const after = compaction.after === null ? '?' : count(compaction.after);
+            body.push(padded(theme.fg('warning', `  compacted ${before} → ${after}`), width));
+        }
+        body.push('');
+        body.push(...wrapTextWithAnsi(theme.fg('dim', data.note ?? ''), inner).filter(Boolean).map((line) => padded(line, width)));
+        return body;
+    }
+    detailBody(width, theme) {
+        const detail = this.detail;
+        const inner = Math.max(8, width - CHROME_PAD * 2);
+        const body = [];
+        body.push(padded(theme.bold(theme.fg('accent', detail.title)), width));
+        body.push('');
+        for (const line of detail.text.split('\n')) {
+            if (!line.trim()) {
+                body.push('');
+                continue;
+            }
+            for (const wrapped of wrapTextWithAnsi(theme.fg('text', line), inner))
+                body.push(padded(wrapped, width));
+        }
+        return body;
+    }
+}

package/dist/sdk/terminal/tui/pages/doctorPage.d.ts

@@ -0,0 +1,39 @@
+import type { Theme, ExtensionUIContext } from '@earendil-works/pi-coding-agent';
+import type { TerminalPage } from "../page.js";
+import type { TabInfo } from "../chrome.js";
+interface DoctorPageOptions {
+    theme(): Theme;
+    call(method: string, params?: Record<string, unknown>): Promise<unknown>;
+    selection(): {
+        model: string | null;
+        tools: string[];
+    };
+    confirm: ExtensionUIContext['confirm'];
+    select: ExtensionUIContext['select'];
+    changed(): void;
+}
+export declare class DoctorPage implements TerminalPage {
+    private readonly options;
+    focused: boolean;
+    private report?;
+    private error?;
+    private timer?;
+    private disposed;
+    private busy;
+    private offset;
+    private scrollRows;
+    private maxOffset;
+    constructor(options: DoctorPageOptions);
+    tabs(): readonly TabInfo[];
+    activeTab(): string;
+    hint(): string;
+    activate(): void;
+    dispose(): void;
+    private start;
+    private poll;
+    private chooseLive;
+    private retry;
+    handleInput(data: string): boolean;
+    render(width: number, rows: number): string[];
+}
+export {};