@xingular/harness 1.2.0 → 1.3.1-unstable.1

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

@@ -1,14 +1,22 @@
-import { truncateToWidth } from '@earendil-works/pi-tui';
+import { Input, matchesKey, truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
 import { FilterList } from "../list.js";
-const TABS = [{ id: 'annotate', title: 'Annotate' }];
+import { normalizeAddress, normalizeDevTools } from "../annotateCommand.js";
+import { describeSend, sendUnsent, unsent } from "../annotateSend.js";
+const TABS = [{ id: 'annotate', title: 'Annotate' }, { id: 'all', title: 'All annotations' }];
+const FIELDS = {
+    address: { label: 'Page address', placeholder: 'http://localhost:5173' },
+    port: { label: 'DevTools port', placeholder: '9222' },
+    path: { label: 'App to start', placeholder: '/Applications/MyApp.app' }
+};
 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',
+    send: 'Send it now',
+    confirm: 'Confirm and send it (it came from the page)',
     edit: 'Edit the comment',
     resolve: 'Resolve',
+    reopen: 'Reopen',
+    share: 'Share it with this session',
+    unshare: 'Stop sharing it with this session',
     delete: 'Delete'
 };
 const clip = (text, size) => (text.length > size ? `${text.slice(0, size - 1)}…` : text);
@@ -19,45 +27,84 @@ export function describeTarget(target) {
         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. */
+/** Which group of the Annotate tab a note belongs in, for this session; null when it is not shown there. */
 export function section(note, sessionId) {
-    if (note.status === 'resolved')
+    if (note.status === 'resolved' || !note.delivery || note.delivery.sessionId !== sessionId)
         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;
+    return note.delivery.state === 'pending' ? 'Unsent' : 'Sent';
 }
 export class AnnotatePage {
     options;
     presentation = 'fullscreen';
+    tab;
+    view = 'notes';
+    field = null;
     notes;
     sessionId = null;
     target = null;
+    apps = null;
     bridgeSnippet = null;
     error;
     busy = false;
     disposed = false;
     polling = false;
+    focusedValue = false;
     timer = null;
     refreshes = 0;
-    list;
+    listTop = 0;
+    noteList;
+    appList;
+    allList;
     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.',
+        this.tab = options.initialTab ?? 'annotate';
+        this.noteList = new FilterList({
+            theme: options.theme, search: 'never', noun: ['annotation', 'annotations'],
+            empty: 'No annotations yet. Press i and click a component in the window.',
+            onActivate: row => { if (row.data)
+                void this.noteMenu(row.data.note, 'annotate'); }
+        });
+        this.appList = new FilterList({
+            theme: options.theme, search: 'never', noun: ['choice', 'choices'],
             onActivate: row => { if (row.data)
-                void this.noteMenu(row.data.note); }
+                void this.chooseApp(row.data); }
         });
+        this.allList = new FilterList({
+            theme: options.theme, search: 'always', noun: ['annotation', 'annotations'], empty: 'No web annotations yet',
+            onActivate: row => { if (row.data)
+                void this.noteMenu(row.data.note, 'all'); }
+        });
+    }
+    get focused() { return this.focusedValue; }
+    set focused(value) {
+        this.focusedValue = value;
+        this.syncFocus();
+    }
+    syncFocus() {
+        const value = this.focusedValue;
+        this.noteList.focused = value && this.tab === 'annotate' && this.view === 'notes' && !this.field;
+        this.appList.focused = value && this.tab === 'annotate' && this.view === 'apps' && !this.field;
+        this.allList.focused = value && this.tab === 'all';
+        if (this.field)
+            this.field.input.focused = value && this.tab === 'annotate';
     }
-    get focused() { return this.list.focused; }
-    set focused(value) { this.list.focused = value; }
     tabs() { return TABS; }
