pi-ui-extend 0.1.15 → 0.1.18

package/dist/app/model/model-usage-status.js

@@ -815,9 +815,9 @@ function formatDurationShort(resetAt, now) {
     const hours = Math.floor((totalMinutes % 1440) / 60);
     const minutes = totalMinutes % 60;
     if (days > 0)
-        return `${days}d ${hours}h`;
+        return `${days}d${hours}h`;
     if (hours > 0)
-        return `${hours}h ${minutes}m`;
+        return `${hours}h${minutes}m`;
     return `${minutes}m`;
 }
 function maskCredential(value) {
@@ -826,29 +826,6 @@ function maskCredential(value) {
         return visible ? "****" : "unknown";
     return `${visible.slice(0, 4)}****${visible.slice(-4)}`;
 }
-function formatUsageWindow(prefix, window, now) {
-    const resetLabel = prefix === "H" ? formatResetTime(window.resetAt, now) : formatGlobalResetLabel(window.resetAt, now);
-    return `${window.remainingPercent}% ${formatCompactProgressBar(window.remainingPercent)} ${resetLabel}`;
-}
-function formatGlobalResetLabel(resetAt, now) {
-    if (resetAt <= now)
-        return "reset";
-    return resetAt - now <= DAY_SECONDS * 1000 ? formatResetTime(resetAt, now) : formatResetDate(resetAt, now);
-}
-function formatResetTime(resetAt, now) {
-    if (resetAt <= now)
-        return "reset";
-    return new Date(resetAt).toLocaleTimeString("ru-RU", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hourCycle: "h23",
-    });
-}
-function formatResetDate(resetAt, now) {
-    if (resetAt <= now)
-        return "reset";
-    return new Date(resetAt).toLocaleDateString("ru-RU", {
-        day: "2-digit",
-        month: "2-digit",
-    });
+function formatUsageWindow(_prefix, window, now) {
+    return `${window.remainingPercent}% ${formatCompactProgressBar(window.remainingPercent)} ${formatDurationShort(window.resetAt, now)}`;
 }

package/dist/app/popup/menu-items-controller.d.ts

@@ -11,6 +11,7 @@ export declare class AppMenuItemsController {
     private readonly host;
     private resumeMenuLoaderCache;
     private userMessageJumpItems;
+    private userMessageJumpLoading;
     constructor(host: AppMenuItemsControllerHost);
     parseSlashInput(text: string): import("../types.js").ParsedSlashInput | undefined;
     getResourceSlashCommands(): SlashCommand[];
@@ -22,6 +23,7 @@ export declare class AppMenuItemsController {
     getThinkingMenuItems(query: string): PopupMenuItem<ThinkingMenuValue>[];
     getUserMessageMenuItems(): PopupMenuItem<UserMessageMenuValue>[];
     getUserMessageJumpMenuItems(query: string): PopupMenuItem<UserMessageJumpMenuValue>[];
+    isUserMessageJumpLoading(): boolean;
     refreshUserMessageJumpMenuItems(): Promise<void>;
     getQueueMessageMenuItems(): PopupMenuItem<QueueMessageMenuValue>[];
     getResumeMenuItems(query: string, limit?: number): PopupMenuItem<ResumeMenuValue>[];

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

@@ -12,6 +12,7 @@ export class AppMenuItemsController {
     host;
     resumeMenuLoaderCache;
     userMessageJumpItems;
+    userMessageJumpLoading = false;
     constructor(host) {
         this.host = host;
     }
@@ -29,6 +30,9 @@ export class AppMenuItemsController {
             value: match.value,
             label: `/${match.value.name}`,
             description: match.value.description,
+            labelHighlightRanges: match.matchedText === match.label
+                ? match.matchedRanges.map((range) => ({ start: range.start + 1, end: range.end + 1 }))
+                : [],
         }));
     }
     modelRef(model) {
@@ -64,6 +68,7 @@ export class AppMenuItemsController {
             value: match.value,
             label: `${match.value.ref}${match.value.current ? ` ${APP_ICONS.check}` : ""}`,
             description: match.value.model.name,
+            labelHighlightRanges: labelHighlightRangesFromMatch(match.matchedText, match.matchedRanges, match.label),
         }));
     }
     getThinkingMenuItems(query) {
@@ -96,26 +101,36 @@ export class AppMenuItemsController {
     getUserMessageJumpMenuItems(query) {
         return filterUserMessageJumpItems(this.userMessageJumpItems ?? buildUserMessageJumpItems(this.host.getEntries()), query);
     }
+    isUserMessageJumpLoading() {
+        return this.userMessageJumpLoading;
+    }
     async refreshUserMessageJumpMenuItems() {
         const runtime = this.host.runtime();
         if (!runtime) {
             this.userMessageJumpItems = undefined;
+            this.userMessageJumpLoading = false;
             return;
         }
-        const entries = await sessionHistoryFullBranchEntries(runtime.session);
-        const loadedBySessionEntryId = new Map(this.host.getEntries()
-            .filter((entry) => entry.kind === "user" && typeof entry.sessionEntryId === "string")
-            .map((entry) => [entry.sessionEntryId, entry]));
-        const sources = entries.flatMap((entry) => {
-            if (entry.type !== "message" || !isRecord(entry.message) || entry.message.role !== "user")
-                return [];
-            const text = renderUserMessageContent(entry.message.content);
-            if (!text)
-                return [];
-            const loaded = loadedBySessionEntryId.get(entry.id);
-            return [{ text, ...(loaded ? { entryId: loaded.id } : {}), sessionEntryId: entry.id }];
-        });
-        this.userMessageJumpItems = buildUserMessageJumpItems(sources);
+        this.userMessageJumpLoading = true;
+        try {
+            const entries = await sessionHistoryFullBranchEntries(runtime.session);
+            const loadedBySessionEntryId = new Map(this.host.getEntries()
+                .filter((entry) => entry.kind === "user" && typeof entry.sessionEntryId === "string")
+                .map((entry) => [entry.sessionEntryId, entry]));
+            const sources = entries.flatMap((entry) => {
+                if (entry.type !== "message" || !isRecord(entry.message) || entry.message.role !== "user")
+                    return [];
+                const text = renderUserMessageContent(entry.message.content);
+                if (!text)
+                    return [];
+                const loaded = loadedBySessionEntryId.get(entry.id);
+                return [{ text, ...(loaded ? { entryId: loaded.id } : {}), sessionEntryId: entry.id }];
+            });
+            this.userMessageJumpItems = buildUserMessageJumpItems(sources);
+        }
+        finally {
+            this.userMessageJumpLoading = false;
+        }
     }
     getQueueMessageMenuItems() {
         return [
@@ -205,6 +220,14 @@ export class AppMenuItemsController {
         }
     }
 }
+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 }));
+}
 function normalizeAvailableThinkingLevels(levels) {
     const seen = new Set();
     const normalized = [];

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

@@ -666,10 +666,18 @@ 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 }),
         })));
     }
