@xingular/harness 0.1.7 → 1.1.1

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

@@ -0,0 +1,156 @@
+import { matchesKey } 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 {
+    options;
+    focusedValue = false;
+    disposed = false;
+    pointerLayout;
+    hoveredTab;
+    constructor(options) {
+        this.options = options;
+        options.page.activate?.();
+    }
+    get page() { return this.options.page; }
+    get focused() { return this.focusedValue; }
+    set focused(value) {
+        this.focusedValue = value;
+        if (this.options.page.focused !== undefined)
+            this.options.page.focused = value;
+    }
+    invalidate() { }
+    handleMouse(event) {
+        if (this.disposed)
+            return undefined;
+        if (event.type === 'wheel') {
+            const layout = this.pointerLayout;
+            if (layout && event.y >= layout.bodyStart) {
+                const handled = this.page.handleMouse?.({ ...event, x: event.x - layout.contentX, y: event.y - layout.bodyStart });
+                if (handled?.handled)
+                    return handled;
+            }
+            const key = event.wheelDelta !== undefined && event.wheelDelta < 0 ? '\x1b[5~' : '\x1b[6~';
+            this.handleInput(key);
+            return { handled: true, render: true };
+        }
+        if (event.type !== 'move' && event.type !== 'click')
+            return undefined;
+        if (event.type === 'click' && event.button !== 'left')
+            return undefined;
+        const layout = this.pointerLayout;
+        if (!layout)
+            return undefined;
+        const tabs = this.options.page.tabs();
+        const tabX = event.x - layout.contentX;
+        if (layout.tabRow !== undefined && event.y === layout.tabRow && tabs.length > 1) {
+            const tabIndex = tabIndexAt(tabs, layout.contentWidth, tabX);
+            const current = tabs.findIndex(tab => tab.id === this.options.page.activeTab());
+            if (event.type === 'move') {
+                const nextHover = tabIndex === undefined ? undefined : tabs[tabIndex]?.id;
+                if (nextHover === this.hoveredTab)
+                    return { handled: true, render: false };
+                this.hoveredTab = nextHover;
+                return { handled: true, render: true };
+            }
+            const target = tabIndex ?? (tabX < layout.contentWidth / 2
+                ? (current - 1 + tabs.length) % tabs.length
+                : (current + 1) % tabs.length);
+            if (this.page.selectTab) {
+                this.page.selectTab(tabs[target].id);
+                this.hoveredTab = undefined;
+                return { handled: true, render: true };
+            }
+            const delta = (target - Math.max(0, current) + tabs.length) % tabs.length;
+            const reverse = (Math.max(0, current) - target + tabs.length) % tabs.length;
+            const direction = delta <= reverse ? '\t' : '\x1b[Z';
+            const steps = Math.min(delta, reverse);
+            for (let index = 0; index < steps; index += 1)
+                this.options.page.handleInput(direction);
+            this.hoveredTab = undefined;
+            return { handled: true, render: true };
+        }
+        let hoverChanged = false;
+        if (event.type === 'move' && this.hoveredTab) {
+            this.hoveredTab = undefined;
+            hoverChanged = true;
+        }
+        if (event.y < layout.bodyStart)
+            return hoverChanged ? { handled: true, render: true } : undefined;
+        const handled = this.options.page.handleMouse?.({ ...event, x: tabX, y: event.y - layout.bodyStart });
+        return handled ?? (hoverChanged ? { handled: true, render: true } : undefined);
+    }
+    handleInput(data) {
+        if (this.disposed)
+            return;
+        if (matchesKey(data, 'ctrl+c')) {
+            this.options.close();
+            return;
+        }
+        const centered = this.page.presentation !== 'fullscreen' && centeredDialogHost(this.options.tui) && dialogFits(this.options.tui.terminal.columns, this.options.tui.terminal.rows);
+        const tabs = this.options.page.tabs();
+        const input = centered && tabs.length > 1 && !this.options.page.ownsNavigation
+            ? matchesKey(data, 'right') ? '\t' : matchesKey(data, 'left') ? '\x1b[Z' : data
+            : data;
+        if (this.options.page.handleInput(input)) {
+            this.options.changed();
+            return;
+        }
+        if (matchesKey(data, 'escape'))
+            this.options.close();
+    }
+    render(width) {
+        if (this.disposed)
+            return [];
+        const rows = this.page.presentation === 'fullscreen' ? this.options.tui.terminal.rows : pageRows(this.options.tui);
+        const page = this.options.page;
+        const tabs = page.tabs();
+        if (width < 1 || rows < 1 || !tabs.length)
+            return [];
+        const theme = this.options.theme();
+        const centered = this.page.presentation !== 'fullscreen' && centeredDialogHost(this.options.tui) && dialogFits(this.options.tui.terminal.columns, this.options.tui.terminal.rows);
+        const inner = centered ? centerDialogContentWidth(width) : contentWidth(width);
+        if (centered) {
+            const tabRows = tabs.length > 1 ? 1 : 0;
+            const bodyStart = centerDialogVerticalPad(rows) + 2 + tabRows;
+            this.pointerLayout = {
+                tabRow: tabRows ? bodyStart - 1 : undefined,
+                bodyStart,
+                contentX: CENTER_DIALOG_PAD,
+                contentWidth: inner,
+                centered
+            };
+            const body = [
+                ...(tabRows ? [tabStrip(tabs, page.activeTab(), inner, theme, 'top', this.hoveredTab)] : []),
+                ...page.render(inner, Math.max(0, centerDialogBodyRows(rows) - tabRows))
+            ];
+            return centerDialogFrame({ title: tabs.find(tab => tab.id === page.activeTab())?.title ?? 'Page', body, width, rows, theme });
+        }
+        this.pointerLayout = {
+            tabRow: 0,
+            bodyStart: 2,
+            contentX: CHROME_PAD,
+            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'
+        ].filter(Boolean).join(' · ');
+        return pageFrame({
+            title: '',
+            headerLine: tabStrip(tabs, page.activeTab(), inner, theme, 'top', this.hoveredTab),
+            body: page.render(inner, pageBodyRows(rows)),
+            footer,
+            width,
+            rows,
+            theme
+        });
+    }
+    dispose() {
+        if (this.disposed)
+            return;
+        this.disposed = true;
+        this.options.page.dispose?.();
+    }
+}

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