-    activeTab() { return 'annotate'; }
+    activeTab() { return this.tab; }
+    selectTab(id) {
+        if (id !== 'annotate' && id !== 'all')
+            return;
+        this.tab = id;
+        this.syncFocus();
+        this.options.changed();
+    }
     hint() {
-        return `${this.target?.inspecting ? 'i stop inspecting' : 'i inspect'} · s send queue · x unqueue · t window · Enter note · Esc close`;
+        if (this.tab === 'all')
+            return 'Enter choose · type to search · Tab Annotate · Esc close';
+        if (this.field)
+            return 'Enter go · Esc cancel';
+        if (this.view === 'apps')
+            return 'Enter choose · r look again · Esc back';
+        return `${this.target?.inspecting ? 'i stop inspecting' : 'i inspect'} · s send unsent · o page · a app · t window · Enter note · Tab all · Esc close`;
     }
     activate() {
         void this.start();
@@ -70,32 +117,158 @@ export class AnnotatePage {
         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;
-        });
+        await this.reload();
+        if (start.kind === 'web' && !start.url) {
+            // The capture target outlives the page: reopening returns to the window still open.
+            if (!await this.restore())
+                this.openField('address');
+        }
+        else if (start.kind === 'apps')
+            await this.showApps();
+        else
+            await this.attempt(async () => {
+                if (start.kind === 'web')
+                    await this.openPage(start.url);
+                else if (start.kind === 'cdp')
+                    await this.attachApp(start.endpoint, start.name);
+                else if (start.kind === 'bridge')
+                    return this.attachBridge(start.name);
+            });
         this.schedule();
     }
+    /** Shows the target that is still open, with the inspector on again; false when no window is open. */
+    async restore() {
+        try {
+            await this.refreshTarget();
+        }
+        catch {
+            return false;
+        }
+        const target = this.target;
+        if (!target || (target.kind === 'web' && !target.windows.length))
+            return false;
+        this.view = 'notes';
+        this.bridgeSnippet = target.bridge?.snippet ?? null;
+        this.syncFocus();
+        if (target.windows.length)
+            await this.toggleInspect(true).catch(() => undefined);
+        this.options.changed();
+        return true;
+    }
+    // ---- The target: a page, an app over its DevTools port, or the page bridge ----------------------
     async refreshTarget() {
         this.target = await this.options.call('terminal.annotations.target');
     }