@@ -733,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);
@@ -741,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) {
@@ -761,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);
@@ -775,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;
         },
@@ -812,5 +826,16 @@ export function filterUserMessageJumpItems(items, query) {
         ...(item.aliases === undefined ? {} : { aliases: item.aliases }),
         ...(item.keywords === undefined ? {} : { keywords: item.keywords }),
     }));
-    return fuzzySearch(searchableItems, query).map((match) => match.value);
+    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/editor-panels.js

@@ -20,35 +20,46 @@ export function renderTodoPanel(details, expanded, width, colors) {
     const todoPanelColor = colors.warning;
     const todoMetaColor = colors.muted;
     const todoThinkingColor = (level) => thinkingLevelThemeColor(level, colors);
+    const todoStatusThemeColor = (status) => {
+        switch (status) {
+            case "pending": return colors.muted;
+            case "in_progress": return colors.warning;
+            case "deferred": return colors.muted;
+            case "completed": return colors.success;
+            case "deleted": return colors.error;
+        }
+    };
     if (!expanded) {
         const prefix = `${headerText} — current: `;
         const current = activeTask ? formatTodoTaskLine(activeTask) : "no active todo";
         const collapsedText = `${prefix}${current}`;
-        const segments = activeTask
-            ? todoTaskLineSegments(activeTask, todoMetaColor, { thinkingColor: todoThinkingColor }).map((segment) => ({
+        const segments = [
+            { start: 0, end: headerText.length, foreground: todoPanelColor },
+            { start: headerText.length, end: prefix.length, foreground: todoMetaColor },
+        ];
+        if (activeTask) {
+            const activeSegments = todoTaskLineSegments(activeTask, todoMetaColor, { thinkingColor: todoThinkingColor, statusColor: todoStatusThemeColor }).map((segment) => ({
                 ...segment,
                 start: segment.start + prefix.length,
                 end: segment.end + prefix.length,
-            }))
-            : undefined;
+            }));
+            segments.push(...activeSegments);
+        }
         const line = {
             text: padOrTrimPlain(ellipsizeDisplay(collapsedText, contentWidth), width),
-            colorOverride: todoPanelColor,
+            segments,
             target,
         };
-        if (segments)
-            line.segments = segments;
         return [line];
     }
     const lines = [];
     for (const { task, depth } of visibleTodoTaskRows(details)) {
         const text = formatTodoTaskLine(task, { depth });
-        const segments = todoTaskLineSegments(task, todoMetaColor, { depth, thinkingColor: todoThinkingColor });
+        const segments = todoTaskLineSegments(task, todoMetaColor, { depth, thinkingColor: todoThinkingColor, statusColor: todoStatusThemeColor });
         let start = 0;
         for (const wrapped of wrapLine(text, contentWidth)) {
             lines.push({
                 text: padOrTrimPlain(wrapped, width),
-                colorOverride: todoPanelColor,
                 segments: shiftSegmentsToSlice(segments, start, wrapped.length),
                 target,
             });

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

@@ -1,4 +1,5 @@
 import { type Theme } from "../../theme.js";
+import { type ModelColorsConfig } from "../../config.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";
@@ -8,8 +9,10 @@ export type PopupMenuRendererHost = {
     readonly screenStyler: ScreenStyler;
     readonly entries: readonly Entry[];
     readonly session: AgentSession | undefined;
+    readonly modelColors?: ModelColorsConfig;
     readonly resumeLoading: boolean;
     readonly resumeSessionCount: number;
+    readonly userMessageJumpLoading: boolean;
 };
 export declare class PopupMenuRenderer {
     private readonly host;
@@ -38,10 +41,19 @@ export declare class PopupMenuRenderer {
         options: PixMenuOptions;
     } | undefined, directQuery: string): RenderedLine[];
     private hasPopupActionItems;
+    private labelDescriptionText;
     private userMessageActionForeground;
     private selectableItemVariant;
+    private thinkingMenuItemSegments;
+    private modelMenuItemSegments;
+    private modelMenuItemColor;
+    private availableThinkingLevels;
     private queueMessageItemVariant;
     private sdkItemVariant;
+    private sdkMenuItemSegments;
+    private itemHighlightSegments;
+    private highlightSegments;
+    private descriptionHighlightSegments;
     private resumeMenuItemSegments;
     private popupMenuHeader;
     private popupLineForeground;

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

@@ -1,9 +1,13 @@
 import { colorLine } from "../../theme.js";
 import { stringDisplayWidth } from "../../terminal-width.js";
+import { resolveColor, resolveModelColor } from "../../config.js";
 import { SLASH_COMMAND_DESCRIPTION_COLUMN, } from "../constants.js";
 import { APP_ICONS } from "../icons.js";
 import { ellipsizeDisplay, padOrTrimPlain, sanitizeText } from "./render-text.js";
+import { modelProviderThemeColor, thinkingLevelThemeColor } from "./status-line-renderer.js";
 const POPUP_MENU_ESCAPE_BUTTON = "Esc";
+const POPUP_MENU_DESCRIPTION_GAP = "  ";
+const POPUP_MENU_HEADER_SIDE_PADDING = 2;
 export class PopupMenuRenderer {
     host;
     constructor(host) {
@@ -25,7 +29,7 @@ export class PopupMenuRenderer {
         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 foreground = this.popupLineForeground(line);
         const background = this.popupLineBackground(line, selected);
         const plain = `${" ".repeat(margin)}${padOrTrimPlain(line.text, menuWidth)}${" ".repeat(rightMargin)}`;
         if (this.host.screenStyler.selectionRangeForRow(row, width)) {
@@ -59,7 +63,7 @@ export class PopupMenuRenderer {
         for (const item of menu.visibleItems()) {
             const label = item.label.padEnd(18, " ");
             const description = item.description ?? "";
-            const marker = item.selected ? "›" : " ";
+            const marker = item.selected ? "▶" : " ";
             const rawText = `${marker} ${label}${description}`;
             const text = ellipsizeDisplay(rawText, options.userContentWidth);
             const line = options.userLine(text);
@@ -73,7 +77,7 @@ export class PopupMenuRenderer {
                 {
                     start: labelStart,
                     end: labelEnd,
-                    foreground: this.userMessageActionForeground(item.selected, item.value),
+                    foreground: this.userMessageActionForeground(item.value),
                     bold: item.selected,
                 },
                 ...(descriptionStart < contentStart + text.length
@@ -91,11 +95,12 @@ export class PopupMenuRenderer {
             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 ?? "";
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${this.labelDescriptionText(item.label, item.description, width - 2)}`;
             lines.push({
-                text: `${command}${description}`,
-                variant: item.selected ? "accent" : "normal",
+                text,
+                variant: "normal",
+                segments: this.itemHighlightSegments(item, text),
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -111,11 +116,12 @@ export class PopupMenuRenderer {
             });
         }
         for (const item of visibleItems) {
-            const model = item.label.padEnd(SLASH_COMMAND_DESCRIPTION_COLUMN, " ");
-            const description = item.description ?? "";
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${this.labelDescriptionText(item.label, item.description, width - 2)}`;
             lines.push({
-                text: `${model}${description}`,
-                variant: this.selectableItemVariant(item.selected, item.value),
+                text,
+                variant: this.selectableItemVariant(item.value),
+                segments: [...this.modelMenuItemSegments(item.value), ...this.itemHighlightSegments(item, text)],
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -128,11 +134,12 @@ export class PopupMenuRenderer {
             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 ?? "";
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${this.labelDescriptionText(item.label, item.description, width - 2)}`;
             lines.push({
-                text: `${level}${description}`,
-                variant: this.selectableItemVariant(item.selected, item.value),
+                text,
+                variant: this.selectableItemVariant(item.value),
+                segments: this.thinkingMenuItemSegments(item.value),
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -151,12 +158,13 @@ export class PopupMenuRenderer {
         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);
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${label}  ${description}`;
+            const segments = [...(this.resumeMenuItemSegments(item.value, label, description, text) ?? []), ...this.itemHighlightSegments(item, text)];
             lines.push({
                 text,
-                variant: item.selected ? "accent" : "normal",
-                ...(segments ? { segments } : {}),
+                variant: "normal",
+                ...(segments.length === 0 ? {} : { segments }),
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -170,18 +178,24 @@ export class PopupMenuRenderer {
     }
     renderUserMessageJumpMenu(width, menu, directQuery) {
         const lines = [this.popupMenuHeader("Jump to user message", width)];
-        if (!this.hasPopupActionItems(menu.items)) {
+        if (this.host.userMessageJumpLoading) {
+            lines.push({ text: `  ${APP_ICONS.timerSand} Loading user messages`, variant: "muted" });
+        }
+        else 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);
+        const labelWidth = Math.max(1, width - 2);
         for (const item of menu.visibleItems()) {
             const label = ellipsizeDisplay(item.label, labelWidth);
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${label}`;
             lines.push({
-                text: label,
-                variant: item.selected ? "accent" : "normal",
+                text,
+                variant: "normal",
+                segments: this.itemHighlightSegments(item, text),
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -193,11 +207,10 @@ export class PopupMenuRenderer {
     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 ?? "";
+            const marker = item.selected ? "▶ " : "  ";
             lines.push({
-                text: `${label}${description}`,
-                variant: this.queueMessageItemVariant(item.selected, item.value),
+                text: `${marker}${this.labelDescriptionText(item.label, item.description, width - 2, 16)}`,
+                variant: this.queueMessageItemVariant(item.value),
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -209,11 +222,13 @@ export class PopupMenuRenderer {
             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 ?? "";
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${this.labelDescriptionText(item.label, item.description, width - 2)}`;
+            const segments = this.sdkMenuItemSegments(item, text);
             lines.push({
-                text: `${label}${description}`,
-                variant: this.sdkItemVariant(item.selected, item.value),
+                text,
+                variant: this.sdkItemVariant(item.value),
+                ...(segments.length === 0 ? {} : { segments }),
                 target: { kind: "popup-menu", index: item.index },
             });
         }
@@ -225,39 +240,117 @@ export class PopupMenuRenderer {
     hasPopupActionItems(items) {
         return items.length > 0;
     }
-    userMessageActionForeground(selected, value) {
-        if (selected)
-            return this.host.theme.colors.accent;
+    labelDescriptionText(label, description, width, labelColumn = SLASH_COMMAND_DESCRIPTION_COLUMN) {
+        const safeLabel = sanitizeText(label).replace(/\s+/gu, " ");
+        const safeDescription = description ? sanitizeText(description).replace(/\s+/gu, " ") : "";
+        if (!safeDescription)
+            return ellipsizeDisplay(safeLabel, width);
+        const gapWidth = stringDisplayWidth(POPUP_MENU_DESCRIPTION_GAP);
+        const labelDisplayWidth = stringDisplayWidth(safeLabel);
+        const descriptionDisplayWidth = stringDisplayWidth(safeDescription);
+        if (width <= gapWidth + 1)
+            return ellipsizeDisplay(safeLabel, width);
+        if (labelDisplayWidth <= labelColumn && labelColumn + gapWidth + descriptionDisplayWidth <= width) {
+            return `${safeLabel}${" ".repeat(labelColumn - labelDisplayWidth)}${POPUP_MENU_DESCRIPTION_GAP}${safeDescription}`;
+        }
+        if (labelDisplayWidth + gapWidth + descriptionDisplayWidth <= width) {
+            return `${safeLabel}${POPUP_MENU_DESCRIPTION_GAP}${safeDescription}`;
+        }
+        const labelWidth = descriptionDisplayWidth < width - gapWidth - 1
+            ? Math.max(1, width - gapWidth - descriptionDisplayWidth)
+            : Math.max(1, Math.min(labelColumn, width - gapWidth - 1));
+        const visibleLabel = ellipsizeDisplay(safeLabel, labelWidth);
+        const padding = " ".repeat(Math.max(0, labelWidth - stringDisplayWidth(visibleLabel)));
+        return `${visibleLabel}${padding}${POPUP_MENU_DESCRIPTION_GAP}${safeDescription}`;
+    }
+    userMessageActionForeground(value) {
         if (value === "undo")
             return this.host.theme.colors.error;
         return this.host.theme.colors.inputForeground;
     }
-    selectableItemVariant(selected, value) {
-        if (selected)
-            return "accent";
+    selectableItemVariant(value) {
         return value.current ? "muted" : "normal";
     }
-    queueMessageItemVariant(selected, value) {
-        if (selected)
-            return "accent";
+    thinkingMenuItemSegments(value) {
+        const markerOffset = 2; // "▶ " or "  "
+        return [{
+                start: markerOffset,
+                end: markerOffset + value.level.length,
+                foreground: thinkingLevelThemeColor(value.level, this.host.theme.colors, this.availableThinkingLevels()),
+            }];
+    }
+    modelMenuItemSegments(value) {
+        const markerOffset = 2; // "▶ " or "  "
+        return [{
+                start: markerOffset,
+                end: markerOffset + value.ref.length,
+                foreground: this.modelMenuItemColor(value),
+            }];
+    }
+    modelMenuItemColor(value) {
+        const configuredColor = this.host.modelColors
+            ? resolveModelColor(value.ref, this.host.modelColors)
+            : undefined;
+        return configuredColor
+            ? resolveColor(configuredColor, this.host.theme.colors)
+            : modelProviderThemeColor(value.model.provider, this.host.theme.colors);
+    }
+    availableThinkingLevels() {
+        const levels = this.host.session?.getAvailableThinkingLevels();
+        return Array.isArray(levels) && levels.length > 0 ? levels.map(String) : ["off", "minimal", "low", "medium", "high", "xhigh"];
+    }
+    queueMessageItemVariant(value) {
         return value === "cancel" ? "error" : "normal";
     }
-    sdkItemVariant(selected, value) {
-        if (selected)
-            return "accent";
+    sdkItemVariant(value) {
         return value.variant ?? "normal";
     }
+    sdkMenuItemSegments(item, text) {
+        return [
+            ...this.highlightSegments(item.labelHighlightRanges ?? item.value.labelHighlightRanges ?? [], text, 2),
+            ...this.descriptionHighlightSegments(item.description, item.descriptionHighlightRanges ?? item.value.descriptionHighlightRanges ?? [], text),
+        ];
+    }
+    itemHighlightSegments(item, text) {
+        return this.highlightSegments(item.labelHighlightRanges ?? [], text, 2);
+    }
+    highlightSegments(ranges, text, markerOffset) {
+        if (ranges.length === 0)
+            return [];
+        return ranges.flatMap((range) => {
+            const start = Math.max(markerOffset, markerOffset + range.start);
+            const end = Math.min(text.length, markerOffset + range.end);
+            if (end <= start)
+                return [];
+            return [{
+                    start,
+                    end,
+                    foreground: this.host.theme.colors.accent,
+                    bold: true,
+                }];
+        });
+    }
+    descriptionHighlightSegments(description, ranges, text) {
+        if (!description || ranges.length === 0)
+            return [];
+        const safeDescription = sanitizeText(description).replace(/\s+/gu, " ");
+        const descriptionStart = text.indexOf(safeDescription, 2);
+        if (descriptionStart < 0)
+            return [];
+        return this.highlightSegments(ranges, text, descriptionStart);
+    }
     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 markerOffset = 2; // "▶ " or "  "
+        const sessionLabelStart = Math.max(0, label.length - sessionLabel.length) + markerOffset;
         const muted = this.host.theme.colors.popupMuted;
         const segments = [];
-        if (sessionLabelStart > 0)
-            segments.push({ start: 0, end: sessionLabelStart, foreground: muted });
+        if (sessionLabelStart > markerOffset)
+            segments.push({ start: markerOffset, end: sessionLabelStart, foreground: muted });
         if (description.length > 0)
-            segments.push({ start: label.length, end: text.length, foreground: muted });
+            segments.push({ start: markerOffset + label.length, end: text.length, foreground: muted });
         return segments.length > 0 ? segments : undefined;
     }
     popupMenuHeader(title, width) {
@@ -268,10 +361,8 @@ export class PopupMenuRenderer {
             target: { kind: "popup-menu-close" },
         };
     }
-    popupLineForeground(line, selected) {
+    popupLineForeground(line) {
         const colors = this.host.theme.colors;
-        if (selected)
-            return colors.popupSelectedForeground;
         if (line.colorOverride)
             return line.colorOverride;
         switch (line.variant) {
@@ -300,8 +391,15 @@ export function formatPopupMenuHeader(title, width) {
     const buttonWidth = stringDisplayWidth(POPUP_MENU_ESCAPE_BUTTON);
     if (safeWidth <= buttonWidth + 1)
         return padOrTrimPlain(POPUP_MENU_ESCAPE_BUTTON, safeWidth);
-    const titleWidth = safeWidth - buttonWidth - 1;
+    const sidePadding = safeWidth >= buttonWidth + POPUP_MENU_HEADER_SIDE_PADDING * 2 + 2
+        ? POPUP_MENU_HEADER_SIDE_PADDING
+        : 1;
+    const contentWidth = Math.max(1, safeWidth - sidePadding * 2);
+    if (contentWidth <= buttonWidth + 1) {
+        return padOrTrimPlain(`${" ".repeat(sidePadding)}${POPUP_MENU_ESCAPE_BUTTON}`, safeWidth);
+    }
+    const titleWidth = contentWidth - buttonWidth - 1;
     const titleText = ellipsizeDisplay(sanitizedTitle, titleWidth);
-    const gapWidth = Math.max(1, safeWidth - stringDisplayWidth(titleText) - buttonWidth);
-    return `${titleText}${" ".repeat(gapWidth)}${POPUP_MENU_ESCAPE_BUTTON}`;
+    const gapWidth = Math.max(1, contentWidth - stringDisplayWidth(titleText) - buttonWidth);
+    return `${" ".repeat(sidePadding)}${titleText}${" ".repeat(gapWidth)}${POPUP_MENU_ESCAPE_BUTTON}${" ".repeat(sidePadding)}`;
 }