@xingular/harness 1.1.1 → 1.3.1-unstable.0

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

@@ -1,4 +1,4 @@
-import { fuzzyFilter, matchesKey, truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
+import { fuzzyFilter, matchesKey, parseColor, truncateToWidth, visibleWidth } from '@earendil-works/pi-tui';
 import { safeText, selectedRow, selectionMuted, selectionText } from "./chrome.js";
 import { SEARCH_FIELD_ROWS, SearchField, searchFieldRowsFor } from "./search.js";
 import { isPrimaryClick } from "./mouse.js";
@@ -25,7 +25,10 @@ export class FilterList {
     get total() { return this.rows.length; }
     get shown() { return this.visible.length; }
     /** Rows the list would use if nothing cut it: the search field, headings and rows. */
-    get height() { return (this.searchVisible() ? this.renderedSearchRows : 0) + this.entries().length; }
+    get height() {
+        return (this.searchVisible() ? this.renderedSearchRows : 0)
+            + this.entries().reduce((height, entry) => height + (entry.row?.subtitle === undefined ? 1 : 2), 0);
+    }
     /** Rows at the top of `render` that a frame must keep when it has to cut the list. */
     get pinnedRows() { return this.searchVisible() ? this.renderedSearchRows : 0; }
     setRows(rows) {
@@ -61,6 +64,10 @@ export class FilterList {
     }
     invalidate() { this.search.invalidate(); }
     limit() { return Math.max(1, Math.floor(this.options.limit?.() ?? Number.POSITIVE_INFINITY)); }
+    rowGap() {
+        const gap = this.options.rowGap ?? 0;
+        return Number.isFinite(gap) ? Math.max(0, Math.floor(gap)) : 0;
+    }
     mode() { return this.options.search ?? 'always'; }
     canSearch() { return this.mode() === 'always'; }
     searchVisible() { return this.canSearch() || this.query.length > 0; }
@@ -68,7 +75,7 @@ export class FilterList {
     refilter() {
         const query = this.query.trim();
         this.visible = query
-            ? fuzzyFilter(this.rows, query, row => row.searchText ?? `${row.label} ${row.detail ?? ''} ${row.group ?? ''}`)
+            ? fuzzyFilter(this.rows, query, row => row.searchText ?? `${row.label} ${row.subtitle ?? ''} ${row.detail ?? ''} ${row.group ?? ''}`)
             : this.rows;
         if (!this.visible.some(row => row.id === this.selectedId && !row.disabled))
             this.selectedId = this.firstSelectable()?.id;
@@ -136,15 +143,20 @@ export class FilterList {
     entries() {
         const entries = [];
         let last;
-        for (const row of this.visible) {
+        const gap = this.rowGap();
+        for (const [index, row] of this.visible.entries()) {
             if (!this.query && row.group && row.group !== last)
                 entries.push({ heading: row.group });
             last = row.group;
             entries.push({ row });
+            if (index < this.visible.length - 1) {
+                for (let line = 0; line < gap; line += 1)
+                    entries.push({ spacer: true });
+            }
         }
         return entries;
     }
-    line(row, width) {
+    lines(row, width) {
         const theme = this.options.theme();
         const selected = row.id === this.selectedId;
         const detail = row.detail ? safeText(row.detail) : '';
@@ -153,10 +165,40 @@ export class FilterList {
         const label = truncateToWidth(safeText(row.label), Math.max(0, room - (showDetail ? visibleWidth(detail) + 2 : 0)), '…');
         const gap = ' '.repeat(Math.max(0, room - visibleWidth(label) - (showDetail ? visibleWidth(detail) : 0)));
         const tone = (text) => theme.fg(row.tone ?? 'muted', text);
-        const main = (selected ? '❯ ' : '  ') + label;
-        if (selected)
-            return selectedRow(selectionText(theme, main) + gap + (showDetail ? selectionMuted(theme, detail) : ''), width, theme);
-        return (row.disabled ? theme.fg('dim', main) : main) + gap + (showDetail ? tone(detail) : '');
+        const prefix = selected ? '❯ ' : '  ';
+        const labelText = selected || row.disabled || !row.labelParts?.length ? label : this.labelParts(row.labelParts, label, theme);
+        const main = prefix + label;
+        const primary = selected
+            ? selectedRow(selectionText(theme, main) + gap + (showDetail ? selectionMuted(theme, detail) : ''), width, theme)
+            : (row.disabled ? theme.fg('dim', main) : prefix + labelText) + gap + (showDetail ? tone(detail) : '');
+        if (row.subtitle === undefined)
+            return [primary];
+        const subtitle = truncateToWidth(`  ${safeText(row.subtitle)}`, width, '…');
+        const secondary = selected
+            ? selectedRow(selectionMuted(theme, subtitle), width, theme)
+            : theme.fg(row.disabled ? 'dim' : 'muted', subtitle);
+        return [primary, secondary];
+    }
+    labelParts(parts, visibleLabel, theme) {
+        const source = parts.map(part => safeText(part.text)).join('');
+        const truncated = visibleWidth(source) > visibleWidth(visibleLabel);
+        let remaining = Math.max(0, visibleWidth(visibleLabel) - (truncated ? 1 : 0));
+        const output = [];
+        for (const part of parts) {
+            if (remaining <= 0)
+                break;
+            const text = safeText(part.text);
+            const fitted = truncateToWidth(text, remaining, '');
+            if (fitted) {
+                output.push(part.color ? theme.style(fitted, { fg: parseColor(part.color) }) : part.tone ? theme.fg(part.tone, fitted) : fitted);
+            }
+            remaining -= visibleWidth(fitted);
+            if (visibleWidth(fitted) < visibleWidth(text))
+                break;
+        }
+        if (truncated)
+            output.push('…');
+        return output.join('');
     }
     /** `rows` is the most the list may use, the search row included. */
     render(width, rows) {
@@ -186,11 +228,51 @@ export class FilterList {
             return lines.map(line => truncateToWidth(line, width, ''));
         }
         const at = Math.max(0, entries.findIndex(entry => entry.row?.id === this.selectedId));
-        const start = Math.max(0, Math.min(Math.max(0, entries.length - budget), at - Math.floor(budget / 2)));
-        for (const entry of entries.slice(start, start + budget)) {
-            lines.push(entry.row ? this.line(entry.row, width) : theme.fg('dim', safeText(entry.heading ?? '')));
-            this.renderedRows.push(entry.row);
+        let start = at;
+        let end = at + 1;
+        let used = entries[at]?.row?.subtitle === undefined ? 1 : 2;
+        let preferBefore = true;
+        while (start > 0 || end < entries.length) {
+            const before = entries[start - 1];
+            const after = entries[end];
+            const beforeHeight = before ? (before.row?.subtitle === undefined ? 1 : 2) : Number.POSITIVE_INFINITY;
+            const afterHeight = after ? (after.row?.subtitle === undefined ? 1 : 2) : Number.POSITIVE_INFINITY;
+            if (preferBefore && before && used + beforeHeight <= budget) {
+                start -= 1;
+                used += beforeHeight;
+            }
+            else if (after && used + afterHeight <= budget) {
+                end += 1;
+                used += afterHeight;
+            }
+            else if (before && used + beforeHeight <= budget) {
+                start -= 1;
+                used += beforeHeight;
+            }
+            else
+                break;
+            preferBefore = !preferBefore;
+        }
+        if (entries[start]?.spacer)
+            start += 1;
+        if (entries[end - 1]?.spacer)
+            end -= 1;
+        for (const entry of entries.slice(start, end)) {
+            if (entry.row) {
+                const rendered = this.lines(entry.row, width);
+                lines.push(...rendered);
+                this.renderedRows.push(...rendered.map(() => entry.row));
+            }
+            else if (entry.spacer) {
+                lines.push('');
+                this.renderedRows.push(undefined);
+            }
+            else {
+                lines.push(theme.fg('dim', safeText(entry.heading ?? '')));
+                this.renderedRows.push(undefined);
+            }
         }
-        return lines.map(line => truncateToWidth(line, width, ''));
+        this.renderedRows = this.renderedRows.slice(0, rowBudget);
+        return lines.slice(0, rowBudget).map(line => truncateToWidth(line, width, ''));
     }
 }

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

@@ -1,4 +1,4 @@
-import { matchesKey } from '@earendil-works/pi-tui';
+import { matchesKey, visibleWidth } from '@earendil-works/pi-tui';
 import { CENTER_DIALOG_PAD, CHROME_PAD, centerDialogBodyRows, centerDialogContentWidth, centerDialogFrame, centerDialogVerticalPad, contentWidth, pageBodyRows, pageFrame, tabIndexAt, tabStrip } from "./chrome.js";
 import { centeredDialogHost, dialogFits, pageRows } from "./dialogGeometry.js";
 export class PageOverlay {
@@ -132,11 +132,27 @@ export class PageOverlay {
             contentWidth: contentWidth(width),
             centered
         };
-        const footer = page.ownsNavigation ? `Esc back/close · ${page.hint()}` : [
-            page.hint(),
-            tabs.length > 1 && !page.ownsNavigation ? 'Tab/Shift+Tab sections' : '',
-            'Esc close'
+        const pageHint = page.hint();
+        const returnsToPage = pageHint.split(' · ').includes('Esc back');
+        const escapeHint = page.ownsNavigation ? 'Esc back/close' : returnsToPage ? 'Esc back' : 'Esc close';
+        const fullFooter = page.ownsNavigation ? `${escapeHint} · ${pageHint}` : [
+            pageHint,
+            tabs.length > 1 ? 'Tab/Shift+Tab sections' : '',
+            returnsToPage ? '' : escapeHint
         ].filter(Boolean).join(' · ');
+        const footerWidth = Math.max(0, width - CHROME_PAD * 2);
+        const primaryHint = pageHint.split(' · ')[0] ?? '';
+        const compactFooter = [
+            primaryHint,
+            !page.ownsNavigation && tabs.length > 1 ? 'Tab/⇧Tab' : '',
+            escapeHint
+        ].filter(Boolean).join(' · ');
+        const navigationFooter = [!page.ownsNavigation && tabs.length > 1 ? 'Tab/⇧Tab' : '', escapeHint].filter(Boolean).join(' · ');
+        const footer = visibleWidth(fullFooter) <= footerWidth
+            ? fullFooter
+            : visibleWidth(compactFooter) <= footerWidth
+                ? compactFooter
+                : visibleWidth(navigationFooter) <= footerWidth ? navigationFooter : escapeHint;
         return pageFrame({
             title: '',
             headerLine: tabStrip(tabs, page.activeTab(), inner, theme, 'top', this.hoveredTab),

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

@@ -1,5 +1,5 @@
 /**
- * The annotate pane (`/plugin:annotate`, PROP-0018): the person works in a browser window or an app's own
+ * The annotate pane (`/annotate:` and `/annotate: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

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.`))

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

@@ -1,5 +1,5 @@
 /**
- * The Hub page: the reviewed catalog of skills, plugins and reusable documents. Installing asks first,
+ * The Hub page: the Community catalog and all installed Hub receipts. Installing asks first,
  * installs exactly the listed version, and leaves code switched off and untrusted.
  */
 import type { Theme } from '@earendil-works/pi-coding-agent';
@@ -15,12 +15,20 @@ export interface HubPageOptions {
 }
 export declare class HubPage implements TerminalPage {
     private readonly options;
+    readonly presentation = "fullscreen";
     private catalog;
     private section;
     private error;
+    private refreshError;
+    private refreshing;
+    private previewTitle;
+    private previewText;
+    private previewOffset;
+    private previewRows;
     private busy;
     private disposed;
     private readonly list;
+    private pointerLayout?;
     constructor(options: HubPageOptions);
     get focused(): boolean;
     set focused(value: boolean);
@@ -29,11 +37,16 @@ export declare class HubPage implements TerminalPage {
     tabs(): readonly TabInfo[];
     activeTab(): string;
     hint(): string;
+    private refreshOnOpen;
     private load;
     private fill;
     private rows;
     private activateRow;
+    private previewEntry;
+    private manageReceipt;
+    private status;
     handleMouse(event: TerminalMouseInput): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
     handleInput(data: string): boolean;
+    private entryInspector;
     render(width: number, rows: number): string[];
 }

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

@@ -1,47 +1,87 @@
 import { matchesKey, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
 import { installHubEntry } from "../../hubMenu.js";
-import { safeText } from "../chrome.js";
+import { inspectorListWidth, safeText, splitColumns } from "../chrome.js";
 import { FilterList } from "../list.js";
 const SECTIONS = [
     { id: 'catalog', title: 'Catalog' },
     { id: 'installed', title: 'Installed' }
 ];
 const REFRESH = 'action:refresh';
+const installedId = (id, version) => `installed:${id}@${version}`;
 export class HubPage {
     options;
+    presentation = 'fullscreen';
     catalog;
     section = 'catalog';
     error;
+    refreshError;
+    refreshing = false;
+    previewTitle;
+    previewText;
+    previewOffset = 0;
+    previewRows = 1;
     busy = false;
     disposed = false;
     list;
+    pointerLayout;
     constructor(options) {
         this.options = options;
         this.list = new FilterList({
-            theme: options.theme, search: 'always', noun: ['entry', 'entries'], empty: 'The catalog has no entries.',
+            theme: options.theme, search: 'always', noun: ['entry', 'entries'], empty: 'No Community entries have been published yet.',
             onActivate: row => { void this.activateRow(row.id); }
         });
     }
     get focused() { return this.list.focused; }
     set focused(value) { this.list.focused = value; }
-    activate() { if (!this.catalog)
-        void this.load(false); }
+    activate() { void this.refreshOnOpen(); }
     dispose() { this.disposed = true; }
     tabs() { return SECTIONS; }
     activeTab() { return this.section; }
     hint() {
-        return this.list.query ? 'Enter open · Esc clear' : this.section === 'catalog' ? 'Enter review and install · type to search' : 'Select an installed entry · type to search';
+        if (this.previewText !== undefined)
+            return '↑↓ scroll · PgUp/PgDn page · Esc back';
+        if (this.list.query)
+            return 'Enter open · Esc clear';
+        if (this.section === 'installed')
+            return 'Enter manage receipt · type to search';
+        const selectedId = this.list.selected?.id;
+        const entry = this.catalog?.entries.find(candidate => candidate.channel === 'community' && candidate.id + '@' + candidate.version === selectedId);
+        if (entry?.delivery.kind === 'pi-package')
+            return 'Enter install exact version · type to search';
+        return entry ? 'Enter preview or install · type to search' : 'Enter refresh catalog · type to search';
+    }
+    async refreshOnOpen() {
+        await this.load(false);
+        if (!this.disposed)
+            await this.load(true);
     }
     async load(refresh) {
+        if (refresh) {
+            this.refreshing = true;
+            this.options.changed();
+        }
         try {
             const catalog = await this.options.call('hub.list', refresh ? { refresh: true } : {});
             this.catalog = catalog;
             this.error = undefined;
-            if (refresh && catalog.error)
-                this.options.ui.notify(`${catalog.error} Using ${catalog.origin} content.`, 'warning');
+            if (refresh) {
+                this.refreshError = catalog.error ?? undefined;
+                if (catalog.error)
+                    this.options.ui.notify(`${catalog.error} Using ${catalog.origin} content.`, 'warning');
+            }
+            else if (catalog.error) {
+                this.refreshError = catalog.error;
+            }
         }
         catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
+            const message = error instanceof Error ? error.message : String(error);
+            if (refresh)
+                this.refreshError = message;
+            else if (!this.catalog)
+                this.error = message;
+        }
+        finally {
+            this.refreshing = false;
         }
         if (this.disposed)
             return;
@@ -53,22 +93,24 @@ export class HubPage {
     }
     rows() {
         if (this.section === 'installed') {
+            const receipts = this.catalog?.installed ?? [];
             return [
-                ...(this.catalog?.installed ?? []).map(receipt => ({
-                    id: 'installed:' + receipt.entry.id + '@' + receipt.entry.version,
+                ...receipts.map(receipt => ({
+                    id: installedId(receipt.entry.id, receipt.entry.version),
                     label: safeText(receipt.entry.title),
-                    group: receipt.entry.category,
-                    detail: (receipt.state ?? 'installed') + ' · ' + receipt.entry.version,
+                    group: safeText(receipt.entry.category),
+                    detail: `${receipt.entry.channel} · ${receipt.state ?? 'installed'} · ${receipt.entry.version}`,
                     tone: receipt.state === 'installed' ? 'success' : 'warning',
-                    searchText: receipt.entry.title + ' ' + receipt.entry.category + ' ' + receipt.entry.id + ' ' + receipt.entry.publisher + ' ' + (receipt.state ?? '')
-                }))
+                    searchText: `${receipt.entry.title} ${receipt.entry.category} ${receipt.entry.id} ${receipt.entry.publisher} ${receipt.entry.channel} ${receipt.state ?? ''}`
+                })),
+                { id: REFRESH, label: '⟳ Refresh catalog', group: 'Actions', tone: 'accent' }
             ];
         }
-        const entries = [...(this.catalog?.entries ?? [])].sort((left, right) => left.category.localeCompare(right.category));
+        const entries = (this.catalog?.entries ?? []).filter(entry => entry.channel === 'community').sort((left, right) => left.category.localeCompare(right.category));
         return [
             ...entries.map(entry => ({
                 id: entry.id + '@' + entry.version, label: safeText(entry.title), group: safeText(entry.category),
-                detail: entry.version, tone: 'muted', searchText: entry.title + ' ' + entry.category + ' ' + entry.id + ' ' + entry.publisher
+                detail: entry.version, tone: 'muted', searchText: `${entry.title} ${entry.category} ${entry.id} ${entry.publisher} ${entry.tags.join(' ')}`
             })),
             { id: REFRESH, label: '⟳ Refresh catalog', group: 'Actions', tone: 'accent' }
         ];
@@ -82,20 +124,103 @@ export class HubPage {
                 await this.load(true);
                 return;
             }
-            if (id.startsWith('installed:'))
+            if (id.startsWith('installed:')) {
+                const receipt = this.catalog?.installed.find(candidate => installedId(candidate.entry.id, candidate.entry.version) === id);
+                if (receipt)
+                    await this.manageReceipt(receipt);
                 return;
-            const entry = this.catalog?.entries.find(candidate => candidate.id + '@' + candidate.version === id);
-            if (entry)
-                await installHubEntry(this.options.ui, this.options.call, entry);
+            }
+            const entry = this.catalog?.entries.find(candidate => candidate.channel === 'community' && candidate.id + '@' + candidate.version === id);
+            if (entry) {
+                const installAction = `Install exact version ${entry.version}`;
+                const actions = entry.delivery.kind === 'pi-package'
+                    ? [installAction, 'Back']
+                    : ['Preview reviewed content', installAction, 'Back'];
+                const action = await this.options.ui.select(`${safeText(entry.title)} · ${entry.version}`, actions);
+                if (action === 'Preview reviewed content')
+                    await this.previewEntry(entry);
+                else if (action === installAction) {
+                    await installHubEntry(this.options.ui, this.options.call, entry);
+                    await this.load(false);
+                }
+            }
         }
         finally {
             this.busy = false;
         }
     }
+    async previewEntry(entry) {
+        if (entry.delivery.kind === 'pi-package')
+            return;
+        try {
+            const page = await this.options.call('terminal.browser.hubPreview', { id: entry.id, version: entry.version });
+            this.previewTitle = safeText(entry.title);
+            this.previewText = page.content + (page.done ? '' : '\n\n[Preview limited to first page.]');
+            this.previewOffset = 0;
+            this.pointerLayout = undefined;
+            this.options.changed();
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+    }
+    async manageReceipt(receipt) {
+        const action = await this.options.ui.select(`${receipt.entry.title} · ${receipt.entry.channel} · ${receipt.entry.version}`, ['Uninstall this version', 'Back']);
+        if (action !== 'Uninstall this version')
+            return;
+        const confirmed = await this.options.ui.confirm(`Uninstall ${receipt.entry.title}?`, `This removes only resources recorded by the ${receipt.entry.channel} receipt ${receipt.entry.id}@${receipt.entry.version} and revokes their attachment choices.`);
+        if (!confirmed)
+            return;
+        try {
+            await this.options.call('hub.uninstall', { id: receipt.entry.id, version: receipt.entry.version });
+            this.options.ui.notify(`Uninstalled ${receipt.entry.title} ${receipt.entry.version}.`, 'info');
+            await this.load(false);
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+    }
+    status() {
+        const catalog = this.catalog;
+        const error = this.refreshError ?? catalog.error;
+        const lastRefresh = catalog.refreshedAt ? ` · last refreshed ${catalog.refreshedAt}` : '';
+        if (this.refreshing)
+            return { text: `${catalog.origin} catalog · refreshing…${lastRefresh}`, tone: 'muted' };
+        if (error)
+            return { text: `${catalog.origin} catalog · refresh failed: ${error}${lastRefresh}`, tone: 'warning' };
+        return { text: `${catalog.origin} catalog${catalog.refreshedAt ? ` · refreshed ${catalog.refreshedAt}` : ''}`, tone: 'dim' };
+    }
     handleMouse(event) {
-        return this.list.handleMouse(event);
+        if (this.previewText !== undefined)
+            return { handled: true, render: false };
+        const layout = this.pointerLayout;
+        if (!layout)
+            return undefined;
+        if (event.x < 0 || event.x >= layout.width || event.y < layout.top || event.y >= layout.top + layout.rows)
+            return { handled: true, render: false };
+        return this.list.handleMouse({ ...event, y: event.y - layout.top });
     }
     handleInput(data) {
+        if (this.previewText !== undefined) {
+            if (matchesKey(data, 'escape')) {
+                this.previewTitle = undefined;
+                this.previewText = undefined;
+                this.previewOffset = 0;
+                this.options.changed();
+                return true;
+            }
+            const page = Math.max(1, this.previewRows);
+            const delta = matchesKey(data, 'down') ? 1 : matchesKey(data, 'up') ? -1
+                : matchesKey(data, 'pageDown') ? page : matchesKey(data, 'pageUp') ? -page : 0;
+            if (matchesKey(data, 'home'))
+                this.previewOffset = 0;
+            else if (matchesKey(data, 'end'))
+                this.previewOffset = Number.MAX_SAFE_INTEGER;
+            else
+                this.previewOffset += delta;
+            this.options.changed();
+            return true;
+        }
         if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
             if (!this.list.query) {
                 this.section = this.section === 'catalog' ? 'installed' : 'catalog';
@@ -105,22 +230,61 @@ export class HubPage {
         }
         return this.list.handleInput(data);
     }
+    entryInspector(entry, installed, width, rows) {
+        const theme = this.options.theme();
+        if (width < 1 || rows < 1)
+            return [];
+        if (!entry)
+            return [theme.fg('muted', 'Select an entry to review its publisher, license, and version.')].slice(0, rows);
+        const lines = [theme.bold(safeText(entry.title)), '', ...wrapTextWithAnsi(safeText(entry.description), width), ''];
+        lines.push(`Category: ${safeText(entry.category)}`, `Publisher: ${safeText(entry.publisher)}`, `License: ${safeText(entry.license)}`, `Version: ${safeText(entry.version)}`, `Channel: ${safeText(entry.channel)}`, `ID: ${safeText(entry.id)}`);
+        lines.push('', ...wrapTextWithAnsi(theme.fg('dim', `Source: ${safeText(entry.sourceUrl)}`), width));
+        if (installed)
+            lines.push('', `Installed: ${safeText(installed.installedAt)}`, `Receipt: ${safeText(installed.state ?? 'installed')} · ${safeText(installed.entry.channel)}`);
+        if (entry.delivery.kind === 'pi-package')
+            lines.push('', theme.fg('warning', 'Package code stays switched off and untrusted until reviewed.'));
+        return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));
+    }
     render(width, rows) {
         const theme = this.options.theme();
         if (width < 1 || rows < 1)
             return [];
-        if (!this.catalog)
-            return [theme.fg(this.error ? 'error' : 'dim', this.error ? 'Could not read the catalog: ' + this.error : 'Reading the catalog…')];
+        if (this.previewText !== undefined) {
+            const content = this.previewText.split('\n').flatMap(line => wrapTextWithAnsi(safeText(line), width));
+            this.previewRows = Math.max(1, rows - 1);
+            this.previewOffset = Math.min(this.previewOffset, Math.max(0, content.length - this.previewRows));
+            const header = theme.bold(`Preview · ${this.previewTitle ?? 'Hub entry'} · ${this.previewOffset + 1}/${Math.max(1, content.length)}`);
+            return [header, ...content.slice(this.previewOffset, this.previewOffset + this.previewRows)]
+                .slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
+        if (!this.catalog) {
+            this.pointerLayout = undefined;
+            return [theme.fg(this.error ? 'error' : 'dim', this.error ? 'Could not read the catalog: ' + safeText(this.error) : 'Reading the catalog…')];
+        }
         const selectedId = this.list.selected?.id;
         const installed = this.section === 'installed'
-            ? this.catalog.installed.find(receipt => 'installed:' + receipt.entry.id + '@' + receipt.entry.version === selectedId)
+            ? this.catalog.installed.find(receipt => installedId(receipt.entry.id, receipt.entry.version) === selectedId)
             : undefined;
-        const entry = installed?.entry ?? this.catalog.entries.find(candidate => candidate.id + '@' + candidate.version === selectedId);
+        const entry = installed?.entry ?? this.catalog.entries.find(candidate => candidate.channel === 'community' && candidate.id + '@' + candidate.version === selectedId);
+        const status = this.status();
+        const statusLine = theme.fg(status.tone, truncateToWidth(safeText(status.text), width, ''));
+        const paneWidth = inspectorListWidth(width);
+        if (paneWidth !== undefined) {
+            const bodyRows = Math.max(0, rows - 1);
+            const rightWidth = Math.max(0, width - paneWidth - 3);
+            const listLines = this.list.render(paneWidth, bodyRows);
+            this.pointerLayout = { width: paneWidth, top: 1, rows: listLines.length };
+            return [statusLine, ...splitColumns(listLines, this.entryInspector(entry, installed, rightWidth, bodyRows), paneWidth, width, bodyRows, theme)]
+                .slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
         const detail = entry && rows >= 9
-            ? [...wrapTextWithAnsi(safeText(entry.description), width).slice(0, 3), entry.publisher + ' · ' + entry.license + ' · ' + entry.id,
-                ...(installed ? ['Installed ' + installed.installedAt + ' · ' + (installed.state ?? 'installed')] : [])]
+            ? [...wrapTextWithAnsi(safeText(entry.description), width).slice(0, 3), `${entry.publisher} · ${entry.license} · ${entry.id}`,
+                ...(installed ? [`Installed ${installed.installedAt} · ${installed.entry.channel} · ${installed.state ?? 'installed'}`] : [])]
             : [];
-        const lines = this.list.render(width, Math.max(2, rows - (detail.length ? detail.length + 1 : 0)));
+        const detailHeight = detail.length ? detail.length + 1 : 0;
+        const listLines = this.list.render(width, Math.max(1, rows - 1 - detailHeight));
+        this.pointerLayout = { width, top: 1, rows: Math.min(listLines.length, Math.max(0, rows - 1)) };
+        const lines = [statusLine, ...listLines];
         if (detail.length)
             lines.push('', ...detail.map(line => theme.fg('muted', safeText(line))));
         return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));

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

@@ -1,7 +1,7 @@
 /**
- * The Page notes page (`/plugin:notes`, `/plugin:annotate [url]`): notes a person keeps about web pages. A new note
+ * The Web annotations page (`/annotate:notes`, `/annotate:annotate [url]`): comments a person keeps about web pages. A new annotation
  * is captured in a visible browser window: the whole page, text the person selects, or an element
- * they click. A note is private until it is shared with this session, whose agent can then read it
+ * they click. An annotation is private until it is shared with this session, whose agent can then read it
  * with `page_notes_read` (PROP-0017).
  */
 import type { Theme } from '@earendil-works/pi-coding-agent';
@@ -18,7 +18,7 @@ export interface NotesPageOptions {
         input(title: string, placeholder?: string): Promise<string | undefined>;
     };
     changed(): void;
-    /** Start a new note as soon as the page opens (`/plugin:annotate [url]`), on this address when given. */
+    /** Start a new annotation as soon as the page opens (`/annotate:annotate [url]`), on this address when given. */
     start?: {
         url?: string;
     };
@@ -36,7 +36,7 @@ export declare const NOTE_KINDS: {
 };
 export declare const NOTE_ACTIONS: {
     readonly reveal: "Show it in the browser window";
-    readonly edit: "Edit the note";
+    readonly edit: "Edit the annotation";
     readonly resolve: "Mark resolved";
     readonly reopen: "Reopen";
     readonly share: "Let this session's agent read it";
@@ -65,7 +65,7 @@ export declare class NotesPage implements TerminalPage {
     rows(): ListRow<Row>[];
     private attempt;
     activateRow(row: Row): Promise<void>;
-    /** Opens the capture window, takes what the person points at, and saves their note. */
+    /** Opens the capture window, takes what the person points at, and saves their annotation. */
     newNote(startUrl?: string): Promise<void>;
     private noteMenu;
     handleMouse(event: TerminalMouseInput): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;