+    async openPage(url) {
+        await this.options.call('terminal.annotations.open', { url });
+        await this.refreshTarget();
+        await this.toggleInspect(true);
+    }
+    async attachApp(endpoint, name) {
+        await this.options.call('terminal.annotations.attach', { kind: 'cdp', endpoint, ...(name ? { name } : {}) });
+        await this.refreshTarget();
+        this.view = 'notes';
+        this.syncFocus();
+        await this.toggleInspect(true);
+    }
+    async attachBridge(name) {
+        const attached = await this.options.call('terminal.annotations.attach', { kind: 'bridge', ...(name ? { name } : {}) });
+        this.bridgeSnippet = attached.bridge?.snippet ?? null;
+        await this.refreshTarget();
+        this.view = 'notes';
+        this.syncFocus();
+        if (this.target?.windows.length) {
+            await this.toggleInspect(true);
+            return undefined;
+        }
+        return 'Load the bridge script in the app (shown at the top), then reload the app.';
+    }
+    openField(kind) {
+        const input = new Input({ prompt: '', placeholder: FIELDS[kind].placeholder, placeholderStyle: text => this.options.theme().fg('dim', text) });
+        this.field = { kind, input };
+        this.syncFocus();
+        this.options.changed();
+    }
+    closeField() {
+        this.field = null;
+        this.syncFocus();
+        this.options.changed();
+    }
+    submitField() {
+        const field = this.field;
+        if (!field)
+            return;
+        const value = field.input.getValue().trim();
+        if (!value)
+            return;
+        this.closeField();
+        void this.attempt(async () => {
+            if (field.kind === 'address')
+                return this.openPage(normalizeAddress(value));
+            if (field.kind === 'port')
+                return this.attachApp(normalizeDevTools(value));
+            const launched = await this.options.call('terminal.annotations.launch', { path: value });
+            await this.refreshTarget();
+            this.view = 'notes';
+            this.syncFocus();
+            await this.toggleInspect(true);
+            return `Started ${launched.app?.name ?? 'the app'} and attached to its windows.`;
+        });
+    }
+    async showApps() {
+        this.view = 'apps';
+        this.syncFocus();
+        this.appList.setRows(this.appRows());
+        this.options.changed();
+        try {
+            this.apps = (await this.options.call('terminal.annotations.discover')).apps;
+        }
+        catch (error) {
+            this.apps = [];
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+        if (this.disposed)
+            return;
+        this.appList.setRows(this.appRows());
+        // The first app found is the likely choice.
+        const first = this.apps[0];
+        this.appList.select(first ? `app:${first.port}` : 'launch');
+        this.options.changed();
+    }
+    appRows() {
+        const rows = [];
+        const group = 'Apps with a DevTools port on this computer';
+        if (!this.apps)
+            rows.push({ id: 'looking', label: 'Looking for apps…', group, disabled: true });
+        else if (!this.apps.length)
+            rows.push({ id: 'none', label: 'None found on ports 9222–9230', group, detail: 'start one below', disabled: true, tone: 'dim' });
+        for (const app of this.apps ?? []) {
+            rows.push({
+                id: `app:${app.port}`, label: app.name, group, tone: 'accent', data: { kind: 'app', app },
+                detail: `${app.browser} · port ${app.port} · ${app.windows} window${app.windows === 1 ? '' : 's'}`
+            });
+        }
+        rows.push({ id: 'launch', label: 'Start an app with a DevTools port…', group: 'Other ways', detail: 'Electron or Chromium app', data: { kind: 'launch' } }, { id: 'port', label: 'Type a DevTools port…', group: 'Other ways', detail: 'an app started with --remote-debugging-port', data: { kind: 'port' } }, { id: 'bridge', label: 'Use the page bridge…', group: 'Other ways', detail: 'a web view with no DevTools port', data: { kind: 'bridge' } }, { id: 'web', label: 'Annotate a web page instead…', group: 'Other ways', detail: 'opens a browser window', data: { kind: 'web' } });
+        return rows;
+    }
+    chooseApp(row) {
+        if (row.kind === 'port')
+            return this.openField('port');
+        if (row.kind === 'launch')
+            return this.openField('path');
+        if (row.kind === 'web') {
+            this.view = 'notes';
+            return this.openField('address');
+        }
+        if (row.kind === 'bridge')
+            return this.attempt(() => this.attachBridge());
+        return this.attempt(async () => {
+            await this.attachApp(row.app.endpoint, row.app.name);
+            return `Attached to ${row.app.name}.`;
+        });
+    }
+    // ---- Notes ------------------------------------------------------------------------------------
     async reload() {
         try {
             const result = await this.options.call('terminal.annotations.list');
@@ -108,30 +281,38 @@ export class AnnotatePage {
         }
         if (this.disposed)
             return;
-        this.list.setRows(this.rows());
+        this.noteList.setRows(this.rows());
+        this.allList.setRows(this.allRows());
         this.options.changed();
     }
+    /** The Annotate tab: this session's unsent and sent annotations. */
     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;
+        const waiting = unsent(this.notes ?? [], this.sessionId);
+        const sent = (this.notes ?? []).filter(note => section(note, this.sessionId) === 'Sent');
+        const row = (note, group) => {
+            const delivery = note.delivery;
+            const state = delivery.state === 'sent' ? `sent · ${describeTarget(note.target)}`
+                : `${describeTarget(note.target)}${delivery.confirm ? ' · confirm before sending' : delivery.autoSend ? ' · sends when the agent finishes' : ''}`;
+            return {
+                id: `note:${note.id}`, label: clip(note.body.replace(/\s+/g, ' '), 60), group, detail: state,
+                tone: delivery.state === 'sent' ? 'muted' : delivery.confirm ? 'warning' : 'accent',
+                data: { kind: 'note', note }
+            };
+        };
+        return [...waiting.map(note => row(note, `Unsent (${waiting.length})`)), ...sent.map(note => row(note, 'Sent'))];
     }
-    queued() {
-        return (this.notes ?? []).filter(note => section(note, this.sessionId) === 'Queue');
+    shared(note) {
+        return note.grants.some(grant => grant.principal.sessionId && grant.principal.sessionId === this.sessionId);
+    }
+    /** The All annotations tab: every saved annotation. */
+    allRows() {
+        return (this.notes ?? []).map(note => ({
+            id: `note:${note.id}`, label: clip(note.body.replace(/\s+/g, ' '), 60), group: 'Annotations',
+            detail: `${describeTarget(note.target)} · ${note.status}${this.shared(note) ? ' · shared here' : ''}`,
+            tone: note.status === 'resolved' ? 'dim' : this.shared(note) ? 'success' : 'muted',
+            searchText: `${note.body} ${note.source.url} ${note.source.title} ${note.tags.join(' ')}`,
+            data: { kind: 'note', note }
+        }));
     }
     /** Polls the inspector for the person's next comment, and the notes every few seconds. */
     schedule() {
@@ -184,9 +365,12 @@ export class AnnotatePage {
         await this.refreshTarget();
         this.options.changed();
     }
+    /** Runs one action at a time; a key pressed meanwhile is answered, never dropped silently. */
     async attempt(work) {
-        if (this.busy)
+        if (this.busy) {
+            this.options.ui.notify('Still working on the last step. Try again in a moment.', 'info');
             return;
+        }
         this.busy = true;
         try {
             const message = await work();
@@ -202,21 +386,8 @@ export class AnnotatePage {
         }
         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.';
-        });
+    sendAll() {
+        return this.attempt(() => sendUnsent(this.options.call, this.options.ui));
     }
     chooseWindow() {
         return this.attempt(async () => {
@@ -233,16 +404,24 @@ export class AnnotatePage {
             await this.refreshTarget();
         });
     }
-    async noteMenu(note) {
+    async noteMenu(note, from) {
         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 pendingHere = section(note, this.sessionId) === 'Unsent';
+        const choices = from === 'annotate'
+            ? [
+                ANNOTATE_ACTIONS.reveal,
+                ...(pendingHere ? [note.delivery?.confirm ? ANNOTATE_ACTIONS.confirm : ANNOTATE_ACTIONS.send] : []),
+                ANNOTATE_ACTIONS.edit,
+                ANNOTATE_ACTIONS.resolve,
+                ANNOTATE_ACTIONS.delete
+            ]
+            : [
+                ANNOTATE_ACTIONS.reveal,
+                ANNOTATE_ACTIONS.edit,
+                note.status === 'open' ? ANNOTATE_ACTIONS.resolve : ANNOTATE_ACTIONS.reopen,
+                ...(note.status === 'open' ? [this.shared(note) ? ANNOTATE_ACTIONS.unshare : ANNOTATE_ACTIONS.share] : []),
+                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)
@@ -250,21 +429,11 @@ export class AnnotatePage {
                 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;
+                return describeSend(await call('terminal.annotations.send', { ids: [id] }));
             });
         if (choice === ANNOTATE_ACTIONS.edit)
             return this.attempt(async () => {
@@ -273,58 +442,116 @@ export class AnnotatePage {
                     return;
                 await call('terminal.annotations.update', { id, expectedVersion: note.version, patch: { body } });
             });
-        if (choice === ANNOTATE_ACTIONS.resolve)
+        if (choice === ANNOTATE_ACTIONS.resolve || choice === ANNOTATE_ACTIONS.reopen)
+            return this.attempt(async () => {
+                await call('terminal.annotations.update', { id, expectedVersion: note.version, patch: { status: choice === ANNOTATE_ACTIONS.resolve ? 'resolved' : 'open' } });
+                return choice === ANNOTATE_ACTIONS.resolve ? 'Resolved.' : 'Reopened.';
+            });
+        if (choice === ANNOTATE_ACTIONS.share || choice === ANNOTATE_ACTIONS.unshare)
             return this.attempt(async () => {
-                await call('terminal.annotations.update', { id, expectedVersion: note.version, patch: { status: 'resolved' } });
-                return 'Resolved.';
+                await call(choice === ANNOTATE_ACTIONS.share ? 'terminal.annotations.share' : 'terminal.annotations.unshare', { id });
+                return choice === ANNOTATE_ACTIONS.share ? 'Shared with this session. It is unsent until you send it.' : 'No longer shared with this session.';
             });
         if (choice === ANNOTATE_ACTIONS.delete)
             return this.attempt(async () => {
-                if (!await ui.confirm('Delete this note?', 'It cannot be restored.'))
+                if (!await ui.confirm('Delete this annotation?', 'It cannot be restored.'))
                     return;
                 await call('terminal.annotations.delete', { id, expectedVersion: note.version });
             });
     }
+    // ---- Input and rendering -------------------------------------------------------------------------
+    currentList() {
+        if (this.tab === 'all')
+            return this.allList;
+        return this.view === 'apps' ? this.appList : this.noteList;
+    }
     handleMouse(event) {
-        return this.list.handleMouse(event);
+        return this.currentList().handleMouse({ ...event, y: event.y - this.listTop });
     }
     handleInput(data) {
+        if (this.tab === 'all') {
+            if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
+                this.selectTab('annotate');
+                return true;
+            }
+            if (matchesKey(data, 'escape'))
+                return this.allList.query ? this.allList.handleInput(data) : false;
+            return this.allList.handleInput(data);
+        }
+        if (this.field) {
+            if (matchesKey(data, 'escape')) {
+                this.closeField();
+                return true;
+            }
+            if (matchesKey(data, 'enter')) {
+                this.submitField();
+                return true;
+            }
+            this.field.input.handleInput(data);
+            return true;
+        }
+        if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
+            this.selectTab('all');
+            return true;
+        }
+        if (this.view === 'apps') {
+            if (matchesKey(data, 'escape')) {
+                this.view = 'notes';
+                this.syncFocus();
+                return true;
+            }
+            if (data === 'r') {
+                void this.showApps();
+                return true;
+            }
+            return this.appList.handleInput(data);
+        }
         if (data === 'i') {
             void this.attempt(() => this.toggleInspect(!this.target?.inspecting));
             return true;
         }
         if (data === 's') {
-            void this.sendQueue();
+            void this.sendAll();
             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 }); });
+        if (data === 'o') {
+            this.openField('address');
+            return true;
+        }
+        if (data === 'a') {
+            void this.showApps();
             return true;
         }
-        return this.list.handleInput(data);
+        return this.noteList.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 kind = !target ? 'No window yet' : 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.')
+            !target
+                ? theme.fg('dim', 'Type a page address, or press a to annotate a desktop app.')
+                : target.inspecting
+                    ? theme.fg('success', '● Inspecting: hover a component in the window and click it. The agent can read every annotation.')
+                    : 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));
+        if (this.field) {
+            const { label } = FIELDS[this.field.kind];
+            const prefix = `${theme.fg('accent', '›')} ${theme.bold(label)}  `;
+            const room = Math.max(1, width - visibleWidth(prefix));
+            lines.push('', prefix + (this.field.input.render(room)[0] ?? ''));
+        }
         lines.push('');
         return lines.map(line => truncateToWidth(line, width, ''));
     }
