pi-ui-extend 0.1.18 → 0.1.20

package/dist/app/app.js

@@ -169,7 +169,7 @@ export class PiUiExtendApp {
                 noSession: false,
                 sessionPath,
             }),
-            activateRuntime: (runtime) => this.activateRuntime(runtime),
+            activateRuntime: (runtime, options) => this.activateRuntime(runtime, options),
             disposeRuntime: (runtime) => this.terminalController.disposeRuntime(runtime),
             isRunning: () => this.running,
             setStatus: (status) => this.setStatus(status),
@@ -398,6 +398,7 @@ export class PiUiExtendApp {
             get subagentsWidgetState() { return app.subagentsWidgetController.widgetState; },
             get voicePartialText() { return app.voicePartialText; },
             get autocompleteSuggestion() { return app.autocompleteController.suggestionText(); },
+            get queuedMessageWidgetEntries() { return app.queuedMessages.deferredQueuedEntries(); },
             renderExtensionInputComponent: (width) => this.extensionUiController.renderActiveCustomUi(width),
             extensionInputUsesEditor: () => this.extensionUiController.activeCustomUiUsesEditor(),
             widgetTuiHandle: () => this.extensionUiController.widgetTuiHandle(),
@@ -586,6 +587,7 @@ export class PiUiExtendApp {
             statusLineRenderer: this.statusLineRenderer,
             tabLineRenderer: this.tabLineRenderer,
             toastController: this.toastController,
+            loadingConversationOverlayText: () => this.tabsController.isSwitching() ? "Loading…" : undefined,
             voiceProgressOverlayText: () => this.voiceController.progressOverlayText(),
         });
         this.requestHistory = new AppRequestHistory({
@@ -767,15 +769,15 @@ export class PiUiExtendApp {
             // Startup update checks should never interrupt the TUI.
         }
     }
-    async bindCurrentSession() {
-        await this.sessionLifecycle.bindCurrentSession();
+    async bindCurrentSession(options) {
+        await this.sessionLifecycle.bindCurrentSession(options);
     }
-    async activateRuntime(runtime) {
+    async activateRuntime(runtime, options) {
         this.runtime = runtime;
         runtime.setRebindSession(async () => {
-            await this.bindCurrentSession();
+            await this.bindCurrentSession({ awaitExtensions: false });
         });
-        await this.bindCurrentSession();
+        await this.bindCurrentSession(options);
     }
     createExtensionEventBus() {
         return createIsolatedExtensionEventBus((channel, data) => {

package/dist/app/constants.d.ts

@@ -27,6 +27,7 @@ export declare const DISABLE_TERMINAL_WRAP = "\u001B[?7l";
 export declare const ENABLE_TERMINAL_WRAP = "\u001B[?7h";
 export declare const HIDE_CURSOR = "\u001B[?25l";
 export declare const SHOW_CURSOR = "\u001B[?25h";
+export declare const RESET_TERMINAL_VIEWPORT_STATE = "\u001B[?6l\u001B[?69l\u001B[r";
 export declare const CLEAR_TERMINAL = "\u001B[2J\u001B[3J\u001B[H";
 export declare const THINKING_TOOL_NAME = "thinking";
 export declare const SUBAGENTS_TOOL_NAME = "subagents";

package/dist/app/constants.js

@@ -60,6 +60,7 @@ export const DISABLE_TERMINAL_WRAP = "\x1b[?7l";
 export const ENABLE_TERMINAL_WRAP = "\x1b[?7h";
 export const HIDE_CURSOR = "\x1b[?25l";
 export const SHOW_CURSOR = "\x1b[?25h";
+export const RESET_TERMINAL_VIEWPORT_STATE = "\x1b[?6l\x1b[?69l\x1b[r";
 export const CLEAR_TERMINAL = "\x1b[2J\x1b[3J\x1b[H";
 export const THINKING_TOOL_NAME = "thinking";
 export const SUBAGENTS_TOOL_NAME = "subagents";
@@ -72,7 +73,7 @@ export const SUBAGENTS_WIDGET_MAX_ROWS = 8;
 export const DEFAULT_THINKING_TOOL_RULE = {
     previewLines: 0,
     direction: "head",
-    color: "accent",
+    color: "thinkingForeground",
 };
 export const TERMINAL_COMMAND_MODIFIER_FLAG = 8;
 export const GIT_BRANCH_CACHE_MS = 30_000;

package/dist/app/input/voice-controller.js

@@ -5,6 +5,7 @@ import http from "node:http";
 import https from "node:https";
 import { createRequire } from "node:module";
 import { join } from "node:path";
+import { pipeline } from "node:stream/promises";
 import { fileURLToPath } from "node:url";
 import { savePixDictationLanguage } from "../../config.js";
 import { APP_ICONS } from "../icons.js";
@@ -364,33 +365,36 @@ async function pathExists(path) {
 async function downloadFile(url, destination, redirects = 3) {
     await new Promise((resolve, reject) => {
         const client = url.startsWith("https:") ? https : http;
+        let settled = false;
+        const finish = (callback) => {
+            if (settled)
+                return;
+            settled = true;
+            callback();
+        };
         const request = client.get(url, (response) => {
             const statusCode = response.statusCode ?? 0;
             const location = response.headers.location;
             if ([301, 302, 303, 307, 308].includes(statusCode) && location && redirects > 0) {
                 response.resume();
                 const redirectedUrl = new URL(location, url).toString();
-                downloadFile(redirectedUrl, destination, redirects - 1).then(resolve, reject);
+                downloadFile(redirectedUrl, destination, redirects - 1).then(() => finish(resolve), (error) => finish(() => reject(error)));
                 return;
             }
             if (statusCode !== 200) {
                 response.resume();
-                reject(new Error(`download failed with HTTP ${statusCode}`));
+                finish(() => reject(new Error(`download failed with HTTP ${statusCode}`)));
                 return;
             }
             const file = createWriteStream(destination);
-            file.on("finish", () => {
-                file.close((error) => {
-                    if (error)
-                        reject(error);
-                    else
-                        resolve();
-                });
+            response.on("error", (error) => {
+                finish(() => reject(error));
             });
-            file.on("error", reject);
-            response.pipe(file);
+            pipeline(response, file).then(() => finish(resolve), (error) => finish(() => reject(error)));
+        });
+        request.on("error", (error) => {
+            finish(() => reject(error));
         });
-        request.on("error", reject);
     });
 }
 async function extractZip(zipPath, destination) {

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

@@ -15,11 +15,7 @@ type PopupMenuRendererPort = {
     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<UserMessagePopupMenuValue>): RenderedLine[];
+    renderUserMessageMenu(width: number, menu: PopupMenu<UserMessagePopupMenuValue>): RenderedLine[];
     renderSlashCommandMenu(width: number, menu: PopupMenu<SlashCommandMenuValue>): RenderedLine[];
     renderModelMenu(width: number, menu: PopupMenu<ModelPopupMenuValue>): RenderedLine[];
     renderThinkingMenu(width: number, menu: PopupMenu<ThinkingPopupMenuValue>): RenderedLine[];

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

@@ -435,10 +435,8 @@ export class AppPopupMenuController {
     renderActivePopupMenu(width) {
         if (this.syncQueueMessageMenu())
             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 [];
+            return this.renderer.renderUserMessageMenu(width, this.userMessageMenu);
         if (this.syncUserMessageJumpMenu())
             return this.renderer.renderUserMessageJumpMenu(width, this.userMessageJumpMenu, this.directPopupMenuQuery);
         if (this.syncResumeMenu()) {
@@ -474,15 +472,16 @@ export class AppPopupMenuController {
         return this.renderer.overlayPlainText(line, width);
     }
     isDynamicConversationBlock(entry) {
-        return entry.kind === "user" && this.directPopupMenu === "user-message" && this.activeUserMessageEntryId === entry.id;
+        void entry;
+        return false;
     }
     hasDynamicConversationBlock() {
-        return this.directPopupMenu === "user-message" && this.activeUserMessageEntryId !== undefined;
+        return false;
     }
     renderInlineUserMessageMenu(entry, options) {
-        if (!(this.directPopupMenu === "user-message" && this.activeUserMessageEntryId === entry.id && this.syncUserMessageMenu()))
-            return [];
-        return this.renderer.renderInlineUserMessageMenu(options, this.userMessageMenu);
+        void entry;
+        void options;
+        return [];
     }
     withoutCloseMenuItems(items) {
         return items.filter((item) => item.label.trim().toLowerCase() !== "cancel");

package/dist/app/process.js

@@ -7,6 +7,7 @@ export async function runProcess(command, args = [], options = {}) {
         let stderr = "";
         let error;
         let timedOut = false;
+        let forceKillTimer;
         const child = spawn(command, [...args], {
             cwd: options.cwd,
             env: options.env,
@@ -21,6 +22,10 @@ export async function runProcess(command, args = [], options = {}) {
             : setTimeout(() => {
                 timedOut = true;
                 child.kill("SIGTERM");
+                forceKillTimer = setTimeout(() => {
+                    child.kill("SIGKILL");
+                }, 3_000);
+                forceKillTimer.unref?.();
             }, options.timeoutMs);
         timer?.unref?.();
         child.stdout.on("data", (chunk) => {
@@ -35,6 +40,8 @@ export async function runProcess(command, args = [], options = {}) {
         child.once("close", (status, signal) => {
             if (timer)
                 clearTimeout(timer);
+            if (forceKillTimer)
+                clearTimeout(forceKillTimer);
             resolve({
                 status,
                 signal,

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

@@ -9,26 +9,19 @@ export function renderConversationEntry(entry, width, options) {
     const { left: userContentLeft, contentWidth: userContentWidth } = horizontalPaddingLayout(width);
     const userLine = (text, entryId, syntaxHighlight, segments) => ({
         text: padHorizontalText(text, width),
-        colorOverride: options.colors.inputForeground,
-        backgroundOverride: options.colors.userMessageBackground,
+        colorOverride: options.colors.userForeground,
         ...(segments && segments.length > 0 ? { segments: segments.map((segment) => ({ ...segment, start: segment.start + userContentLeft, end: segment.end + userContentLeft })) } : {}),
         ...(syntaxHighlight === undefined ? {} : { syntaxHighlight }),
         ...(entryId === undefined ? {} : { target: { kind: "user-message", id: entryId } }),
     });
     const queuedLine = (text, entryId, segments) => ({
         text,
-        variant: "muted",
-        backgroundOverride: options.colors.userMessageBackground,
+        colorOverride: options.colors.userForeground,
         ...(segments && segments.length > 0 ? { segments } : {}),
         target: { kind: "queue-message", id: entryId },
     });
     const userMessageLines = (userEntry) => {
-        const lines = [
-            userLine("", userEntry.id),
-            ...renderMarkdownTextLines(userEntry.text, userContentWidth, userContentLeft).map((line) => userLine(line.text, userEntry.id, line.syntaxHighlight, line.segments)),
-        ];
-        lines.push(...options.renderInlineUserMessageMenu(userEntry, { userContentWidth, userContentLeft, userLine }));
-        lines.push(userLine("", userEntry.id));
+        const lines = renderMarkdownTextLines(userEntry.text, userContentWidth, userContentLeft).map((line) => userLine(line.text, userEntry.id, line.syntaxHighlight, line.segments));
         return attachImageClickTargets(lines, userEntry.id, userEntry.images, { foreground: options.colors.info, underline: true });
     };
     const queuedMessageLines = (queuedEntry) => {
@@ -70,10 +63,18 @@ function renderAssistantLines(text, width, options) {
     const displayText = applyOutputFilters(text, options.outputFilters).trimEnd();
     if (!displayText)
         return [];
-    return renderMarkdownTextLines(displayText, width).map((line) => ({
-        text: line.text,
-        colorOverride: options.colors.assistantForeground,
-        ...(line.segments && line.segments.length > 0 ? { segments: line.segments } : {}),
-        ...(line.syntaxHighlight ? { syntaxHighlight: line.syntaxHighlight } : {}),
-    }));
+    const { left: contentLeft, contentWidth } = horizontalPaddingLayout(width);
+    const contentLines = renderMarkdownTextLines(displayText, contentWidth, contentLeft);
+    if (contentLines.length === 0)
+        return [];
+    const lines = [];
+    for (const line of contentLines) {
+        lines.push({
+            text: padHorizontalText(line.text, width),
+            colorOverride: options.colors.assistantForeground,
+            ...(line.segments && line.segments.length > 0 ? { segments: line.segments.map((segment) => ({ ...segment, start: segment.start + contentLeft, end: segment.end + contentLeft })) } : {}),
+            ...(line.syntaxHighlight ? { syntaxHighlight: line.syntaxHighlight } : {}),
+        });
+    }
+    return lines;
 }

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

@@ -1,7 +1,8 @@
 import { resolveToolRule } from "../../config.js";
 import { stringDisplayWidth } from "../../terminal-width.js";
 import { renderConversationEntry as renderConversationEntryLines } from "./conversation-entry-renderer.js";
-import { horizontalPaddingLayout, shortHash } from "./render-text.js";
+import { horizontalPaddingLayout } from "./render-text.js";
+import { sdkQueuedMessageEntries } from "../session/queued-message-entries.js";
 export class ConversationViewport {
     host;
     blockCachesByWidth = new Map();
@@ -119,39 +120,7 @@ export class ConversationViewport {
         return lineCount;
     }
     queuedEntries() {
-        const session = this.host.session;
-        const entries = [];
-        for (const [index, text] of (session?.getSteeringMessages() ?? []).entries()) {
-            entries.push({
-                id: `queued-sdk-steering-${index}-${shortHash(text)}`,
-                kind: "queued",
-                mode: "steering",
-                text,
-                queueSource: "sdk-steering",
-                queueIndex: index,
-            });
-        }
-        for (const [index, text] of (session?.getFollowUpMessages() ?? []).entries()) {
-            entries.push({
-                id: `queued-sdk-follow-up-${index}-${shortHash(text)}`,
-                kind: "queued",
-                mode: "follow-up",
-                text,
-                queueSource: "sdk-follow-up",
-                queueIndex: index,
-            });
-        }
-        for (const [index, message] of this.host.deferredUserMessages.entries()) {
-            entries.push({
-                id: `${message.id}-${index}`,
-                kind: "queued",
-                mode: "steering",
-                text: message.displayText,
-                queueSource: "deferred",
-                queueIndex: index,
-            });
-        }
-        return entries;
+        return sdkQueuedMessageEntries(this.host.session);
     }
     layoutForWidth(width) {
         const queued = this.queuedEntries();
@@ -301,7 +270,7 @@ export class ConversationViewport {
                 return estimateWrappedLineCount(entry.text, width);
             case "user": {
                 const { contentWidth } = horizontalPaddingLayout(width);
-                return 2 + estimateWrappedLineCount(entry.text, contentWidth);
+                return estimateWrappedLineCount(entry.text, contentWidth);
             }
             case "queued": {
                 const { contentWidth } = horizontalPaddingLayout(width);

package/dist/app/rendering/editor-layout-renderer.d.ts

@@ -1,6 +1,6 @@
 import type { InputEditor } from "../../input-editor.js";
 import type { Theme } from "../../theme.js";
-import type { EditorLayout, ExtensionWidgetRegistration, ExtensionWidgetTheme, SubagentsWidgetState, TodoDetails, WidgetTuiHandle } from "../types.js";
+import type { EditorLayout, Entry, ExtensionWidgetRegistration, ExtensionWidgetTheme, SubagentsWidgetState, TodoDetails, WidgetTuiHandle } from "../types.js";
 export type EditorLayoutRendererHost = {
     readonly theme: Theme;
     readonly inputEditor: InputEditor;
@@ -11,6 +11,9 @@ export type EditorLayoutRendererHost = {
     readonly subagentsWidgetState: SubagentsWidgetState | undefined;
     readonly voicePartialText: string | undefined;
     readonly autocompleteSuggestion: string | undefined;
+    readonly queuedMessageWidgetEntries: readonly Extract<Entry, {
+        kind: "queued";
+    }>[];
     renderExtensionInputComponent(width: number): string[] | undefined;
     extensionInputUsesEditor(): boolean;
     widgetTuiHandle(): WidgetTuiHandle;
@@ -24,6 +27,7 @@ export declare class EditorLayoutRenderer {
     private renderWidgetRegistration;
     private renderWidgetComponent;
     private renderAboveEditorEntities;
+    private renderQueuedMessageWidgets;
     private renderVoicePartial;
     private renderExtensionWidgets;
     private limitEntityLines;

package/dist/app/rendering/editor-layout-renderer.js

@@ -1,27 +1,26 @@
 import { ABOVE_EDITOR_WIDGET_KEY_GROUPS, BUILT_IN_SUBAGENTS_WIDGET_KEYS, INPUT_MAX_ROWS, LEGACY_TODO_WIDGET_KEYS, } from "../constants.js";
 import { renderSubagentsPanel, renderTodoPanel } from "./editor-panels.js";
-import { ellipsizeDisplay, horizontalPaddingLayout, padHorizontalText, sanitizeText } from "./render-text.js";
+import { ellipsizeDisplay, horizontalPaddingLayout, padHorizontalText, sanitizeText, wrapText } from "./render-text.js";
 import { APP_ICONS } from "../icons.js";
-const INPUT_FRAME_VERTICAL = "│";
 export class EditorLayoutRenderer {
     host;
     constructor(host) {
         this.host = host;
     }
     computeLayout(width, rows) {
-        const maxAvailableInputRows = Math.max(1, rows - 5);
+        const maxAvailableInputRows = Math.max(1, rows - 4);
         const renderedInput = this.renderInput(width, Math.min(INPUT_MAX_ROWS, maxAvailableInputRows), maxAvailableInputRows);
         const maxEntityRows = Math.max(0, rows - renderedInput.lines.length - 4);
-        const framedEntityWidth = inputFrameContentWidth(width);
-        const aboveEditorEntities = this.renderAboveEditorEntities(framedEntityWidth);
+        const editorEntityWidth = inputFrameContentWidth(width);
+        const aboveEditorEntities = this.renderAboveEditorEntities(editorEntityWidth);
         let aboveEditorLines = this.limitEntityLines(aboveEditorEntities.lines, maxEntityRows);
         if (aboveEditorEntities.hasWidgets && aboveEditorLines.length < maxEntityRows) {
             aboveEditorLines = [...aboveEditorLines, { text: "", variant: "normal" }];
         }
-        const belowEditorLines = this.limitEntityLines(this.renderExtensionWidgets("belowEditor", framedEntityWidth), maxEntityRows - aboveEditorLines.length);
-        const inputBottomSeparatorRow = rows - 1;
-        const belowEditorStartRow = inputBottomSeparatorRow - belowEditorLines.length;
-        const inputStartRow = belowEditorStartRow - renderedInput.lines.length;
+        const belowEditorLines = this.limitEntityLines(this.renderExtensionWidgets("belowEditor", editorEntityWidth), maxEntityRows - aboveEditorLines.length);
+        const belowEditorStartRow = rows - belowEditorLines.length;
+        const inputBottomSeparatorRow = belowEditorStartRow - 1;
+        const inputStartRow = inputBottomSeparatorRow - renderedInput.lines.length;
         const inputSeparatorRow = inputStartRow - aboveEditorLines.length - 1;
         return {
             renderedInput,
@@ -57,7 +56,8 @@ export class EditorLayoutRenderer {
         const hasBuiltInTodoPanel = todoPanelLines.length > 0;
         const subagentsPanelLines = renderSubagentsPanel(this.host.subagentsWidgetState, this.host.subagentsPanelExpanded, width, this.host.theme.colors);
         const hasBuiltInSubagentsPanel = subagentsPanelLines.length > 0;
-        const lines = [...todoPanelLines, ...subagentsPanelLines];
+        const queuedMessageWidgetLines = this.renderQueuedMessageWidgets(width);
+        const lines = [...todoPanelLines, ...subagentsPanelLines, ...queuedMessageWidgetLines];
         let hasWidgets = lines.length > 0;
         const consumedWidgetKeys = new Set();
         for (const widgetKeys of ABOVE_EDITOR_WIDGET_KEY_GROUPS) {
@@ -103,6 +103,22 @@ export class EditorLayoutRenderer {
         lines.push(...this.renderVoicePartial(width));
         return { lines, hasWidgets };
     }
+    renderQueuedMessageWidgets(width) {
+        const lines = [];
+        for (const entry of this.host.queuedMessageWidgetEntries) {
+            const icon = entry.queueSource === "deferred" ? APP_ICONS.pause : APP_ICONS.timerSand;
+            const wrapped = wrapText(`${icon} ${sanitizeText(entry.text)}`, width);
+            for (const [index, text] of wrapped.entries()) {
+                lines.push({
+                    text: padHorizontalText(text, width),
+                    colorOverride: this.host.theme.colors.warning,
+                    target: { kind: "queue-message", id: entry.id },
+                    ...(index === 0 ? { segments: [{ start: 0, end: icon.length, foreground: this.host.theme.colors.info }] } : {}),
+                });
+            }
+        }
+        return lines;
+    }
     renderVoicePartial(width) {
         const partial = this.host.voicePartialText?.trim();
         if (!partial)
@@ -150,7 +166,7 @@ export class EditorLayoutRenderer {
         const scrollBar = usesEditor
             ? inputScrollBarMetrics(rendered.visualLines.length, visibleLines.length, rendered.scrollOffset)
             : undefined;
-        const editorLines = usesEditor ? visibleLines.map((vl) => frameInputLine(padHorizontalText(vl.text, width))) : [];
+        const editorLines = usesEditor ? visibleLines.map((vl) => padHorizontalText(vl.text, width)) : [];
         const editorTagSpans = usesEditor
             ? visibleLines.map((vl) => vl.tagSpans.map((span) => ({
                 start: span.start + left,
@@ -163,7 +179,7 @@ export class EditorLayoutRenderer {
                 end: span.end + left,
             })))
             : [];
-        const paddedCustomLines = customLines.map((line) => frameInputLine(padHorizontalText(line, width)));
+        const paddedCustomLines = customLines.map((line) => padHorizontalText(line, width));
         return {
             lines: [...paddedCustomLines, ...editorLines],
             cursorRowOffset: customLines.length + rendered.cursorVisualRow - rendered.scrollOffset,
@@ -196,15 +212,8 @@ export class EditorLayoutRenderer {
         ];
     }
 }
-function frameInputLine(line) {
-    if (line.length <= 0)
-        return line;
-    if (line.length === 1)
-        return INPUT_FRAME_VERTICAL;
-    return `${INPUT_FRAME_VERTICAL}${line.slice(1, -1)}${INPUT_FRAME_VERTICAL}`;
-}
 function inputFrameContentWidth(width) {
-    return Math.max(1, width - 2);
+    return Math.max(1, width);
 }
 function inputScrollBarMetrics(totalLineCount, visibleRowCount, scrollOffset) {
     if (visibleRowCount <= 0 || totalLineCount <= visibleRowCount)

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

@@ -22,11 +22,7 @@ export declare class PopupMenuRenderer {
     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[];
+    renderUserMessageMenu(width: number, 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[];

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

@@ -49,41 +49,31 @@ export class PopupMenuRenderer {
         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];
+    renderUserMessageMenu(width, menu) {
+        const lines = [this.popupMenuHeader("Message actions", width)];
         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.value),
-                    bold: item.selected,
-                },
-                ...(descriptionStart < contentStart + text.length
-                    ? [{ start: descriptionStart, end: contentStart + text.length, foreground: this.host.theme.colors.muted }]
-                    : []),
-            ];
+            const marker = item.selected ? "▶ " : "  ";
+            const text = `${marker}${this.labelDescriptionText(item.label, item.description, width - 2, 18)}`;
+            const labelStart = 2;
+            const labelEnd = Math.min(text.length, labelStart + item.label.length);
+            const description = item.description ? sanitizeText(item.description).replace(/\s+/gu, " ") : "";
+            const descriptionStart = description ? text.indexOf(description, labelEnd) : -1;
+            const line = {
+                text,
+                target: { kind: "popup-menu", index: item.index },
+                segments: [
+                    ...(item.selected ? [{ start: 0, end: 1, foreground: this.host.theme.colors.accent, bold: true }] : []),
+                    {
+                        start: labelStart,
+                        end: labelEnd,
+                        foreground: this.userMessageActionForeground(item.value),
+                        bold: item.selected,
+                    },
+                    ...(descriptionStart >= 0
+                        ? [{ start: descriptionStart, end: text.length, foreground: this.host.theme.colors.muted }]
+                        : []),
+                ],
+            };
             lines.push(line);
         }
         return lines;

package/dist/app/rendering/render-controller.d.ts

@@ -24,6 +24,7 @@ export type AppRenderControllerDeps = {
     tabLineRenderer: TabLineRenderer;
     toastController: AppToastController;
     outputBuffer?: TerminalOutputBuffer;
+    loadingConversationOverlayText?: () => string | undefined;
     voiceProgressOverlayText(): string | undefined;
 };
 export declare class AppRenderController {
@@ -38,4 +39,5 @@ export declare class AppRenderController {
     private renderClickFlashOverlay;
     private updateStatusMouseState;
     private renderVoiceProgressOverlay;
+    private renderConversationLoadingOverlay;
 }