@@ -0,0 +1,76 @@
+/**
+ * The Accounts page: one row per account with its health and Pools as a second section. Opening
+ * an account shows its details and grouped actions in a wide inspector or a compact detail page;
+ * the actions themselves are the ones the `/accounts` menu of a native `pi` session uses.
+ */
+import type { Theme } from '@earendil-works/pi-coding-agent';
+import { type AccountsCall, type AccountsUi, type SessionAccount } from "../../accountsMenu.js";
+import type { GroupedSelectOption } from "../dialogs.js";
+import type { TerminalPage } from "../page.js";
+import type { TerminalMouseInput } from "../mouse.js";
+export interface AccountsPageOptions {
+    theme: () => Theme;
+    call: AccountsCall;
+    /** The account this session runs on. */
+    session: () => SessionAccount | null;
+    ui: AccountsUi & {
+        selectGrouped?(title: string, options: readonly GroupedSelectOption[]): Promise<string | undefined>;
+    };
+    /** The session is switching accounts: the host ends it so the launcher can start it again. */
+    relaunch(): void;
+    changed(): void;
+}
+export declare class AccountsPage implements TerminalPage {
+    private readonly options;
+    readonly presentation = "fullscreen";
+    readonly ownsNavigation = true;
+    private overview;
+    private error;
+    private section;
+    private focus;
+    private detailOpen;
+    private detailAccountId;
+    private busy;
+    private disposed;
+    private compact;
+    private wideListWidth;
+    private actionRowsStart;
+    private readonly list;
+    private readonly actionList;
+    constructor(options: AccountsPageOptions);
+    get focused(): boolean;
+    set focused(value: boolean);
+    activate(): void;
+    dispose(): void;
+    tabs(): readonly [{
+        readonly id: "accounts";
+        readonly title: "Accounts";
+    }, {
+        readonly id: "pools";
+        readonly title: "Pools";
+    }];
+    activeTab(): string;
+    selectTab(id: string): void;
+    hint(): string;
+    private reload;
+    /** Searching looks through accounts and pools together; otherwise the page shows the current section. */
+    private fill;
+    private accountRows;
+    private poolRows;
+    private account;
+    private detailAccount;
+    private selectGrouped;
+    private accountActionGroup;
+    private fillActions;
+    private detailLines;
+    /** Runs one thing at a time and always reads the accounts again afterwards. */
+    private guarded;
+    private closeDetails;
+    private openDetails;
+    private activateRow;
+    private activateAction;
+    private moveSection;
+    handleMouse(event: TerminalMouseInput): import("@earendil-works/pi-tui").TuiMouseEventResult | undefined;
+    handleInput(data: string): boolean;
+    render(width: number, rows: number): string[];
+}

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

