pi-ui-extend 0.1.13 → 0.1.17

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

@@ -1,9 +1,12 @@
 import { compactProgressBarSegments, formatCompactProgressBar } from "../../context-progress-bar.js";
 import { padOrTrimPlain } from "./render-text.js";
-import { stringDisplayWidth } from "../../terminal-width.js";
+import { displayIndexForColumn, stringDisplayWidth } from "../../terminal-width.js";
 import { APP_ICONS } from "../icons.js";
 import { resolveColor, resolveModelColor } from "../../config.js";
 const MODEL_USAGE_PROGRESS_BAR_WIDTH = stringDisplayWidth(formatCompactProgressBar(100));
+const INPUT_BORDER_WIDGET_INSET = 2;
+const INPUT_BORDER_WIDGET_SEPARATOR = "─";
+const STATUS_ICON_BUTTON_WIDTH = 3;
 export class StatusLineRenderer {
     host;
     constructor(host) {
@@ -11,101 +14,149 @@ export class StatusLineRenderer {
     }
     layout(width) {
         const contentWidth = Math.max(1, width);
-        const left = 0;
         const statusDot = APP_ICONS.record;
-        const draftQueueButton = this.draftQueueWidgetText();
-        const userJumpButton = APP_ICONS.user;
-        const thinkingExpandButton = APP_ICONS.thinkingExpanded;
-        const compactToolsButton = APP_ICONS.compactTools;
-        const terminalBellSoundWidgetText = this.host.terminalBellSoundStatusWidgetText();
-        const promptEnhancerWidgetText = this.host.promptEnhancerStatusWidgetText();
-        const voiceWidgetText = this.host.voiceStatusWidgetText();
-        const rightWidgetParts = [draftQueueButton, promptEnhancerWidgetText, userJumpButton, terminalBellSoundWidgetText, thinkingExpandButton, compactToolsButton, voiceWidgetText];
-        const rightWidgetText = rightWidgetParts.filter((text) => text.length > 0).join(" ");
-        const rightWidgetWidth = stringDisplayWidth(rightWidgetText);
-        const leftWidth = rightWidgetWidth > 0 && contentWidth > rightWidgetWidth + 1 ? contentWidth - rightWidgetWidth - 1 : contentWidth;
         const baseStatus = this.host.currentStatus();
         const workspaceLabel = this.host.statusWorkspaceLabel();
         const modelUsageLabel = this.host.modelUsageStatusLabel();
         const workspaceDetailsLabel = modelUsageLabel ? `${workspaceLabel} ${modelUsageLabel}` : workspaceLabel;
-        const contextBarLabel = this.contextBarLabel(baseStatus, leftWidth, workspaceDetailsLabel);
+        const contextBarLabel = this.contextBarLabel(baseStatus, contentWidth, workspaceDetailsLabel);
         const status = contextBarLabel ? `${baseStatus} ${contextBarLabel}` : baseStatus;
         const sessionLabel = "";
         const details = `${status} ${workspaceDetailsLabel}`;
-        const leftText = padOrTrimPlain(`${statusDot} ${details}`, leftWidth);
-        const innerText = leftWidth < contentWidth ? `${leftText} ${rightWidgetText}` : padOrTrimPlain(leftText, contentWidth);
-        const text = padOrTrimPlain(innerText, width);
-        let nextWidgetStartColumn = left + leftWidth + 2;
-        let draftQueueWidget = leftWidth < contentWidth && draftQueueButton.length > 0
-            ? this.widgetLayout(nextWidgetStartColumn, draftQueueButton)
-            : undefined;
-        if (draftQueueWidget)
-            nextWidgetStartColumn = draftQueueWidget.endColumn + 1;
-        let promptEnhancerWidget;
-        let userJumpWidget;
-        let terminalBellSoundWidget;
-        let thinkingExpandWidget;
-        let compactToolsWidget;
-        const appendPromptEnhancerWidget = () => {
-            promptEnhancerWidget = leftWidth < contentWidth && promptEnhancerWidgetText.length > 0
-                ? this.widgetLayout(nextWidgetStartColumn, promptEnhancerWidgetText)
-                : undefined;
-            if (promptEnhancerWidget)
-                nextWidgetStartColumn = promptEnhancerWidget.endColumn + 1;
-        };
-        const appendCoreStatusWidgets = () => {
-            userJumpWidget = leftWidth < contentWidth
-                ? this.widgetLayout(nextWidgetStartColumn, userJumpButton)
-                : undefined;
-            if (userJumpWidget)
-                nextWidgetStartColumn = userJumpWidget.endColumn + 1;
-            terminalBellSoundWidget = leftWidth < contentWidth && terminalBellSoundWidgetText.length > 0
-                ? this.widgetLayout(nextWidgetStartColumn, terminalBellSoundWidgetText)
-                : undefined;
-            if (terminalBellSoundWidget)
-                nextWidgetStartColumn = terminalBellSoundWidget.endColumn + 1;
-            thinkingExpandWidget = leftWidth < contentWidth
-                ? this.widgetLayout(nextWidgetStartColumn, thinkingExpandButton)
-                : undefined;
-            if (thinkingExpandWidget)
-                nextWidgetStartColumn = thinkingExpandWidget.endColumn + 1;
-            compactToolsWidget = leftWidth < contentWidth
-                ? this.widgetLayout(nextWidgetStartColumn, compactToolsButton)
-                : undefined;
-            if (compactToolsWidget)
-                nextWidgetStartColumn = compactToolsWidget.endColumn + 1;
-        };
-        appendPromptEnhancerWidget();
-        appendCoreStatusWidgets();
-        const voiceWidget = leftWidth < contentWidth && voiceWidgetText.length > 0 ? this.voiceWidgetLayout(nextWidgetStartColumn, voiceWidgetText) : undefined;
+        const text = padOrTrimPlain(`${statusDot} ${details}`, width);
         return {
             details,
             text,
             sessionLabel,
             workspaceLabel,
-            ...(draftQueueWidget ? { draftQueueWidget } : {}),
-            ...(userJumpWidget ? { userJumpWidget } : {}),
-            ...(thinkingExpandWidget ? { thinkingExpandWidget } : {}),
-            ...(compactToolsWidget ? { compactToolsWidget } : {}),
-            ...(terminalBellSoundWidget ? { terminalBellSoundWidget } : {}),
             ...(modelUsageLabel ? { modelUsageLabel } : {}),
             ...(contextBarLabel ? { contextBarLabel } : {}),
-            ...(promptEnhancerWidget ? { promptEnhancerWidget } : {}),
-            ...(voiceWidget ? { voiceWidget } : {}),
         };
     }
+    inputBorderWidgetsLayout(width) {
+        const layout = {
+            details: "",
+            text: "",
+            sessionLabel: "",
+            workspaceLabel: "",
+        };
+        const widgets = [];
+        let hasParts = false;
+        const appendWidget = (text, assign) => {
+            if (text.length <= 0)
+                return;
+            widgets.push({ text, assign });
+            hasParts = true;
+        };
+        const draftQueueButton = this.draftQueueWidgetText();
+        appendWidget(draftQueueButton ? this.iconButtonText(draftQueueButton) : "", (column, text) => {
+            layout.draftQueueWidget = this.widgetLayout(column, text);
+        });
+        const promptEnhancerWidgetText = this.host.promptEnhancerStatusWidgetText();
+        appendWidget(promptEnhancerWidgetText ? this.iconButtonText(promptEnhancerWidgetText) : "", (column, text) => {
+            layout.promptEnhancerWidget = this.widgetLayout(column, text);
+        });
+        appendWidget(this.iconButtonText(APP_ICONS.user), (column, text) => {
+            layout.userJumpWidget = this.widgetLayout(column, text);
+        });
+        const terminalBellSoundWidgetText = this.host.terminalBellSoundStatusWidgetText();
+        appendWidget(terminalBellSoundWidgetText ? this.iconButtonText(terminalBellSoundWidgetText) : "", (column, text) => {
+            layout.terminalBellSoundWidget = this.widgetLayout(column, text);
+        });
+        appendWidget(this.iconButtonText(APP_ICONS.thinkingExpanded), (column, text) => {
+            layout.thinkingExpandWidget = this.widgetLayout(column, text);
+        });
+        appendWidget(this.iconButtonText(APP_ICONS.compactTools), (column, text) => {
+            layout.compactToolsWidget = this.widgetLayout(column, text);
+        });
+        const voiceWidgetText = this.host.voiceStatusWidgetText();
+        appendWidget(this.voiceBorderWidgetText(voiceWidgetText), (column, text) => {
+            layout.voiceWidget = this.voiceWidgetLayout(column, voiceWidgetText, text);
+        });
+        if (!hasParts)
+            return undefined;
+        const parts = [];
+        const totalWidth = widgets.reduce((total, widget, index) => total + (index > 0 ? 1 : 0) + stringDisplayWidth(widget.text), 0);
+        const endColumn = Math.max(1, width - INPUT_BORDER_WIDGET_INSET);
+        const startColumn = endColumn - totalWidth;
+        if (startColumn < 2)
+            return undefined;
+        layout.inputBorderWidgetStartColumn = startColumn;
+        let nextColumn = startColumn;
+        for (const [index, widget] of widgets.entries()) {
+            if (index > 0) {
+                parts.push(INPUT_BORDER_WIDGET_SEPARATOR);
+                nextColumn += 1;
+            }
+            parts.push(widget.text);
+            widget.assign(nextColumn, widget.text);
+            nextColumn += stringDisplayWidth(widget.text);
+        }
+        layout.text = parts.join("");
+        return layout;
+    }
     render(row, layout, width) {
         const colors = this.host.theme.colors;
         return this.host.screenStyler.styleLineSegments(row, layout.text, width, {
             foreground: colors.statusForeground,
         }, this.segments(layout.text, layout));
     }
+    renderInputBorderWidgets(row, layout, borderText, width) {
+        const startColumn = layout.inputBorderWidgetStartColumn ?? 1;
+        const text = overlayText(borderText, startColumn, layout.text);
+        return this.host.screenStyler.styleLineSegments(row, text, width, {
+            foreground: this.host.theme.colors.inputBorder,
+        }, this.inputBorderWidgetSegments(layout, text));
+    }
+    inputBorderWidgetSegments(layout, text) {
+        const colors = this.host.theme.colors;
+        const background = colors.inputBorder;
+        const segments = [];
+        const pushWidgetSegment = (widget, foreground) => {
+            if (!widget)
+                return;
+            segments.push({
+                start: displayIndexForColumn(text, widget.startColumn),
+                end: displayIndexForColumn(text, widget.endColumn),
+                foreground,
+                background,
+            });
+        };
+        pushWidgetSegment(layout.draftQueueWidget, colors.info);
+        pushWidgetSegment(layout.promptEnhancerWidget, this.host.promptEnhancerStatusWidgetActive()
+            ? colors.warning
+            : this.host.promptEnhancerStatusWidgetEnabled()
+                ? colors.info
+                : colors.muted);
+        pushWidgetSegment(layout.userJumpWidget, this.host.userMessageJumpMenuActive?.() ? colors.info : colors.muted);
+        pushWidgetSegment(layout.terminalBellSoundWidget, this.host.terminalBellSoundStatusWidgetEnabled() ? colors.info : colors.muted);
+        pushWidgetSegment(layout.thinkingExpandWidget, this.host.allThinkingExpandedActive?.() ? colors.info : colors.muted);
+        pushWidgetSegment(layout.compactToolsWidget, this.host.superCompactToolsActive?.() ? colors.info : colors.muted);
+        const voiceWidget = layout.voiceWidget;
+        if (voiceWidget) {
+            segments.push({
+                start: displayIndexForColumn(text, voiceWidget.startColumn),
+                end: displayIndexForColumn(text, voiceWidget.micEndColumn),
+                foreground: this.host.voiceStatusWidgetActive() ? colors.error : colors.muted,
+                background,
+            });
+            if (voiceWidget.languageEndColumn > voiceWidget.languageStartColumn) {
+                segments.push({
+                    start: displayIndexForColumn(text, voiceWidget.languageStartColumn),
+                    end: displayIndexForColumn(text, voiceWidget.languageEndColumn),
+                    foreground: colors.statusForeground,
+                    background,
+                });
+            }
+        }
+        return segments;
+    }
     modelTarget(statusText, row) {
         const session = this.host.session;
         if (!session)
             return undefined;
         const label = this.host.statusModelLabel(session);
-        const marker = `${label} ${this.host.statusThinkingLabel(session)} `;
+        const marker = `${label} ${this.statusThinkingDisplayLabel(session)} `;
         const startIndex = statusText.indexOf(marker);
         if (startIndex < 0)
             return undefined;
@@ -115,7 +166,7 @@ export class StatusLineRenderer {
         const session = this.host.session;
         if (!session)
             return undefined;
-        const label = this.host.statusThinkingLabel(session);
+        const label = this.statusThinkingDisplayLabel(session);
         const marker = ` ${label} ${this.host.formatContextUsagePercent(session)}`;
         const markerIndex = statusText.indexOf(marker);
         const startIndex = markerIndex >= 0 ? markerIndex + 1 : statusText.indexOf(label);
@@ -127,7 +178,7 @@ export class StatusLineRenderer {
         const session = this.host.session;
         if (!session)
             return undefined;
-        const thinkingLabel = this.host.statusThinkingLabel(session);
+        const thinkingLabel = this.statusThinkingDisplayLabel(session);
         const contextLabel = this.host.formatContextUsagePercent(session);
         const marker = ` ${thinkingLabel} ${contextLabel}`;
         const markerIndex = statusText.indexOf(marker);
@@ -222,7 +273,7 @@ export class StatusLineRenderer {
             }] : [];
         this.pushDraftQueueWidgetSegment(segments, statusText);
         this.pushUserJumpWidgetSegment(segments, statusText);
-        this.pushThinkingExpandWidgetSegment(segments, statusText);
+        this.pushThinkingExpandWidgetSegment(segments, statusText, layout);
         this.pushCompactToolsWidgetSegment(segments, statusText);
         this.pushTerminalBellSoundWidgetSegment(segments, statusText);
         this.pushWorkspaceSegments(segments, statusText, layout.workspaceLabel);
@@ -235,14 +286,15 @@ export class StatusLineRenderer {
             return segments;
         const modelLabel = this.host.statusModelLabel(session);
         const thinkingLabel = this.host.statusThinkingLabel(session);
+        const thinkingDisplayLabel = this.statusThinkingDisplayLabel(session);
         const contextLabel = this.host.formatContextUsagePercent(session);
-        this.pushSegment(segments, statusText.indexOf(`${modelLabel} ${thinkingLabel} `), modelLabel.length, this.modelProviderColor(session));
-        const thinkingMarkerStart = statusText.indexOf(` ${thinkingLabel} ${contextLabel}`);
+        this.pushSegment(segments, statusText.indexOf(`${modelLabel} ${thinkingDisplayLabel} `), modelLabel.length, this.modelProviderColor(session));
+        const thinkingMarkerStart = statusText.indexOf(` ${thinkingDisplayLabel} ${contextLabel}`);
         const thinkingStart = thinkingMarkerStart >= 0 ? thinkingMarkerStart + 1 : -1;
-        this.pushSegment(segments, thinkingStart, thinkingLabel.length, this.thinkingLevelColor(thinkingLabel));
+        this.pushSegment(segments, thinkingStart, thinkingDisplayLabel.length, this.thinkingLevelColor(thinkingLabel));
         const contextPercent = this.host.roundedContextUsagePercent(session);
         if (contextPercent !== undefined && thinkingStart >= 0) {
-            const contextStart = thinkingStart + thinkingLabel.length + 1;
+            const contextStart = thinkingStart + thinkingDisplayLabel.length + 1;
             this.pushSegment(segments, contextStart, contextLabel.length, this.host.contextUsagePercentColor(contextPercent));
             if (layout.contextBarLabel) {
                 const barStart = contextStart + contextLabel.length + 1;
@@ -284,9 +336,13 @@ export class StatusLineRenderer {
     draftQueueWidgetText() {
         return this.host.queueableInputActive?.() ? APP_ICONS.timerSand : "";
     }
-    pushThinkingExpandWidgetSegment(segments, statusText) {
+    pushThinkingExpandWidgetSegment(segments, statusText, layout) {
+        if (!layout.thinkingExpandWidget)
+            return;
         const buttonText = APP_ICONS.thinkingExpanded;
-        const start = statusText.indexOf(buttonText);
+        const buttonMarker = ` ${buttonText} `;
+        const markerStart = statusText.indexOf(buttonMarker);
+        const start = markerStart >= 0 ? markerStart + 1 : -1;
         if (start < 0)
             return;
         this.pushSegment(segments, start, buttonText.length, this.host.allThinkingExpandedActive?.() ? this.host.theme.colors.info : this.host.theme.colors.muted);
@@ -307,18 +363,21 @@ export class StatusLineRenderer {
     }
     pushVoiceWidgetSegment(segments, statusText) {
         const widgetText = this.host.voiceStatusWidgetText();
+        if (widgetText.length <= 0)
+            return;
         const start = statusText.lastIndexOf(widgetText);
-        if (start < 0 || widgetText.length <= 0)
+        const micStart = statusText.lastIndexOf(APP_ICONS.microphone);
+        if (start < 0 && micStart < 0)
             return;
         if (this.host.voiceStatusWidgetActive()) {
             const separatorIndex = widgetText.indexOf(" ");
             const micLength = separatorIndex >= 0 ? separatorIndex : widgetText.length;
-            this.pushSegment(segments, start, micLength, this.host.theme.colors.error);
+            this.pushSegment(segments, micStart >= 0 ? micStart : start, micLength, this.host.theme.colors.error);
             return;
         }
         const separatorIndex = widgetText.indexOf(" ");
         const micLength = separatorIndex >= 0 ? separatorIndex : widgetText.length;
-        this.pushSegment(segments, start, micLength, this.host.theme.colors.muted);
+        this.pushSegment(segments, micStart >= 0 ? micStart : start, micLength, this.host.theme.colors.muted);
     }
     pushWorkspaceSegments(segments, statusText, workspaceLabel) {
         const start = statusText.lastIndexOf(workspaceLabel);
@@ -350,16 +409,16 @@ export class StatusLineRenderer {
             const percentText = match[1];
             if (localStart === undefined || !percentText)
                 continue;
-            if (!prefixColored) {
-                prefixColored = true;
-                const prefixLength = modelUsageLabel.slice(0, localStart).trimEnd().length;
-                this.pushSegment(segments, labelStart, prefixLength, this.host.theme.colors.selectionForeground);
-            }
             const percent = Number.parseInt(percentText, 10);
             if (!Number.isFinite(percent))
                 continue;
             const start = labelStart + localStart;
             const color = this.modelUsageProgressColor(percent);
+            if (!prefixColored) {
+                prefixColored = true;
+                const prefixLength = modelUsageLabel.slice(0, localStart).trimEnd().length;
+                this.pushSegment(segments, labelStart, prefixLength, color);
+            }
             this.pushSegment(segments, start, percentToken.length, color);
             const barStart = start + percentToken.length + 1;
             segments.push(...compactProgressBarSegments(barStart, percent, {
@@ -408,35 +467,15 @@ export class StatusLineRenderer {
             : modelProviderThemeColor(provider, this.host.theme.colors);
     }
     thinkingLevelColor(label) {
-        const levels = this.availableThinkingLevels();
-        const rank = levels.indexOf(label);
-        if (rank >= 0)
-            return this.thinkingRankColor(label, rank, levels.length);
-        const fallbackLevels = ["off", "minimal", "low", "medium", "high", "xhigh"];
-        const fallbackRank = fallbackLevels.indexOf(label);
-        return fallbackRank >= 0
-            ? this.thinkingRankColor(label, fallbackRank, fallbackLevels.length)
-            : this.host.theme.colors.info;
+        return thinkingLevelThemeColor(label, this.host.theme.colors, this.availableThinkingLevels());
+    }
+    statusThinkingDisplayLabel(session) {
+        return `${APP_ICONS.lightbulb} ${this.host.statusThinkingLabel(session)}`;
     }
     availableThinkingLevels() {
         const levels = this.host.session?.getAvailableThinkingLevels();
         return Array.isArray(levels) && levels.length > 0 ? levels.map(String) : ["off", "minimal", "low", "medium", "high", "xhigh"];
     }
-    thinkingRankColor(label, rank, count) {
-        const baseColors = [
-            this.host.theme.colors.muted,
-            this.host.theme.colors.success,
-            this.host.theme.colors.warning,
-            this.host.theme.colors.toolMutation,
-            this.host.theme.colors.error,
-            this.host.theme.colors.thinkingXHigh,
-        ];
-        const colors = count > baseColors.length ? [this.host.theme.colors.statusForeground, ...baseColors] : baseColors;
-        const fallbackLevels = ["off", "minimal", "low", "medium", "high", "xhigh"];
-        const fallbackRank = fallbackLevels.indexOf(label);
-        const colorIndex = count <= baseColors.length && fallbackRank >= 0 ? fallbackRank : rank;
-        return colors[Math.max(0, Math.min(colors.length - 1, colorIndex))] ?? this.host.theme.colors.info;
-    }
     contextBarLabel(status, width, workspaceLabel) {
         const session = this.host.session;
         if (!session)
@@ -457,21 +496,48 @@ export class StatusLineRenderer {
             endColumn: startColumn + stringDisplayWidth(widgetText),
         };
     }
-    voiceWidgetLayout(startColumn, widgetText) {
-        const separatorIndex = widgetText.indexOf(" ");
-        const micText = separatorIndex >= 0 ? widgetText.slice(0, separatorIndex) : widgetText;
-        const languageStartOffset = separatorIndex >= 0 ? stringDisplayWidth(widgetText.slice(0, separatorIndex + 1)) : stringDisplayWidth(widgetText);
-        const afterLanguageIndex = widgetText.indexOf(" ", separatorIndex + 1);
-        const languageTextEndIndex = afterLanguageIndex >= 0 ? afterLanguageIndex : widgetText.length;
-        const languageEndOffset = stringDisplayWidth(widgetText.slice(0, languageTextEndIndex));
+    iconButtonText(icon) {
+        return padOrTrimPlain(` ${icon} `, STATUS_ICON_BUTTON_WIDTH);
+    }
+    voiceBorderWidgetText(widgetText) {
+        const parts = this.voiceBorderWidgetParts(widgetText);
+        if (!parts)
+            return "";
+        const micButton = this.iconButtonText(parts.buttonIconText);
+        if (parts.languageText) {
+            return `${micButton}${INPUT_BORDER_WIDGET_SEPARATOR}${parts.languageText}`;
+        }
+        return micButton;
+    }
+    voiceWidgetLayout(startColumn, sourceText, widgetText) {
+        const parts = this.voiceBorderWidgetParts(sourceText);
+        const languageStartOffset = parts?.languageText
+            ? STATUS_ICON_BUTTON_WIDTH + stringDisplayWidth(INPUT_BORDER_WIDGET_SEPARATOR)
+            : stringDisplayWidth(widgetText);
+        const languageEndOffset = parts?.languageText
+            ? languageStartOffset + stringDisplayWidth(parts.languageText)
+            : languageStartOffset;
         return {
             startColumn,
-            micEndColumn: startColumn + stringDisplayWidth(micText),
+            micEndColumn: startColumn + STATUS_ICON_BUTTON_WIDTH,
             languageStartColumn: startColumn + languageStartOffset,
             languageEndColumn: startColumn + languageEndOffset,
             endColumn: startColumn + stringDisplayWidth(widgetText),
         };
     }
+    voiceBorderWidgetParts(widgetText) {
+        const tokens = widgetText.trim().split(/\s+/u).filter((token) => token.length > 0);
+        const iconText = tokens[0];
+        if (!iconText)
+            return undefined;
+        const maybeLanguage = tokens[1] ?? "";
+        const hasLanguage = /^[A-Z][A-Z0-9_-]*$/u.test(maybeLanguage);
+        const suffixText = tokens.slice(hasLanguage ? 2 : 1).join(" ");
+        return {
+            buttonIconText: suffixText || iconText,
+            languageText: hasLanguage ? maybeLanguage : "",
+        };
+    }
     statusDotColor() {
         switch (this.host.sessionActivity) {
             case "thinking":
@@ -483,6 +549,40 @@ export class StatusLineRenderer {
         }
     }
 }
+function overlayText(text, startColumn, overlay) {
+    const start = Math.max(0, startColumn - 1);
+    const overlayWidth = stringDisplayWidth(overlay);
+    const startIndex = displayIndexForColumn(text, start + 1);
+    const endIndex = displayIndexForColumn(text, start + overlayWidth + 1);
+    const padded = text.padEnd(startIndex, " ");
+    return `${padded.slice(0, startIndex)}${overlay}${padded.slice(endIndex)}`;
+}
+export function thinkingLevelThemeColor(label, colors, availableLevels) {
+    const levels = availableLevels && availableLevels.length > 0 ? availableLevels.map(String) : ["off", "minimal", "low", "medium", "high", "xhigh"];
+    const rank = levels.indexOf(label);
+    if (rank >= 0)
+        return thinkingRankThemeColor(label, rank, levels.length, colors);
+    const fallbackLevels = ["off", "minimal", "low", "medium", "high", "xhigh"];
+    const fallbackRank = fallbackLevels.indexOf(label);
+    return fallbackRank >= 0
+        ? thinkingRankThemeColor(label, fallbackRank, fallbackLevels.length, colors)
+        : colors.info;
+}
+function thinkingRankThemeColor(label, rank, count, colors) {
+    const baseColors = [
+        colors.muted,
+        colors.success,
+        colors.modelOpenAI,
+        colors.warning,
+        colors.error,
+        colors.thinkingXHigh,
+    ];
+    const palette = count > baseColors.length ? [colors.statusForeground, ...baseColors] : baseColors;
+    const fallbackLevels = ["off", "minimal", "low", "medium", "high", "xhigh"];
+    const fallbackRank = fallbackLevels.indexOf(label);
+    const colorIndex = count <= baseColors.length && fallbackRank >= 0 ? fallbackRank : rank;
+    return palette[Math.max(0, Math.min(palette.length - 1, colorIndex))] ?? colors.info;
+}
 export function modelProviderThemeColor(provider, colors) {
     const palette = modelProviderThemePalette(colors);
     const hash = hashString(provider.trim().toLowerCase());

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

@@ -1,16 +1,25 @@
-import { Toast, type ToastKind, type ToastVariant } from "../../ui.js";
+import { type ToastEntry, type ToastKind, type ToastVariant } from "../../ui.js";
 export type AppToastControllerHost = {
+    activeScope?(): string | undefined;
     render(): void;
 };
 export declare class AppToastController {
     private readonly host;
-    readonly toast: Toast;
+    private readonly toastsByScope;
     private readonly timers;
     constructor(host: AppToastControllerHost);
     showToast(message: string, kind?: ToastKind, options?: {
         durationMs?: number;
         variant?: ToastVariant;
+        scopeKey?: string;
     }): void;
-    dismissToast(toastId: number): void;
+    dismissToast(toastId: number, scopeKey?: string): void;
+    dismissActiveDialog(scopeKey?: string): boolean;
+    visibleStates(scopeKey?: string): readonly ToastEntry[];
+    entry(toastId: number, scopeKey?: string): ToastEntry | undefined;
     clearToastTimers(): void;
+    private toastForScope;
+    private timersForScope;
+    private deleteScopeIfEmpty;
+    private normalizeScopeKey;
 }

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

@@ -2,13 +2,15 @@ import { Toast } from "../../ui.js";
 import { TOAST_DURATION_MS } from "../constants.js";
 export class AppToastController {
     host;
-    toast = new Toast();
+    toastsByScope = new Map();
     timers = new Map();
     constructor(host) {
         this.host = host;
     }
     showToast(message, kind = "info", options = {}) {
-        const toastId = this.toast.show(message, kind, options.variant ? { variant: options.variant } : {});
+        const scopeKey = this.normalizeScopeKey(options.scopeKey ?? this.host.activeScope?.());
+        const toast = this.toastForScope(scopeKey);
+        const toastId = toast.show(message, kind, options.variant ? { variant: options.variant } : {});
         if (kind === "error" || options.variant === "dialog") {
             this.host.render();
             return;
@@ -17,27 +19,83 @@ export class AppToastController {
             ? Math.floor(options.durationMs)
             : TOAST_DURATION_MS;
         const timer = setTimeout(() => {
-            this.toast.hide(toastId);
-            this.timers.delete(toastId);
+            toast.hide(toastId);
+            this.timers.get(scopeKey)?.delete(toastId);
+            this.deleteScopeIfEmpty(scopeKey);
             this.host.render();
         }, durationMs);
-        this.timers.set(toastId, timer);
+        this.timersForScope(scopeKey).set(toastId, timer);
         timer.unref();
         this.host.render();
     }
-    dismissToast(toastId) {
-        const timer = this.timers.get(toastId);
+    dismissToast(toastId, scopeKey = this.normalizeScopeKey(this.host.activeScope?.())) {
+        const timers = this.timers.get(scopeKey);
+        const timer = timers?.get(toastId);
         if (timer) {
             clearTimeout(timer);
-            this.timers.delete(toastId);
+            timers?.delete(toastId);
         }
-        this.toast.hide(toastId);
+        this.toastsByScope.get(scopeKey)?.hide(toastId);
+        this.deleteScopeIfEmpty(scopeKey);
         this.host.render();
     }
+    dismissActiveDialog(scopeKey = this.normalizeScopeKey(this.host.activeScope?.())) {
+        const states = this.visibleStates(scopeKey);
+        let dialog;
+        for (let index = states.length - 1; index >= 0; index -= 1) {
+            const toast = states[index];
+            if (!toast)
+                continue;
+            if (toast.variant !== "dialog")
+                continue;
+            dialog = toast;
+            break;
+        }
+        if (!dialog)
+            return false;
+        this.dismissToast(dialog.id, scopeKey);
+        return true;
+    }
+    visibleStates(scopeKey = this.normalizeScopeKey(this.host.activeScope?.())) {
+        return this.toastsByScope.get(scopeKey)?.visibleStates ?? [];
+    }
+    entry(toastId, scopeKey = this.normalizeScopeKey(this.host.activeScope?.())) {
+        return this.toastsByScope.get(scopeKey)?.entry(toastId);
+    }
     clearToastTimers() {
-        for (const timer of this.timers.values())
-            clearTimeout(timer);
+        for (const timers of this.timers.values()) {
+            for (const timer of timers.values())
+                clearTimeout(timer);
+        }
         this.timers.clear();
-        this.toast.hide();
+        for (const toast of this.toastsByScope.values())
+            toast.hide();
+        this.toastsByScope.clear();
+    }
+    toastForScope(scopeKey) {
+        let toast = this.toastsByScope.get(scopeKey);
+        if (!toast) {
+            toast = new Toast();
+            this.toastsByScope.set(scopeKey, toast);
+        }
+        return toast;
+    }
+    timersForScope(scopeKey) {
+        let timers = this.timers.get(scopeKey);
+        if (!timers) {
+            timers = new Map();
+            this.timers.set(scopeKey, timers);
+        }
+        return timers;
+    }
+    deleteScopeIfEmpty(scopeKey) {
+        const timers = this.timers.get(scopeKey);
+        if (timers && timers.size === 0)
+            this.timers.delete(scopeKey);
+        if (!this.toastsByScope.get(scopeKey)?.visible)
+            this.toastsByScope.delete(scopeKey);
+    }
+    normalizeScopeKey(scopeKey) {
+        return scopeKey ?? "";
     }
 }

package/dist/app/runtime.d.ts

@@ -1,6 +1,6 @@
 import { SessionManager, type EventBus, type AgentSessionRuntime, type LoadExtensionsResult, type SessionEntry } from "@earendil-works/pi-coding-agent";
 import { type PixConfig } from "../config.js";
-import type { AppOptions } from "./types.js";
+import type { AppOptions, ThinkingLevel } from "./types.js";
 export type PiToolsSuiteInstallAction = "installed" | "already-installed" | "existing-kept" | "missing-source";
 export type PiToolsSuiteInstallResult = {
     action: PiToolsSuiteInstallAction;
@@ -39,6 +39,7 @@ export type CreatePixRuntimeOptions = {
 };
 type RuntimeSessionManagerModelState = Pick<SessionManager, "getEntries" | "getBranch">;
 export declare function resolvePixRuntimeModelRef(options: Pick<AppOptions, "modelRef">, sessionManager: RuntimeSessionManagerModelState, config?: PixConfig): string | undefined;
+export declare function resolvePixRuntimeInitialThinkingLevel(options: Pick<AppOptions, "modelRef">, sessionManager: RuntimeSessionManagerModelState, config: PixConfig): ThinkingLevel | undefined;
 export declare function resolveSessionModelRefFromTail(entries: readonly SessionEntry[]): string | undefined;
 export declare function createPixRuntime(options: AppOptions, runtimeOptions?: CreatePixRuntimeOptions): Promise<AgentSessionRuntime>;
 export {};