@xingular/harness 1.0.0 → 1.1.1

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

@@ -0,0 +1,190 @@
+import { stripTerminalSequences, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
+import { formatVariant } from "../../../agents/profiles.js";
+import { headerRow, neutralRule, padded } from "../chrome.js";
+import { FilterList } from "../list.js";
+export const AGENT_ACTIONS = {
+    edit: 'Edit in your editor',
+    copy: 'Copy to a new profile',
+    remove: 'Delete'
+};
+export const AGENT_SCOPES = {
+    project: 'Project: this repository only',
+    global: 'Global: every folder'
+};
+const TABS = [{ id: 'agents', title: 'Agents' }];
+const GROUP = { builtin: 'Built-in', global: 'Global', project: 'Project', variant: 'From the variant' };
+function clean(value) {
+    return stripTerminalSequences(value).replace(/[\x00-\x08\x0b-\x1f\x7f]/g, ' ').replace(/[ \t]+/g, ' ').trim();
+}
+export class AgentsPage {
+    options;
+    presentation = 'fullscreen';
+    overview;
+    error;
+    busy = false;
+    disposed = false;
+    list;
+    constructor(options) {
+        this.options = options;
+        this.list = new FilterList({
+            theme: options.theme, search: 'always', noun: ['profile', 'profiles'], empty: 'No profiles',
+            onActivate: row => { if (row.data)
+                void this.activateRow(row.data); }
+        });
+    }
+    get focused() { return this.list.focused; }
+    set focused(value) { this.list.focused = value; }
+    activate() { void this.reload(); }
+    dispose() { this.disposed = true; }
+    tabs() { return TABS; }
+    activeTab() { return 'agents'; }
+    hint() { return 'Enter choose · type to search'; }
+    async reload() {
+        try {
+            this.overview = await this.options.call('terminal.agents.list');
+            this.error = undefined;
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+        if (this.disposed)
+            return;
+        this.list.setRows(this.rows());
+        this.options.changed();
+    }
+    rows() {
+        const overview = this.overview;
+        if (!overview)
+            return [];
+        const rows = [{ id: 'new', label: 'New profile', group: 'Actions', detail: 'from a template, then opens in your editor', tone: 'accent', data: { kind: 'new' } }];
+        for (const source of ['builtin', 'global', 'project', 'variant']) {
+            for (const profile of overview.profiles.filter(entry => entry.source === source)) {
+                rows.push({
+                    id: `profile:${profile.name}`, label: profile.name, group: GROUP[source], detail: clean(profile.description), tone: 'muted',
+                    searchText: `${profile.name} ${profile.description} ${source}`, data: { kind: 'profile', profile }
+                });
+            }
+        }
+        for (const problem of overview.problems) {
+            rows.push({
+                id: `problem:${problem.source}:${problem.name}`, label: problem.name, group: 'Cannot be read', detail: clean(problem.error), tone: 'error',
+                searchText: `${problem.name} ${problem.error}`, data: { kind: 'problem', problem }
+            });
+        }
+        return rows;
+    }
+    async attempt(work) {
+        if (this.busy)
+            return;
+        this.busy = true;
+        try {
+            const message = await work();
+            if (message)
+                this.options.ui.notify(message, 'info');
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+        finally {
+            this.busy = false;
+        }
+        await this.reload();
+    }
+    async open(path) {
+        if (!this.options.edit)
+            return `Edit the profile at ${path}.`;
+        await this.options.edit(path);
+    }
+    async create(from) {
+        const ui = this.options.ui;
+        const name = (await ui.input(from ? `Name for the copy of ${from}` : 'Profile name', 'lowercase-with-dashes'))?.trim();
+        if (!name)
+            return;
+        const scopes = this.overview?.dirs.project ? [AGENT_SCOPES.project, AGENT_SCOPES.global] : [AGENT_SCOPES.global];
+        const choice = await ui.select(`Where should ${name} live?`, scopes);
+        if (!choice)
+            return;
+        const scope = choice === AGENT_SCOPES.project ? 'project' : 'global';
+        const made = await this.options.call('terminal.agents.create', { name, scope, ...(from ? { from } : {}) });
+        return (await this.open(made.path)) ?? `Saved ${made.name}.`;
+    }
+    async activateRow(row) {
+        if (row.kind === 'new')
+            return this.attempt(() => this.create(null));
+        if (row.kind === 'problem') {
+            const { problem } = row;
+            const scope = problem.source === 'global' || problem.source === 'project' ? problem.source : null;
+            const choice = await this.options.ui.select(`${problem.name} · ${problem.error}`, [AGENT_ACTIONS.edit, ...(scope ? [AGENT_ACTIONS.remove] : [])]);
+            if (choice === AGENT_ACTIONS.edit)
+                return this.attempt(() => this.open(problem.path));
+            if (choice === AGENT_ACTIONS.remove && scope)
+                return this.remove(problem.name, scope);
+            return;
+        }
+        const { profile } = row;
+        const own = profile.source === 'global' || profile.source === 'project' ? profile.source : null;
+        const choice = await this.options.ui.select(`${profile.name} · ${GROUP[profile.source]}`, [...(own ? [AGENT_ACTIONS.edit] : []), AGENT_ACTIONS.copy, ...(own ? [AGENT_ACTIONS.remove] : [])]);
+        if (choice === AGENT_ACTIONS.edit && profile.path)
+            return this.attempt(() => this.open(profile.path));
+        if (choice === AGENT_ACTIONS.copy)
+            return this.attempt(() => this.create(profile.name));
+        if (choice === AGENT_ACTIONS.remove && own)
+            return this.remove(profile.name, own);
+    }
+    async remove(name, scope) {
+        if (!await this.options.ui.confirm(`Delete ${name}?`, `This removes your ${scope} profile file. A built-in profile of the same name comes back.`))
+            return;
+        return this.attempt(async () => {
+            await this.options.call('terminal.agents.remove', { name, scope });
+            return `Deleted ${name}.`;
+        });
+    }
+    handleMouse(event) {
+        return this.list.handleMouse(event);
+    }
+    handleInput(data) {
+        if (this.list.handleInput(data)) {
+            this.options.changed();
+            return true;
+        }
+        return false;
+    }
+    render(width, rows) {
+        const theme = this.options.theme();
+        if (width < 1 || rows < 1)
+            return [];
+        if (this.error)
+            return [theme.fg('error', `Could not read agent profiles: ${this.error}`)];
+        if (!this.overview)
+            return [theme.fg('dim', 'Reading agent profiles…')];
+        const header = headerRow('Agents', `${this.overview.profiles.length} profiles`, width, theme);
+        const bodyRows = Math.max(0, rows - 7);
+        const listRows = Math.max(1, Math.min(this.list.height, Math.floor(bodyRows * 0.55)));
+        const output = [header, '', ...this.list.render(width, listRows), ''];
+        const selected = this.list.selected?.data;
+        const textWidth = Math.max(1, width - 4);
+        output.push(neutralRule(width, theme));
+        if (selected?.kind === 'profile') {
+            const profile = selected.profile;
+            const field = (label, value) => padded(`${theme.fg('muted', `${label}: `)}${theme.fg('text', clean(value))}`, width);
+            output.push(padded(theme.fg('accent', `${profile.name} · ${profile.color}`), width));
+            output.push(...wrapTextWithAnsi(theme.fg('text', clean(profile.description)), textWidth));
+            output.push(field('Tools', profile.tools?.join(', ') ?? 'all of the parent\'s'));
+            output.push(field('Plugins', profile.plugins?.join(', ') ?? 'all of the parent\'s'));
+            output.push(field('Variant', formatVariant(profile.variant) ?? 'the parent\'s'));
+            output.push(field('Model', [profile.model ?? 'the parent\'s', profile.effort ? `effort ${profile.effort}` : null].filter(Boolean).join(' · ')));
+            output.push(field('File', profile.path ?? 'built in'));
+            output.push(padded(theme.fg('accent', 'Instructions'), width));
+            output.push(...profile.instructions.split('\n').flatMap(line => wrapTextWithAnsi(theme.fg('muted', clean(line)), textWidth)));
+        }
+        else if (selected?.kind === 'problem') {
+            output.push(padded(theme.fg('error', selected.problem.error), width));
+            output.push(padded(theme.fg('muted', selected.problem.path), width));
+        }
+        else {
+            const dirs = this.overview.dirs;
+            output.push(padded(theme.fg('muted', `Your profiles live in ${dirs.global}${dirs.project ? ` and ${dirs.project}` : ''}. A project profile wins over a global one, and both over a built-in one.`), width));
+        }
+        return output.slice(0, rows).map(line => truncateToWidth(line, width, ''));
+    }
+}

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

@@ -0,0 +1,94 @@
+/**
+ * The annotate pane (`/plugin:annotate`, PROP-0018): the person works in a browser window or an app's own
+ * windows, and this page is the panel beside it. With the inspector on, hovering outlines a
+ * component and a click opens a comment popover with three choices: keep it as a note, add it to
+ * this session's queue, or send it to the agent now. The page lists the queue, what was sent and
+ * what the agent says it fixed, and the notes kept on the side.
+ */
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import type { MenuCall, MenuUi } from "../../pluginMenu.js";
+import type { TabInfo } from "../chrome.js";
+import { type ListRow } from "../list.js";
+import type { TerminalMouseInput } from "../mouse.js";
+import type { TerminalPage } from "../page.js";
+import type { Note, NoteTarget } from "../../../annotations/store.js";
+export type AnnotateStart = {
+    kind: 'web';
+    url?: string;
+} | {
+    kind: 'cdp';
+    endpoint: string;
+    name?: string;
+} | {
+    kind: 'bridge';
+    name?: string;
+};
+export interface AnnotatePageOptions {
+    theme(): Theme;
+    call: MenuCall;
+    ui: MenuUi & {
+        input(title: string, placeholder?: string): Promise<string | undefined>;
+    };
+    changed(): void;
+    start: AnnotateStart;
+    /** How often the inspector is asked for the person's next comment, in milliseconds. */
+    pollMs?: number;
+}
+type Row = {
+    kind: 'note';
+    note: Note;
+};
+export declare const ANNOTATE_ACTIONS: {
+    readonly reveal: "Show it in the window";
+    readonly send: "Send to the agent now";
+    readonly confirm: "Confirm sending it (it came from the page)";
+    readonly queue: "Ask the agent to fix it (add to queue)";
+    readonly dequeue: "Take it out of the queue";
+    readonly edit: "Edit the comment";
+    readonly resolve: "Resolve";
+    readonly delete: "Delete";
+};
+export declare function describeTarget(target: NoteTarget): string;
+/** Which section of the panel a note belongs in, for this session; null when it is not shown. */
+export declare function section(note: Note, sessionId: string | null): 'Queue' | 'Sent and fixed' | 'Saved' | null;
+export declare class AnnotatePage implements TerminalPage {
+    private readonly options;
+    presentation: "fullscreen";
+    private notes;
+    private sessionId;
+    private target;
+    private bridgeSnippet;
+    private error;
+    private busy;
+    private disposed;
+    private polling;
+    private timer;
+    private refreshes;
+    private readonly list;
+    constructor(options: AnnotatePageOptions);
+    get focused(): boolean;
+    set focused(value: boolean);
+    tabs(): readonly TabInfo[];
+    activeTab(): string;
+    hint(): string;
+    activate(): void;
+    dispose(): void;
+    private start;
+    private refreshTarget;
+    reload(): Promise<void>;
+    rows(): ListRow<Row>[];
+    private queued;
+    /** Polls the inspector for the person's next comment, and the notes every few seconds. */
+    private schedule;
+    private tick;
+    private toggleInspect;
+    private attempt;
+    sendQueue(): Promise<void>;
+    private chooseWindow;
+    private noteMenu;
+    handleMouse(event: TerminalMouseInput): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
+    handleInput(data: string): boolean;
+    private header;
+    render(width: number, rows: number): string[];
+}
+export {};

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

@@ -0,0 +1,341 @@
+import { truncateToWidth } from '@earendil-works/pi-tui';
+import { FilterList } from "../list.js";
+const TABS = [{ id: 'annotate', title: 'Annotate' }];
+export const ANNOTATE_ACTIONS = {
+    reveal: 'Show it in the window',
+    send: 'Send to the agent now',
+    confirm: 'Confirm sending it (it came from the page)',
+    queue: 'Ask the agent to fix it (add to queue)',
+    dequeue: 'Take it out of the queue',
+    edit: 'Edit the comment',
+    resolve: 'Resolve',
+    delete: 'Delete'
+};
+const clip = (text, size) => (text.length > size ? `${text.slice(0, size - 1)}…` : text);
+export function describeTarget(target) {
+    if (target.kind === 'text')
+        return `“${clip(target.exact.replace(/\s+/g, ' '), 50)}”`;
+    if (target.kind === 'element')
+        return `<${target.tag}> ${clip(target.name || target.text || target.selector, 40)}`;
+    return 'whole page';
+}
+/** Which section of the panel a note belongs in, for this session; null when it is not shown. */
+export function section(note, sessionId) {
+    if (note.status === 'resolved')
+        return null;
+    const delivery = note.delivery;
+    if (delivery && delivery.sessionId === sessionId)
+        return delivery.state === 'queued' ? 'Queue' : 'Sent and fixed';
+    if (!delivery)
+        return 'Saved';
+    return null;
+}
+export class AnnotatePage {
+    options;
+    presentation = 'fullscreen';
+    notes;
+    sessionId = null;
+    target = null;
+    bridgeSnippet = null;
+    error;
+    busy = false;
+    disposed = false;
+    polling = false;
+    timer = null;
+    refreshes = 0;
+    list;
+    constructor(options) {
+        this.options = options;
+        this.list = new FilterList({
+            theme: options.theme, search: 'never', noun: ['note', 'notes'], empty: 'Nothing here yet. Press i and click a component in the window.',
+            onActivate: row => { if (row.data)
+                void this.noteMenu(row.data.note); }
+        });
+    }
+    get focused() { return this.list.focused; }
+    set focused(value) { this.list.focused = value; }
+    tabs() { return TABS; }
+    activeTab() { return 'annotate'; }
+    hint() {
+        return `${this.target?.inspecting ? 'i stop inspecting' : 'i inspect'} · s send queue · x unqueue · t window · Enter note · Esc close`;
+    }
+    activate() {
+        void this.start();
+    }
+    dispose() {
+        this.disposed = true;
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.timer = null;
+        void this.options.call('terminal.annotations.stopInspect').catch(() => undefined);
+    }
+    async start() {
+        const { call } = this.options;
+        const start = this.options.start;
+        await this.attempt(async () => {
+            if (start.kind === 'web') {
+                const url = start.url ?? await this.options.ui.input('Page or dev server address', 'http://localhost:5173');
+                if (!url)
+                    return;
+                await call('terminal.annotations.open', { url });
+            }
+            else if (start.kind === 'cdp') {
+                await call('terminal.annotations.attach', { kind: 'cdp', endpoint: start.endpoint, ...(start.name ? { name: start.name } : {}) });
+            }
+            else {
+                const attached = await call('terminal.annotations.attach', { kind: 'bridge', ...(start.name ? { name: start.name } : {}) });
+                this.bridgeSnippet = attached.bridge?.snippet ?? null;
+            }
+            await this.refreshTarget();
+            if (this.target?.windows.length || start.kind !== 'bridge')
+                await this.toggleInspect(true);
+            return start.kind === 'bridge' && !this.target?.windows.length ? 'Load the bridge script in the app (shown at the top), then reload the app.' : undefined;
+        });
+        this.schedule();
+    }
+    async refreshTarget() {
+        this.target = await this.options.call('terminal.annotations.target');
+    }
+    async reload() {
+        try {
+            const result = await this.options.call('terminal.annotations.list');
+            this.notes = result.notes;
+            this.sessionId = result.sessionId;
+            this.error = undefined;
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+        if (this.disposed)
+            return;
+        this.list.setRows(this.rows());
+        this.options.changed();
+    }
+    rows() {
+        const order = ['Queue', 'Sent and fixed', 'Saved'];
+        const rows = [];
+        for (const group of order) {
+            for (const note of (this.notes ?? []).filter(entry => section(entry, this.sessionId) === group)) {
+                const delivery = note.delivery;
+                const state = !delivery ? describeTarget(note.target)
+                    : delivery.state === 'queued' ? `${describeTarget(note.target)}${delivery.confirm ? ' · confirm to send' : delivery.autoSend ? ' · sends when idle' : ''}`
+                        : delivery.state === 'fixed' ? `fixed: ${clip(delivery.summary ?? '', 50)}` : `sent · ${describeTarget(note.target)}`;
+                rows.push({
+                    id: `note:${note.id}`, label: clip(note.body.replace(/\s+/g, ' '), 60), group: group === 'Queue' ? `Queue (${this.queued().length})` : group,
+                    detail: state,
+                    tone: delivery?.state === 'fixed' ? 'success' : delivery?.confirm ? 'warning' : delivery?.state === 'queued' ? 'accent' : 'muted',
+                    data: { kind: 'note', note }
+                });
+            }
+        }
+        return rows;
+    }
+    queued() {
+        return (this.notes ?? []).filter(note => section(note, this.sessionId) === 'Queue');
+    }
+    /** Polls the inspector for the person's next comment, and the notes every few seconds. */
+    schedule() {
+        if (this.disposed)
+            return;
+        this.timer = setTimeout(() => void this.tick(), this.options.pollMs ?? 400);
+        this.timer.unref?.();
+    }
+    async tick() {
+        if (this.disposed)
+            return;
+        if (!this.polling) {
+            this.polling = true;
+            try {
+                let changed = ++this.refreshes % 5 === 0;
+                if (this.target?.inspecting) {
+                    const step = await this.options.call('terminal.annotations.next');
+                    if (step.message)
+                        this.options.ui.notify(step.message, 'info');
+                    if (step.note)
+                        changed = true;
+                    if (!step.active) {
+                        await this.refreshTarget();
+                        this.options.changed();
+                    }
+                }
+                else if (this.target?.kind === 'bridge' && !this.target.windows.length) {
+                    // Waiting for the app to load the bridge script.
+                    await this.refreshTarget();
+                    if (this.target.windows.length) {
+                        await this.toggleInspect(true);
+                        changed = true;
+                    }
+                }
+                if (changed)
+                    await this.reload();
+            }
+            catch (error) {
+                this.error = error instanceof Error ? error.message : String(error);
+                this.options.changed();
+            }
+            finally {
+                this.polling = false;
+            }
+        }
+        this.schedule();
+    }
+    async toggleInspect(on) {
+        await this.options.call(on ? 'terminal.annotations.inspect' : 'terminal.annotations.stopInspect');
+        await this.refreshTarget();
+        this.options.changed();
+    }
+    async attempt(work) {
+        if (this.busy)
+            return;
+        this.busy = true;
+        try {
+            const message = await work();
+            if (message)
+                this.options.ui.notify(message, 'info');
+            this.error = undefined;
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+        finally {
+            this.busy = false;
+        }
+        await this.reload();
+    }
+    sendQueue() {
+        return this.attempt(async () => {
+            const waiting = this.queued();
+            if (!waiting.length)
+                return 'The queue is empty.';
+            const unconfirmed = waiting.filter(note => note.delivery?.confirm);
+            if (unconfirmed.length) {
+                if (!await this.options.ui.confirm(`Send ${waiting.length} note(s) to the agent?`, `${unconfirmed.length} came from the page's own scripts. Check that you wrote them.`))
+                    return;
+                for (const note of unconfirmed)
+                    await this.options.call('terminal.annotations.confirm', { id: note.id, expectedVersion: note.version });
+            }
+            const result = await this.options.call('terminal.annotations.send');
+            return result.state === 'sent' ? `Sent ${result.ids.length} note(s) to the agent.` : result.state === 'busy' ? 'The agent is working; the queue goes out when it finishes.' : 'Nothing was sent.';
+        });
+    }
+    chooseWindow() {
+        return this.attempt(async () => {
+            await this.refreshTarget();
+            const windows = this.target?.windows ?? [];
+            if (!windows.length)
+                return 'No window is open.';
+            const labels = windows.map(window => `${window.current ? '● ' : ''}${clip(window.title || window.url, 60)} — ${clip(window.url, 50)}`);
+            const choice = await this.options.ui.select('Inspect which window?', labels);
+            const index = choice ? labels.indexOf(choice) : -1;
+            if (index < 0)
+                return;
+            await this.options.call('terminal.annotations.selectWindow', { window: windows[index].id });
+            await this.refreshTarget();
+        });
+    }
+    async noteMenu(note) {
+        const { call, ui } = this.options;
+        const where = section(note, this.sessionId);
+        const choices = [
+            ANNOTATE_ACTIONS.reveal,
+            ...(where === 'Queue' ? [note.delivery?.confirm ? ANNOTATE_ACTIONS.confirm : ANNOTATE_ACTIONS.send, ANNOTATE_ACTIONS.dequeue] : [ANNOTATE_ACTIONS.queue]),
+            ANNOTATE_ACTIONS.edit,
+            ANNOTATE_ACTIONS.resolve,
+            ANNOTATE_ACTIONS.delete
+        ];
+        const choice = await ui.select(`${clip(note.source.app?.name ?? note.source.title ?? note.source.url, 50)} · ${describeTarget(note.target)}`, choices);
+        const id = note.id;
+        if (choice === ANNOTATE_ACTIONS.reveal)
+            return this.attempt(async () => {
+                const result = await call('terminal.annotations.reveal', { id });
+                return result.state === 'matched' ? 'Marked in the window.' : `The target is ${result.state}${result.reason ? `: ${result.reason}` : ''}.`;
+            });
+        if (choice === ANNOTATE_ACTIONS.queue)
+            return this.attempt(async () => {
+                await call('terminal.annotations.queue', { id, expectedVersion: note.version });
+                return 'Added to the queue.';
+            });
+        if (choice === ANNOTATE_ACTIONS.dequeue)
+            return this.attempt(async () => {
+                await call('terminal.annotations.dequeue', { id, expectedVersion: note.version });
+            });
+        if (choice === ANNOTATE_ACTIONS.confirm || choice === ANNOTATE_ACTIONS.send)
+            return this.attempt(async () => {
+                if (choice === ANNOTATE_ACTIONS.confirm)
+                    await call('terminal.annotations.confirm', { id, expectedVersion: note.version });
+                const result = await call('terminal.annotations.send', { ids: [id] });
+                return result.state === 'sent' ? 'Sent to the agent.' : result.state === 'busy' ? 'It goes to the agent when it finishes.' : undefined;
+            });
+        if (choice === ANNOTATE_ACTIONS.edit)
+            return this.attempt(async () => {
+                const body = await ui.input('Comment', note.body);
+                if (!body?.trim() || body === note.body)
+                    return;
+                await call('terminal.annotations.update', { id, expectedVersion: note.version, patch: { body } });
+            });
+        if (choice === ANNOTATE_ACTIONS.resolve)
+            return this.attempt(async () => {
+                await call('terminal.annotations.update', { id, expectedVersion: note.version, patch: { status: 'resolved' } });
+                return 'Resolved.';
+            });
+        if (choice === ANNOTATE_ACTIONS.delete)
+            return this.attempt(async () => {
+                if (!await ui.confirm('Delete this note?', 'It cannot be restored.'))
+                    return;
+                await call('terminal.annotations.delete', { id, expectedVersion: note.version });
+            });
+    }
+    handleMouse(event) {
+        return this.list.handleMouse(event);
+    }
+    handleInput(data) {
+        if (data === 'i') {
+            void this.attempt(() => this.toggleInspect(!this.target?.inspecting));
+            return true;
+        }
+        if (data === 's') {
+            void this.sendQueue();
+            return true;
+        }
+        if (data === 't') {
+            void this.chooseWindow();
+            return true;
+        }
+        if (data === 'x') {
+            const row = this.list.selected?.data;
+            if (row && section(row.note, this.sessionId) === 'Queue')
+                void this.attempt(async () => { await this.options.call('terminal.annotations.dequeue', { id: row.note.id, expectedVersion: row.note.version }); });
+            return true;
+        }
+        return this.list.handleInput(data);
+    }
+    header(width) {
+        const theme = this.options.theme();
+        const target = this.target;
+        const current = target?.windows.find(window => window.current);
+        const kind = !target ? 'Starting…' : target.kind === 'web' ? 'Browser window' : target.kind === 'cdp' ? `App · ${target.app?.name ?? ''} (DevTools)` : `App · ${target.app?.name ?? ''} (page bridge)`;
+        const lines = [
+            `${theme.bold(kind)}${current ? theme.fg('muted', ` · ${clip(current.title || current.url, 40)} · ${clip(current.url, 60)}`) : ''}`,
+            target?.inspecting
+                ? theme.fg('success', '● Inspecting: hover a component in the window and click it to comment.')
+                : theme.fg('dim', '○ Inspector off. Press i to turn it on.')
+        ];
+        if (this.bridgeSnippet && target?.kind === 'bridge') {
+            lines.push(theme.fg(target.windows.length ? 'dim' : 'warning', `Load in the app while developing: ${this.bridgeSnippet}`));
+        }
+        if (this.error)
+            lines.push(theme.fg('error', this.error));
+        lines.push('');
+        return lines.map(line => truncateToWidth(line, width, ''));
+    }
+    render(width, rows) {
+        const theme = this.options.theme();
+        if (width < 1 || rows < 1)
+            return [];
+        const header = this.header(width);
+        if (!this.notes)
+            return [...header, theme.fg('dim', 'Reading page notes…')].slice(0, rows);
+        const body = this.list.render(width, Math.max(1, rows - header.length));
+        return [...header, ...body].slice(0, rows).map(line => truncateToWidth(line, width, ''));
+    }
+}