pi-ui-extend 0.1.13 → 0.1.17

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

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

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

@@ -57,7 +57,6 @@ export class AppRenderController {
         const underTabsOverlayStartRow = Math.min(rows, topReservedRows + 1);
         const underTabsOverlayLines = menuLines.slice(0, Math.max(0, statusRow - underTabsOverlayStartRow));
         const { lines: visible, metrics: scrollMetrics } = this.deps.scrollController.conversationView(columns, bodyHeight);
-        const scrollBar = this.deps.scrollController.scrollBarForMetrics(scrollMetrics);
         const conversationColumns = Math.max(1, Math.min(columns, scrollMetrics.viewportColumns));
         this.deps.mouseController.syncConversationSelectionForRender(scrollMetrics.start, bodyHeight, topReservedRows, conversationColumns);
         this.deps.mouseController.renderedTargets.clear();
@@ -130,17 +129,6 @@ export class AppRenderController {
             setRenderedBackground(row, rendered?.backgroundOverride);
             appendFrameOutput("conversation", row, this.renderFrameRow(row, this.deps.screenStyler.styleBaseLine(row, rendered, conversationColumns)));
         }
-        if (scrollBar && columns > 0) {
-            for (let layoutRow = 1; layoutRow <= bodyHeight; layoutRow += 1) {
-                const row = toScreenRow(layoutRow);
-                const isThumb = layoutRow >= scrollBar.thumbStartRow && layoutRow <= scrollBar.thumbEndRow;
-                const marker = isThumb ? " " : "│";
-                appendFrameOutput("conversation", row, `\x1b[${row};${columns}H${colorize(marker, {
-                    foreground: this.deps.theme.colors.inputBorder,
-                    ...(isThumb ? { background: this.deps.theme.colors.inputBorder } : {}),
-                })}`);
-            }
-        }
         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);
@@ -201,18 +189,26 @@ export class AppRenderController {
             setRenderedBackground(row, rendered.line?.backgroundOverride);
             appendFrameOutput("inputStatus", row, this.renderFrameRow(row, rendered.output(row)));
         }
+        const statusLayout = this.deps.statusLineRenderer.layout(columns);
+        const statusLineRenderer = this.deps.statusLineRenderer;
+        const inputBorderWidgetsLayout = statusLineRenderer.inputBorderWidgetsLayout?.(columns);
         if (inputBottomSeparatorRow > 1) {
             const separatorText = inputFrameLine(columns, "bottom");
             const row = toScreenRow(inputBottomSeparatorRow);
             if (row < statusRow) {
-                this.deps.mouseController.renderedRowTexts.set(row, separatorText);
-                appendFrameOutput("inputStatus", row, this.renderFrameRow(row, this.deps.screenStyler.styleLine(row, separatorText, columns, {
-                    foreground: this.deps.theme.colors.inputBorder,
-                })));
+                const text = inputBorderWidgetsLayout
+                    ? overlayText(separatorText, inputBorderWidgetsLayout.inputBorderWidgetStartColumn ?? 1, inputBorderWidgetsLayout.text)
+                    : separatorText;
+                this.deps.mouseController.renderedRowTexts.set(row, text);
+                const output = inputBorderWidgetsLayout && statusLineRenderer.renderInputBorderWidgets
+                    ? statusLineRenderer.renderInputBorderWidgets(row, inputBorderWidgetsLayout, separatorText, columns)
+                    : this.deps.screenStyler.styleLine(row, separatorText, columns, {
+                        foreground: this.deps.theme.colors.inputBorder,
+                    });
+                appendFrameOutput("inputStatus", row, this.renderFrameRow(row, output));
             }
         }
-        const statusLayout = this.deps.statusLineRenderer.layout(columns);
-        this.updateStatusMouseState(statusLayout, statusRow);
+        this.updateStatusMouseState(statusLayout, statusRow, inputBorderWidgetsLayout, toScreenRow(inputBottomSeparatorRow));
         appendFrameOutput("inputStatus", statusRow, this.renderFrameRow(statusRow, this.deps.statusLineRenderer.render(statusRow, statusLayout, columns)));
         const voiceProgressOverlay = this.renderVoiceProgressOverlay(this.deps.voiceProgressOverlayText(), columns, statusRow);
         if (voiceProgressOverlay) {
@@ -245,7 +241,7 @@ export class AppRenderController {
                 appendFrameOutput(regionForOverlayRow(row), row, this.renderFrameRow(row, this.deps.popupMenus.styleOverlayLine(row, line ?? { text: "" }, columns)));
             }
         }