@@ -332,10 +559,17 @@ export class AnnotatePage {
         const theme = this.options.theme();
         if (width < 1 || rows < 1)
             return [];
+        if (this.tab === 'all') {
+            this.listTop = 0;
+            if (!this.notes)
+                return [theme.fg('dim', this.error ? `Could not read web annotations: ${this.error}` : 'Reading web annotations…')];
+            return this.allList.render(width, rows).slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
         const header = this.header(width);
+        this.listTop = header.length;
         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, theme.fg('dim', 'Reading annotations…')].slice(0, rows);
+        const body = this.currentList().render(width, Math.max(1, rows - header.length));
         return [...header, ...body].slice(0, rows).map(line => truncateToWidth(line, width, ''));
     }
 }

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

@@ -194,10 +194,11 @@ export class BrowserPage {
         if (row.hub) {
             const entry = row.hub;
             const installed = this.snapshot?.hub?.installed.some(receipt => receipt.entry.id === entry.id && receipt.entry.version === entry.version);
-            actions.push({ id: 'preview', label: 'Preview reviewed content', run: async () => {
-                    const page = await this.options.call('terminal.browser.hubPreview', { id: entry.id, version: entry.version });
-                    this.showContent(page.content + (page.done ? '' : '\n\n[Preview limited to first page.]'));
-                } });
+            if (entry.delivery.kind !== 'pi-package')
+                actions.push({ id: 'preview', label: 'Preview reviewed content', run: async () => {
+                        const page = await this.options.call('terminal.browser.hubPreview', { id: entry.id, version: entry.version });
+                        this.showContent(page.content + (page.done ? '' : '\n\n[Preview limited to first page.]'));
+                    } });
             if (!installed)
                 actions.push({ id: 'install', label: `Install ${entry.version}`, run: async () => {
                         if (!await this.options.ui.confirm(`Install ${entry.title}?`, `${entry.description}\nPublisher: ${entry.publisher}\nLicense: ${entry.license}\nSource: ${entry.sourceUrl}\nVersion: ${entry.version}\nInstallation does not grant trust, enablement, credentials or permissions.`))