@xingular/harness 1.1.1 → 1.3.1-unstable.0

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

@@ -1,12 +1,76 @@
 import { matchesKey, stripTerminalSequences, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
-import { headerRow, neutralRule, padded } from "../chrome.js";
+import { CHROME_PAD, headerRow, neutralRule, padded } from "../chrome.js";
 import { FilterList } from "../list.js";
-import { ACTIVE_SUBAGENT_STATUSES, terminalSubagentDuration, terminalSubagentTone } from "../../subagentMonitor.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';
@@ -14,7 +78,8 @@ export class SubagentsPage {
     constructor(options) {
         this.options = options;
         this.list = new FilterList({
-            theme: options.theme, search: 'always', noun: ['subagent', 'subagents'], empty: 'No subagents have started in this turn'
+            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; }
@@ -22,35 +87,55 @@ export class SubagentsPage {
     tabs() { return TABS; }
     activeTab() { return 'subagents'; }
     hint() { return '↑↓ select · type to search'; }
-    rows() {
-        return this.options.snapshot().map(item => ({
-            id: item.id,
-            label: `${clean(item.profile?.name ?? '') || 'subagent'} · ${clean(item.title) || 'Subagent'}`,
-            detail: [item.status.replaceAll('_', ' '), subagentTasks(item.checklist), terminalSubagentDuration(item)].filter(Boolean).join(' · '),
-            tone: terminalSubagentTone(item.status),
-            searchText: `${item.profile?.name ?? ''} ${item.title} ${item.goal ?? ''} ${item.status} ${item.activity}`,
-            data: item
-        }));
+    rows(width = 80, now = this.options.now?.() ?? Date.now()) {
+        // The main agent is pinned first so its children read against it.
+        const ordered = [...this.options.snapshot()].sort((left, right) => {
+            const main = Number(right.relation === 'main') - Number(left.relation === 'main');
+            const active = Number(ACTIVE_SUBAGENT_STATUSES.has(right.status)) - Number(ACTIVE_SUBAGENT_STATUSES.has(left.status));
+            return main || 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();
+        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 children = items.filter(item => item.data?.relation !== 'main');
+        const active = children.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 header = headerRow('Subagents', `${active} active · ${children.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 textWidth = Math.max(1, width - 4);
+            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(...wrapTextWithAnsi(theme.fg('text', clean(selected.goal || 'Subagent')), textWidth));
-            output.push(padded(theme.fg('muted', `Status: ${[selected.status.replaceAll('_', ' '), subagentTasks(selected.checklist), terminalSubagentDuration(selected)].filter(Boolean).join(' · ')}`), width));
+            output.push(...detailLines(selected.goal || (selected.relation === 'main' ? 'Main agent' : 'Subagent')));
+            output.push(padded(theme.fg('muted', `Status: ${[selected.status.replaceAll('_', ' '), subagentTasks(selected.todo), terminalSubagentDuration(selected)].filter(Boolean).join(' · ')}`), width));
             output.push(padded(theme.fg('accent', 'Current activity'), width));
-            output.push(...wrapTextWithAnsi(theme.fg('text', clean(selected.activity)), textWidth));
+            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));

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 {};

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

@@ -0,0 +1,370 @@
+import { matchesKey, stripTerminalSequences, truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
+const PERIODS = [
+    { key: '1', period: 'today', label: 'today' },
+    { key: '2', period: '7d', label: '7d' },
+    { key: '3', period: '30d', label: '30d' },
+    { key: '0', period: 'all', label: 'all time' }
+];
+const SCOPES = [
+    { key: 'c', scope: 'account', label: 'account' },
+    { key: 's', scope: 'session', label: 'session' },
+    { key: 'p', scope: 'project', label: 'project' },
+    { key: 'a', scope: 'all', label: 'all accounts' }
+];
+const BARS = '▁▂▃▄▅▆▇█';
+function clean(value) {
+    return stripTerminalSequences(value).replace(/[\x00-\x08\x0b-\x1f\x7f-\x9f]/g, ' ').replace(/\t/g, ' ');
+}
+function oneLine(value) {
+    return clean(value).replace(/\s+/g, ' ').trim();
+}
+function count(value) {
+    if (!Number.isFinite(value))
+        return '0';
+    if (value >= 1_000_000_000)
+        return `${(value / 1_000_000_000).toFixed(1)}B`;
+    if (value >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(1)}M`;
+    if (value >= 1_000)
+        return `${(value / 1_000).toFixed(1)}K`;
+    return String(Math.round(value));
+}
+function money(value) {
+    if (value === null)
+        return '—';
+    return value >= 1 ? `$${value.toFixed(2)}` : `$${value.toFixed(3)}`;
+}
+function duration(milliseconds) {
+    if (milliseconds === null)
+        return '—';
+    if (milliseconds < 1_000)
+        return `${Math.round(milliseconds)}ms`;
+    return `${(milliseconds / 1_000).toFixed(1)}s`;
+}
+function until(iso, now = Date.now()) {
+    if (!iso)
+        return '';
+    const at = Date.parse(iso);
+    if (Number.isNaN(at))
+        return '';
+    const delta = at - now;
+    if (delta <= 0)
+        return 'reset due';
+    const minutes = Math.round(delta / 60_000);
+    if (minutes < 60)
+        return `resets in ${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 48)
+        return `resets in ${hours}h ${minutes % 60}m`;
+    return `resets in ${Math.floor(hours / 24)}d`;
+}
+function ago(iso) {
+    const at = Date.parse(iso);
+    if (Number.isNaN(at))
+        return 'unknown time';
+    const minutes = Math.max(0, Math.round((Date.now() - at) / 60_000));
+    if (minutes < 1)
+        return 'just now';
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.round(minutes / 60);
+    return hours < 48 ? `${hours}h ago` : `${Math.round(hours / 24)}d ago`;
+}
+function usageLine(totals) {
+    const parts = [
+        `${count(totals.inputTokens)} in`,
+        `${count(totals.cacheReadTokens)} cached`,
+        `${count(totals.outputTokens)} out`,
+        `${count(totals.requests)} requests`,
+        money(totals.costUsd)
+    ];
+    if (totals.unpricedRequests)
+        parts.push(`${totals.unpricedRequests} unpriced`);
+    return parts.join(' · ');
+}
+function share(value, total) {
+    if (!total)
+        return '0%';
+    return `${Math.round((value / total) * 100)}%`;
+}
+function tokensOf(row) {
+    return row.inputTokens + row.cacheReadTokens + row.cacheWriteTokens + row.outputTokens;
+}
+/** A quota-left bar: green with room, amber when it narrows, red when it runs out. */
+function barTone(percent, rejected = false) {
+    if (rejected)
+        return 'error';
+    if (percent === null || percent === undefined)
+        return 'dim';
+    if (percent >= 50)
+        return 'success';
+    if (percent >= 20)
+        return 'warning';
+    return 'error';
+}
+function bar(percent, width, theme, rejected = false) {
+    const track = '░'.repeat(width);
+    if (percent === null || percent === undefined)
+        return `[${theme.fg('dim', track)}]`;
+    const filled = Math.max(0, Math.min(width, Math.round((Math.max(0, Math.min(100, percent)) / 100) * width)));
+    return `[${theme.fg(barTone(percent, rejected), '█'.repeat(filled))}${theme.fg('dim', '░'.repeat(Math.max(0, width - filled)))}]`;
+}
+/** A label on the left and a quiet value on the right of the same row. */
+function spread(left, right, width) {
+    if (!right)
+        return left;
+    const rightText = truncateToWidth(right, Math.max(0, width - visibleWidth(left) - 2), '');
+    return left + ' '.repeat(Math.max(1, width - visibleWidth(left) - visibleWidth(rightText))) + rightText;
+}
+export class UsagePage {
+    options;
+    presentation = 'centered';
+    focused = false;
+    tab;
+    period = '7d';
+    scope = 'account';
+    summary;
+    limitsSummary;
+    limits;
+    busy = false;
+    error;
+    refreshLimits;
+    offset = 0;
+    scrollRows = 1;
+    maxOffset = 0;
+    disposed = false;
+    constructor(options) {
+        this.options = options;
+        this.tab = options.initialTab ?? 'analysis';
+        this.period = options.initialPeriod ?? '7d';
+        this.refreshLimits = this.tab === 'limits';
+    }
+    tabs() {
+        return [{ id: 'analysis', title: 'Analysis' }, { id: 'limits', title: 'Limits' }];
+    }
+    activeTab() {
+        return this.tab;
+    }
+    selectTab(id) {
+        if ((id === 'analysis' || id === 'limits') && id !== this.tab) {
+            this.tab = id;
+            this.offset = 0;
+            this.options.changed();
+            if (id === 'limits' && !this.limits) {
+                this.refreshLimits = true;
+                void this.load();
+            }
+            else if (id === 'analysis' && !this.summary)
+                void this.load();
+            else if (id === 'limits' && this.refreshLimits)
+                void this.load();
+        }
+    }
+    hint() {
+        return this.tab === 'analysis'
+            ? '↑/↓ scroll · PgUp/PgDn page · 1 today 2 7d 3 30d 0 all · c account s session p project a all accounts · r refresh · Tab limits · Esc close'
+            : '↑/↓ scroll · PgUp/PgDn page · r read provider limits · Tab analysis · Esc close';
+    }
+    activate() {
+        if (!this.summary && !this.limits)
+            void this.load();
+    }
+    dispose() {
+        this.disposed = true;
+    }
+    async load() {
+        if (this.busy || this.disposed)
+            return;
+        this.busy = true;
+        this.error = undefined;
+        this.options.changed();
+        try {
+            if (this.tab === 'analysis') {
+                this.summary = await this.options.call('terminal.usage.summary', {
+                    scope: this.scope,
+                    period: this.period,
+                    timezoneOffsetMinutes: -new Date().getTimezoneOffset()
+                });
+            }
+            else {
+                // The provider's windows and this app's own ledger answer different questions; show both.
+                const [limits, summary] = await Promise.all([
+                    this.options.call('terminal.usage.limits', { refresh: this.refreshLimits }),
+                    this.options.call('terminal.usage.summary', {
+                        scope: 'account',
+                        period: '7d',
+                        timezoneOffsetMinutes: -new Date().getTimezoneOffset()
+                    })
+                ]);
+                this.limits = limits;
+                this.limitsSummary = summary;
+                this.refreshLimits = false;
+            }
+            this.offset = 0;
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : 'Usage could not be read.';
+        }
+        finally {
+            this.busy = false;
+            if (!this.disposed)
+                this.options.changed();
+        }
+    }
+    handleInput(data) {
+        const page = Math.max(1, this.scrollRows - 1);
+        if (matchesKey(data, 'up'))
+            this.offset = Math.max(0, this.offset - 1);
+        else if (matchesKey(data, 'down'))
+            this.offset = Math.min(this.maxOffset, this.offset + 1);
+        else if (matchesKey(data, 'pageUp'))
+            this.offset = Math.max(0, this.offset - page);
+        else if (matchesKey(data, 'pageDown'))
+            this.offset = Math.min(this.maxOffset, this.offset + page);
+        else if (matchesKey(data, 'home'))
+            this.offset = 0;
+        else if (matchesKey(data, 'end'))
+            this.offset = this.maxOffset;
+        else if (data === 'r') {
+            if (this.tab === 'limits')
+                this.refreshLimits = true;
+            void this.load();
+        }
+        else if (this.tab === 'analysis' && PERIODS.some((entry) => entry.key === data)) {
+            this.period = PERIODS.find((entry) => entry.key === data).period;
+            void this.load();
+        }
+        else if (this.tab === 'analysis' && SCOPES.some((entry) => entry.key === data)) {
+            this.scope = SCOPES.find((entry) => entry.key === data).scope;
+            void this.load();
+        }
+        else
+            return false;
+        this.options.changed();
+        return true;
+    }
+    analysisContent(width, theme) {
+        const summary = this.summary;
+        const header = [];
+        if (!summary) {
+            header.push(theme.fg(this.error ? 'error' : 'dim', this.error ?? (this.busy ? 'Reading usage…' : 'No usage to show.')));
+            return { header, body: [] };
+        }
+        const scope = SCOPES.find((entry) => entry.scope === summary.scope)?.label ?? summary.scope;
+        const period = PERIODS.find((entry) => entry.period === summary.period)?.label ?? summary.period;
+        header.push(theme.bold(theme.fg('accent', `${scope} · ${period}`)));
+        header.push(...wrapTextWithAnsi(theme.fg('muted', usageLine(summary.totals)), width));
+        const details = [
+            summary.totals.cacheHitPercent === null ? null : `${summary.totals.cacheHitPercent}% cache hits`,
+            `TTFT ${duration(summary.totals.avgTtftMs)}`,
+            `request ${duration(summary.totals.avgDurationMs)}`,
+            summary.totals.estimatedCostUsd ? `${money(summary.totals.estimatedCostUsd)} estimated` : null
+        ].filter((entry) => Boolean(entry));
+        if (details.length)
+            header.push(...wrapTextWithAnsi(theme.fg('dim', details.join(' · ')), width));
+        if (this.error)
+            header.push(...wrapTextWithAnsi(theme.fg('error', this.error), width));
+        const body = [''];
+        const total = tokensOf(summary.totals);
+        const gap = () => {
+            if (body.length && body[body.length - 1] !== '')
+                body.push('');
+        };
+        if (summary.byDay.length) {
+            const max = Math.max(...summary.byDay.map((day) => day.inputTokens + day.cacheReadTokens + day.outputTokens), 1);
+            const spark = summary.byDay.slice(-14).map((day) => BARS[Math.min(BARS.length - 1, Math.round(((day.inputTokens + day.cacheReadTokens + day.outputTokens) / max) * (BARS.length - 1)))]).join('');
+            body.push(theme.fg('accent', spark));
+            for (const day of summary.byDay.slice(-3).reverse()) {
+                body.push(...wrapTextWithAnsi(theme.fg('muted', `  ${day.day}  ${count(day.inputTokens + day.cacheReadTokens + day.outputTokens)} tokens · ${count(day.requests)} requests · ${money(day.costUsd)}`), width));
+            }
+        }
+        const section = (rows) => {
+            if (!rows.length)
+                return;
+            gap();
+            for (const row of rows) {
+                const line = `  ${oneLine(row.label)}  ${share(tokensOf(row), total)}  ${count(tokensOf(row))} tokens · ${count(row.requests)} requests · ${money(row.costUsd)}`;
+                body.push(...wrapTextWithAnsi(theme.fg('muted', line), width));
+            }
+        };
+        section(summary.byModel);
+        section(summary.byProvider);
+        section(summary.byAccount);
+        section(summary.bySession);
+        if (body.length === 1)
+            body.push(theme.fg('dim', 'No requests were recorded in this period.'));
+        while (body.length > 1 && body[body.length - 1] === '')
+            body.pop();
+        return { header, body };
+    }
+    limitsContent(width, theme) {
+        const report = this.limits;
+        const header = [];
+        if (!report) {
+            header.push(theme.fg(this.error ? 'error' : 'dim', this.error ?? (this.busy ? 'Reading provider limits…' : 'No limit readings yet.')));
+            return { header, body: [] };
+        }
+        if (this.error)
+            header.push(...wrapTextWithAnsi(theme.fg('error', this.error), width));
+        const body = [];
+        const barWidth = Math.max(8, Math.min(16, Math.floor(width / 6)));
+        for (const account of report.accounts) {
+            if (body.length)
+                body.push('');
+            body.push(theme.bold(oneLine(account.label)) + theme.fg('dim', `${account.plan ? ` · ${oneLine(account.plan)}` : ''} · ${account.health}`));
+            if (!account.providers.length) {
+                body.push(theme.fg('dim', '  No limit readings.'));
+                continue;
+            }
+            for (const provider of account.providers) {
+                body.push('');
+                const source = provider.source === 'provider' ? '' : provider.source;
+                const meta = [source, ago(provider.observedAt)].filter(Boolean).join(' · ');
+                const tone = provider.source === 'unavailable' ? 'warning' : 'muted';
+                body.push(...wrapTextWithAnsi(theme.fg(tone, `  ${provider.provider}${meta ? ` · ${meta}` : ''}${provider.reason ? ` · ${oneLine(provider.reason)}` : ''}`), width));
+                for (const limit of provider.limits) {
+                    body.push('');
+                    const reset = until(limit.resetsAt);
+                    body.push(...wrapTextWithAnsi(spread(theme.bold(`  ${oneLine(limit.label)}`), theme.fg('dim', reset), width), width));
+                    const used = limit.usedPercent ?? null;
+                    const remainingPercent = limit.remainingPercent
+                        ?? (used === null
+                            ? limit.remaining !== null && limit.remaining !== undefined && limit.limit !== null && limit.limit !== undefined && limit.limit > 0
+                                ? Math.max(0, Math.min(100, (limit.remaining / limit.limit) * 100))
+                                : null
+                            : Math.max(0, Math.min(100, 100 - used)));
+                    const rejected = limit.status === 'rejected';
+                    const tone = barTone(remainingPercent, rejected);
+                    const absolute = limit.remaining !== null && limit.remaining !== undefined
+                        ? `${limit.unit === 'usd' ? money(limit.remaining) : limit.unit === 'currency' ? `${limit.remaining.toFixed(2)} ${limit.detail ?? ''}`.trim() : count(limit.remaining)} left`
+                        : limit.limit !== null && limit.limit !== undefined
+                            ? `limit ${count(limit.limit)}${limit.unit && limit.unit !== 'percent' ? ` ${limit.unit}` : ''}`
+                            : '';
+                    const value = remainingPercent === null ? absolute || '—' : `${Math.round(remainingPercent)}% left`;
+                    const suffix = remainingPercent !== null && absolute ? `  ${theme.fg('dim', absolute)}` : '';
+                    body.push(...wrapTextWithAnsi(`  ${bar(remainingPercent, barWidth, theme, rejected)}  ${theme.fg(tone, value)}${suffix}`, width));
+                }
+            }
+        }
+        if (!report.accounts.length)
+            body.push(theme.fg('dim', 'No accounts.'));
+        const local = this.limitsSummary?.totals;
+        if (local) {
+            if (body.length)
+                body.push('');
+            body.push(...wrapTextWithAnsi(theme.fg('dim', `7d · ${count(local.inputTokens + local.cacheReadTokens + local.outputTokens)} tokens · ${count(local.requests)} requests · ${money(local.costUsd)}`), width));
+        }
+        return { header, body };
+    }
+    render(width, rows) {
+        if (width < 1 || rows < 1)
+            return [];
+        const theme = this.options.theme();
+        const { header, body } = this.tab === 'analysis' ? this.analysisContent(width, theme) : this.limitsContent(width, theme);
+        const bodyRows = Math.max(0, rows - header.length);
+        this.scrollRows = Math.max(1, bodyRows);
+        this.maxOffset = Math.max(0, body.length - bodyRows);
+        this.offset = Math.max(0, Math.min(this.offset, this.maxOffset));
+        return [...header, ...body.slice(this.offset, this.offset + bodyRows)].slice(0, rows).map((line) => truncateToWidth(line, width, ''));
+    }
+}

package/dist/sdk/terminal/tui/piAdapter.d.ts

@@ -1,6 +1,5 @@
-import type { InlineExtension, Theme, ToolRenderers } from '@earendil-works/pi-coding-agent';
+import type { Theme, ToolRenderers } from '@earendil-works/pi-coding-agent';
 export interface PiAdapter {
-    builtins: InlineExtension[];
     setTheme(theme: Theme): void;
     withBuiltInRenderers(toolName: string, definition: ToolRenderers | undefined): ToolRenderers | undefined;
     readClipboardText(): Promise<string | null>;

package/dist/sdk/terminal/tui/piAdapter.js

@@ -12,18 +12,16 @@ export function loadPiAdapter() {
         const pi = await loadPi();
         assertPiAdapterVersion(pi.VERSION);
         const root = pi.getPackageDir();
-        const [extensions, theme, renderers, clipboard, images] = await Promise.all([
-            import(pathToFileURL(join(root, 'dist/extensions/index.js')).href),
+        const [theme, renderers, clipboard, images] = await Promise.all([
             import(pathToFileURL(join(root, 'dist/modes/interactive/theme/theme.js')).href),
             import(pathToFileURL(join(root, 'dist/core/tools/renderers/index.js')).href),
             import(pathToFileURL(join(root, 'dist/utils/clipboard.js')).href),
             import(pathToFileURL(join(root, 'dist/utils/clipboard-image.js')).href)
         ]);
-        if (!Array.isArray(extensions.builtInExtensions) || typeof theme.setThemeInstance !== 'function' || typeof renderers.withBuiltInRenderers !== 'function' || typeof clipboard.readClipboardText !== 'function' || typeof clipboard.readClipboardFilePaths !== 'function' || typeof images.readClipboardImage !== 'function' || typeof images.extensionForImageMimeType !== 'function') {
-            throw new Error('The pinned Pi terminal adapter no longer exposes its required builtin or theme hooks.');
+        if (typeof theme.setThemeInstance !== 'function' || typeof renderers.withBuiltInRenderers !== 'function' || typeof clipboard.readClipboardText !== 'function' || typeof clipboard.readClipboardFilePaths !== 'function' || typeof images.readClipboardImage !== 'function' || typeof images.extensionForImageMimeType !== 'function') {
+            throw new Error('The pinned Pi terminal adapter no longer exposes its required presentation hooks.');
         }
         adapter = {
-            builtins: extensions.builtInExtensions,
             setTheme: theme.setThemeInstance,
             withBuiltInRenderers: renderers.withBuiltInRenderers,
             readClipboardText: clipboard.readClipboardText,

package/dist/sdk/terminal/tui/pluginCommands.d.ts

@@ -6,6 +6,8 @@ type PageOptions = {
     runId?: string;
     url?: string;
     annotate?: AnnotateStart;
+    usageTab?: 'analysis' | 'limit';
+    usagePeriod?: 'today' | '7d' | '30d' | 'all';
 };
 type OpenPage = (id: CommandPageId, options?: PageOptions) => Promise<void>;
 type Handler = (argument: string) => Promise<void>;

package/dist/sdk/terminal/tui/pluginCommands.js

@@ -3,23 +3,27 @@ import { parseAnnotate } from "./annotateCommand.js";
 /** Terminal adapters for commands declared by Harness-owned feature plugins. */
 export function createBuiltinPluginCommandHandlers(host, openPage) {
     const handlers = new Map([
-        ['doctor', async () => openPage('doctor')],
-        ['worktree', async () => openPage('worktree')],
-        ['trajectory', async (argument) => openPage('trajectory', { runId: argument })],
-        ['subagents', async () => openPage('subagents')],
-        ['agents', async () => openPage('agents')],
-        ['notes', async () => openPage('notes')],
-        ['annotate', async (argument) => {
+        ['annotations:notes', async () => openPage('notes')],
+        ['annotations:annotate', async (argument) => {
                 const start = parseAnnotate(argument);
                 if (typeof start === 'string')
                     host.ui.notify(start, 'error');
                 else
                     await openPage('annotate', { annotate: start });
-            }]
+            }],
+        ['usage:analysis', async (argument) => {
+                const period = argument.trim().toLowerCase();
+                if (period && !['today', '7d', '30d', 'all'].includes(period)) {
+                    host.ui.notify('Use /usage:analysis today, 7d, 30d or all.', 'error');
+                    return;
+                }
+                await openPage('usage', { usageTab: 'analysis', ...(period ? { usagePeriod: period } : {}) });
+            }],
+        ['usage:limit', async () => openPage('usage', { usageTab: 'limit' })]
     ]);
     const commands = BUILTIN_PLUGIN_REGISTRY.commands();
     for (const command of commands) {
-        if (!handlers.has(command.name))
+        if (!handlers.has(`${command.pluginId}:${command.name}`))
             throw new Error(`No terminal handler for built-in plugin command ${command.pluginId}:${command.name}.`);
     }
     return handlers;