@xingular/harness 1.3.1-unstable.3 → 1.3.1-unstable.4

package/dist/sdk/terminal/terminals.d.ts

@@ -25,6 +25,7 @@ import type { AnnotationCapture } from "../annotations/capture.js";
 import type { NoteDeliveries } from "../annotations/delivery.js";
 import type { Usage } from "../usage/service.js";
 import type { UsageLimits } from "../usage/limits/service.js";
+import { type RemoteControlOptions } from "../remote/service.js";
 /** The files a terminal session needs on disk, outside this process. */
 export interface TerminalAssets {
     /** The Node binary that runs the commands. */
@@ -110,6 +111,8 @@ export interface TerminalsOptions {
     usage?: Usage;
     /** Provider plan windows, balances and rate limits (`/usage:limit`). */
     usageLimits?: UsageLimits;
+    /** Where `/remote-control` listens; tests bind loopback here. */
+    remoteControl?: RemoteControlOptions;
 }
 /** What `/plugins` in a terminal can do. Each takes the session's folder, account and project. */
 export interface PluginControl {
@@ -156,6 +159,8 @@ export declare class Terminals {
     private readonly relaunches;
     /** The managed worktree each live session holds. */
     private readonly worktreeLeases;
+    /** `/remote-control` for each live session that opened it. */
+    private readonly remotes;
     /** Each child's profile name and colour, looked up once per child run. */
     private readonly childProfiles;
     private subagentProfile;
@@ -241,6 +246,13 @@ export declare class Terminals {
         active: boolean;
     };
     has(sessionId: string): boolean;
+    private remote;
+    /**
+     * What a paired phone reaches: this session's own runs and the same send, interrupt and
+     * decision calls the terminal makes (INV-RC-3).
+     */
+    private remotePort;
+    private remoteCall;
     /** The terminal process ended (or never started): its turn, tokens, and written credentials go with it. */
     dispose(sessionId: string): Promise<void>;
     close(): Promise<void>;

package/dist/sdk/terminal/terminals.js

@@ -2,7 +2,7 @@
 // This service prepares the isolated account, compiled context, trusted resource selection and
 // socket bridge. The default launch runs our frontend with Pi's persistent SDK runtime.
 import { chmodSync, existsSync, lstatSync, mkdirSync, readFileSync, unlinkSync, writeFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
+import { basename, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Type } from 'typebox';
 import { freezeRun } from "../capabilities/runSnapshot.js";
@@ -24,7 +24,7 @@ import * as variantStore from "../variant/store.js";
 import { attribution, rowText } from "../context/attribution.js";
 import { compile, copyToRun, record, render, saveForSession } from "../prompt/compile.js";
 import { isActiveStatus } from "../sessions/contracts.js";
-import { findRun, loadRun, readEvents, recordedSubagents, saveRun, updateRun } from "../sessions/runStore.js";
+import { findRun, listRuns, loadRun, readEvents, recordedSubagents, saveRun, updateRun } from "../sessions/runStore.js";
 import { combineWorkspaceScope, inspectRunWorkspaceWrite } from "../sessions/workspaceBoundary.js";
 import { TODO_WRITE } from "../tools/todo.js";
 import { DEFAULT_TOOL_NAMES } from "../tools/definitions.js";
@@ -46,6 +46,7 @@ import { SessionSocket, socketPath } from "./socket.js";
 import { harnessLogInfo, readHarnessLogChunk } from "./logs.js";
 import { listTerminalTrajectoryRuns, readTerminalTrajectory, latestTerminalTodo } from "./trajectory.js";
 import { BrowserControl } from "./browserControl.js";
+import { RemoteControl } from "../remote/service.js";
 /** Identity of the exact resource decision that this terminal was prepared with. */
 function resourceIdentity(loading) {
     if (!loading)
@@ -85,6 +86,8 @@ export class Terminals {
     relaunches = new Map();
     /** The managed worktree each live session holds. */
     worktreeLeases = new Map();
+    /** `/remote-control` for each live session that opened it. */
+    remotes = new Map();
     /** Each child's profile name and colour, looked up once per child run. */
     childProfiles = new Map();
     subagentProfile(record) {
@@ -1301,6 +1304,8 @@ export class Terminals {
                             return this.usageCall(live, call, params);
                         if (call === 'terminal.context')
                             return this.contextCall(live, params);
+                        if (call.startsWith('terminal.remoteControl.'))
+                            return this.remoteCall(live, call, params);
                         if (call !== 'terminal.resources')
                             return live.controller.control(call, params);
                         const current = await this.options.plugins?.loading({ cwd: input.cwd, agentDir: configDir(accounts.dir, preparedAccount), install: false, caller: { projectId: input.projectId ?? null } }) ?? null;
@@ -1403,6 +1408,83 @@ export class Terminals {
     has(sessionId) {
         return this.sessions.has(sessionId);
     }
+    remote(live) {
+        const sessionId = live.input.sessionId;
+        let remote = this.remotes.get(sessionId);
+        if (!remote) {
+            remote = new RemoteControl(this.remotePort(live), { productName: this.options.env.productName, ...this.options.remoteControl });
+            this.remotes.set(sessionId, remote);
+        }
+        return remote;
+    }
+    /**
+     * What a paired phone reaches: this session's own runs and the same send, interrupt and
+     * decision calls the terminal makes (INV-RC-3).
+     */
+    remotePort(live) {
+        const { root } = this.options.env;
+        const sessionId = live.input.sessionId;
+        const own = new Map();
+        const isOwn = (runId) => {
+            let known = own.get(runId);
+            if (known === undefined) {
+                const record = findRun(root, runId);
+                known = !!record && !record.relation && record.trigger !== 'side-question';
+                if (own.size > 1000)
+                    own.clear();
+                if (record)
+                    own.set(runId, known);
+            }
+            return known;
+        };
+        return {
+            sessionId,
+            title: () => basename(live.input.cwd) || this.options.env.productName,
+            send: (text) => this.send({ sessionId, text }),
+            control: (call, params) => live.controller.control(call, params),
+            history: () => {
+                const native = live.controller.nativeSessionId;
+                if (!native)
+                    return [];
+                const runs = listRuns(root, { sessionId })
+                    .filter((run) => run.nativeSessionId === native && !run.relation && run.trigger !== 'side-question')
+                    .slice(0, 20)
+                    .reverse();
+                return runs.flatMap((run) => readEvents(root, run.id));
+            },
+            listen: (listener) => this.options.runs.listen((event) => {
+                if (event.sessionId === sessionId && isOwn(event.runId))
+                    listener(event);
+            }),
+            state: () => {
+                const state = live.controller.state();
+                return { ready: state.ready, active: state.active };
+            }
+        };
+    }
+    async remoteCall(live, call, params) {
+        const remote = this.remote(live);
+        if (call === 'terminal.remoteControl.status')
+            return remote.status();
+        if (call === 'terminal.remoteControl.status.wait')
+            return remote.waitStatus(params.revision);
+        if (call === 'terminal.remoteControl.start') {
+            const choice = params.interface ?? 'auto';
+            if (!['auto', 'tailscale', 'lan'].includes(choice))
+                throw invalid('Choose auto, tailscale or lan.');
+            return remote.start(choice);
+        }
+        if (call === 'terminal.remoteControl.stop')
+            return remote.stop();
+        if (call === 'terminal.remoteControl.rotate')
+            return remote.rotate();
+        if (call === 'terminal.remoteControl.confirm') {
+            if (typeof params.requestId !== 'string' || typeof params.allow !== 'boolean')
+                throw invalid('A pairing request id and a boolean choice are required.');
+            return remote.confirm(params.requestId, params.allow);
+        }
+        throw new HarnessError('unknown_method', `Unknown terminal control ${call}.`);
+    }
     /** The terminal process ended (or never started): its turn, tokens, and written credentials go with it. */
     async dispose(sessionId) {
         const live = this.sessions.get(sessionId);
@@ -1415,6 +1497,9 @@ export class Terminals {
             }
         this.sessions.delete(sessionId);
         this.worldNames.delete(sessionId);
+        const remote = this.remotes.get(sessionId);
+        this.remotes.delete(sessionId);
+        await remote?.dispose().catch(() => undefined);
         const worktreeId = this.worktreeLeases.get(sessionId);
         this.worktreeLeases.delete(sessionId);
         if (worktreeId)

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

@@ -1,7 +1,8 @@
 import type { TerminalPage } from "./page.js";
 import type { TerminalCommandHost } from "./commands.js";
 import { type AnnotateStart } from "./pages/annotatePage.js";
-export type CommandPageId = 'doctor' | 'accounts' | 'permissions' | 'plugins' | 'hub' | 'components' | 'settings' | 'trajectory' | 'log' | 'harness' | 'skills' | 'connections' | 'tools' | 'worktree' | 'notes' | 'annotate' | 'subagents' | 'agents' | 'usage';
+import { type ContextTab } from "./pages/contextPage.js";
+export type CommandPageId = 'doctor' | 'accounts' | 'permissions' | 'plugins' | 'hub' | 'components' | 'settings' | 'trajectory' | 'log' | 'harness' | 'skills' | 'connections' | 'tools' | 'worktree' | 'notes' | 'annotate' | 'subagents' | 'agents' | 'usage' | 'context' | 'remote-control';
 /** Construct one independent full-screen page for a slash command. */
 export declare function createCommandPage(host: TerminalCommandHost, id: CommandPageId, options?: {
     runId?: string;
@@ -9,5 +10,7 @@ export declare function createCommandPage(host: TerminalCommandHost, id: Command
     annotate?: AnnotateStart;
     usageTab?: 'analysis' | 'limit' | 'accounts';
     usagePeriod?: 'today' | '7d' | '30d' | 'all';
+    contextTab?: ContextTab;
     close?(): void;
+    navigate?(id: CommandPageId): void;
 }): TerminalPage;

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

@@ -12,12 +12,24 @@ import { AnnotatePage } from "./pages/annotatePage.js";
 import { SubagentsPage } from "./pages/subagentsPage.js";
 import { AgentsPage } from "./pages/agentsPage.js";
 import { UsagePage } from "./pages/usagePage.js";
+import { ContextPage } from "./pages/contextPage.js";
+import { RemoteControlPage } from "./pages/remoteControlPage.js";
 import { createSettingsModel } from "./settingsModel.js";
 /** Construct one independent full-screen page for a slash command. */
 export function createCommandPage(host, id, options = {}) {
     const theme = () => host.ui.theme;
     const notify = (message, type) => host.ui.notify(message, type === 'error' || type === 'warning' ? type : 'info');
     switch (id) {
+        case 'remote-control':
+            return new RemoteControlPage({ theme, call: host.control, changed: host.changed, copy: host.copyText, notify });
+        case 'context':
+            return new ContextPage({
+                theme, call: host.control, changed: host.changed,
+                initialTab: options.contextTab === 'growth' ? 'growth' : 'request',
+                openVariant: () => options.navigate?.('harness'),
+                compact: async () => { await host.session().compact?.(); },
+                confirm: (title, message) => host.ui.confirm(title, message)
+            });
         case 'usage':
             return new UsagePage({ theme, call: host.control, changed: host.changed, initialTab: options.usageTab === 'limit' ? 'limits' : options.usageTab === 'accounts' ? 'accounts' : 'analysis', ...(options.usagePeriod ? { initialPeriod: options.usagePeriod } : {}) });
         case 'doctor':

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

@@ -34,6 +34,8 @@ export interface TerminalCommandHost {
     /** Opens a file in the person's editor and resolves once the editor closes. */
     editFile?(path: string): Promise<void>;
     hotkeys?(): string;
+    /** Follow `/remote-control` after it starts: the status bar, and pairing requests. */
+    watchRemoteControl?(): void;
     logs: {
         read(): Promise<string>;
     };

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

@@ -44,7 +44,7 @@ export function createTerminalCommands(host) {
     };
     async function openPage(id, options = {}) {
         let close = () => { };
-        const page = createCommandPage(host, id, { ...options, close: () => close() });
+        const page = createCommandPage(host, id, { ...options, close: () => close(), navigate: (target) => { close(); setTimeout(() => void openPage(target), 0); } });
         await host.ui.custom((tui, _theme, _keys, done) => {
             close = () => done(undefined);
             return new PageOverlay({ page, tui, theme: () => host.ui.theme, close, changed: host.changed });
@@ -449,6 +449,23 @@ export function createTerminalCommands(host) {
                 case 'log':
                     await openPage('log');
                     break;
+                case 'context':
+                    await openPage('context', { contextTab: argument === 'growth' ? 'growth' : 'request' });
+                    break;
+                case 'remote-control': {
+                    const choice = argument.toLowerCase();
+                    if (choice === 'off' || choice === 'stop') {
+                        await host.control('terminal.remoteControl.stop');
+                        notify('Remote control stopped.');
+                        break;
+                    }
+                    if (choice && !['tailscale', 'lan', 'wifi', 'wi-fi'].includes(choice))
+                        throw new Error('Use /remote-control, /remote-control off, /remote-control tailscale or /remote-control lan.');
+                    await host.control('terminal.remoteControl.start', { interface: choice === 'tailscale' ? 'tailscale' : choice ? 'lan' : 'auto' });
+                    host.watchRemoteControl?.();
+                    await openPage('remote-control');
+                    break;
+                }
                 case 'compact':
                     await session.compact(argument || undefined);
                     break;

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

@@ -0,0 +1,16 @@
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import { type MarkdownTheme } from '@earendil-works/pi-tui';
+/** The Harness markdown colours, mapped onto the component's callbacks. */
+export declare function markdownTheme(theme: Theme): MarkdownTheme;
+/** Model output as markdown source: terminal control sequences never reach the renderer. */
+export declare function markdownSource(text: string): string;
+/**
+ * One surface's Markdown component. It re-renders only when the streamed text, the width or the
+ * theme changes, and drops trailing blank rows so the caller frames the block itself.
+ */
+export declare class MarkdownBlock {
+    private component;
+    private theme;
+    private text;
+    lines(text: string, width: number, theme: Theme): string[];
+}

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

@@ -0,0 +1,55 @@
+import { Markdown, stripTerminalSequences } from '@earendil-works/pi-tui';
+/** The Harness markdown colours, mapped onto the component's callbacks. */
+export function markdownTheme(theme) {
+    return {
+        heading: text => theme.fg('mdHeading', text),
+        link: text => theme.fg('mdLink', text),
+        linkUrl: text => theme.fg('mdLinkUrl', text),
+        code: text => theme.fg('mdCode', text),
+        codeBlock: text => theme.fg('mdCodeBlock', text),
+        codeBlockBorder: text => theme.fg('mdCodeBlockBorder', text),
+        quote: text => theme.fg('mdQuote', text),
+        quoteBorder: text => theme.fg('mdQuoteBorder', text),
+        hr: text => theme.fg('mdHr', text),
+        listBullet: text => theme.fg('mdListBullet', text),
+        bold: text => theme.bold(text),
+        italic: text => theme.italic(text),
+        underline: text => theme.underline(text),
+        strikethrough: text => theme.strikethrough(text),
+        // A block surface has no syntax highlighter; its code keeps the theme's code colour.
+        highlightCode: code => code.split('\n').map(line => theme.fg('mdCodeBlock', line))
+    };
+}
+/** Model output as markdown source: terminal control sequences never reach the renderer. */
+export function markdownSource(text) {
+    return stripTerminalSequences(text)
+        .replace(/\r\n?/gu, '\n')
+        .replace(/[\x00-\x08\x0b-\x1f\x7f]/gu, ' ');
+}
+/**
+ * One surface's Markdown component. It re-renders only when the streamed text, the width or the
+ * theme changes, and drops trailing blank rows so the caller frames the block itself.
+ */
+export class MarkdownBlock {
+    component;
+    theme;
+    text = '';
+    lines(text, width, theme) {
+        if (width < 1 || !text.trim())
+            return [];
+        if (!this.component || this.theme !== theme) {
+            this.component = new Markdown('', 0, 0, markdownTheme(theme));
+            this.theme = theme;
+            this.text = '';
+        }
+        if (this.text !== text) {
+            this.component.setText(text);
+            this.text = text;
+        }
+        const lines = this.component.render(width);
+        let end = lines.length;
+        while (end > 0 && !stripTerminalSequences(lines[end - 1]).trim())
+            end -= 1;
+        return lines.slice(0, end);
+    }
+}

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

@@ -1,4 +1,5 @@
 import type { Theme } from '@earendil-works/pi-coding-agent';
+import type { ContextAttribution } from "../../../context/types.js";
 import { type TabInfo } from "../chrome.js";
 import type { TerminalPage } from "../page.js";
 export type ContextTab = 'request' | 'growth';
@@ -14,6 +15,13 @@ interface ContextPageOptions {
     compact?(): Promise<void>;
     confirm?(title: string, message: string): Promise<boolean>;
 }
+/** Cells for each value out of `total`, by largest remainder, so the runs always add up. */
+export declare function allocateCells(values: readonly number[], total: number): number[];
+/** The bar and its legend: one colour per kind of context, the track for free space, a marker at the reserve. */
+export declare function contextBar(data: ContextAttribution, width: number, theme: Theme): {
+    bar: string;
+    legend: string[];
+};
 export declare class ContextPage implements TerminalPage {
     private readonly options;
     presentation: "fullscreen";

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

@@ -1,6 +1,9 @@
-import { matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
-import { CHROME_PAD, headerRow, neutralRule, padded, selectedRow, selectionMuted, selectionText } from "../chrome.js";
+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',
@@ -35,23 +38,103 @@ function count(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 >= 90)
+    if (share >= 95)
         return 'error';
-    if (share >= 70)
+    if (share >= 80)
         return 'warning';
     return 'success';
 }
-/** A context bar: filled as the window is used, with room left in the track. */
-function usageBar(share, width, theme) {
+/** 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 track = '░'.repeat(room);
-    if (share === null)
-        return `[${theme.fg('dim', track)}]`;
-    const filled = Math.max(0, Math.min(room, Math.round((Math.max(0, Math.min(100, share)) / 100) * room)));
-    return `[${theme.fg(tone(share), '█'.repeat(filled))}${theme.fg('dim', '░'.repeat(room - filled))}]`;
+    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) {
@@ -130,6 +213,9 @@ export class ContextPage {
             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;
@@ -177,7 +263,10 @@ export class ContextPage {
             return true;
         }
         const entries = this.entries();
-        const current = Math.max(0, entries.findIndex((entry) => entry.row.id === this.selectedId));
+        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'))
@@ -271,21 +360,18 @@ export class ContextPage {
         if (width < 1 || rows < 1)
             return [];
         const theme = this.options.theme();
-        const data = this.data;
-        const meta = data ? `${count(data.used)} / ${data.window === null ? '?' : count(data.window)} · ${percent(data.share)}` : undefined;
-        const header = [headerRow('Context', meta, width, theme), neutralRule(width, 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 === 'growth' ? this.growthBody(width, theme) : this.requestBody(width, theme);
-        const list = this.detail ? body : body;
-        const room = Math.max(0, rows - header.length - 2);
-        this.scrollRows = Math.max(1, room);
-        const offset = this.detail ? Math.min(this.detailOffset, Math.max(0, list.length - room)) : Math.min(this.offset, Math.max(0, list.length - room));
-        this.maxOffset = Math.max(0, list.length - room);
+        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;
-        const footer = [neutralRule(width, theme), padded(theme.fg('dim', this.hint()), width)];
-        return [...header, ...list.slice(offset, offset + room), ...footer].map((line) => truncateToWidth(line, width, ''));
+        return body.slice(offset, offset + room).map((line) => truncateToWidth(line, width, ''));
     }
     requestBody(width, theme) {
         const data = this.data;
@@ -295,19 +381,23 @@ export class ContextPage {
         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));
-        body.push(padded(usageBar(data.share, inner, theme), 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);
-                body.push(padded(theme.bold(theme.fg('accent', entry.heading)) + theme.fg('dim', `  ${count(total)}`), width));
+                // 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));
         }
-        body.push('');
-        body.push(padded(theme.fg('dim', `free ${data.free === null ? '?' : count(data.free)}${data.compaction ? ` · reserve ${count(data.compaction.reserveTokens)}` : ''}`), width));
         if (data.onDemand.length) {
             body.push('');
             body.push(padded(theme.fg('accent', 'On demand') + theme.fg('dim', '  not in this request'), width));
@@ -327,22 +417,23 @@ export class ContextPage {
     rowLine(row, inner, width, theme) {
         const selected = row.id === this.selectedId;
         const marker = selected ? '❯ ' : row.always ? '  ' : '· ';
-        const budget = row.budget ? `  ${count(row.tokens * 4)} of ${count(row.budget)} chars` : '';
-        const tools = row.tools?.length ? `  ${row.tools.map((tool) => `${tool.group} ${tool.count}`).join(' · ')}` : '';
-        const note = row.note ? `  ${row.note}` : '';
         const tail = `${count(row.tokens).padStart(7)}${percent(row.share).padStart(7)}`;
-        const label = `${marker}${row.title}`;
-        const fixed = visibleWidth(tail) + 1;
-        const left = truncateToWidth(label, Math.max(4, inner - fixed - visibleWidth(budget) - visibleWidth(tools) - visibleWidth(note)), '…');
-        const line = `${left}${' '.repeat(Math.max(1, inner - visibleWidth(left) - fixed))}${tail}`;
+        // 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);
-        const rest = `${budget}${tools}${note}`;
-        if (rest && inner > visibleWidth(line) + visibleWidth(rest)) {
-            const quiet = theme.fg('dim', rest);
-            return padded(selected ? selectionMuted(theme, line) : line + ' '.repeat(Math.max(1, inner - visibleWidth(line) - visibleWidth(rest))) + quiet, width);
-        }
-        return padded(selected ? selectionText(theme, line) : line, width);
+        return padded(line, width);
     }
     growthBody(width, theme) {
         const data = this.data;

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

@@ -0,0 +1,32 @@
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import type { TerminalPage } from "../page.js";
+export interface RemoteControlPageOptions {
+    theme(): Theme;
+    call<T = unknown>(method: string, params?: Record<string, unknown>): Promise<T>;
+    changed(): void;
+    copy(text: string): Promise<void>;
+    notify(message: string, type?: 'info' | 'warning' | 'error'): void;
+}
+export declare class RemoteControlPage implements TerminalPage {
+    private readonly options;
+    presentation: "fullscreen";
+    private status;
+    private error;
+    private showQr;
+    private busy;
+    private disposed;
+    private watching;
+    constructor(options: RemoteControlPageOptions);
+    tabs(): {
+        id: string;
+        title: string;
+    }[];
+    activeTab(): string;
+    hint(): string;
+    activate(): void;
+    dispose(): void;
+    private watch;
+    private act;
+    handleInput(data: string): boolean;
+    render(width: number, rows: number): string[];
+}