@@ -0,0 +1,409 @@
+import { matchesKey, truncateToWidth, visibleWidth, wrapTextWithAnsi } from '@earendil-works/pi-tui';
+import { HEALTH, accountActions, accountDetails, addAccount, editPool, runAccountAction } from "../../accountsMenu.js";
+import { safeText } from "../chrome.js";
+import { FilterList } from "../list.js";
+const SECTIONS = [{ id: 'accounts', title: 'Accounts' }, { id: 'pools', title: 'Pools' }];
+const ADD = 'action:add';
+const CHECK_ALL = 'action:check-all';
+const NEW_POOL = 'action:new-pool';
+const BACK = 'Back';
+const HEALTH_TONE = { ok: 'success', limited: 'warning', auth_expired: 'error', signed_out: 'error', error: 'error', unknown: 'dim' };
+export class AccountsPage {
+    options;
+    presentation = 'fullscreen';
+    ownsNavigation = true;
+    overview;
+    error;
+    section = 'accounts';
+    focus = 'list';
+    detailOpen = false;
+    detailAccountId;
+    busy = false;
+    disposed = false;
+    compact = false;
+    wideListWidth = 0;
+    actionRowsStart = 0;
+    list;
+    actionList;
+    constructor(options) {
+        this.options = options;
+        this.list = new FilterList({
+            theme: options.theme, search: 'always', noun: ['row', 'rows'], empty: 'Nothing here yet',
+            searchContext: () => 'accounts and pools',
+            onActivate: row => this.activateRow(row)
+        });
+        this.actionList = new FilterList({
+            theme: options.theme, search: 'never', noun: ['action', 'actions'],
+            onActivate: row => { if (row.data)
+                void this.activateAction(row.data); }
+        });
+    }
+    get focused() { return this.list.focused || this.actionList.focused; }
+    set focused(value) { this.list.focused = value && this.focus === 'list'; this.actionList.focused = value && this.focus === 'actions'; }
+    activate() { void this.reload(); }
+    dispose() { this.disposed = true; }
+    tabs() { return SECTIONS; }
+    activeTab() { return this.section; }
+    selectTab(id) {
+        if (!SECTIONS.some(tab => tab.id === id))
+            return;
+        this.section = id;
+        this.detailOpen = false;
+        this.detailAccountId = undefined;
+        this.focus = 'list';
+        this.list.focused = true;
+        this.actionList.focused = false;
+        this.fill();
+        this.options.changed();
+    }
+    hint() {
+        if (this.compact && this.detailOpen)
+            return '↑/↓ actions · Enter activate';
+        if (this.focus === 'actions')
+            return '↑/↓ actions · Enter activate · Tab focus';
+        return this.list.query ? 'Tab focus · Enter open · Esc clear' : 'Tab focus · ←/→ sections · Enter open';
+    }
+    async reload() {
+        try {
+            this.overview = await this.options.call('accounts.list');
+            this.error = undefined;
+        }
+        catch (error) {
+            this.error = error instanceof Error ? error.message : String(error);
+        }
+        if (this.disposed)
+            return;
+        this.fill();
+        this.options.changed();
+    }
+    /** Searching looks through accounts and pools together; otherwise the page shows the current section. */
+    fill(compact = this.compact) {
+        this.compact = compact;
+        this.list.setRows(this.list.query ? [...this.accountRows(), ...this.poolRows()] : this.section === 'accounts' ? this.accountRows() : this.poolRows());
+        const account = this.detailOpen ? this.detailAccount() : undefined;
+        if (account)
+            this.fillActions(account);
+    }
+    accountRows() {
+        const overview = this.overview;
+        if (!overview)
+            return [];
+        const session = this.options.session();
+        const accounts = overview.accounts.map(account => ({
+            id: `account:${account.id}`, group: 'Accounts',
+            label: `${account.isDefault ? '●' : '○'} ${safeText(account.label)}`,
+            detail: `${HEALTH[account.state.health] ?? HEALTH.unknown}${session?.accountId === account.id ? ` · ${this.compact ? 'current' : 'this session'}` : ''}`,
+            tone: HEALTH_TONE[account.state.health] ?? 'dim',
+            searchText: `${account.label} ${account.state.identity ?? ''} ${HEALTH[account.state.health] ?? ''}`
+        }));
+        return [
+            ...accounts,
+            { id: ADD, label: '+ Add account', group: 'Actions', tone: 'accent' },
+            { id: CHECK_ALL, label: '⟳ Check all accounts', group: 'Actions', tone: 'accent' }
+        ];
+    }
+    poolRows() {
+        const overview = this.overview;
+        if (!overview)
+            return [];
+        const names = new Map(overview.accounts.map(account => [account.id, account.label]));
+        return [
+            ...overview.pools.map(pool => ({
+                id: `pool:${pool.id}`, group: 'Pools', label: safeText(pool.label),
+                detail: pool.accountIds.map(id => names.get(id) ?? 'removed account').join(' → '), tone: 'muted'
+            })),
+            { id: NEW_POOL, label: '+ New pool', group: 'Actions', tone: 'accent' }
+        ];
+    }
+    account(id) { return this.overview?.accounts.find(account => `account:${account.id}` === id); }
+    detailAccount() { return this.detailAccountId ? this.overview?.accounts.find(account => account.id === this.detailAccountId) : undefined; }
+    selectGrouped(title, options) {
+        return this.options.ui.selectGrouped
+            ? this.options.ui.selectGrouped(title, options)
+            : this.options.ui.select(title, options.map(option => option.label));
+    }
+    accountActionGroup(label) {
+        if (label.startsWith('Use for this session') || label === 'Make default for new sessions')
+            return 'Session';
+        if (['Rename', 'Check', 'Activity'].includes(label))
+            return 'Account';
+        if (['Sign in', 'Remove a provider', 'Sign out'].includes(label))
+            return 'Sign-in';
+        if (label === 'Remove account')
+            return 'Remove';
+        return undefined;
+    }
+    fillActions(account) {
+        const isSession = this.options.session()?.accountId === account.id;
+        this.actionList.setRows(accountActions(account, isSession, false).map(label => ({
+            id: label, label, group: this.accountActionGroup(label), data: label
+        })));
+        this.actionList.focused = this.focus === 'actions';
+    }
+    detailLines(width, summary = false) {
+        const theme = this.options.theme();
+        const account = this.detailOpen ? this.detailAccount() : this.section === 'accounts' ? this.account(this.list.selected?.id ?? '') : undefined;
+        let title;
+        let lines;
+        if (account) {
+            title = account.label;
+            if (summary) {
+                const state = account.state;
+                const signedIn = state.signedIn === null ? 'not checked' : state.signedIn ? 'yes' : 'no';
+                lines = [
+                    `Health: ${HEALTH[state.health] ?? HEALTH.unknown} · Default: ${account.isDefault ? 'yes' : 'no'} · Signed in: ${signedIn}`,
+                    `Providers: ${state.piProviders.length ? state.piProviders.join(', ') : 'none'}`,
+                    ...(state.identity ? [`Identity: ${state.identity}`] : []),
+                    ...(state.plan ? [`Plan: ${state.plan}`] : []),
+                    `Last checked: ${state.lastCheckedAt ? new Date(state.lastCheckedAt).toLocaleString() : 'never'}`,
+                    ...state.limits.map(limit => `${limit.label}: ${limit.usedPercent ?? '?'}% used${limit.resetsAt ? `, resets ${new Date(limit.resetsAt).toLocaleString()}` : ''}`),
+                    ...(state.limits.length ? [] : ['Usage limits: not reported']),
+                    ...(state.capabilities.length ? [`Detected: ${state.capabilities.join(', ')}`] : []),
+                    ...(state.lastError ? [`Last error: ${state.lastError.message}`] : [])
+                ];
+            }
+            else {
+                lines = accountDetails(account).split('\n').slice(1);
+            }
+        }
+        else if (this.section === 'pools') {
+            const pool = this.overview?.pools.find(item => `pool:${item.id}` === this.list.selected?.id);
+            const names = new Map(this.overview?.accounts.map(item => [item.id, item.label]) ?? []);
+            title = pool ? `Pool · ${pool.label}` : 'Pools';
+            lines = pool
+                ? ['New sessions use the first ready account in this order:', ...pool.accountIds.map((id, index) => `${index + 1}. ${names.get(id) ?? 'removed account'}`)]
+                : ['Select a pool to see its account order.'];
+        }
+        else {
+            title = 'Account details';
+            lines = ['Select an account to see health and usage details.'];
+        }
+        const wrap = (text) => wrapTextWithAnsi(safeText(text), Math.max(1, width));
+        return [theme.bold(theme.fg('accent', safeText(title))), ...lines.flatMap(wrap).map(line => theme.fg('muted', line))];
+    }
+    /** Runs one thing at a time and always reads the accounts again afterwards. */
+    async guarded(work) {
+        if (this.busy)
+            return;
+        this.busy = true;
+        try {
+            await work();
+        }
+        catch (error) {
+            this.options.ui.notify(error instanceof Error ? error.message : String(error), 'error');
+        }
+        finally {
+            this.busy = false;
+        }
+        await this.reload();
+    }
+    closeDetails() {
+        this.detailOpen = false;
+        this.detailAccountId = undefined;
+        this.focus = 'list';
+        this.list.focused = true;
+        this.actionList.focused = false;
+        this.options.changed();
+    }
+    openDetails() {
+        const account = this.account(this.list.selected?.id ?? '');
+        if (!account)
+            return;
+        this.detailOpen = true;
+        this.detailAccountId = account.id;
+        this.focus = 'actions';
+        this.list.focused = false;
+        this.fillActions(account);
+        this.options.changed();
+    }
+    activateRow(row) {
+        if (this.account(row.id)) {
+            this.openDetails();
+            return;
+        }
+        void this.guarded(async () => {
+            const { ui, call } = this.options;
+            const overview = this.overview;
+            if (!overview)
+                return;
+            if (row.id === ADD) {
+                await addAccount(ui, call);
+                return;
+            }
+            if (row.id === CHECK_ALL) {
+                try {
+                    await call('accounts.refresh');
+                }
+                catch (error) {
+                    ui.notify(error instanceof Error ? error.message : String(error), 'error');
+                }
+                return;
+            }
+            if (row.id === NEW_POOL) {
+                await editPool(ui, call, overview, null);
+                return;
+            }
+            const pool = overview.pools.find(candidate => `pool:${candidate.id}` === row.id);
+            if (!pool)
+                return;
+            const action = await this.selectGrouped(pool.label, [
+                { label: 'Edit', group: 'Manage' }, { label: 'Delete', group: 'Remove' }, { label: BACK }
+            ]);
+            if (action === 'Edit')
+                await editPool(ui, call, overview, pool);
+            else if (action === 'Delete' && await ui.confirm(`Delete ${pool.label}?`, 'The accounts stay. Only the pool is removed.')) {
+                try {
+                    await call('accounts.removePool', { poolId: pool.id });
+                }
+                catch (error) {
+                    ui.notify(error instanceof Error ? error.message : String(error), 'error');
+                }
+            }
+        });
+    }
+    async activateAction(action) {
+        if (this.busy)
+            return;
+        const account = this.detailAccount();
+        const overview = this.overview;
+        if (!account || !overview)
+            return;
+        await this.guarded(async () => {
+            const outcome = await runAccountAction(this.options.ui, this.options.call, overview, account, action);
+            if (outcome === 'relaunch')
+                this.options.relaunch();
+            if (outcome === 'gone') {
+                this.detailOpen = false;
+                this.detailAccountId = undefined;
+                this.focus = 'list';
+                this.list.focused = true;
+                this.actionList.focused = false;
+            }
+        });
+    }
+    moveSection(delta) {
+        const index = SECTIONS.findIndex(tab => tab.id === this.section);
+        this.section = SECTIONS[(index + delta + SECTIONS.length) % SECTIONS.length].id;
+        this.detailOpen = false;
+        this.detailAccountId = undefined;
+        this.focus = 'list';
+        this.list.focused = true;
+        this.actionList.focused = false;
+        this.fill();
+        this.options.changed();
+    }
+    handleMouse(event) {
+        if (this.compact && this.detailOpen) {
+            this.focus = 'actions';
+            this.actionList.focused = true;
+            return this.actionList.handleMouse({ ...event, y: event.y - this.actionRowsStart });
+        }
+        if (this.wideListWidth && event.x >= this.wideListWidth + 3) {
+            if (!this.detailOpen)
+                return undefined;
+            this.focus = 'actions';
+            this.actionList.focused = true;
+            return this.actionList.handleMouse({ ...event, x: event.x - this.wideListWidth - 3, y: event.y - this.actionRowsStart });
+        }
+        this.focus = 'list';
+        this.actionList.focused = false;
+        this.list.focused = true;
+        return this.list.handleMouse(event);
+    }
+    handleInput(data) {
+        if (matchesKey(data, 'escape')) {
+            if (this.detailOpen) {
+                this.closeDetails();
+                return true;
+            }
+            if (this.focus !== 'list') {
+                this.focus = 'list';
+                this.list.focused = true;
+                this.actionList.focused = false;
+                this.options.changed();
+                return true;
+            }
+            return this.list.handleInput(data);
+        }
+        if (matchesKey(data, 'tab') || matchesKey(data, 'shift+tab')) {
+            const order = this.compact && this.detailOpen
+                ? ['tabs', 'actions']
+                : this.detailOpen ? ['tabs', 'list', 'actions'] : ['tabs', 'list'];
+            const index = order.indexOf(this.focus);
+            const step = matchesKey(data, 'shift+tab') ? -1 : 1;
+            this.focus = order[(index + step + order.length) % order.length];
+            this.list.focused = this.focus === 'list';
+            this.actionList.focused = this.focus === 'actions';
+            this.options.changed();
+            return true;
+        }
+        if (this.focus === 'tabs') {
+            if (matchesKey(data, 'left')) {
+                this.moveSection(-1);
+                return true;
+            }
+            if (matchesKey(data, 'right')) {
+                this.moveSection(1);
+                return true;
+            }
+            if (matchesKey(data, 'enter')) {
+                this.focus = this.compact && this.detailOpen ? 'actions' : 'list';
+                this.list.focused = this.focus === 'list';
+                this.actionList.focused = this.focus === 'actions';
+                this.options.changed();
+                return true;
+            }
+            return false;
+        }
+        if (this.focus === 'actions')
+            return this.actionList.handleInput(data);
+        const before = this.list.query;
+        const used = this.list.handleInput(data);
+        if (this.list.query !== before)
+            this.fill();
+        return used;
+    }
+    render(width, rows) {
+        const theme = this.options.theme();
+        if (width < 1 || rows < 1)
+            return [];
+        if (!this.overview)
+            return [theme.fg(this.error ? 'error' : 'dim', this.error ? `Could not read accounts: ${this.error}` : 'Reading accounts…')];
+        const compact = width < 88;
+        if (compact !== this.compact)
+            this.fill(compact);
+        if (compact && this.detailOpen && this.detailAccount()) {
+            const details = this.detailLines(width, true);
+            this.actionRowsStart = details.length + 1;
+            const actions = this.actionList.render(width, Math.max(1, rows - this.actionRowsStart));
+            return [...details, '', ...actions].slice(0, rows).map(line => truncateToWidth(line, width, ''));
+        }
+        if (!compact) {
+            this.wideListWidth = Math.min(width - 36, Math.max(32, Math.floor((width - 3) * 0.42)));
+            const detailWidth = Math.max(1, width - this.wideListWidth - 3);
+            const list = this.list.render(this.wideListWidth, rows);
+            const details = this.detailLines(detailWidth);
+            let inspector = details;
+            const account = this.detailOpen ? this.detailAccount() : undefined;
+            if (this.detailOpen && account) {
+                this.fillActions(account);
+                this.actionRowsStart = inspector.length + 1;
+                inspector = [...inspector, '', ...this.actionList.render(detailWidth, Math.max(1, rows - this.actionRowsStart))];
+            }
+            inspector = inspector.slice(0, rows);
+            return Array.from({ length: Math.min(rows, Math.max(list.length, inspector.length)) }, (_, index) => {
+                const left = truncateToWidth(list[index] ?? '', this.wideListWidth, '');
+                const right = truncateToWidth(inspector[index] ?? '', detailWidth, '');
+                const gap = ' '.repeat(Math.max(0, this.wideListWidth - visibleWidth(left)));
+                return truncateToWidth(`${left}${gap}${theme.fg('dim', ' │ ')}${right}`, width, '');
+            });
+        }
+        this.wideListWidth = 0;
+        const details = this.detailLines(width).slice(1);
+        const detailRows = Math.min(details.length, 9, Math.max(0, rows - 2 - this.list.height));
+        const lines = this.list.render(width, Math.max(2, rows - 1 - (detailRows ? detailRows + 1 : 0)));
+        if (detailRows)
+            lines.push('', ...details.slice(0, detailRows));
+        return lines.slice(0, rows).map(line => truncateToWidth(line, width, ''));
+    }
+}