pi-ui-extend 0.1.13 → 0.1.17

package/dist/app/popup/popup-menu-controller.js

@@ -1,14 +1,11 @@
 import { resolve } from "node:path";
 import { fuzzySearch } from "../../fuzzy.js";
-import { colorLine } from "../../theme.js";
 import { PopupMenu } from "../../ui.js";
-import { padOrTrimPlain, ellipsizeDisplay, sanitizeText } from "../rendering/render-text.js";
-import { stringDisplayWidth } from "../../terminal-width.js";
-import { RESUME_MENU_INITIAL_SESSION_ROWS, RESUME_MENU_LOAD_BATCH_ROWS, RESUME_MENU_LOAD_THRESHOLD_ROWS, RESUME_MENU_MAX_ROWS, SLASH_COMMAND_DESCRIPTION_COLUMN, SLASH_COMMAND_MENU_MAX_ROWS, THINKING_MENU_MAX_ROWS, } from "../constants.js";
-import { APP_ICONS } from "../icons.js";
-const POPUP_MENU_ESCAPE_BUTTON = "Esc";
+import { sanitizeText } from "../rendering/render-text.js";
+import { RESUME_MENU_INITIAL_SESSION_ROWS, RESUME_MENU_LOAD_BATCH_ROWS, RESUME_MENU_LOAD_THRESHOLD_ROWS, RESUME_MENU_MAX_ROWS, SLASH_COMMAND_MENU_MAX_ROWS, THINKING_MENU_MAX_ROWS, } from "../constants.js";
 export class AppPopupMenuController {
     host;
+    renderer;
     menuController = {
         show: (items, options) => this.showSdkMenu(items, options),
         select: (title, options, menuOptions) => this.selectSdkMenu(title, options, menuOptions),
@@ -40,8 +37,9 @@ export class AppPopupMenuController {
     resumeMenuAllSessionsLoaded = false;
     activeUserMessageEntryId;
     activeQueuedMessageEntryId;
-    constructor(host) {
+    constructor(host, renderer) {
         this.host = host;
+        this.renderer = renderer;
     }
     get directMenu() {
         return this.directPopupMenu;
@@ -121,7 +119,6 @@ export class AppPopupMenuController {
             case "slash":
                 return this.slashCommandMenu;
         }
-        throw new Error(`Unknown popup menu: ${active}`);
     }
     moveActivePopupMenuSelection(delta) {
         const active = this.syncActivePopupMenu();
@@ -266,6 +263,29 @@ export class AppPopupMenuController {
         this.slashCommandMenu.close();
         this.dismissedSlashCommandMenuInput = undefined;
     }
+    closeMenusForTabSwitch() {
+        if (this.directPopupMenu === "sdk-menu") {
+            this.closeSdkMenu(undefined, { render: false, restoreStatus: false });
+        }
+        this.directPopupMenu = undefined;
+        this.directPopupMenuQuery = "";
+        this.directPopupMenuPreserveStatus = false;
+        this.directPopupMenuPlacement = "default";
+        this.activeUserMessageEntryId = undefined;
+        this.activeQueuedMessageEntryId = undefined;
+        this.slashCommandMenu.close();
+        this.modelMenu.close();
+        this.thinkingMenu.close();
+        this.resumeMenu.close();
+        this.userMessageMenu.close();
+        this.userMessageJumpMenu.close();
+        this.queueMessageMenu.close();
+        this.sdkMenu.close();
+        const input = this.host.getInput();
+        this.dismissedSlashCommandMenuInput = input;
+        this.dismissedModelMenuInput = input;
+        this.dismissedThinkingMenuInput = input;
+    }
     cancelActivePopupMenu() {
         const active = this.syncActivePopupMenu();
         if (this.directPopupMenu === "sdk-menu") {
@@ -414,60 +434,44 @@ export class AppPopupMenuController {
     }
     renderActivePopupMenu(width) {
         if (this.syncQueueMessageMenu())
-            return this.renderQueueMessageMenu(width);
+            return this.renderer.renderQueueMessageMenu(width, this.queueMessageMenu);
         // User-message actions are rendered inline inside the selected message block.
         // They must never also appear as the global popup above the input editor.
         if (this.syncUserMessageMenu())
             return [];
         if (this.syncUserMessageJumpMenu())
-            return this.renderUserMessageJumpMenu(width);
-        if (this.syncResumeMenu())
-            return this.renderResumeMenu(width);
+            return this.renderer.renderUserMessageJumpMenu(width, this.userMessageJumpMenu, this.directPopupMenuQuery);
+        if (this.syncResumeMenu()) {
+            return this.renderer.renderResumeMenu(width, this.resumeMenu, {
+                directQuery: this.directPopupMenuQuery,
+                allSessionsLoaded: this.resumeMenuAllSessionsLoaded,
+                loadedSessionCount: this.resumeMenuLoadedSessionCount(),
+            });
+        }
         if (this.syncSdkMenu())
-            return this.renderSdkMenu(width);
+            return this.renderer.renderSdkMenu(width, this.sdkMenu, this.sdkMenuRequest, this.directPopupMenuQuery);
         if (this.syncModelMenu())
-            return this.renderModelMenu(width);
+            return this.renderer.renderModelMenu(width, this.modelMenu);
         if (this.syncThinkingMenu())
-            return this.renderThinkingMenu(width);
-        return this.renderSlashCommandMenu(width);
+            return this.renderer.renderThinkingMenu(width, this.thinkingMenu);
+        return this.syncSlashCommandMenu() ? this.renderer.renderSlashCommandMenu(width, this.slashCommandMenu) : [];
     }
     popupMenuWidth(columns) {
-        return columns;
+        return this.renderer.popupMenuWidth(columns);
     }
     popupMenuMargin(columns) {
-        return columns > 44 ? 2 : 0;
+        return this.renderer.popupMenuMargin(columns);
     }
     effectivePopupMenuWidth(columns) {
-        const sideMargin = this.popupMenuMargin(columns);
-        return Math.min(this.popupMenuWidth(columns), Math.max(1, columns - sideMargin * 2));
+        return this.renderer.effectivePopupMenuWidth(columns);
     }
     styleOverlayLine(row, line, width) {
-        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 activeMenuName = this.syncActivePopupMenu() ?? "slash";
         const activeMenu = this.getActivePopupMenu(activeMenuName);
-        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("");
+        return this.renderer.styleOverlayLine(row, line, width, activeMenu);
     }
     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)}`;
+        return this.renderer.overlayPlainText(line, width);
     }
     isDynamicConversationBlock(entry) {
         return entry.kind === "user" && this.directPopupMenu === "user-message" && this.activeUserMessageEntryId === entry.id;
@@ -478,46 +482,7 @@ export class AppPopupMenuController {
     renderInlineUserMessageMenu(entry, options) {
         if (!(this.directPopupMenu === "user-message" && this.activeUserMessageEntryId === entry.id && this.syncUserMessageMenu()))
             return [];
-        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 this.userMessageMenu.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;
-    }
-    hasPopupActionItems(items) {
-        return items.length > 0;
+        return this.renderer.renderInlineUserMessageMenu(options, this.userMessageMenu);
     }
     withoutCloseMenuItems(items) {
         return items.filter((item) => item.label.trim().toLowerCase() !== "cancel");
@@ -551,49 +516,6 @@ export class AppPopupMenuController {
     resumeMenuLoadedSessionCount() {
         return this.resumeMenu.items.filter((item) => item.value.kind === "session").length;
     }
-    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" },
-        };
-    }
     syncModelMenu() {
         if (this.directPopupMenu === "model") {
             this.closeMenusExcept("model");
@@ -744,202 +666,21 @@ export class AppPopupMenuController {
                 value: item,
                 label: item.label,
                 ...(item.keywords === undefined ? {} : { keywords: item.keywords }),
-            })), query).map((match) => match.value);
+            })), query, {
+                ...(request.options.minScorePerCharacter === undefined ? {} : { minScorePerCharacter: request.options.minScorePerCharacter }),
+                preferKeyboardLayoutMatches: request.options.preferKeyboardLayoutMatches ?? false,
+            }).map((match) => ({
+                ...match.value,
+                labelHighlightRanges: match.matchedText === match.label ? match.matchedRanges : [],
+            }));
         return this.withoutCloseMenuItems(items.map((item) => ({
             value: item,
             label: item.label,
+            ...(item.labelHighlightRanges === undefined ? {} : { labelHighlightRanges: item.labelHighlightRanges }),
+            ...(item.descriptionHighlightRanges === undefined ? {} : { descriptionHighlightRanges: item.descriptionHighlightRanges }),
             ...(item.description === undefined ? {} : { description: item.description }),
         })));
     }
-    renderSlashCommandMenu(_width) {
-        if (!this.syncSlashCommandMenu())
-            return [];
-        const lines = [this.popupMenuHeader("Commands", _width)];
-        const visibleItems = this.slashCommandMenu.visibleItems();
-        if (!this.hasPopupActionItems(this.slashCommandMenu.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) {
-        if (!this.syncModelMenu())
-            return [];
-        const lines = [this.popupMenuHeader("Select model", _width)];
-        const visibleItems = this.modelMenu.visibleItems();
-        if (!this.hasPopupActionItems(this.modelMenu.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) {
-        if (!this.syncThinkingMenu())
-            return [];
-        const lines = [this.popupMenuHeader("Thinking level", _width)];
-        const visibleItems = this.thinkingMenu.visibleItems();
-        if (!this.hasPopupActionItems(this.thinkingMenu.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) {
-        if (!this.syncResumeMenu())
-            return [];
-        const title = this.host.resumeLoading ? `Resume session ${APP_ICONS.timerSand}` : "Resume session";
-        const lines = [this.popupMenuHeader(title, _width)];
-        const visibleItems = this.resumeMenu.visibleItems();
-        if (!this.host.resumeLoading && !this.hasPopupActionItems(this.resumeMenu.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 (!this.resumeMenuAllSessionsLoaded && this.resumeMenuLoadedSessionCount() > 0) {
-            lines.push({ text: `  Loaded ${this.resumeMenuLoadedSessionCount()} sessions · scroll for more`, variant: "muted" });
-        }
-        if (this.directPopupMenuQuery) {
-            lines.push({ text: `  Search: ${this.directPopupMenuQuery}`, variant: "muted" });
-        }
-        return lines;
-    }
-    renderUserMessageJumpMenu(width) {
-        if (!this.syncUserMessageJumpMenu())
-            return [];
-        const lines = [this.popupMenuHeader("Jump to user message", width)];
-        if (!this.hasPopupActionItems(this.userMessageJumpMenu.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 this.userMessageJumpMenu.visibleItems()) {
-            const label = ellipsizeDisplay(item.label, labelWidth);
-            lines.push({
-                text: label,
-                variant: item.selected ? "accent" : "normal",
-                target: { kind: "popup-menu", index: item.index },
-            });
-        }
-        if (this.directPopupMenuQuery) {
-            lines.push({ text: `  Search: ${this.directPopupMenuQuery}`, variant: "muted" });
-        }
-        return lines;
-    }
-    renderQueueMessageMenu(_width) {
-        if (!this.syncQueueMessageMenu())
-            return [];
-        const lines = [this.popupMenuHeader("Queued message", _width)];
-        for (const item of this.queueMessageMenu.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) {
-        if (!this.syncSdkMenu())
-            return [];
-        const request = this.sdkMenuRequest;
-        const lines = [this.popupMenuHeader(request?.options.title ?? "Menu", _width)];
-        if (!this.hasPopupActionItems(this.sdkMenu.items)) {
-            lines.push({ text: `  ${request?.options.emptyText ?? "No matching items"}`, variant: "muted" });
-        }
-        for (const item of this.sdkMenu.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 && this.directPopupMenuQuery) {
-            lines.push({ text: `  ${request?.options.placeholder ?? "Search"}: ${this.directPopupMenuQuery}`, variant: "muted" });
-        }
-        return lines;
-    }
-    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}`;
 }
 function canonicalSessionPath(sessionPath) {
     return sessionPath ? resolve(sessionPath) : undefined;
@@ -1000,7 +741,8 @@ function formatSessionMenuDateTime(dateTime) {
         time: dateTime.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit", hourCycle: "h23" }),
     };
 }
-function formatSessionInfoMenuItem(session, labelPrefix = "") {
+function formatSessionInfoMenuItem(source) {
+    const { session, labelPrefix } = source;
     const { date, time } = formatSessionMenuDateTime(session.modified);
     const messages = `${session.messageCount} msg${session.messageCount !== 1 ? "s" : ""}`;
     const label = session.name ?? session.firstMessage.slice(0, 50);
@@ -1008,6 +750,7 @@ function formatSessionInfoMenuItem(session, labelPrefix = "") {
         value: session,
         label: `${labelPrefix}${label}`,
         description: `${date} ${time} · ${messages} · ${session.id.slice(0, 8)}`,
+        ...(source.labelHighlightRanges === undefined ? {} : { labelHighlightRanges: source.labelHighlightRanges }),
     };
 }
 function buildSessionInfoMenuSource(sessions, currentSessionFile, query) {
@@ -1028,7 +771,11 @@ function buildSessionInfoMenuSource(sessions, currentSessionFile, query) {
             session.id,
         ],
     }));
-    return fuzzySearch(items, query).map((match) => ({ session: match.value, labelPrefix: "" }));
+    return fuzzySearch(items, query).map((match) => ({
+        session: match.value,
+        labelPrefix: "",
+        labelHighlightRanges: match.matchedText === match.label ? match.matchedRanges : [],
+    }));
 }
 export function createSessionInfoMenuItemsLoader(sessions, currentSessionFile, query) {
     const source = buildSessionInfoMenuSource(sessions, currentSessionFile, query);
@@ -1042,7 +789,7 @@ export function createSessionInfoMenuItemsLoader(sessions, currentSessionFile, q
             const cached = cachedItems.get(effectiveLimit);
             if (cached)
                 return cached;
-            const result = source.slice(0, effectiveLimit).map((item) => formatSessionInfoMenuItem(item.session, item.labelPrefix));
+            const result = source.slice(0, effectiveLimit).map((item) => formatSessionInfoMenuItem(item));
             cachedItems.set(effectiveLimit, result);
             return result;
         },
@@ -1051,20 +798,44 @@ export function createSessionInfoMenuItemsLoader(sessions, currentSessionFile, q
 export function formatSessionInfoMenuItems(sessions, currentSessionFile, query, options = {}) {
     return createSessionInfoMenuItemsLoader(sessions, currentSessionFile, query).items(options.limit);
 }
-export function buildUserMessageJumpItems(entries, query) {
-    const userEntries = entries.filter((entry) => entry.kind === "user");
-    const items = userEntries.map((entry, index) => {
+export function buildUserMessageJumpItems(entries) {
+    const userEntries = entries.flatMap((entry) => {
+        if ("kind" in entry) {
+            return entry.kind === "user"
+                ? [{ text: entry.text, entryId: entry.id, ...(entry.sessionEntryId === undefined ? {} : { sessionEntryId: entry.sessionEntryId }) }]
+                : [];
+        }
+        return [entry];
+    });
+    return userEntries.map((entry, index) => {
         const preview = sanitizeText(entry.text).replace(/\s+/g, " ").trim();
         const label = `${index + 1}. ${preview || "(empty message)"}`;
         return {
-            value: { entryId: entry.id },
+            value: { ...(entry.entryId === undefined ? {} : { entryId: entry.entryId }), ...(entry.sessionEntryId === undefined ? {} : { sessionEntryId: entry.sessionEntryId }) },
             label,
-            aliases: [entry.sessionEntryId ?? "", entry.id],
+            ...(entry.entryId ? {} : { description: "load older history and jump" }),
+            aliases: [entry.sessionEntryId ?? "", entry.entryId ?? ""],
             keywords: [entry.text],
         };
     });
-    return fuzzySearch(items, query).map((match) => ({
-        value: match.value,
-        label: match.label,
+}
+export function filterUserMessageJumpItems(items, query) {
+    const searchableItems = items.map((item) => ({
+        value: item,
+        label: item.label,
+        ...(item.aliases === undefined ? {} : { aliases: item.aliases }),
+        ...(item.keywords === undefined ? {} : { keywords: item.keywords }),
     }));
+    return fuzzySearch(searchableItems, query).map((match) => ({
+        ...match.value,
+        labelHighlightRanges: labelHighlightRangesFromMatch(match.matchedText, match.matchedRanges, match.label),
+    }));
+}
+function labelHighlightRangesFromMatch(matchedText, matchedRanges, label) {
+    if (matchedText === label)
+        return matchedRanges;
+    const offset = label.toLocaleLowerCase().indexOf(matchedText.toLocaleLowerCase());
+    if (offset < 0)
+        return [];
+    return matchedRanges.map((range) => ({ start: offset + range.start, end: offset + range.end }));
 }

package/dist/app/rendering/conversation-entry-renderer.js

@@ -16,10 +16,10 @@ export function renderConversationEntry(entry, width, options) {
         ...(entryId === undefined ? {} : { target: { kind: "user-message", id: entryId } }),
     });
     const queuedLine = (text, entryId, segments) => ({
-        text: padHorizontalText(text, width),
+        text,
         variant: "muted",
         backgroundOverride: options.colors.userMessageBackground,
-        ...(segments && segments.length > 0 ? { segments: segments.map((segment) => ({ ...segment, start: segment.start + userContentLeft, end: segment.end + userContentLeft })) } : {}),
+        ...(segments && segments.length > 0 ? { segments } : {}),
         target: { kind: "queue-message", id: entryId },
     });
     const userMessageLines = (userEntry) => {
@@ -33,7 +33,7 @@ export function renderConversationEntry(entry, width, options) {
     };
     const queuedMessageLines = (queuedEntry) => {
         const icon = queuedEntry.queueSource === "deferred" ? APP_ICONS.pause : APP_ICONS.timerSand;
-        const contentLines = wrapText(`${icon} ${queuedEntry.text}`, userContentWidth);
+        const contentLines = wrapText(`${icon} ${queuedEntry.text}`, width);
         return contentLines.map((text, index) => queuedLine(text, queuedEntry.id, index === 0 ? [{ start: 0, end: icon.length, foreground: options.colors.info }] : undefined));
     };
     switch (entry.kind) {

package/dist/app/rendering/conversation-viewport.d.ts

@@ -1,5 +1,5 @@
 import type { AgentSession } from "@earendil-works/pi-coding-agent";
-import type { PixConfig } from "../../config.js";
+import { type PixConfig } from "../../config.js";
 import type { Theme } from "../../theme.js";
 import { type InlineUserMessageMenuContext } from "./conversation-entry-renderer.js";
 import type { ConversationBlockCache, Entry, RenderedLine, SubmittedUserMessage } from "../types.js";
@@ -35,19 +35,27 @@ export declare class ConversationViewport {
     deleteEntry(entryId: string): void;
     lineCount(width: number): number;
     slice(width: number, start: number, count: number): RenderedLine[];
+    private sliceMeasured;
     entries(): Entry[];
     blockForEntry(entry: Entry, width: number): ConversationBlockCache;
     entryBlockPositions(width: number): ConversationEntryBlockPosition[];
+    measuredLineCountForEntries(width: number, entryIds: readonly string[]): number;
     private queuedEntries;
     private layoutForWidth;
     private buildLayout;
+    private previousMeasuredLineCount;
     private layoutStructureChanged;
     private refreshDirtyLayoutEntries;
     private blockCacheForWidth;
     private refreshDynamicLayoutEntries;
+    private ensureEntryMeasured;
     private refreshLayoutEntry;
-    private lineCountForEntry;
+    private measuredLineCountForEntry;
+    private estimatedLineCountForEntry;
+    private lineCountWithGap;
+    private estimatedBlockLineCountForEntry;
     private nextVisibleEntry;
+    private nextEstimatedVisibleEntry;
     private gapAfterEntry;
     private isSuperCompactGaplessEntry;
     private entryIndexForOffset;