pi-ui-extend 0.1.18 → 0.1.19

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";

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.warning,
         ...(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.warning,
         ...(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,8 +1,7 @@
 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) {
@@ -12,13 +11,13 @@ export class EditorLayoutRenderer {
         const maxAvailableInputRows = Math.max(1, rows - 5);
         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 belowEditorLines = this.limitEntityLines(this.renderExtensionWidgets("belowEditor", editorEntityWidth), maxEntityRows - aboveEditorLines.length);
         const inputBottomSeparatorRow = rows - 1;
         const belowEditorStartRow = inputBottomSeparatorRow - belowEditorLines.length;
         const inputStartRow = belowEditorStartRow - renderedInput.lines.length;
@@ -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;
 }

package/dist/app/rendering/render-controller.js

@@ -6,10 +6,6 @@ import { ANSI_RESET, colorLine, colorize } from "../../theme.js";
 import { stringDisplayWidth } from "../../terminal-width.js";
 import { padOrTrimPlain } from "./render-text.js";
 const INPUT_FRAME = {
-    topLeft: "╭",
-    topRight: "╮",
-    bottomLeft: "╰",
-    bottomRight: "╯",
     horizontal: "─",
 };
 export class AppRenderController {
@@ -129,6 +125,11 @@ export class AppRenderController {
             setRenderedBackground(row, rendered?.backgroundOverride);
             appendFrameOutput("conversation", row, this.renderFrameRow(row, this.deps.screenStyler.styleBaseLine(row, rendered, conversationColumns)));
         }
+        const loadingConversationOverlay = this.renderConversationLoadingOverlay(this.deps.loadingConversationOverlayText?.(), conversationColumns, topReservedRows, bodyHeight);
+        if (loadingConversationOverlay) {
+            this.deps.mouseController.renderedRowTexts.set(loadingConversationOverlay.row, loadingConversationOverlay.text);
+            appendFrameOutput("conversation", loadingConversationOverlay.row, this.renderFrameRow(loadingConversationOverlay.row, loadingConversationOverlay.output));
+        }
         const aboveEditorStartRow = inputSeparatorRow + 1;
         for (let index = 0; index < aboveEditorLines.length; index += 1) {
             const rendered = frameRenderedLine(aboveEditorLines[index], columns, this.deps.theme, this.deps.screenStyler);
@@ -160,7 +161,7 @@ export class AppRenderController {
             const row = toScreenRow(inputStartRow + index);
             this.deps.mouseController.renderedRowTexts.set(row, inputLine);
             const tagColor = this.deps.theme.colors.accent;
-            const styledLine = this.deps.screenStyler.styleInputLine(row, inputLine, tagSpans, suggestionSpans, columns, tagColor, this.deps.theme.colors.muted, this.deps.theme.colors.inputBorder);
+            const styledLine = this.deps.screenStyler.styleInputLine(row, inputLine, tagSpans, suggestionSpans, columns, tagColor, this.deps.theme.colors.muted);
             appendFrameOutput("inputStatus", row, this.renderFrameRow(row, styledLine));
         }
         if (renderedInput.scrollBar && columns > 0) {
@@ -327,40 +328,40 @@ export class AppRenderController {
         ].join("");
         return { row: Math.min(2, rows - 1), text, output };
     }
+    renderConversationLoadingOverlay(message, width, topReservedRows, bodyHeight) {
+        if (!message || width <= 0 || bodyHeight <= 0)
+            return undefined;
+        const overlayWidth = Math.min(stringDisplayWidth(message), width);
+        const leftWidth = Math.max(0, Math.floor((width - overlayWidth) / 2));
+        const rightWidth = Math.max(0, width - leftWidth - overlayWidth);
+        const text = `${" ".repeat(leftWidth)}${padOrTrimPlain(message, overlayWidth)}${" ".repeat(rightWidth)}`;
+        const row = topReservedRows + Math.floor((bodyHeight + 1) / 2);
+        const output = this.deps.screenStyler.styleLine(row, text, width, {
+            foreground: this.deps.theme.colors.muted,
+        });
+        return { row, text, output };
+    }
 }
 function visibleToastStates(toastController) {
     const candidate = toastController;
     return typeof candidate.visibleStates === "function" ? candidate.visibleStates() : candidate.toast?.visibleStates ?? [];
 }
 function inputFrameLine(width, edge) {
+    void edge;
     if (width <= 0)
         return "";
-    if (width === 1)
-        return edge === "top" ? INPUT_FRAME.topLeft : INPUT_FRAME.bottomLeft;
-    const left = edge === "top" ? INPUT_FRAME.topLeft : INPUT_FRAME.bottomLeft;
-    const right = edge === "top" ? INPUT_FRAME.topRight : INPUT_FRAME.bottomRight;
-    return `${left}${INPUT_FRAME.horizontal.repeat(Math.max(0, width - 2))}${right}`;
+    return INPUT_FRAME.horizontal.repeat(width);
 }
 function frameRenderedLine(line, width, theme, screenStyler) {
     if (width <= 0)
         return { line, text: "", output: () => "" };
-    if (width === 1) {
-        const border = colorize("│", {
-            foreground: theme.colors.inputBorder,
-        });
-        return { line, text: "│", output: () => border };
-    }
-    const innerWidth = Math.max(0, width - 2);
-    const innerText = padOrTrimPlain(line?.text ?? "", innerWidth);
-    const innerLine = line ? frameInnerRenderedLine(line, innerText, innerWidth) : undefined;
-    const leftBorder = colorize("│", {
-        foreground: theme.colors.inputBorder,
-    });
-    const rightBorder = leftBorder;
+    void theme;
+    const text = padOrTrimPlain(line?.text ?? "", width);
+    const outputLine = line ? frameInnerRenderedLine(line, text, width) : undefined;
     return {
         line,
-        text: `│${innerText}│`,
-        output: (row) => `${leftBorder}${screenStyler.styleBaseLine(row, innerLine, innerWidth)}${rightBorder}`,
+        text,
+        output: (row) => screenStyler.styleBaseLine(row, outputLine, width),
     };
 }
 function frameInnerRenderedLine(line, text, width) {

package/dist/app/rendering/render-text.js

@@ -98,8 +98,8 @@ export function padOrTrimPlain(text, width) {
 }
 export function horizontalPaddingLayout(width) {
     const safeWidth = Math.max(1, width);
-    const left = safeWidth > 1 ? 1 : 0;
-    const right = safeWidth > 2 ? 1 : 0;
+    const left = 0;
+    const right = 0;
     return { left, right, contentWidth: Math.max(1, safeWidth - left - right) };
 }
 export function padHorizontalText(text, width) {

package/dist/app/rendering/status-line-renderer.js

@@ -110,7 +110,7 @@ export class StatusLineRenderer {
     }
     inputBorderWidgetSegments(layout, text) {
         const colors = this.host.theme.colors;
-        const background = colors.inputBorder;
+        const background = colors.inputBorderWidgetBackground;
         const segments = [];
         const pushWidgetSegment = (widget, foreground) => {
             if (!widget)