@xingular/harness 1.1.1 → 1.3.1-unstable.0

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

@@ -1,10 +1,10 @@
 import { truncateToWidth } from '@earendil-works/pi-tui';
 import { FilterList } from "../list.js";
-const TABS = [{ id: 'notes', title: 'Page notes' }];
+const TABS = [{ id: 'notes', title: 'Web annotations' }];
 export const NOTE_KINDS = { page: 'The whole page', text: 'Text I select in the window', element: 'An element I click in the window' };
 export const NOTE_ACTIONS = {
     reveal: 'Show it in the browser window',
-    edit: 'Edit the note',
+    edit: 'Edit the annotation',
     resolve: 'Mark resolved',
     reopen: 'Reopen',
     share: 'Let this session\'s agent read it',
@@ -31,7 +31,7 @@ export class NotesPage {
     constructor(options) {
         this.options = options;
         this.list = new FilterList({
-            theme: options.theme, search: 'always', noun: ['note', 'notes'], empty: 'No page notes yet',
+            theme: options.theme, search: 'always', noun: ['annotation', 'annotations'], empty: 'No web annotations yet',
             onActivate: row => { if (row.data)
                 void this.activateRow(row.data); }
         });
@@ -67,10 +67,10 @@ export class NotesPage {
         return note.grants.some(grant => grant.principal.sessionId && grant.principal.sessionId === this.sessionId);
     }
     rows() {
-        const rows = [{ id: 'new', label: 'New note on a page…', group: 'Actions', detail: 'opens a browser window', tone: 'accent', data: { kind: 'new' } }];
+        const rows = [{ id: 'new', label: 'New web annotation…', group: 'Actions', detail: 'opens a browser window', tone: 'accent', data: { kind: 'new' } }];
         for (const note of this.notes ?? []) {
             rows.push({
-                id: `note:${note.id}`, label: clip(note.body.replace(/\s+/g, ' '), 60), group: 'Notes',
+                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(' ')}`,
@@ -101,7 +101,7 @@ export class NotesPage {
             return this.newNote();
         return this.noteMenu(row.note);
     }
-    /** 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) {
         const { call, ui } = this.options;
         return this.attempt(async () => {
@@ -109,7 +109,7 @@ export class NotesPage {
             if (!url)
                 return;
             await call('terminal.annotations.open', { url });
-            const kind = await ui.select('What does the note point at?', Object.values(NOTE_KINDS));
+            const kind = await ui.select('What does the annotation point at?', Object.values(NOTE_KINDS));
             if (!kind)
                 return;
             let envelope;
@@ -127,18 +127,18 @@ export class NotesPage {
                 }
                 envelope = await call('terminal.annotations.capture', { captureId });
                 if (!envelope)
-                    return 'Nothing was selected in the browser window, so no note was made.';
+                    return 'Nothing was selected in the browser window, so no annotation was made.';
             }
-            const body = await ui.input('Note', 'What should be remembered about it?');
+            const body = await ui.input('Comment', 'What should change or be remembered?');
             if (!body?.trim())
-                return 'A note needs some text; nothing was saved.';
+                return 'An annotation needs a comment; nothing was saved.';
             const tags = (await ui.input('Tags (optional, comma separated)', '') ?? '').split(',').map(tag => tag.trim()).filter(Boolean);
-            const share = await ui.confirm('Share it with this session?', 'This session\'s agent can then read the note with page_notes_read. You can stop sharing it later.');
+            const share = await ui.confirm('Share it with this session?', 'This session\'s agent can then read the annotation with page_notes_read. You can stop sharing it later.');
             await call('terminal.annotations.create', {
                 source: { url: envelope.url, title: envelope.title, capturedAt: new Date().toISOString(), surface: 'terminal', representationHint: envelope.documentId },
                 target: envelope.target, body, tags, share
             });
-            return share ? 'Note saved and shared with this session.' : 'Note saved. It stays private until you share it.';
+            return share ? 'Annotation saved and shared with this session.' : 'Annotation saved. It stays private until you share it.';
         });
     }
     async noteMenu(note) {
@@ -163,7 +163,7 @@ export class NotesPage {
                 if (!body?.trim() || body === note.body)
                     return;
                 await call('terminal.annotations.update', { id, expectedVersion: note.version, patch: { body } });
-                return 'Note saved.';
+                return 'Annotation saved.';
             });
         if (choice === NOTE_ACTIONS.resolve || choice === NOTE_ACTIONS.reopen)
             return this.attempt(async () => {
@@ -172,14 +172,14 @@ export class NotesPage {
         if (choice === NOTE_ACTIONS.share || choice === NOTE_ACTIONS.unshare)
             return this.attempt(async () => {
                 await call(choice === NOTE_ACTIONS.share ? 'terminal.annotations.share' : 'terminal.annotations.unshare', { id });
-                return choice === NOTE_ACTIONS.share ? 'This session\'s agent can read the note.' : 'The note is no longer shared with this session.';
+                return choice === NOTE_ACTIONS.share ? 'This session\'s agent can read the annotation.' : 'The annotation is no longer shared with this session.';
             });
         if (choice === NOTE_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 });
-                return 'Note deleted.';
+                return 'Annotation deleted.';
             });
     }
     handleMouse(event) {
@@ -193,9 +193,9 @@ export class NotesPage {
         if (width < 1 || rows < 1)
             return [];
         if (this.error)
-            return [theme.fg('error', `Could not read page notes: ${this.error}`)];
+            return [theme.fg('error', `Could not read web annotations: ${this.error}`)];
         if (!this.notes)
-            return [theme.fg('dim', 'Reading page notes…')];
+            return [theme.fg('dim', 'Reading web annotations…')];
         return this.list.render(width, rows).slice(0, rows).map(line => truncateToWidth(line, width, ''));
     }
 }

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

@@ -1,8 +1,3 @@
-/**
- * The Plugins page: what this session loads, switched on or off, with trust for plugin code.
- * Enter opens what can be done with a row; nothing changes without a choice made here. A plugin
- * with settings has a Settings row that opens them as a subpage; Esc goes back to the list.
- */
 import type { Theme } from '@earendil-works/pi-coding-agent';
 import { type MenuCall, type MenuUi } from "../../pluginMenu.js";
 import type { TabInfo } from "../chrome.js";
@@ -18,14 +13,17 @@ export interface PluginsPageOptions {
 }
 export declare class PluginsPage implements TerminalPage {
     private readonly options;
+    readonly presentation = "fullscreen";
     private plugins;
     private section;
     private projectId;
+    private hubManagedIds;
     private error;
     private restart;
     private busy;
     private disposed;
     private readonly list;
+    private pointerLayout?;
     /** The plugin whose settings are open, or null on the list. */
     private settingsFor;
     private saved;
@@ -41,17 +39,21 @@ export declare class PluginsPage implements TerminalPage {
     private settingsPlugin;
     private reload;
     private fill;
-    /** The menu rows, with a Settings row after the last row of each plugin that has settings. */
+    /** Switch, trust, settings and package actions stay grouped under their owning plugin. */
     private rows;
     private menu;
     private key;
     private toRow;
     private open;
+    private installPackage;
+    private managePackage;
     private back;
     /** Flips a switch, or asks for a number inside the setting's range, and saves it. */
     private change;
     handleMouse(event: TerminalMouseInput): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
     handleInput(data: string): boolean;
+    private selectedPlugin;
+    private pluginInspector;
     render(width: number, rows: number): string[];
     private renderSettings;
 }

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

@@ -1,12 +1,21 @@
+/**
+ * The Plugins page: what this session loads, switched on or off, with trust for plugin code.
+ * Enter opens what can be done with a row; nothing changes without a choice made here. A plugin
+ * with settings has a Settings row that opens them as a subpage; Esc goes back to the list.
+ */
+import { describePlugin, surfaceBadge } from "../../../plugins/surfaces.js";
 import { matchesKey, truncateToWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
 import { BACK, applyPluginAction, menuRows, rowActions } from "../../pluginMenu.js";
-import { safeText } from "../chrome.js";
+import { inspectorListWidth, safeText, splitColumns } from "../chrome.js";
 import { FilterList } from "../list.js";
 const SECTIONS = [
     { id: 'plugins', title: 'Plugins' },
-    { id: 'trust', title: 'Trust' }
+    { id: 'trust', title: 'Trust' },
+    { id: 'packages', title: 'Packages' }
 ];
 const SETTINGS_ROW = 'settings:';
+const PACKAGE_ROW = 'package:';
+const INSTALL_PACKAGE = 'action:install-package';
 const isSwitch = (setting) => setting.min === 0 && setting.max === 1;
 const settingValueText = (setting) => isSwitch(setting)
     ? setting.value === 1 ? 'on' : 'off'
@@ -14,14 +23,17 @@ const settingValueText = (setting) => isSwitch(setting)
 const settingsOf = (plugin) => plugin.settings ?? [];
 export class PluginsPage {
     options;
+    presentation = 'fullscreen';
     plugins;
     section = 'plugins';
     projectId = null;
+    hubManagedIds = new Set();
     error;
     restart = false;
     busy = false;
     disposed = false;
     list;
+    pointerLayout;
     /** The plugin whose settings are open, or null on the list. */
     settingsFor = null;
     saved = false;
@@ -64,6 +76,12 @@ export class PluginsPage {
             this.projectId = (await call('plugins.session').catch(() => ({ projectId: null }))).projectId;
             this.plugins = await call('plugins.list');
             this.error = undefined;
+            this.hubManagedIds = new Set();
+            try {
+                const overview = await call('hub.list');
+                this.hubManagedIds = new Set(overview.installed.filter(receipt => receipt.entry.delivery.kind === 'pi-package').flatMap(receipt => receipt.resourceIds));
+            }
+            catch { /* Package actions still go through the receipt-aware Harness service. */ }
         }
         catch (error) {
             this.error = error instanceof Error ? error.message : String(error);
@@ -85,8 +103,17 @@ export class PluginsPage {
                 searchText: `${setting.label} ${setting.description}`
             })));
     }
-    /** The menu rows, with a Settings row after the last row of each plugin that has settings. */
+    /** Switch, trust, settings and package actions stay grouped under their owning plugin. */
     rows() {
+        if (this.section === 'packages')
+            return [
+                ...(this.plugins ?? []).filter(plugin => plugin.install).map(plugin => {
+                    const source = plugin.install.kind === 'folder' ? 'local folder' : 'package';
+                    const hub = this.hubManagedIds.has(plugin.id);
+                    return { id: `${PACKAGE_ROW}${plugin.id}`, group: safeText(plugin.title), label: 'Manage package', detail: `${source} · ${hub ? 'Hub' : 'local'} · ${plugin.version ?? plugin.install.source}`, tone: 'muted', searchText: `${plugin.title} ${plugin.install.source} ${plugin.version ?? ''} package ${hub ? 'Hub' : 'local'}` };
+                }),
+                { id: INSTALL_PACKAGE, group: 'Packages', label: 'Install package…', detail: 'Folder, npm or Git', tone: 'accent', searchText: 'install add package plugin npm Git folder' }
+            ];
         const menu = this.menu();
         const out = [];
         const placed = new Set();
@@ -101,25 +128,26 @@ export class PluginsPage {
             if (this.section === 'plugins' && last && settingsOf(row.plugin).length)
                 out.push(settingsRow(row.plugin));
         });
-        if (this.section === 'plugins') {
+        if (this.section === 'plugins')
             for (const plugin of this.plugins ?? [])
                 if (settingsOf(plugin).length && !placed.has(plugin.id))
                     out.push(settingsRow(plugin));
-        }
         return out;
     }
     menu() {
         const rows = menuRows(this.plugins ?? [], this.projectId);
-        return this.section === 'trust'
-            ? rows.filter(row => row.whole && Boolean(row.plugin.code))
-            : rows.filter(row => rowActions(row, this.projectId).some(action => action.startsWith('Switch ')));
+        if (this.section === 'trust')
+            return rows.filter(row => row.whole && Boolean(row.plugin.code));
+        if (this.section === 'packages')
+            return [];
+        return rows.filter(row => rowActions(row, this.projectId).some(action => action.startsWith('Switch ')));
     }
     key(row) { return `${row.whole ? 'plugin' : 'item'}:${row.id}`; }
     toRow(row) {
         const kind = row.whole ? row.note : row.note.replace(/ in .*$/, '');
         return {
             id: this.key(row), group: safeText(row.plugin.title), label: row.whole ? 'Whole plugin' : safeText(row.name),
-            detail: `${row.on ? 'on' : 'off'}${kind ? ` · ${kind}` : ''}`, tone: row.on ? 'success' : 'dim',
+            detail: `${row.on ? 'on' : 'off'}${kind ? ` · ${kind}` : ''}${row.whole && surfaceBadge(row.plugin.surfaces) ? ` · ${surfaceBadge(row.plugin.surfaces)}` : ''}`, tone: row.on ? 'success' : 'dim',
             searchText: `${row.name} ${row.plugin.title} ${row.note}`
         };
     }
@@ -131,12 +159,22 @@ export class PluginsPage {
             this.options.changed();
             return;
         }
+        if (id === INSTALL_PACKAGE) {
+            await this.installPackage();
+            return;
+        }
+        if (id.startsWith(PACKAGE_ROW)) {
+            const plugin = this.plugins?.find(candidate => candidate.id === id.slice(PACKAGE_ROW.length));
+            if (plugin?.install)
+                await this.managePackage(plugin);
+            return;
+        }
         const row = this.menu().find(candidate => this.key(candidate) === id);
         if (!row || this.busy)
             return;
         this.busy = true;
         try {
-            const action = await this.options.ui.select(`${row.plugin.title}: ${row.plugin.description || 'No description.'}`, rowActions(row, this.projectId));
+            const action = await this.options.ui.select(`${row.plugin.title}: ${describePlugin(row.plugin)}`, rowActions(row, this.projectId));
             if (action && action !== BACK && await applyPluginAction(this.options.ui, this.options.call, row, action))
                 this.restart = true;
         }
@@ -145,6 +183,74 @@ export class PluginsPage {
         }
         await this.reload();
     }
+    async installPackage() {
+        if (this.busy)
+            return;
+        this.busy = true;
+        try {
+            const source = await this.options.ui.input('Install local plugin package', 'npm:package@version, Git address, or absolute folder path');
+            if (!source?.trim())
+                return;
+            const confirmed = await this.options.ui.confirm('Install package?', `${source.trim()} will be installed without running package code. It arrives switched off and code remains untrusted until reviewed.`);
+            if (!confirmed)
+                return;
+            await this.options.call('plugins.install', { source: source.trim() });
+            this.restart = true;
+            this.options.ui.notify('Installed switched off. Changes apply when this session restarts.', 'info');
+            await this.reload();
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+        finally {
+            this.busy = false;
+            if (!this.disposed)
+                this.options.changed();
+        }
+    }
+    async managePackage(plugin) {
+        if (this.busy || !plugin.install)
+            return;
+        const hubManaged = this.hubManagedIds.has(plugin.id);
+        const actions = [
+            ...(hubManaged || plugin.install.kind === 'folder' ? [] : ['Update package']),
+            hubManaged ? 'Uninstall Hub version' : 'Remove package',
+            BACK
+        ];
+        this.busy = true;
+        try {
+            const action = await this.options.ui.select(`${plugin.title}: ${plugin.install.source}`, actions);
+            if (!action || action === BACK)
+                return;
+            if (action === 'Update package') {
+                const confirmed = await this.options.ui.confirm(`Update ${plugin.title}?`, 'Fetches a newer package version without running its scripts. Changed code remains subject to trust review.');
+                if (!confirmed)
+                    return;
+                await this.options.call('plugins.update', { pluginId: plugin.id });
+                this.options.ui.notify('Updated. Changes apply when this session restarts.', 'info');
+            }
+            else {
+                const title = hubManaged ? `Uninstall ${plugin.title} from Hub?` : `Remove ${plugin.title}?`;
+                const message = hubManaged
+                    ? 'This removes the exact Hub receipt and only its recorded package resources.'
+                    : 'This removes the installed package. A local folder is moved to the Harness trash.';
+                if (!await this.options.ui.confirm(title, message))
+                    return;
+                await this.options.call('plugins.remove', { pluginId: plugin.id });
+                this.options.ui.notify(hubManaged ? 'Hub package uninstalled.' : 'Package removed.', 'info');
+            }
+            this.restart = true;
+            await this.reload();
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+        finally {
+            this.busy = false;
+            if (!this.disposed)
+                this.options.changed();
+        }
+    }
     back() {
         this.settingsFor = null;
         this.saved = false;
@@ -190,7 +296,12 @@ export class PluginsPage {
         }
     }
     handleMouse(event) {
-        return this.settingsPlugin() ? this.settingsList.handleMouse(event) : this.list.handleMouse(event);
+        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 layout.list.handleMouse({ ...event, y: event.y - layout.top });
     }
     handleInput(data) {
         if (this.settingsPlugin()) {
@@ -200,44 +311,111 @@ export class PluginsPage {
         }
         if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
             if (!this.list.query) {
-                this.section = this.section === 'plugins' ? 'trust' : 'plugins';
+                const direction = matchesKey(data, 'shift+tab') ? -1 : 1;
+                const current = SECTIONS.findIndex(section => section.id === this.section);
+                this.section = SECTIONS[(current + direction + SECTIONS.length) % SECTIONS.length].id;
                 this.fill();
             }
             return true;
         }
         return this.list.handleInput(data);
     }
+    selectedPlugin() {
+        const selectedId = this.list.selected?.id;
+        return selectedId?.startsWith(SETTINGS_ROW)
+            ? this.plugins?.find(candidate => `${SETTINGS_ROW}${candidate.id}` === selectedId)
+            : selectedId?.startsWith(PACKAGE_ROW)
+                ? this.plugins?.find(candidate => `${PACKAGE_ROW}${candidate.id}` === selectedId)
+                : this.menu().find(candidate => this.key(candidate) === selectedId)?.plugin;
+    }
+    pluginInspector(plugin, width, rows) {
+        const theme = this.options.theme();
+        if (width < 1 || rows < 1)
+            return [];
+        if (!plugin) {
+            const action = this.list.selected?.id === INSTALL_PACKAGE;
+            return [theme.fg('muted', action ? 'Add a package from npm, Git, or a local folder.' : 'Select a plugin to inspect it.')].slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
+        const selectedId = this.list.selected?.id;
+        const row = this.menu().find(candidate => this.key(candidate) === selectedId);
+        const title = row ? row.whole ? row.plugin.title : row.name : plugin.title;
+        const lines = [theme.bold(safeText(title))];
+        if (title !== plugin.title)
+            lines.push(theme.fg('dim', `Part of ${safeText(plugin.title)}`));
+        lines.push('', ...wrapTextWithAnsi(safeText(describePlugin(plugin)), width));
+        if (row) {
+            const status = this.section === 'trust' && row.whole
+                ? plugin.trust === 'trusted' ? 'Code trusted' : 'Code not trusted'
+                : row.on ? 'Enabled' : 'Disabled';
+            lines.push('', theme.fg(row.on ? 'success' : 'dim', status));
+        }
+        if (plugin.code) {
+            lines.push(theme.fg('muted', `Code trust: ${plugin.trust === 'trusted' ? 'trusted' : 'not trusted'}`));
+            lines.push(theme.fg('muted', `Fingerprint: ${plugin.code.hash.slice(0, 12)}`));
+        }
+        if (plugin.install) {
+            lines.push('', theme.fg('muted', `Package: ${this.hubManagedIds.has(plugin.id) ? 'Hub receipt' : 'local'}`));
+            lines.push(...wrapTextWithAnsi(theme.fg('dim', safeText(plugin.install.source)), width));
+        }
+        if (settingsOf(plugin).length)
+            lines.push('', theme.fg('muted', `${settingsOf(plugin).length} settings`));
+        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.plugins)
+        if (!this.plugins) {
+            this.pointerLayout = undefined;
             return [theme.fg(this.error ? 'error' : 'dim', this.error ? `Could not read plugins: ${this.error}` : 'Reading plugins…')];
+        }
         const plugin = this.settingsPlugin();
         if (plugin)
             return this.renderSettings(plugin, width, rows);
-        const selectedId = this.list.selected?.id;
-        const selected = selectedId?.startsWith(SETTINGS_ROW)
-            ? this.plugins.find(candidate => `${SETTINGS_ROW}${candidate.id}` === selectedId)
-            : this.menu().find(candidate => this.key(candidate) === selectedId)?.plugin;
-        const detail = selected && rows >= 8 ? wrapTextWithAnsi(safeText(selected.description || 'No description.'), width).slice(0, 2) : [];
-        const note = this.restart ? ['Saved. Changes apply when this session restarts.'] : [];
-        const extra = detail.length + note.length;
-        const lines = this.list.render(width, Math.max(2, rows - (extra ? extra + 1 : 0)));
-        if (extra)
-            lines.push('', ...detail.map(line => theme.fg('muted', line)), ...note.map(line => theme.fg('warning', line)));
+        const note = this.restart ? [theme.fg('warning', 'Saved. Changes apply when this session restarts.')] : [];
+        const paneWidth = inspectorListWidth(width);
+        if (paneWidth !== undefined) {
+            const bodyRows = Math.max(0, rows - note.length);
+            const rightWidth = Math.max(0, width - paneWidth - 3);
+            const listLines = this.list.render(paneWidth, bodyRows);
+            this.pointerLayout = { list: this.list, width: paneWidth, top: note.length, rows: listLines.length };
+            return [...note, ...splitColumns(listLines, this.pluginInspector(this.selectedPlugin(), rightWidth, bodyRows), paneWidth, width, bodyRows, theme)]
+                .slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
+        const selected = this.selectedPlugin();
+        const detail = selected && rows >= 8 ? wrapTextWithAnsi(safeText(describePlugin(selected)), width).slice(0, 3) : [];
+        const listRows = Math.max(2, rows - note.length - (detail.length ? detail.length + 1 : 0));
+        const listLines = this.list.render(width, listRows);
+        this.pointerLayout = { list: this.list, width, top: note.length, rows: Math.min(listLines.length, Math.max(0, rows - note.length)) };
+        const lines = [...note, ...listLines];
+        if (detail.length)
+            lines.push('', ...detail.map(line => theme.fg('muted', line)));
         return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));
     }
     renderSettings(plugin, width, rows) {
         const theme = this.options.theme();
         const setting = settingsOf(plugin).find(candidate => candidate.key === this.settingsList.selected?.id);
         const range = setting && !isSwitch(setting) ? [`From ${setting.min.toLocaleString('en-US')} to ${setting.max.toLocaleString('en-US')} · default ${setting.default.toLocaleString('en-US')}`] : [];
+        const note = this.saved ? [theme.fg('success', 'Saved.')] : [];
+        const paneWidth = inspectorListWidth(width);
+        if (paneWidth !== undefined) {
+            const bodyRows = Math.max(0, rows - note.length);
+            const rightWidth = Math.max(0, width - paneWidth - 3);
+            const listLines = this.settingsList.render(paneWidth, bodyRows);
+            const details = setting
+                ? [theme.bold(safeText(setting.label)), '', ...wrapTextWithAnsi(safeText(setting.description), rightWidth), '', ...range.map(line => theme.fg('muted', line)), theme.fg('dim', `Current value: ${settingValueText(setting)}`)]
+                : [theme.fg('muted', 'Select a setting to review its value and description.')];
+            this.pointerLayout = { list: this.settingsList, width: paneWidth, top: note.length, rows: listLines.length };
+            return [...note, ...splitColumns(listLines, details, paneWidth, width, bodyRows, theme)]
+                .slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
         const detail = setting && rows >= 8 ? [...wrapTextWithAnsi(safeText(setting.description), width).slice(0, 3), ...range] : [];
-        const note = this.saved ? ['Saved.'] : [];
-        const extra = detail.length + note.length;
-        const lines = this.settingsList.render(width, Math.max(2, rows - (extra ? extra + 1 : 0)));
-        if (extra)
-            lines.push('', ...detail.map(line => theme.fg('muted', line)), ...note.map(line => theme.fg('success', line)));
+        const listRows = Math.max(2, rows - note.length - (detail.length ? detail.length + 1 : 0));
+        const listLines = this.settingsList.render(width, listRows);
+        this.pointerLayout = { list: this.settingsList, width, top: note.length, rows: Math.min(listLines.length, Math.max(0, rows - note.length)) };
+        const lines = [...note, ...listLines];
+        if (detail.length)
+            lines.push('', ...detail.map(line => theme.fg('muted', line)));
         return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));
     }
 }

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

@@ -6,6 +6,7 @@ export interface SubagentsPageOptions {
     theme(): Theme;
     snapshot(): readonly TerminalSubagentActivity[];
     changed(): void;
+    now?(): number;
 }
 export declare class SubagentsPage implements TerminalPage {
     private readonly options;