@xingular/harness 1.0.0 → 1.2.0

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

@@ -0,0 +1,152 @@
+import { matchesKey, stripTerminalSequences, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
+import { CHROME_PAD, headerRow, neutralRule, padded } from "../chrome.js";
+import { FilterList } from "../list.js";
+import { ACTIVE_SUBAGENT_STATUSES, terminalSubagentDuration } from "../../subagentMonitor.js";
+import { profileColor, opentuiTheme } from "../../opentui/theme.js";
+import { subagentTasks } from "../../opentui/subagentsWidget.js";
+import { formatTokenCount } from "../status.js";
+import { getWorkingSpinnerFrames, SPINNER_INTERVAL_MS, spinnerFrameAt } from "../workingStatus.js";
+const TABS = [{ id: 'subagents', title: 'Subagents' }];
+function clean(value) {
+    return stripTerminalSequences(value).replace(/[\x00-\x08\x0b-\x1f\x7f]/g, ' ').replace(/\s+/g, ' ').trim();
+}
+function statusGlyph(item, now) {
+    if (item.status === 'running') {
+        const started = Date.parse(item.startedAt);
+        return spinnerFrameAt(now - (Number.isFinite(started) ? started : now), getWorkingSpinnerFrames(process.env.TERM), SPINNER_INTERVAL_MS);
+    }
+    switch (item.status) {
+        case 'queued': return '○';
+        case 'waiting_for_approval':
+        case 'waiting_for_input': return '●';
+        case 'completed': return '✓';
+        case 'failed': return '✕';
+        case 'interrupted': return '!';
+    }
+}
+function statusGlyphTone(item) {
+    if (item.status === 'completed')
+        return 'success';
+    if (item.status === 'failed')
+        return 'error';
+    if (item.status === 'waiting_for_approval' || item.status === 'waiting_for_input')
+        return 'accent';
+    if (item.status === 'running')
+        return 'warning';
+    return 'muted';
+}
+function effectiveModel(item) {
+    const model = item.usage?.model;
+    if (model)
+        return `${item.usage?.provider ? `${item.usage.provider}/` : ''}${model}`;
+    return item.model ?? '—';
+}
+function usageSummary(item) {
+    const usage = item.usage;
+    if (!usage)
+        return 'usage —';
+    const cache = [usage.cacheReadTokens, usage.cacheWriteTokens]
+        .filter((value) => typeof value === 'number' && value > 0)
+        .map(formatTokenCount);
+    const cost = typeof usage.costUsd === 'number'
+        ? `${usage.costSource === 'estimate' ? '~' : ''}$${usage.costUsd.toFixed(usage.costUsd > 0 && usage.costUsd < 0.001 ? 5 : usage.costUsd < 0.01 ? 4 : 2).replace(/0+$/u, '').replace(/\.$/u, '')}`
+        : '';
+    const fields = [
+        typeof usage.inputTokens === 'number' ? `↑${formatTokenCount(usage.inputTokens)}` : '',
+        typeof usage.outputTokens === 'number' ? `↓${formatTokenCount(usage.outputTokens)}` : '',
+        cache.some(Boolean) ? `c${cache.join('/')}` : '',
+        cost,
+        typeof usage.contextTokens === 'number' ? `ctx${formatTokenCount(usage.contextTokens)}${typeof usage.contextWindow === 'number' ? `/${formatTokenCount(usage.contextWindow)}` : ''}` : '',
+        typeof usage.requests === 'number' ? `req${usage.requests}` : ''
+    ].filter(Boolean);
+    return fields.length ? fields.join(' ') : 'usage —';
+}
+function rowSubtitle(item, width) {
+    const available = Math.max(1, width - 2);
+    const verbose = width >= 96;
+    const account = clean(item.accountLabel ?? '') || '—';
+    const model = truncateToWidth(effectiveModel(item), 24, '…');
+    const details = verbose
+        ? [`acct ${account}`, `model ${model}`, `eff ${item.effort ?? '—'}`, usageSummary(item)].join(' · ')
+        : [`a:${account}`, `m:${model}`, `e:${item.effort ?? '—'}`, usageSummary(item)].join(' · ');
+    return truncateToWidth(details, available, '…');
+}
+export class SubagentsPage {
+    options;
+    presentation = 'fullscreen';
+    list;
+    constructor(options) {
+        this.options = options;
+        this.list = new FilterList({
+            theme: options.theme, search: 'always', noun: ['subagent', 'subagents'], rowGap: 1,
+            empty: 'No subagents have started in the latest run'
+        });
+    }
+    get focused() { return this.list.focused; }
+    set focused(value) { this.list.focused = value; }
+    tabs() { return TABS; }
+    activeTab() { return 'subagents'; }
+    hint() { return '↑↓ select · type to search'; }
+    rows(width = 80, now = this.options.now?.() ?? Date.now()) {
+        const ordered = [...this.options.snapshot()].sort((left, right) => {
+            const active = Number(ACTIVE_SUBAGENT_STATUSES.has(right.status)) - Number(ACTIVE_SUBAGENT_STATUSES.has(left.status));
+            return active || left.startedAt.localeCompare(right.startedAt) || left.id.localeCompare(right.id);
+        });
+        return ordered.map(item => {
+            const profile = clean(item.profile?.name ?? '') || 'subagent';
+            const title = clean(item.title) || 'Subagent';
+            const color = item.profile?.color ? profileColor(opentuiTheme, item.profile.color) : null;
+            const glyph = statusGlyph(item, now);
+            const labelParts = [
+                { text: `${glyph} `, ...(item.status === 'running' && color ? { color } : { tone: statusGlyphTone(item) }) },
+                { text: profile, ...(color ? { color } : { tone: 'muted' }) },
+                { text: `  ${title}` }
+            ];
+            return {
+                id: item.id,
+                label: labelParts.map(part => part.text).join(''),
+                labelParts,
+                subtitle: rowSubtitle(item, width),
+                searchText: `${profile} ${title} ${item.goal ?? ''} ${item.status} ${item.activity} ${item.accountLabel ?? ''} ${effectiveModel(item)} ${item.effort ?? ''} ${usageSummary(item)}`,
+                data: item
+            };
+        });
+    }
+    render(width, rows) {
+        const items = this.rows(width, this.options.now?.() ?? Date.now());
+        this.list.setRows(items);
+        const active = items.filter(item => item.data && ACTIVE_SUBAGENT_STATUSES.has(item.data.status)).length;
+        const selected = this.list.selected?.data;
+        const header = headerRow('Subagents', `${active} active · ${items.length} total`, width, this.options.theme());
+        const bodyRows = Math.max(0, rows - 7);
+        const listRows = Math.max(1, Math.min(this.list.height, Math.floor(bodyRows * 0.6)));
+        const output = [header, '', ...this.list.render(width, listRows), ''];
+        if (selected) {
+            const theme = this.options.theme();
+            const detailIndent = ' '.repeat(CHROME_PAD * 2);
+            const detailLines = (text) => wrapTextWithAnsi(theme.fg('text', clean(text)), Math.max(1, width - detailIndent.length))
+                .map(line => `${detailIndent}${line}`);
+            output.push(neutralRule(width, theme));
+            output.push(padded(theme.fg('muted', `Profile: ${clean(selected.profile?.name ?? '') || 'copy of the parent'}`), width));
+            output.push(padded(theme.fg('accent', 'Task'), width));
+            output.push(...detailLines(selected.goal || 'Subagent'));
+            output.push(padded(theme.fg('muted', `Status: ${[selected.status.replaceAll('_', ' '), subagentTasks(selected.checklist), terminalSubagentDuration(selected)].filter(Boolean).join(' · ')}`), width));
+            output.push(padded(theme.fg('accent', 'Current activity'), width));
+            output.push(...detailLines(selected.activity));
+        }
+        else {
+            output.push(padded(this.options.theme().fg('muted', 'The selected subagent’s task and current activity appear here.'), width));
+        }
+        return output.slice(0, Math.max(0, rows)).map(line => truncateToWidth(line, width, ''));
+    }
+    handleInput(data) {
+        this.list.setRows(this.rows());
+        if (matchesKey(data, 'enter'))
+            return this.list.handleInput(data);
+        if (this.list.handleInput(data)) {
+            this.options.changed();
+            return true;
+        }
+        return false;
+    }
+}

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

@@ -5,7 +5,7 @@ import type { RunEvent } from "../../../sessions/contracts.js";
 import type { TerminalTrajectoryRun, TerminalTrajectorySnapshot } from "../../trajectory.js";
 import { type TabInfo } from "../chrome.js";
 import type { TerminalPage } from "../page.js";
-import { type TerminalMouseInput } from "../mouse.js";
+import type { TerminalMouseInput } from "../mouse.js";
 export interface TrajectoryPageOptions {
     theme: () => Theme;
     runs(): Promise<TerminalTrajectoryRun[]>;
@@ -18,17 +18,20 @@ export interface TrajectoryPageOptions {
 }
 export declare class TrajectoryPage implements TerminalPage {
     private readonly options;
+    readonly presentation: "fullscreen";
     private runs;
     private section;
     private readonly runList;
+    private readonly eventList;
     private runIndex;
     private run;
     private events;
-    private selected;
     private detailOffset;
-    private eventRowsStart;
-    private eventRowsFirst;
-    private eventRowsCount;
+    private listStart;
+    private listEnd;
+    private listWidth;
+    private detailsStart;
+    private wideLayout;
     private loading;
     private loaded;
     private disposed;
@@ -49,10 +52,14 @@ export declare class TrajectoryPage implements TerminalPage {
     private refresh;
     /** `[` is the older run, `]` the newer one. */
     private runRows;
+    private eventRows;
+    private eventJson;
     private selectRun;
     private changeRun;
     hint(): string;
     handleMouse(event: TerminalMouseInput): TuiMouseEventResult | undefined;
     handleInput(data: string): boolean;
+    private runSummary;
+    private detailLines;
     render(width: number, rows: number): string[];
 }

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

@@ -1,7 +1,5 @@
-import { matchesKey, stripTerminalSequences, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
-import { selectedRow, selectionText } from "../chrome.js";
+import { matchesKey, stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
 import { FilterList } from "../list.js";
-import { isPrimaryClick } from "../mouse.js";
 const ACTIVE = new Set(['queued', 'running', 'waiting_for_approval', 'waiting_for_input']);
 const payloadOf = (event) => event.payload && typeof event.payload === 'object' ? event.payload : {};
 const stringOf = (value) => typeof value === 'string' ? value : undefined;
@@ -68,17 +66,20 @@ const SECTIONS = [
 ];
 export class TrajectoryPage {
     options;
+    presentation = 'fullscreen';
     runs = [];
     section = 'runs';
     runList;
+    eventList;
     runIndex = 0;
     run;
     events = [];
-    selected = 0;
     detailOffset = 0;
-    eventRowsStart = -1;
-    eventRowsFirst = 0;
-    eventRowsCount = 0;
+    listStart = 0;
+    listEnd = 0;
+    listWidth = 0;
+    detailsStart = -1;
+    wideLayout = false;
     loading = false;
     loaded = false;
     disposed = false;
@@ -87,15 +88,19 @@ export class TrajectoryPage {
     constructor(options) {
         this.options = options;
         this.runList = new FilterList({
-            theme: options.theme, search: 'never', noun: ['run', 'runs'], empty: 'No runs recorded for this native session yet',
+            theme: options.theme, search: 'always', noun: ['run', 'runs'], empty: 'No runs recorded for this native session yet',
             onActivate: row => { if (row.data)
                 void this.selectRun(row.data); }
         });
+        this.eventList = new FilterList({
+            theme: options.theme, search: 'always', noun: ['event', 'events'], empty: 'No recorded events',
+            onActivate: () => { this.detailOffset = 0; this.options.changed(); }
+        });
     }
     get selectedRunId() { return this.run?.id; }
-    get selectedEvent() { return this.events[this.selected]; }
-    get focused() { return this.runList.focused; }
-    set focused(value) { this.runList.focused = value; }
+    get selectedEvent() { return this.eventList.selected?.data; }
+    get focused() { return this.section === 'runs' ? this.runList.focused : this.eventList.focused; }
+    set focused(value) { this.runList.focused = value; this.eventList.focused = value; }
     tabs() { return SECTIONS; }
     activeTab() { return this.section; }
     activate() {
@@ -153,8 +158,11 @@ export class TrajectoryPage {
             return;
         this.run = snapshot.run;
         this.events = snapshot.events.slice().sort(bySequence);
+        this.eventList.setRows(this.eventRows());
+        const latest = this.events.at(-1);
+        if (latest)
+            this.eventList.select(String(latest.sequence));
         this.runList.select(run.id);
-        this.selected = Math.max(0, this.events.length - 1);
         this.detailOffset = 0;
     }
     async refresh() {
@@ -162,7 +170,8 @@ export class TrajectoryPage {
             return;
         this.loading = true;
         const lastSequence = this.events.at(-1)?.sequence;
-        const followedLatest = this.selected === this.events.length - 1;
+        const selectedBefore = this.selectedEvent;
+        const followedLatest = !selectedBefore || selectedBefore.sequence === lastSequence;
         try {
             const snapshot = await this.options.read(this.run.id, lastSequence);
             if (this.disposed)
@@ -176,8 +185,14 @@ export class TrajectoryPage {
                 const existing = new Set(this.events.map(event => event.sequence));
                 this.events = [...this.events, ...snapshot.events.filter(event => !existing.has(event.sequence))].sort(bySequence);
             }
-            if (followedLatest && this.events.length)
-                this.selected = this.events.length - 1;
+            this.eventList.setRows(this.eventRows());
+            if (followedLatest) {
+                const latest = this.events.at(-1);
+                if (latest)
+                    this.eventList.select(String(latest.sequence));
+            }
+            else if (selectedBefore)
+                this.eventList.select(String(selectedBefore.sequence));
             this.error = undefined;
         }
         catch (error) {
@@ -201,6 +216,18 @@ export class TrajectoryPage {
             data: run
         }));
     }
+    eventRows() {
+        return this.events.map(event => ({
+            id: String(event.sequence),
+            label: `${timeOf(event.timestamp)}  ${event.type}`,
+            detail: eventDescription(event),
+            searchText: `${event.timestamp} ${event.type} ${eventDescription(event)} ${safe(JSON.stringify(payloadOf(event)))}`,
+            data: event
+        }));
+    }
+    eventJson(event) {
+        return JSON.stringify({ payload: event.payload, type: event.type, sequence: event.sequence, timestamp: event.timestamp }, null, 2);
+    }
     async selectRun(run) {
         const at = this.runs.findIndex(candidate => candidate.id === run.id);
         if (at < 0 || this.loading)
@@ -209,7 +236,7 @@ export class TrajectoryPage {
         this.runList.select(run.id);
         this.run = run;
         this.events = [];
-        this.selected = 0;
+        this.eventList.setRows([]);
         this.detailOffset = 0;
         this.error = undefined;
         this.loading = true;
@@ -236,7 +263,7 @@ export class TrajectoryPage {
         this.run = this.runs[next];
         this.runList.select(this.run.id);
         this.events = [];
-        this.selected = 0;
+        this.eventList.setRows([]);
         this.detailOffset = 0;
         this.error = undefined;
         this.loading = true;
@@ -255,21 +282,38 @@ export class TrajectoryPage {
         }
     }
     hint() {
-        return this.section === 'runs' ? '↑/↓ runs · Enter inspect' : '[ ] runs · ↑/↓ events · PgUp/PgDn details · c copy';
+        return this.section === 'runs'
+            ? '↑/↓ runs · type to search · Enter inspect'
+            : '[ ] runs · ↑/↓ events · type to search · PgUp/PgDn details · Shift+C copy';
     }
     handleMouse(event) {
+        if (event.type === 'wheel') {
+            const down = (event.wheelDelta ?? 1) >= 0;
+            if (this.section === 'events' && this.detailsStart >= 0 && (this.wideLayout ? event.x >= this.listWidth + 3 : event.y >= this.detailsStart)) {
+                this.detailOffset = Math.max(0, this.detailOffset + (down ? 4 : -4));
+                this.options.changed();
+                return { handled: true, render: true };
+            }
+            if (this.section === 'runs')
+                this.runList.handleInput(down ? '\x1b[B' : '\x1b[A');
+            else
+                this.eventList.handleInput(down ? '\x1b[B' : '\x1b[A');
+            this.detailOffset = 0;
+            this.options.changed();
+            return { handled: true, render: true };
+        }
         if (event.type === 'click' && event.button !== 'left')
             return undefined;
-        if (this.section === 'runs')
-            return this.runList.handleMouse({ ...event, y: event.y - 1 });
-        const offset = event.y - this.eventRowsStart;
-        if (this.eventRowsStart < 0 || offset < 0 || offset >= this.eventRowsCount)
+        if (event.type !== 'click' && event.type !== 'move')
             return undefined;
-        const next = this.eventRowsFirst + offset;
-        const changed = this.selected !== next;
-        this.selected = next;
-        this.detailOffset = 0;
-        return { handled: true, render: changed || isPrimaryClick(event) };
+        if (this.section === 'runs') {
+            if (event.y < this.listStart || event.y >= this.listEnd)
+                return undefined;
+            return this.runList.handleMouse({ ...event, y: event.y - this.listStart });
+        }
+        if (event.y < this.listStart || event.y >= this.listEnd || (this.wideLayout && event.x >= this.listWidth + 3))
+            return undefined;
+        return this.eventList.handleMouse({ ...event, y: event.y - this.listStart });
     }
     handleInput(data) {
         if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
@@ -288,16 +332,6 @@ export class TrajectoryPage {
             void this.changeRun(-1);
             return true;
         }
-        if (matchesKey(data, 'up')) {
-            this.selected = Math.max(0, this.selected - 1);
-            this.detailOffset = 0;
-            return true;
-        }
-        if (matchesKey(data, 'down')) {
-            this.selected = this.events.length ? Math.min(this.events.length - 1, this.selected + 1) : 0;
-            this.detailOffset = 0;
-            return true;
-        }
         if (matchesKey(data, 'pageUp')) {
             this.detailOffset = Math.max(0, this.detailOffset - 8);
             return true;
@@ -306,71 +340,110 @@ export class TrajectoryPage {
             this.detailOffset += 8;
             return true;
         }
-        if (data.toLowerCase() === 'c' && this.selectedEvent) {
-            const text = JSON.stringify(this.selectedEvent, null, 2);
+        if (data === 'C' && this.selectedEvent) {
+            const text = this.eventJson(this.selectedEvent);
             void this.options.copy(text).then(() => this.options.notify('Copied selected trajectory event')).catch(error => this.options.notify(String(error), 'error'));
             return true;
         }
-        return false;
+        const selected = this.selectedEvent?.sequence;
+        if (!this.eventList.handleInput(data))
+            return false;
+        if (this.selectedEvent?.sequence !== selected)
+            this.detailOffset = 0;
+        return true;
+    }
+    runSummary(width, rows) {
+        if (!this.run || rows < 1)
+            return [];
+        const runPosition = `${this.runIndex + 1}/${this.runs.length}`;
+        const modelEvent = [...this.events].reverse().find(event => event.type === 'usage.updated');
+        const usage = modelEvent ? payloadOf(modelEvent) : {};
+        const model = stringOf(usage.model) ?? 'model unavailable';
+        const theme = this.options.theme();
+        const lines = [theme.bold(theme.fg('accent', `Run ${runPosition} · ${this.run.id} · ${this.run.status}${this.loading ? ' · loading' : ''}`))];
+        if (rows >= 3)
+            lines.push(theme.fg('muted', `${model} · ${durationLine(this.run)} · ${this.run.mode}`));
+        if (rows >= 4)
+            lines.push(theme.fg('muted', usageLine(this.events)));
+        if (rows >= 6)
+            lines.push(theme.fg('dim', this.run.goal ? `Prompt: ${this.run.goal.replace(/\s+/g, ' ').slice(0, 140)}` : 'Prompt text unavailable'));
+        if (this.error)
+            lines.push(theme.fg('error', `Read error: ${this.error}`));
+        return lines.slice(0, Math.min(rows, 5)).map(line => truncateToWidth(line, width, ''));
+    }
+    detailLines(width, rows) {
+        if (rows < 1)
+            return [];
+        const event = this.selectedEvent;
+        const theme = this.options.theme();
+        const heading = theme.bold(theme.fg('accent', event ? `Event JSON · ${event.type} · #${event.sequence}` : 'Event JSON'));
+        const json = event
+            ? wrapTextWithAnsi(safe(this.eventJson(event)), Math.max(1, width))
+            : [this.events.length ? 'No event selected' : this.loading ? 'Loading recorded events…' : 'No recorded events'];
+        const visibleRows = Math.max(0, rows - 1);
+        this.detailOffset = Math.min(this.detailOffset, Math.max(0, json.length - visibleRows));
+        return [heading, ...json.slice(this.detailOffset, this.detailOffset + visibleRows)
+                .map(line => this.options.theme().fg('dim', line))].slice(0, rows).map(line => truncateToWidth(line, width, ''));
     }
     render(width, rows) {
         const theme = this.options.theme();
         if (width < 1 || rows < 1)
             return [];
         if (this.section === 'runs') {
-            this.eventRowsStart = -1;
-            this.eventRowsCount = 0;
+            this.wideLayout = false;
+            this.detailsStart = -1;
             if (this.error && !this.runs.length)
                 return [theme.fg('error', 'Read error: ' + this.error)];
-            const lines = [theme.fg('dim', !this.loaded ? 'Loading recorded runs…' : this.runs.length + ' recorded runs')];
-            lines.push(...this.runList.render(width, Math.max(0, rows - lines.length)));
+            const lines = [theme.fg('dim', !this.loaded ? 'Loading recorded runs…' : `${this.runs.length} recorded runs`)];
+            this.listStart = lines.length;
+            const list = this.runList.render(width, Math.max(0, rows - lines.length));
+            this.listEnd = this.listStart + list.length;
+            lines.push(...list);
             return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));
         }
         if (!this.run) {
-            this.eventRowsStart = -1;
-            this.eventRowsCount = 0;
+            this.listStart = this.listEnd = 0;
+            this.detailsStart = -1;
             if (this.error)
                 return [theme.fg('error', 'Read error: ' + this.error)];
             return [theme.fg('dim', this.loading || !this.loaded ? 'Loading recorded runs…' : 'No run selected. Choose a run in the Runs tab.')];
         }
-        const runPosition = (this.runIndex + 1) + '/' + this.runs.length;
-        const modelEvent = [...this.events].reverse().find(event => event.type === 'usage.updated');
-        const usage = modelEvent ? payloadOf(modelEvent) : {};
-        const model = stringOf(usage.model) ?? 'model unavailable';
-        const lines = [theme.bold(theme.fg('accent', 'Run ' + runPosition + ' · ' + this.run.id + ' · ' + this.run.status + (this.loading ? ' · loading' : '')))];
-        if (rows >= 9) {
-            lines.push(theme.fg('muted', model + ' · ' + durationLine(this.run) + ' · ' + this.run.mode));
-            lines.push(theme.fg('muted', usageLine(this.events)));
-            lines.push(this.run.goal ? theme.fg('dim', 'Prompt: ' + this.run.goal.replace(/\s+/g, ' ').slice(0, 140)) : theme.fg('dim', 'Prompt text unavailable'));
-        }
-        else if (rows >= 6) {
-            lines.push(theme.fg('muted', model + ' · ' + durationLine(this.run)));
-        }
-        lines.push(theme.bold('Events'));
-        if (this.error)
-            lines.push(theme.fg('error', 'Read error: ' + this.error));
-        if (!this.events.length)
-            lines.push(theme.fg('dim', this.loading ? 'Loading recorded events…' : 'No recorded events'));
-        const available = Math.max(0, rows - lines.length - 1);
-        const ledgerBudget = this.events.length ? Math.min(this.events.length, Math.max(1, Math.floor(available * 0.4))) : 0;
-        const detailBudget = Math.max(0, available - ledgerBudget);
-        const firstEvent = Math.max(0, Math.min(this.events.length - ledgerBudget, this.selected - Math.floor(ledgerBudget / 2)));
-        this.eventRowsStart = lines.length;
-        this.eventRowsFirst = firstEvent;
-        this.eventRowsCount = ledgerBudget;
-        for (let offset = 0; offset < ledgerBudget; offset++) {
-            const index = firstEvent + offset;
-            const event = this.events[index];
-            const prefix = index === this.selected ? '❯' : ' ';
-            const label = truncateToWidth(prefix + ' ' + timeOf(event.timestamp) + '  ' + event.type + '  ' + eventDescription(event), width, '');
-            lines.push(index === this.selected ? selectedRow(selectionText(theme, label), width, theme) : theme.fg('muted', label));
+        const lines = this.runSummary(width, rows);
+        const bodyRows = Math.max(0, rows - lines.length);
+        const wide = width >= 72;
+        this.wideLayout = wide;
+        if (wide) {
+            const separatorWidth = 3;
+            const leftWidth = Math.max(24, Math.floor((width - separatorWidth) * 0.42));
+            const rightWidth = Math.max(1, width - leftWidth - separatorWidth);
+            const paneStart = lines.length;
+            this.listWidth = leftWidth;
+            const events = [theme.bold(theme.fg('accent', 'Events')), ...this.eventList.render(leftWidth, Math.max(0, bodyRows - 1))];
+            const details = this.detailLines(rightWidth, bodyRows);
+            this.listStart = paneStart + 1;
+            this.listEnd = this.listStart + events.length - 1;
+            this.detailsStart = paneStart;
+            const pane = Array.from({ length: Math.max(events.length, details.length) }, (_, index) => {
+                const left = truncateToWidth(events[index] ?? '', leftWidth, '');
+                const gap = ' '.repeat(Math.max(0, leftWidth - visibleWidth(left)));
+                return left + gap + theme.fg('dim', ' │ ') + (details[index] ?? '');
+            });
+            lines.push(...pane);
         }
-        const selected = this.selectedEvent;
-        lines.push(theme.bold(selected ? 'Selected event · ' + selected.type + ' · #' + selected.sequence : 'Selected event'));
-        if (selected) {
-            const details = wrapTextWithAnsi(safe(JSON.stringify({ payload: selected.payload, type: selected.type, sequence: selected.sequence, timestamp: selected.timestamp }, null, 2)), width);
-            this.detailOffset = Math.min(this.detailOffset, Math.max(0, details.length - detailBudget));
-            lines.push(...details.slice(this.detailOffset, this.detailOffset + detailBudget).map(line => theme.fg('dim', line)));
+        else {
+            lines.push(theme.bold(theme.fg('accent', 'Events')));
+            this.listStart = lines.length;
+            this.listWidth = width;
+            const listRows = Math.min(Math.max(0, bodyRows - 1), Math.max(1, Math.floor(bodyRows * 0.58)));
+            const events = this.eventList.render(width, listRows);
+            this.listEnd = this.listStart + events.length;
+            lines.push(...events);
+            const hasRoomForDetails = lines.length < rows;
+            if (hasRoomForDetails)
+                lines.push('');
+            this.detailsStart = lines.length;
+            const detailRows = Math.max(0, rows - lines.length);
+            lines.push(...this.detailLines(width, detailRows));
         }
         return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));
     }

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

@@ -0,0 +1,43 @@
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import type { UsagePeriod } from "../../../usage/types.js";
+import type { TabInfo } from "../chrome.js";
+import type { TerminalPage } from "../page.js";
+type UsageTab = 'analysis' | 'limits';
+interface UsagePageOptions {
+    theme(): Theme;
+    call(method: string, params?: Record<string, unknown>): Promise<unknown>;
+    changed(): void;
+    initialTab?: UsageTab;
+    initialPeriod?: UsagePeriod;
+}
+export declare class UsagePage implements TerminalPage {
+    private readonly options;
+    presentation: "centered";
+    focused: boolean;
+    private tab;
+    private period;
+    private scope;
+    private summary?;
+    private limitsSummary?;
+    private limits?;
+    private busy;
+    private error?;
+    private refreshLimits;
+    private offset;
+    private scrollRows;
+    private maxOffset;
+    private disposed;
+    constructor(options: UsagePageOptions);
+    tabs(): readonly TabInfo[];
+    activeTab(): string;
+    selectTab(id: string): void;
+    hint(): string;
+    activate(): void;
+    dispose(): void;
+    private load;
+    handleInput(data: string): boolean;
+    private analysisContent;
+    private limitsContent;
+    render(width: number, rows: number): string[];
+}
+export {};