pi-ui-extend 0.1.13 → 0.1.15

package/dist/app/rendering/conversation-viewport.js

@@ -1,5 +1,7 @@
+import { resolveToolRule } from "../../config.js";
+import { stringDisplayWidth } from "../../terminal-width.js";
 import { renderConversationEntry as renderConversationEntryLines } from "./conversation-entry-renderer.js";
-import { shortHash } from "./render-text.js";
+import { horizontalPaddingLayout, shortHash } from "./render-text.js";
 export class ConversationViewport {
     host;
     blockCachesByWidth = new Map();
@@ -23,12 +25,24 @@ export class ConversationViewport {
     slice(width, start, count) {
         if (count <= 0)
             return [];
+        for (let attempt = 0; attempt < 4; attempt += 1) {
+            const layout = this.layoutForWidth(width);
+            const visible = this.sliceMeasured(layout, width, start, count);
+            if (!visible.changed)
+                return visible.lines;
+        }
         const layout = this.layoutForWidth(width);
+        return this.sliceMeasured(layout, width, start, count, { allowLayoutChanges: false }).lines;
+    }
+    sliceMeasured(layout, width, start, count, options = {}) {
+        const allowLayoutChanges = options.allowLayoutChanges !== false;
         const visible = [];
         const end = start + count;
         let entryIndex = this.entryIndexForOffset(layout.offsets, start);
         for (; entryIndex < layout.entries.length; entryIndex += 1) {
             const entry = layout.entries[entryIndex];
+            if (allowLayoutChanges && this.ensureEntryMeasured(layout, width, entryIndex))
+                return { lines: [], changed: true };
             const block = this.blockForEntry(entry, width);
             const blockLineCount = layout.lineCounts[entryIndex] ?? 0;
             if (blockLineCount === 0)
@@ -45,7 +59,7 @@ export class ConversationViewport {
             if (visible.length >= count)
                 break;
         }
-        return visible;
+        return { lines: visible, changed: false };
     }
     entries() {
         const queued = this.queuedEntries();
@@ -80,6 +94,8 @@ export class ConversationViewport {
     }
     entryBlockPositions(width) {
         const layout = this.layoutForWidth(width);
+        for (let index = 0; index < layout.entries.length; index += 1)
+            this.ensureEntryMeasured(layout, width, index);
         return layout.entries.map((entry, index) => ({
             entry,
             offset: layout.offsets[index] ?? 0,
@@ -87,6 +103,21 @@ export class ConversationViewport {
             block: this.blockForEntry(entry, width),
         }));
     }
+    measuredLineCountForEntries(width, entryIds) {
+        if (entryIds.length === 0)
+            return 0;
+        const layout = this.layoutForWidth(width);
+        const indexes = [...new Set(entryIds
+                .map((entryId) => layout.positions.get(entryId))
+                .filter((index) => index !== undefined))]
+            .sort((left, right) => left - right);
+        let lineCount = 0;
+        for (const index of indexes) {
+            this.ensureEntryMeasured(layout, width, index);
+            lineCount += layout.lineCounts[index] ?? 0;
+        }
+        return lineCount;
+    }
     queuedEntries() {
         const session = this.host.session;
         const entries = [];
@@ -130,7 +161,10 @@ export class ConversationViewport {
         const allThinkingExpanded = Boolean(this.host.allThinkingExpanded);
         let layout = this.layoutCachesByWidth.get(width);
         if (!layout || this.layoutStructureChanged(layout, entries, queuedSignature, superCompactTools, allThinkingExpanded)) {
-            layout = this.buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded);
+            const previousLayout = layout && layout.queuedSignature === queuedSignature && layout.superCompactTools === superCompactTools && layout.allThinkingExpanded === allThinkingExpanded
+                ? layout
+                : undefined;
+            layout = this.buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded, previousLayout);
             this.layoutCachesByWidth.set(width, layout);
         }
         else {
@@ -141,22 +175,40 @@ export class ConversationViewport {
         }
         return layout;
     }
-    buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded) {
+    buildLayout(entries, width, queuedSignature, superCompactTools, allThinkingExpanded, previousLayout) {
         const entryIds = [];
         const lineCounts = [];
+        const measuredLineCounts = [];
         const offsets = [];
         const positions = new Map();
         let totalLineCount = 0;
+        const estimatedBlockLineCounts = entries.map((entry) => this.estimatedBlockLineCountForEntry(entry, width));
         for (const [index, entry] of entries.entries()) {
             entryIds.push(entry.id);
             positions.set(entry.id, index);
             offsets.push(totalLineCount);
-            const lineCount = this.lineCountForEntry(entry, entries, index, width);
+            const previousLineCount = this.previousMeasuredLineCount(previousLayout, entries, index, entry);
+            const lineCount = previousLineCount ?? this.lineCountWithGap(entry, estimatedBlockLineCounts[index] ?? 0, this.nextEstimatedVisibleEntry(entries, estimatedBlockLineCounts, index));
             lineCounts.push(lineCount);
+            measuredLineCounts.push(previousLineCount !== undefined);
             totalLineCount += lineCount;
         }
         offsets.push(totalLineCount);
-        return { entries, entryIds, lineCounts, offsets, positions, dirtyEntryIds: new Set(), totalLineCount, queuedSignature, superCompactTools, allThinkingExpanded };
+        return { entries, entryIds, lineCounts, measuredLineCounts, offsets, positions, dirtyEntryIds: new Set(), totalLineCount, queuedSignature, superCompactTools, allThinkingExpanded };
+    }
+    previousMeasuredLineCount(previousLayout, entries, index, entry) {
+        const previousIndex = previousLayout?.positions.get(entry.id);
+        if (previousLayout === undefined || previousIndex === undefined)
+            return undefined;
+        if (previousLayout.measuredLineCounts[previousIndex] !== true)
+            return undefined;
+        if (previousLayout.dirtyEntryIds.has(entry.id))
+            return undefined;
+        const previousNextEntryId = previousLayout.entryIds[previousIndex + 1];
+        const nextEntryId = entries[index + 1]?.id;
+        if (previousNextEntryId !== nextEntryId)
+            return undefined;
+        return previousLayout.lineCounts[previousIndex];
     }
     layoutStructureChanged(layout, entries, queuedSignature, superCompactTools, allThinkingExpanded) {
         if (layout.entries.length !== entries.length || layout.queuedSignature !== queuedSignature || layout.superCompactTools !== superCompactTools || layout.allThinkingExpanded !== allThinkingExpanded)
@@ -168,12 +220,17 @@ export class ConversationViewport {
     refreshDirtyLayoutEntries(layout, width) {
         if (layout.dirtyEntryIds.size === 0)
             return;
+        const indexes = new Set();
         for (const entryId of layout.dirtyEntryIds) {
             const position = layout.positions.get(entryId);
             if (position === undefined)
                 continue;
-            this.refreshLayoutEntry(layout, width, position);
+            indexes.add(position);
+            if (position > 0)
+                indexes.add(position - 1);
         }
+        for (const position of [...indexes].sort((left, right) => left - right))
+            this.refreshLayoutEntry(layout, width, position, true);
         layout.dirtyEntryIds.clear();
     }
     blockCacheForWidth(width) {
@@ -187,30 +244,80 @@ export class ConversationViewport {
     refreshDynamicLayoutEntries(layout, width) {
         for (let index = 0; index < layout.entries.length; index += 1) {
             if (this.host.isDynamicConversationBlock(layout.entries[index]))
-                this.refreshLayoutEntry(layout, width, index);
+                this.refreshLayoutEntry(layout, width, index, true);
         }
     }
-    refreshLayoutEntry(layout, width, index) {
+    ensureEntryMeasured(layout, width, index) {
         const entry = layout.entries[index];
         if (!entry)
-            return;
+            return false;
+        if (layout.measuredLineCounts[index] === true && !this.host.isDynamicConversationBlock(entry))
+            return false;
+        return this.refreshLayoutEntry(layout, width, index, true);
+    }
+    refreshLayoutEntry(layout, width, index, measure) {
+        const entry = layout.entries[index];
+        if (!entry)
+            return false;
         const previousLineCount = layout.lineCounts[index] ?? 0;
-        const nextLineCount = this.lineCountForEntry(entry, layout.entries, index, width);
+        const nextLineCount = measure
+            ? this.measuredLineCountForEntry(entry, layout.entries, index, width)
+            : this.estimatedLineCountForEntry(entry, layout.entries, index, width);
+        layout.measuredLineCounts[index] = measure;
         if (previousLineCount === nextLineCount)
-            return;
+            return false;
         const delta = nextLineCount - previousLineCount;
         layout.lineCounts[index] = nextLineCount;
         layout.totalLineCount += delta;
         for (let offsetIndex = index + 1; offsetIndex < layout.offsets.length; offsetIndex += 1) {
             layout.offsets[offsetIndex] = (layout.offsets[offsetIndex] ?? 0) + delta;
         }
+        return true;
     }
-    lineCountForEntry(entry, entries, index, width) {
+    measuredLineCountForEntry(entry, entries, index, width) {
         const block = this.blockForEntry(entry, width);
-        if (block.lineCount === 0)
+        return this.lineCountWithGap(entry, block.lineCount, this.nextVisibleEntry(entries, index, width));
+    }
+    estimatedLineCountForEntry(entry, entries, index, width) {
+        const blockLineCount = this.estimatedBlockLineCountForEntry(entry, width);
+        const blockLineCounts = entries.map((candidate) => this.estimatedBlockLineCountForEntry(candidate, width));
+        return this.lineCountWithGap(entry, blockLineCount, this.nextEstimatedVisibleEntry(entries, blockLineCounts, index));
+    }
+    lineCountWithGap(entry, blockLineCount, nextEntry) {
+        if (blockLineCount === 0)
             return 0;
-        const nextEntry = this.nextVisibleEntry(entries, index, width);
-        return block.lineCount + (this.gapAfterEntry(entry, nextEntry) ? 1 : 0);
+        return blockLineCount + (this.gapAfterEntry(entry, nextEntry) ? 1 : 0);
+    }
+    estimatedBlockLineCountForEntry(entry, width) {
+        if (width <= 0)
+            return 0;
+        switch (entry.kind) {
+            case "assistant":
+                return estimateWrappedLineCount(entry.text, width);
+            case "system":
+            case "error":
+            case "custom":
+            case "session-aborted":
+                return estimateWrappedLineCount(entry.text, width);
+            case "user": {
+                const { contentWidth } = horizontalPaddingLayout(width);
+                return 2 + estimateWrappedLineCount(entry.text, contentWidth);
+            }
+            case "queued": {
+                const { contentWidth } = horizontalPaddingLayout(width);
+                return estimateWrappedLineCount(entry.text, contentWidth);
+            }
+            case "thinking": {
+                const expanded = entry.expanded || this.host.allThinkingExpanded === true;
+                return expanded ? 1 + estimateWrappedLineCount(entry.text, Math.max(1, width - 2)) : 1;
+            }
+            case "shell":
+                return estimateToolLikeLineCount("shell", entry.expanded, `${entry.output}\n${entry.status}`, width, this.host.pixConfig, this.host.superCompactTools === true, true);
+            case "tool":
+                return estimateToolLikeLineCount(entry.toolName, entry.expanded, entry.output, width, this.host.pixConfig, this.host.superCompactTools === true, false);
+            default:
+                return 1;
+        }
     }
     nextVisibleEntry(entries, index, width) {
         for (let nextIndex = index + 1; nextIndex < entries.length; nextIndex += 1) {
@@ -222,6 +329,16 @@ export class ConversationViewport {
         }
         return undefined;
     }
+    nextEstimatedVisibleEntry(entries, lineCounts, index) {
+        for (let nextIndex = index + 1; nextIndex < entries.length; nextIndex += 1) {
+            const nextEntry = entries[nextIndex];
+            if (!nextEntry)
+                continue;
+            if ((lineCounts[nextIndex] ?? 0) > 0)
+                return nextEntry;
+        }
+        return undefined;
+    }
     gapAfterEntry(entry, nextEntry) {
         if (!this.host.superCompactTools)
             return true;
@@ -249,3 +366,27 @@ export class ConversationViewport {
         return result;
     }
 }
+function estimateWrappedLineCount(text, width) {
+    const safeWidth = Math.max(1, width);
+    if (!text)
+        return 0;
+    let count = 0;
+    for (const line of text.split("\n")) {
+        const displayWidth = stringDisplayWidth(line);
+        count += Math.max(1, Math.ceil(displayWidth / safeWidth));
+    }
+    return count;
+}
+function estimateToolLikeLineCount(toolName, expanded, output, width, pixConfig, superCompactTools, includeStatusLine) {
+    const rule = resolveToolRule(toolName, pixConfig.toolRenderer);
+    if (rule.hidden)
+        return 0;
+    if (expanded)
+        return 1 + estimateWrappedLineCount(output, Math.max(1, width - 2));
+    if (rule.compactHidden || (rule.defaultExpanded === true && !superCompactTools))
+        return 1;
+    const bodyLineCount = estimateWrappedLineCount(output, Math.max(1, width - 2));
+    const previewLineCount = Math.min(rule.previewLines, bodyLineCount);
+    const extraStatusLine = includeStatusLine && output.trimEnd().length === 0 ? 1 : 0;
+    return superCompactTools ? 1 : 1 + Math.max(extraStatusLine, previewLineCount);
+}

package/dist/app/rendering/editor-panels.js

@@ -1,6 +1,7 @@
 import { stringDisplayWidth } from "../../terminal-width.js";
 import { SUBAGENTS_WIDGET_MAX_ROWS } from "../constants.js";
 import { ellipsizeDisplay, padOrTrimPlain, wrapLine } from "./render-text.js";
+import { thinkingLevelThemeColor } from "./status-line-renderer.js";
 import { activeSubagentStates, formatElapsedSince, formatSubagentsPanelStats, subagentModelThinkingLabel, subagentRunName, subagentStatusIcon, taskPreviewMap, } from "../subagents/subagents-model.js";
 import { formatTodoPanelStats, formatTodoTaskLine, hasOpenTodoTasks, shiftSegmentsToSlice, todoTaskLineSegments, visibleTodoTaskRows, visibleTodoTasks, } from "../todo/todo-model.js";
 export function renderTodoPanel(details, expanded, width, colors) {
@@ -18,12 +19,13 @@ export function renderTodoPanel(details, expanded, width, colors) {
     const headerText = `todos ${expanded ? "▾" : "▸"}${stats ? ` ${stats}` : ""}`;
     const todoPanelColor = colors.warning;
     const todoMetaColor = colors.muted;
+    const todoThinkingColor = (level) => thinkingLevelThemeColor(level, colors);
     if (!expanded) {
         const prefix = `${headerText} — current: `;
         const current = activeTask ? formatTodoTaskLine(activeTask) : "no active todo";
         const collapsedText = `${prefix}${current}`;
         const segments = activeTask
-            ? todoTaskLineSegments(activeTask, todoMetaColor).map((segment) => ({
+            ? todoTaskLineSegments(activeTask, todoMetaColor, { thinkingColor: todoThinkingColor }).map((segment) => ({
                 ...segment,
                 start: segment.start + prefix.length,
                 end: segment.end + prefix.length,
@@ -41,7 +43,7 @@ export function renderTodoPanel(details, expanded, width, colors) {
     const lines = [];
     for (const { task, depth } of visibleTodoTaskRows(details)) {
         const text = formatTodoTaskLine(task, { depth });
-        const segments = todoTaskLineSegments(task, todoMetaColor, { depth });
+        const segments = todoTaskLineSegments(task, todoMetaColor, { depth, thinkingColor: todoThinkingColor });
         let start = 0;
         for (const wrapped of wrapLine(text, contentWidth)) {
             lines.push({

package/dist/app/rendering/popup-menu-renderer.d.ts

@@ -0,0 +1,50 @@
+import { type Theme } from "../../theme.js";
+import type { PopupMenu } from "../../ui.js";
+import type { ScreenStyler } from "../screen/screen-styler.js";
+import type { Entry, ModelMenuValue, PixMenuItem, PixMenuOptions, QueueMessageMenuValue, RenderedLine, ResumeMenuValue, SlashCommand, ThinkingMenuValue, UserMessageJumpMenuValue, UserMessageMenuValue } from "../types.js";
+import type { AgentSession } from "@earendil-works/pi-coding-agent";
+export type PopupMenuRendererHost = {
+    readonly theme: Theme;
+    readonly screenStyler: ScreenStyler;
+    readonly entries: readonly Entry[];
+    readonly session: AgentSession | undefined;
+    readonly resumeLoading: boolean;
+    readonly resumeSessionCount: number;
+};
+export declare class PopupMenuRenderer {
+    private readonly host;
+    constructor(host: PopupMenuRendererHost);
+    popupMenuWidth(columns: number): number;
+    popupMenuMargin(columns: number): number;
+    effectivePopupMenuWidth(columns: number): number;
+    styleOverlayLine(row: number, line: RenderedLine, width: number, activeMenu: PopupMenu<unknown>): string;
+    overlayPlainText(line: RenderedLine, width: number): string;
+    renderInlineUserMessageMenu(options: {
+        userContentWidth: number;
+        userContentLeft: number;
+        userLine: (text: string, entryId?: string, syntaxHighlight?: RenderedLine["syntaxHighlight"]) => RenderedLine;
+    }, menu: PopupMenu<UserMessageMenuValue>): RenderedLine[];
+    renderSlashCommandMenu(width: number, menu: PopupMenu<SlashCommand>): RenderedLine[];
+    renderModelMenu(width: number, menu: PopupMenu<ModelMenuValue>): RenderedLine[];
+    renderThinkingMenu(width: number, menu: PopupMenu<ThinkingMenuValue>): RenderedLine[];
+    renderResumeMenu(width: number, menu: PopupMenu<ResumeMenuValue>, state: {
+        directQuery: string;
+        allSessionsLoaded: boolean;
+        loadedSessionCount: number;
+    }): RenderedLine[];
+    renderUserMessageJumpMenu(width: number, menu: PopupMenu<UserMessageJumpMenuValue>, directQuery: string): RenderedLine[];
+    renderQueueMessageMenu(width: number, menu: PopupMenu<QueueMessageMenuValue>): RenderedLine[];
+    renderSdkMenu(width: number, menu: PopupMenu<PixMenuItem<unknown>>, request: {
+        options: PixMenuOptions;
+    } | undefined, directQuery: string): RenderedLine[];
+    private hasPopupActionItems;
+    private userMessageActionForeground;
+    private selectableItemVariant;
+    private queueMessageItemVariant;
+    private sdkItemVariant;
+    private resumeMenuItemSegments;
+    private popupMenuHeader;
+    private popupLineForeground;
+    private popupLineBackground;
+}
+export declare function formatPopupMenuHeader(title: string, width: number): string;

package/dist/app/rendering/popup-menu-renderer.js

@@ -0,0 +1,307 @@
+import { colorLine } from "../../theme.js";
+import { stringDisplayWidth } from "../../terminal-width.js";
+import { SLASH_COMMAND_DESCRIPTION_COLUMN, } from "../constants.js";
+import { APP_ICONS } from "../icons.js";
+import { ellipsizeDisplay, padOrTrimPlain, sanitizeText } from "./render-text.js";
+const POPUP_MENU_ESCAPE_BUTTON = "Esc";
+export class PopupMenuRenderer {
+    host;
+    constructor(host) {
+        this.host = host;
+    }
+    popupMenuWidth(columns) {
+        return columns;
+    }
+    popupMenuMargin(columns) {
+        return columns > 44 ? 2 : 0;
+    }
+    effectivePopupMenuWidth(columns) {
+        const sideMargin = this.popupMenuMargin(columns);
+        return Math.min(this.popupMenuWidth(columns), Math.max(1, columns - sideMargin * 2));
+    }
+    styleOverlayLine(row, line, width, activeMenu) {
+        const colors = this.host.theme.colors;
+        const margin = this.popupMenuMargin(width);
+        const menuWidth = this.effectivePopupMenuWidth(width);
+        const rightMargin = Math.max(0, width - margin - menuWidth);
+        const selected = line.target?.kind === "popup-menu" && activeMenu.selectedIndex === line.target.index;
+        const foreground = this.popupLineForeground(line, selected);
+        const background = this.popupLineBackground(line, selected);
+        const plain = `${" ".repeat(margin)}${padOrTrimPlain(line.text, menuWidth)}${" ".repeat(rightMargin)}`;
+        if (this.host.screenStyler.selectionRangeForRow(row, width)) {
+            return this.host.screenStyler.styleLine(row, plain, width, { foreground, background });
+        }
+        return [
+            colorLine("", margin, { background: colors.background }),
+            line.segments && line.segments.length > 0
+                ? this.host.screenStyler.styleLineSegments(row, line.text, menuWidth, { foreground, background, bold: selected }, line.segments)
+                : colorLine(line.text, menuWidth, { foreground, background, bold: selected }),
+            colorLine("", rightMargin, { background: colors.background }),
+        ].join("");
+    }
+    overlayPlainText(line, width) {
+        const margin = this.popupMenuMargin(width);
+        const menuWidth = this.effectivePopupMenuWidth(width);
+        const rightMargin = Math.max(0, width - margin - menuWidth);
+        return `${" ".repeat(margin)}${padOrTrimPlain(line.text, menuWidth)}${" ".repeat(rightMargin)}`;
+    }
+    renderInlineUserMessageMenu(options, menu) {
+        const headerLine = options.userLine(formatPopupMenuHeader("Message actions", options.userContentWidth));
+        headerLine.target = { kind: "popup-menu-close" };
+        headerLine.segments = [{
+                start: options.userContentLeft,
+                end: options.userContentLeft + options.userContentWidth,
+                foreground: this.host.theme.colors.accent,
+                background: this.host.theme.colors.popupHeaderBackground,
+                bold: true,
+            }];
+        const lines = [headerLine];
+        for (const item of menu.visibleItems()) {
+            const label = item.label.padEnd(18, " ");
+            const description = item.description ?? "";
+            const marker = item.selected ? "›" : " ";
+            const rawText = `${marker} ${label}${description}`;
+            const text = ellipsizeDisplay(rawText, options.userContentWidth);
+            const line = options.userLine(text);
+            line.target = { kind: "popup-menu", index: item.index };
+            const contentStart = options.userContentLeft;
+            const labelStart = contentStart + 2;
+            const labelEnd = Math.min(contentStart + text.length, labelStart + item.label.length);
+            const descriptionStart = contentStart + 2 + label.length;
+            line.segments = [
+                ...(item.selected ? [{ start: contentStart, end: contentStart + 1, foreground: this.host.theme.colors.accent, bold: true }] : []),
+                {
+                    start: labelStart,
+                    end: labelEnd,
+                    foreground: this.userMessageActionForeground(item.selected, item.value),
+                    bold: item.selected,
+                },
+                ...(descriptionStart < contentStart + text.length
+                    ? [{ start: descriptionStart, end: contentStart + text.length, foreground: this.host.theme.colors.muted }]
+                    : []),
+            ];
+            lines.push(line);
+        }
+        return lines;
+    }
+    renderSlashCommandMenu(width, menu) {
+        const lines = [this.popupMenuHeader("Commands", width)];
+        const visibleItems = menu.visibleItems();
+        if (!this.hasPopupActionItems(menu.items)) {
+            lines.push({ text: "  No matching slash commands", variant: "muted" });
+        }
+        for (const item of visibleItems) {
+            const command = item.label.padEnd(SLASH_COMMAND_DESCRIPTION_COLUMN, " ");
+            const description = item.description ?? "";
+            lines.push({
+                text: `${command}${description}`,
+                variant: item.selected ? "accent" : "normal",
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        return lines;
+    }
+    renderModelMenu(width, menu) {
+        const lines = [this.popupMenuHeader("Select model", width)];
+        const visibleItems = menu.visibleItems();
+        if (!this.hasPopupActionItems(menu.items)) {
+            lines.push({
+                text: this.host.session ? "  No matching favorite models" : "  Model menu unavailable",
+                variant: "muted",
+            });
+        }
+        for (const item of visibleItems) {
+            const model = item.label.padEnd(SLASH_COMMAND_DESCRIPTION_COLUMN, " ");
+            const description = item.description ?? "";
+            lines.push({
+                text: `${model}${description}`,
+                variant: this.selectableItemVariant(item.selected, item.value),
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        return lines;
+    }
+    renderThinkingMenu(width, menu) {
+        const lines = [this.popupMenuHeader("Thinking level", width)];
+        const visibleItems = menu.visibleItems();
+        if (!this.hasPopupActionItems(menu.items)) {
+            lines.push({ text: "  No matching thinking levels", variant: "muted" });
+        }
+        for (const item of visibleItems) {
+            const level = item.label.padEnd(SLASH_COMMAND_DESCRIPTION_COLUMN, " ");
+            const description = item.description ?? "";
+            lines.push({
+                text: `${level}${description}`,
+                variant: this.selectableItemVariant(item.selected, item.value),
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        return lines;
+    }
+    renderResumeMenu(width, menu, state) {
+        const title = this.host.resumeLoading ? `Resume session ${APP_ICONS.timerSand}` : "Resume session";
+        const lines = [this.popupMenuHeader(title, width)];
+        const visibleItems = menu.visibleItems();
+        if (!this.host.resumeLoading && !this.hasPopupActionItems(menu.items)) {
+            lines.push({
+                text: this.host.resumeSessionCount === 0 ? "  No sessions found" : "  No matching sessions",
+                variant: "muted",
+            });
+        }
+        for (const item of visibleItems) {
+            const label = item.label;
+            const description = item.description ?? "";
+            const text = `${label}  ${description}`;
+            const segments = this.resumeMenuItemSegments(item.value, label, description, text);
+            lines.push({
+                text,
+                variant: item.selected ? "accent" : "normal",
+                ...(segments ? { segments } : {}),
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        if (!state.allSessionsLoaded && state.loadedSessionCount > 0) {
+            lines.push({ text: `  Loaded ${state.loadedSessionCount} sessions · scroll for more`, variant: "muted" });
+        }
+        if (state.directQuery) {
+            lines.push({ text: `  Search: ${state.directQuery}`, variant: "muted" });
+        }
+        return lines;
+    }
+    renderUserMessageJumpMenu(width, menu, directQuery) {
+        const lines = [this.popupMenuHeader("Jump to user message", width)];
+        if (!this.hasPopupActionItems(menu.items)) {
+            lines.push({
+                text: this.host.entries.some((entry) => entry.kind === "user") ? "  No matching user messages" : "  No user messages yet",
+                variant: "muted",
+            });
+        }
+        const labelWidth = Math.max(1, width);
+        for (const item of menu.visibleItems()) {
+            const label = ellipsizeDisplay(item.label, labelWidth);
+            lines.push({
+                text: label,
+                variant: item.selected ? "accent" : "normal",
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        if (directQuery) {
+            lines.push({ text: `  Search: ${directQuery}`, variant: "muted" });
+        }
+        return lines;
+    }
+    renderQueueMessageMenu(width, menu) {
+        const lines = [this.popupMenuHeader("Queued message", width)];
+        for (const item of menu.visibleItems()) {
+            const label = item.label.padEnd(18, " ");
+            const description = item.description ?? "";
+            lines.push({
+                text: `${label}${description}`,
+                variant: this.queueMessageItemVariant(item.selected, item.value),
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        return lines;
+    }
+    renderSdkMenu(width, menu, request, directQuery) {
+        const lines = [this.popupMenuHeader(request?.options.title ?? "Menu", width)];
+        if (!this.hasPopupActionItems(menu.items)) {
+            lines.push({ text: `  ${request?.options.emptyText ?? "No matching items"}`, variant: "muted" });
+        }
+        for (const item of menu.visibleItems()) {
+            const label = item.label.padEnd(SLASH_COMMAND_DESCRIPTION_COLUMN, " ");
+            const description = item.description ?? "";
+            lines.push({
+                text: `${label}${description}`,
+                variant: this.sdkItemVariant(item.selected, item.value),
+                target: { kind: "popup-menu", index: item.index },
+            });
+        }
+        if (request?.options.searchable !== false && directQuery) {
+            lines.push({ text: `  ${request?.options.placeholder ?? "Search"}: ${directQuery}`, variant: "muted" });
+        }
+        return lines;
+    }
+    hasPopupActionItems(items) {
+        return items.length > 0;
+    }
+    userMessageActionForeground(selected, value) {
+        if (selected)
+            return this.host.theme.colors.accent;
+        if (value === "undo")
+            return this.host.theme.colors.error;
+        return this.host.theme.colors.inputForeground;
+    }
+    selectableItemVariant(selected, value) {
+        if (selected)
+            return "accent";
+        return value.current ? "muted" : "normal";
+    }
+    queueMessageItemVariant(selected, value) {
+        if (selected)
+            return "accent";
+        return value === "cancel" ? "error" : "normal";
+    }
+    sdkItemVariant(selected, value) {
+        if (selected)
+            return "accent";
+        return value.variant ?? "normal";
+    }
+    resumeMenuItemSegments(value, label, description, text) {
+        if (value.kind !== "session")
+            return undefined;
+        const sessionLabel = value.session.name ?? value.session.firstMessage.slice(0, 50);
+        const sessionLabelStart = Math.max(0, label.length - sessionLabel.length);
+        const muted = this.host.theme.colors.popupMuted;
+        const segments = [];
+        if (sessionLabelStart > 0)
+            segments.push({ start: 0, end: sessionLabelStart, foreground: muted });
+        if (description.length > 0)
+            segments.push({ start: label.length, end: text.length, foreground: muted });
+        return segments.length > 0 ? segments : undefined;
+    }
+    popupMenuHeader(title, width) {
+        return {
+            text: formatPopupMenuHeader(title, width),
+            variant: "accent",
+            backgroundOverride: this.host.theme.colors.popupHeaderBackground,
+            target: { kind: "popup-menu-close" },
+        };
+    }
+    popupLineForeground(line, selected) {
+        const colors = this.host.theme.colors;
+        if (selected)
+            return colors.popupSelectedForeground;
+        if (line.colorOverride)
+            return line.colorOverride;
+        switch (line.variant) {
+            case "accent":
+                return colors.accent;
+            case "muted":
+                return colors.popupMuted;
+            case "error":
+                return colors.error;
+            case "normal":
+            case undefined:
+                return colors.popupForeground;
+        }
+        return colors.popupForeground;
+    }
+    popupLineBackground(line, selected) {
+        const colors = this.host.theme.colors;
+        if (selected)
+            return colors.popupSelectedBackground;
+        return line.backgroundOverride ?? colors.popupBackground;
+    }
+}
+export function formatPopupMenuHeader(title, width) {
+    const safeWidth = Math.max(1, width);
+    const sanitizedTitle = sanitizeText(title).replace(/\s+/g, " ").trim() || "Menu";
+    const buttonWidth = stringDisplayWidth(POPUP_MENU_ESCAPE_BUTTON);
+    if (safeWidth <= buttonWidth + 1)
+        return padOrTrimPlain(POPUP_MENU_ESCAPE_BUTTON, safeWidth);
+    const titleWidth = safeWidth - buttonWidth - 1;
+    const titleText = ellipsizeDisplay(sanitizedTitle, titleWidth);
+    const gapWidth = Math.max(1, safeWidth - stringDisplayWidth(titleText) - buttonWidth);
+    return `${titleText}${" ".repeat(gapWidth)}${POPUP_MENU_ESCAPE_BUTTON}`;
+}