-        for (const toastOverlay of renderToastOverlays(this.deps.toastController.toast.visibleStates, columns, Math.max(0, statusRow - topReservedRows - 1), this.deps.theme)) {
+        for (const toastOverlay of renderToastOverlays(visibleToastStates(this.deps.toastController), columns, Math.max(0, statusRow - topReservedRows - 1), this.deps.theme)) {
             const row = topReservedRows + toastOverlay.row;
             const rowText = this.deps.mouseController.renderedRowTexts.get(row) ?? "";
             if (toastOverlay.target)
@@ -290,20 +286,22 @@ export class AppRenderController {
         const text = fixedCellText(flash.text, width);
         return `\x1b[${flash.y};${flash.startColumn}H\x1b[7m${text}${ANSI_RESET}`;
     }
-    updateStatusMouseState(statusLayout, statusRow) {
+    updateStatusMouseState(statusLayout, statusRow, inputBorderWidgetsLayout, inputBorderWidgetsRow) {
+        const widgetLayout = inputBorderWidgetsLayout;
+        const widgetRow = inputBorderWidgetsRow ?? statusRow;
         this.deps.mouseController.statusModelTarget = this.deps.statusLineRenderer.modelTarget(statusLayout.text, statusRow);
         this.deps.mouseController.statusThinkingTarget = this.deps.statusLineRenderer.thinkingTarget(statusLayout.text, statusRow);
         this.deps.mouseController.statusContextTarget = this.deps.statusLineRenderer.contextTarget(statusLayout.text, statusRow, statusLayout);
         this.deps.mouseController.statusModelUsageTarget = this.deps.statusLineRenderer.modelUsageTarget(statusLayout.text, statusRow, statusLayout);
-        this.deps.mouseController.statusDraftQueueTarget = this.deps.statusLineRenderer.draftQueueTarget?.(statusLayout, statusRow);
-        this.deps.mouseController.statusUserJumpTarget = this.deps.statusLineRenderer.userJumpTarget?.(statusLayout, statusRow);
-        this.deps.mouseController.statusThinkingExpandTarget = this.deps.statusLineRenderer.thinkingExpandTarget?.(statusLayout, statusRow);
-        this.deps.mouseController.statusCompactToolsTarget = this.deps.statusLineRenderer.compactToolsTarget?.(statusLayout, statusRow);
-        this.deps.mouseController.statusTerminalBellSoundTarget = this.deps.statusLineRenderer.terminalBellSoundTarget?.(statusLayout, statusRow);
+        this.deps.mouseController.statusDraftQueueTarget = widgetLayout ? this.deps.statusLineRenderer.draftQueueTarget?.(widgetLayout, widgetRow) : undefined;
+        this.deps.mouseController.statusUserJumpTarget = widgetLayout ? this.deps.statusLineRenderer.userJumpTarget?.(widgetLayout, widgetRow) : undefined;
+        this.deps.mouseController.statusThinkingExpandTarget = widgetLayout ? this.deps.statusLineRenderer.thinkingExpandTarget?.(widgetLayout, widgetRow) : undefined;
+        this.deps.mouseController.statusCompactToolsTarget = widgetLayout ? this.deps.statusLineRenderer.compactToolsTarget?.(widgetLayout, widgetRow) : undefined;
+        this.deps.mouseController.statusTerminalBellSoundTarget = widgetLayout ? this.deps.statusLineRenderer.terminalBellSoundTarget?.(widgetLayout, widgetRow) : undefined;
         this.deps.mouseController.statusSessionTarget = this.deps.statusLineRenderer.sessionTarget(statusLayout.text, statusRow, statusLayout.sessionLabel, statusLayout.workspaceLabel);
-        this.deps.mouseController.statusPromptEnhancerTarget = this.deps.statusLineRenderer.promptEnhancerTarget(statusLayout, statusRow);
-        this.deps.mouseController.statusVoiceMicTarget = this.deps.statusLineRenderer.voiceMicTarget(statusLayout, statusRow);
-        this.deps.mouseController.statusVoiceLanguageTarget = this.deps.statusLineRenderer.voiceLanguageTarget(statusLayout, statusRow);
+        this.deps.mouseController.statusPromptEnhancerTarget = widgetLayout ? this.deps.statusLineRenderer.promptEnhancerTarget(widgetLayout, widgetRow) : undefined;
+        this.deps.mouseController.statusVoiceMicTarget = widgetLayout ? this.deps.statusLineRenderer.voiceMicTarget(widgetLayout, widgetRow) : undefined;
+        this.deps.mouseController.statusVoiceLanguageTarget = widgetLayout ? this.deps.statusLineRenderer.voiceLanguageTarget(widgetLayout, widgetRow) : undefined;
         this.deps.mouseController.renderedRowTexts.set(statusRow, statusLayout.text);
     }
     renderVoiceProgressOverlay(message, width, rows) {
@@ -326,6 +324,10 @@ export class AppRenderController {
         return { row: Math.min(2, rows - 1), text, output };
     }
 }
+function visibleToastStates(toastController) {
+    const candidate = toastController;
+    return typeof candidate.visibleStates === "function" ? candidate.visibleStates() : candidate.toast?.visibleStates ?? [];
+}
 function inputFrameLine(width, edge) {
     if (width <= 0)
         return "";

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

@@ -21,9 +21,12 @@ export function shortHash(text) {
 export function hasLspDiagnosticsAfterMutation(output) {
     return /lsp\s+(?:errors?|warnings?|diagnostics?)\s+after\s+mutation/i.test(output) || /lsp\s+diagnostics\s*:/i.test(output);
 }
-const LSP_DIAGNOSTIC_MUTATION_TOOLS = new Set(["apply_patch", "ast_apply"]);
+const LSP_DIAGNOSTIC_MUTATION_TOOLS = new Set(["apply_patch", "ast_apply", "edit", "write"]);
 export function hasToolLspDiagnosticsAfterMutation(entry) {
-    return LSP_DIAGNOSTIC_MUTATION_TOOLS.has(entry.toolName.toLowerCase()) && hasLspDiagnosticsAfterMutation(entry.output);
+    return LSP_DIAGNOSTIC_MUTATION_TOOLS.has(normalizedToolName(entry.toolName)) && hasLspDiagnosticsAfterMutation(entry.output);
+}
+function normalizedToolName(toolName) {
+    return toolName.split(/[.:/]/).filter(Boolean).at(-1)?.trim().toLowerCase() ?? toolName.toLowerCase();
 }
 export function lspDiagnosticSeverityForLine(line) {
     const counts = lspDiagnosticCounts(line);

package/dist/app/rendering/status-line-renderer.d.ts

@@ -35,7 +35,10 @@ export declare class StatusLineRenderer {
     private readonly host;
     constructor(host: StatusLineRendererHost);
     layout(width: number): StatusLineLayout;
+    inputBorderWidgetsLayout(width: number): StatusLineLayout | undefined;
     render(row: number, layout: StatusLineLayout, width: number): string;
+    renderInputBorderWidgets(row: number, layout: StatusLineLayout, borderText: string, width: number): string;
+    private inputBorderWidgetSegments;
     modelTarget(statusText: string, row: number): StatusModelTarget | undefined;
     thinkingTarget(statusText: string, row: number): StatusThinkingTarget | undefined;
     contextTarget(statusText: string, row: number, layout: StatusLineLayout): StatusContextTarget | undefined;
@@ -66,11 +69,15 @@ export declare class StatusLineRenderer {
     private modelUsageProgressColor;
     private modelProviderColor;
     private thinkingLevelColor;
+    private statusThinkingDisplayLabel;
     private availableThinkingLevels;
-    private thinkingRankColor;
     private contextBarLabel;
     private widgetLayout;
+    private iconButtonText;
+    private voiceBorderWidgetText;
     private voiceWidgetLayout;
+    private voiceBorderWidgetParts;
     private statusDotColor;
 }
+export declare function thinkingLevelThemeColor(label: string, colors: Theme["colors"], availableLevels?: readonly string[]): string;
 export declare function modelProviderThemeColor(provider: string, colors: Theme["colors"]): string;