@selesai/code 0.13.39 → 0.14.0

package/dist/modes/interactive/components/model-selector.js

@@ -1,7 +1,7 @@
 import { modelsAreEqual } from "@earendil-works/pi-ai";
 import { Container, fuzzyFilter, getKeybindings, Input, Spacer, Text, } from "@earendil-works/pi-tui";
-import { getModelSelectorSearchText } from "../model-search.js";
 import { refreshModelCatalogs } from "../model-catalog-refresh.js";
+import { getModelSelectorSearchText } from "../model-search.js";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
 import { keyDisplayText, keyHint } from "./keybinding-hints.js";
@@ -26,31 +26,33 @@ export class ModelSelectorComponent extends Container {
     filteredModels = [];
     selectedIndex = 0;
     currentModel;
-    settingsManager;
     modelRuntime;
     onSelectCallback;
-    onCancelCallback;
     options;
+    onSelectAsDefaultCallback;
+    onCancelCallback;
     errorMessage;
     refreshStatusMessage = "Refreshing model catalogs…";
     refreshStatusSuccess = false;
     tui;
     scopedModels;
+    defaultModel;
     scope = "all";
     scopeText;
     scopeHintText;
     refreshAbortController = new AbortController();
     refreshTimeout;
     closed = false;
-    constructor(tui, currentModel, settingsManager, modelRuntime, scopedModels, onSelect, onCancel, initialSearchInput, options = {}) {
+    constructor(tui, currentModel, modelRuntime, scopedModels, onSelect, onCancel, initialSearchInput, onSelectAsDefault, defaultModel, options = {}) {
         super();
         this.tui = tui;
         this.currentModel = currentModel;
-        this.settingsManager = settingsManager;
         this.modelRuntime = modelRuntime;
         this.scopedModels = scopedModels;
+        this.defaultModel = defaultModel;
         this.scope = scopedModels.length > 0 ? "scoped" : "all";
         this.onSelectCallback = onSelect;
+        this.onSelectAsDefaultCallback = onSelectAsDefault;
         this.onCancelCallback = onCancel;
         this.options = options;
         // Add top border
@@ -85,7 +87,8 @@ export class ModelSelectorComponent extends Container {
         this.listContainer = new Container();
         this.addChild(this.listContainer);
         this.addChild(new Spacer(1));
-        if (this.options.persistSelection !== false) {
+        // Hint
+        if (this.onSelectAsDefaultCallback) {
             this.addChild(new Text(theme.fg("dim", `  ${keyDisplayText("tui.select.confirm")} to select · ${keyDisplayText("app.models.save")} to set as default · ${keyDisplayText("tui.select.cancel")} to cancel`), 0, 0));
         }
         // Add bottom border
@@ -105,12 +108,14 @@ export class ModelSelectorComponent extends Container {
             id: model.id,
             model,
         }));
-        this.allModels = this.sortModels(models).filter((item) => !this.options.modelFilter || this.options.modelFilter(item.model));
+        this.allModels = this.sortModels(models).filter((item) => this.options.modelFilter?.(item.model) ?? true);
         this.scopedModels = this.scopedModels.map((scoped) => {
             const refreshed = this.modelRuntime.getModel(scoped.model.provider, scoped.model.id);
             return refreshed ? { ...scoped, model: refreshed } : scoped;
         });
-        this.scopedModelItems = this.scopedModels.filter((scoped) => !this.options.modelFilter || this.options.modelFilter(scoped.model)).map((scoped) => ({
+        this.scopedModelItems = this.scopedModels
+            .filter((scoped) => this.options.modelFilter?.(scoped.model) ?? true)
+            .map((scoped) => ({
             provider: scoped.model.provider,
             id: scoped.model.id,
             model: scoped.model,
@@ -121,12 +126,6 @@ export class ModelSelectorComponent extends Container {
         this.selectedIndex =
             currentIndex >= 0 ? currentIndex : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
     }
-    getActiveModels() {
-        const items = this.scope === "scoped" ? this.scopedModelItems : this.allModels;
-        if (this.options.allowOff)
-            return [{ provider: "", id: "off", model: { provider: "", id: "off", name: "Disabled", input: ["text"] } }, ...items];
-        return items;
-    }
     async refreshModels() {
         const timeoutMs = 15_000;
         let timedOut = false;
@@ -146,7 +145,7 @@ export class ModelSelectorComponent extends Container {
                 this.errorMessage = `Could not refresh ${result.errors.keys().next().value}; showing cached models.`;
             }
             else if (result.errors.size > 1) {
-                this.errorMessage = `Could not refresh ${result.errors.size} model catalogs; showing cached models.`;
+                this.errorMessage = `Could not refresh ${result.errors.size} model catalogs (${[...result.errors.keys()].join(", ")}); showing cached models.`;
             }
             else {
                 this.errorMessage = this.modelRuntime.getError();
@@ -159,12 +158,24 @@ export class ModelSelectorComponent extends Container {
             this.filterModels(this.searchInput.getValue());
             this.tui.requestRender();
         }
+        catch (error) {
+            if (this.closed)
+                return;
+            this.refreshStatusMessage = "";
+            this.errorMessage = timedOut
+                ? "Model refresh timed out; showing cached models."
+                : `Could not refresh model catalogs: ${error instanceof Error ? error.message : String(error)}`;
+            this.updateList();
+            this.tui.requestRender();
+        }
         finally {
             if (this.refreshTimeout)
                 clearTimeout(this.refreshTimeout);
         }
     }
-    close() {
+    dispose() {
+        if (this.closed)
+            return;
         this.closed = true;
         if (this.refreshTimeout)
             clearTimeout(this.refreshTimeout);
@@ -172,7 +183,7 @@ export class ModelSelectorComponent extends Container {
     }
     sortModels(models) {
         const sorted = [...models];
-        // Sort: current model first, then by provider
+        // Sort: current model first, default model second, then by provider.
         sorted.sort((a, b) => {
             const aIsCurrent = modelsAreEqual(this.currentModel, a.model);
             const bIsCurrent = modelsAreEqual(this.currentModel, b.model);
@@ -180,6 +191,12 @@ export class ModelSelectorComponent extends Container {
                 return -1;
             if (!aIsCurrent && bIsCurrent)
                 return 1;
+            const aIsDefault = this.isDefaultModel(a.model);
+            const bIsDefault = this.isDefaultModel(b.model);
+            if (aIsDefault && !bIsDefault)
+                return -1;
+            if (!aIsDefault && bIsDefault)
+                return 1;
             return a.provider.localeCompare(b.provider);
         });
         return sorted;
@@ -192,6 +209,13 @@ export class ModelSelectorComponent extends Container {
     getScopeHintText() {
         return keyHint("tui.input.tab", "scope") + theme.fg("muted", " (all/scoped)");
     }
+    isDefaultModel(model) {
+        return this.defaultModel?.provider === model.provider && this.defaultModel.id === model.id;
+    }
+    isDefaultSearch(query) {
+        const normalized = query.trim().toLowerCase();
+        return normalized.length > 0 && "default".startsWith(normalized);
+    }
     setScope(scope) {
         if (this.scope === scope)
             return;
@@ -205,9 +229,26 @@ export class ModelSelectorComponent extends Container {
         }
     }
     filterModels(query) {
-        this.filteredModels = query
-            ? fuzzyFilter(this.activeModels, query, ({ id, provider, model }) => getModelSelectorSearchText({ id, provider, name: model.name }))
-            : this.activeModels;
+        if (query) {
+            const filtered = fuzzyFilter(this.activeModels, query, (item) => {
+                const defaultText = this.isDefaultModel(item.model) ? " default" : "";
+                return `${getModelSelectorSearchText({ id: item.id, provider: item.provider, name: item.model.name })}${defaultText}`;
+            });
+            if (this.isDefaultSearch(query)) {
+                const defaultItems = this.activeModels.filter((item) => this.isDefaultModel(item.model));
+                const defaultKeys = new Set(defaultItems.map((item) => `${item.provider}\0${item.id}`));
+                this.filteredModels = [
+                    ...defaultItems,
+                    ...filtered.filter((item) => !defaultKeys.has(`${item.provider}\0${item.id}`)),
+                ];
+            }
+            else {
+                this.filteredModels = filtered;
+            }
+        }
+        else {
+            this.filteredModels = this.activeModels;
+        }
         // When filtering by a query, move the selector to the top row so the best
         // match is highlighted. When the query is cleared, keep the current position
         // clamped to the (restored) list length.
@@ -226,13 +267,13 @@ export class ModelSelectorComponent extends Container {
                 continue;
             const isSelected = i === this.selectedIndex;
             const isCurrent = modelsAreEqual(this.currentModel, item.model);
-            const isDefault = item.provider === this.settingsManager.getDefaultProvider() && item.id === this.settingsManager.getDefaultModel();
+            const isDefault = this.isDefaultModel(item.model);
             const defaultBadge = isDefault ? theme.fg("muted", " · default") : "";
             const cursor = isSelected ? theme.fg("accent", "→ ") : "  ";
             const currentMarker = isCurrent ? theme.fg("accent", "✓ ") : "  ";
             const modelText = isSelected ? theme.fg("accent", item.id) : item.id;
-            const providerBadge = item.provider ? theme.fg("muted", `[${item.provider}]`) : "";
-            const line = `${cursor}${currentMarker}${modelText}${providerBadge ? ` ${providerBadge}` : ""}${defaultBadge}`;
+            const providerBadge = item.provider ? ` ${theme.fg("muted", `[${item.provider}]`)}` : "";
+            const line = `${cursor}${currentMarker}${modelText}${providerBadge}${defaultBadge}`;
             this.listContainer.addChild(new Text(line, 0, 0));
         }
         // Add scroll indicator if needed
@@ -296,15 +337,15 @@ export class ModelSelectorComponent extends Container {
         }
         // Escape or Ctrl+C
         else if (kb.matches(keyData, "tui.select.cancel")) {
-            this.close();
+            this.dispose();
             this.onCancelCallback();
         }
-        // Select and save as default. Vision-only selectors opt out via persistSelection.
-        else if (kb.matches(keyData, "app.models.save") && this.options.persistSelection !== false) {
+        // Select and save as default
+        else if (kb.matches(keyData, "app.models.save") && this.onSelectAsDefaultCallback) {
             const selectedModel = this.filteredModels[this.selectedIndex];
-            if (selectedModel && selectedModel.model.id !== "off") {
-                this.settingsManager.setDefaultModelAndProvider(selectedModel.model.provider, selectedModel.model.id);
-                this.handleSelect(selectedModel.model);
+            if (selectedModel && selectedModel.provider) {
+                this.dispose();
+                this.onSelectAsDefaultCallback(selectedModel.model);
             }
         }
         // Pass everything else to search input
@@ -313,9 +354,16 @@ export class ModelSelectorComponent extends Container {
             this.filterModels(this.searchInput.getValue());
         }
     }
+    getActiveModels() {
+        const items = this.scope === "scoped" ? this.scopedModelItems : this.allModels;
+        if (!this.options.allowOff)
+            return items;
+        const off = { provider: "", id: "off", name: "Disabled", input: ["text"] };
+        return [{ provider: "", id: "off", model: off }, ...items];
+    }
     handleSelect(model) {
-        this.close();
-        this.onSelectCallback(model.id === "off" ? undefined : model);
+        this.dispose();
+        this.onSelectCallback(model.id === "off" && !model.provider ? undefined : model);
     }
     getSearchInput() {
         return this.searchInput;

package/dist/modes/interactive/components/oauth-selector.d.ts

@@ -6,8 +6,15 @@ export type AuthSelectorProvider = {
     authType: "oauth" | "api_key";
     method?: ApiKeyAuth | OAuthAuth;
     status?: AuthCheck;
+    /**
+     * Whether the provider's OAuth sign-in is backed by a subscription. `false` labels it as an account;
+     * unset keeps the "subscription" label.
+     */
+    subscription?: boolean;
 };
-export declare function formatAuthSelectorProviderType(authType: AuthSelectorProvider["authType"]): string;
+export declare function formatAuthSelectorProviderType(authType: AuthSelectorProvider["authType"], subscription?: boolean): string;
+/** Themed suffix describing whether and how a login option is configured, for example " ✓ configured". */
+export declare function formatAuthSelectorProviderStatus(provider: AuthSelectorProvider): string;
 /**
  * Component that renders an auth provider selector
  */
@@ -27,6 +34,5 @@ export declare class OAuthSelectorComponent extends Container implements Focusab
     constructor(mode: "login" | "logout", providers: AuthSelectorProvider[], onSelect: (providerId: string, authType: AuthSelectorProvider["authType"]) => void, onCancel: () => void, initialSearchInput?: string);
     private filterProviders;
     private updateList;
-    private formatStatusIndicator;
     handleInput(keyData: string): void;
 }

package/dist/modes/interactive/components/oauth-selector.js

@@ -1,8 +1,28 @@
 import { Container, fuzzyFilter, getKeybindings, Input, Spacer, TruncatedText, } from "@earendil-works/pi-tui";
 import { theme } from "../theme/theme.js";
 import { DynamicBorder } from "./dynamic-border.js";
-export function formatAuthSelectorProviderType(authType) {
-    return authType === "oauth" ? "subscription" : "API key";
+export function formatAuthSelectorProviderType(authType, subscription) {
+    if (authType === "api_key")
+        return "API key";
+    return subscription === false ? "account" : "subscription";
+}
+/** Themed suffix describing whether and how a login option is configured, for example " ✓ configured". */
+export function formatAuthSelectorProviderStatus(provider) {
+    if (!provider.status)
+        return theme.fg("muted", " • not configured");
+    if (provider.status.type !== provider.authType) {
+        const label = `${formatAuthSelectorProviderType(provider.status.type, provider.subscription)} configured`;
+        return theme.fg("muted", " • ") + theme.fg("warning", label);
+    }
+    if (!provider.status.source ||
+        provider.status.source === "OAuth" ||
+        provider.status.source === "stored credential") {
+        return theme.fg("success", " ✓ configured");
+    }
+    const source = /^[A-Z][A-Z0-9_]*(?:, [A-Z][A-Z0-9_]*)*$/.test(provider.status.source)
+        ? `env: ${provider.status.source}`
+        : provider.status.source;
+    return theme.fg("success", ` ✓ ${source}`);
 }
 /**
  * Component that renders an auth provider selector
@@ -79,9 +99,9 @@ export class OAuthSelectorComponent extends Container {
             if (!provider)
                 continue;
             const isSelected = i === this.selectedIndex;
-            const statusIndicator = this.formatStatusIndicator(provider);
+            const statusIndicator = formatAuthSelectorProviderStatus(provider);
             const authTypeLabel = this.showAuthTypeLabels
-                ? theme.fg("muted", ` [${formatAuthSelectorProviderType(provider.authType)}]`)
+                ? theme.fg("muted", ` [${formatAuthSelectorProviderType(provider.authType, provider.subscription)}]`)
                 : "";
             let line = "";
             if (isSelected) {
@@ -109,23 +129,6 @@ export class OAuthSelectorComponent extends Container {
             this.listContainer.addChild(new TruncatedText(theme.fg("muted", `  ${message}`), 1, 0));
         }
     }
-    formatStatusIndicator(provider) {
-        if (!provider.status)
-            return theme.fg("muted", " • unconfigured");
-        if (provider.status.type !== provider.authType) {
-            const label = provider.status.type === "oauth" ? "subscription configured" : "API key configured";
-            return theme.fg("muted", " • ") + theme.fg("warning", label);
-        }
-        if (!provider.status.source ||
-            provider.status.source === "OAuth" ||
-            provider.status.source === "stored credential") {
-            return theme.fg("success", " ✓ configured");
-        }
-        const source = /^[A-Z][A-Z0-9_]*(?:, [A-Z][A-Z0-9_]*)*$/.test(provider.status.source)
-            ? `env: ${provider.status.source}`
-            : provider.status.source;
-        return theme.fg("success", ` ✓ ${source}`);
-    }
     handleInput(keyData) {
         const kb = getKeybindings();
         // Up arrow

package/dist/modes/interactive/components/pi-logo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The pi logo: 4 cells wide and 2 lines tall. Each cell shows two square pixels with half blocks:
+ *
+ *   coral coral coral .
+ *   blue  .     coral .
+ *   blue  blue  .     yellow
+ *   blue  .     .     yellow
+ *
+ * The brand colors stay fixed across themes; they follow the terminal's color mode.
+ */
+export declare function piLogoLines(): [string, string];
+/**
+ * Whether the terminal renders the half-block logo correctly. Apple Terminal draws gaps between rows and
+ * misaligns the half blocks, so it gets the text wordmark instead.
+ */
+export declare function supportsPiLogo(): boolean;
+/** Text fallback for the logo: "Pi" with the logo's coral and yellow. */
+export declare function piWordmark(): string;

package/dist/modes/interactive/components/pi-logo.js

@@ -0,0 +1,36 @@
+import { backgroundAnsi, foregroundAnsi, isAppleTerminalSession, rgbColor } from "@earendil-works/pi-tui";
+import { theme } from "../theme/theme.js";
+const CORAL = rgbColor(228, 138, 122);
+const BLUE = rgbColor(79, 142, 179);
+const YELLOW = rgbColor(234, 182, 93);
+const RESET = "\x1b[0m";
+/**
+ * The pi logo: 4 cells wide and 2 lines tall. Each cell shows two square pixels with half blocks:
+ *
+ *   coral coral coral .
+ *   blue  .     coral .
+ *   blue  blue  .     yellow
+ *   blue  .     .     yellow
+ *
+ * The brand colors stay fixed across themes; they follow the terminal's color mode.
+ */
+export function piLogoLines() {
+    const mode = theme.getColorMode();
+    const fg = (color) => foregroundAnsi(color, mode);
+    // The fourth cell of the top line is empty, so it is padded to the same width as the bottom line.
+    const top = `${fg(CORAL)}${backgroundAnsi(BLUE, mode)}▀${RESET}${fg(CORAL)}▀█${RESET} `;
+    const bottom = `${fg(BLUE)}█▀${RESET} ${fg(YELLOW)}█${RESET}`;
+    return [top, bottom];
+}
+/**
+ * Whether the terminal renders the half-block logo correctly. Apple Terminal draws gaps between rows and
+ * misaligns the half blocks, so it gets the text wordmark instead.
+ */
+export function supportsPiLogo() {
+    return !isAppleTerminalSession();
+}
+/** Text fallback for the logo: "Pi" with the logo's coral and yellow. */
+export function piWordmark() {
+    const mode = theme.getColorMode();
+    return `${foregroundAnsi(CORAL, mode)}P${RESET}${foregroundAnsi(YELLOW, mode)}i${RESET}`;
+}

package/dist/modes/interactive/components/radius-login-selector.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The `/login` menu with the animated "Sign in with Radius" option. Internal to the interactive mode: the shimmer
+ * is Radius-only and is not exposed to other selectors.
+ */
+import { type TUI } from "@earendil-works/pi-tui";
+import { ExtensionSelectorComponent } from "./extension-selector.ts";
+/** The "Sign in with Radius" option: `label` is the full option, starting with the animated `text`. */
+type RadiusOption = {
+    label: string;
+    text: string;
+};
+/** Top-level `/login` selector whose Radius option shimmers in the Radius logo colors while it is selected. */
+export declare function createLoginMenuSelector(tui: TUI, title: string, options: string[], radiusOption: RadiusOption, onSelect: (option: string) => void, onCancel: () => void): ExtensionSelectorComponent;
+export {};

package/dist/modes/interactive/components/radius-login-selector.js

@@ -0,0 +1,84 @@
+/**
+ * The `/login` menu with the animated "Sign in with Radius" option. Internal to the interactive mode: the shimmer
+ * is Radius-only and is not exposed to other selectors.
+ */
+import { foregroundAnsi, mixColors, parseColor, Text } from "@earendil-works/pi-tui";
+import { theme } from "../theme/theme.js";
+import { ExtensionSelectorComponent } from "./extension-selector.js";
+/** The four colors of the Radius logo, in the order they stream across the text. */
+const RADIUS_COLORS = ["#4d9abf", "#83ccd2", "#f1be57", "#f09082"].map((hex) => parseColor(hex));
+/** Width of each color band, in characters. */
+const CHARS_PER_COLOR = 4;
+const CHARS_PER_SECOND = 10;
+const ANIMATION_FRAME_MS = 50;
+/** Color `text` with the Radius logo colors flowing left to right; `elapsedMs` is the animation time. */
+function radiusShimmer(text, elapsedMs) {
+    const mode = theme.getColorMode();
+    const cycle = RADIUS_COLORS.length * CHARS_PER_COLOR;
+    const offset = (elapsedMs / 1000) * CHARS_PER_SECOND;
+    let result = "";
+    let index = 0;
+    for (const char of text) {
+        const position = (((index - offset) % cycle) + cycle) % cycle;
+        const band = Math.floor(position / CHARS_PER_COLOR);
+        const t = position / CHARS_PER_COLOR - band;
+        // Smoothstep keeps each band recognizable while still blending into the next one.
+        const amount = t * t * (3 - 2 * t);
+        const from = RADIUS_COLORS[band];
+        const to = RADIUS_COLORS[(band + 1) % RADIUS_COLORS.length];
+        result += foregroundAnsi(mixColors(from, to, amount, "srgb"), mode) + char;
+        index++;
+    }
+    return `${result}\x1b[39m`;
+}
+/**
+ * Swaps the line `ExtensionSelectorComponent` draws for the selected Radius option with the animated one. When the
+ * selector's row style changes or the label wraps, the line no longer matches and the option renders normally.
+ */
+class RadiusLoginMenuComponent extends ExtensionSelectorComponent {
+    radiusOption;
+    animationStart = performance.now();
+    animationTimer;
+    animating = false;
+    constructor(tui, title, options, radiusOption, onSelect, onCancel) {
+        super(title, options, (option) => {
+            this.stopAnimation();
+            onSelect(option);
+        }, () => {
+            this.stopAnimation();
+            onCancel();
+        });
+        this.radiusOption = radiusOption;
+        this.animationTimer = setInterval(() => {
+            if (this.animating)
+                tui.requestRender();
+        }, ANIMATION_FRAME_MS);
+        this.animationTimer.unref?.();
+    }
+    render(width) {
+        const lines = super.render(width);
+        const { label, text } = this.radiusOption;
+        const selectedLine = new Text(theme.fg("accent", "→ ") + theme.fg("accent", label), 1, 0).render(width)[0];
+        const index = selectedLine === undefined ? -1 : lines.indexOf(selectedLine);
+        this.animating = index >= 0;
+        if (this.animating) {
+            const shimmer = radiusShimmer(text, performance.now() - this.animationStart);
+            const animatedLine = theme.fg("accent", "→ ") + shimmer + label.slice(text.length);
+            lines[index] = new Text(animatedLine, 1, 0).render(width)[0] ?? "";
+        }
+        return lines;
+    }
+    stopAnimation() {
+        clearInterval(this.animationTimer);
+        this.animationTimer = undefined;
+        this.animating = false;
+    }
+    dispose() {
+        this.stopAnimation();
+        super.dispose();
+    }
+}
+/** Top-level `/login` selector whose Radius option shimmers in the Radius logo colors while it is selected. */
+export function createLoginMenuSelector(tui, title, options, radiusOption, onSelect, onCancel) {
+    return new RadiusLoginMenuComponent(tui, title, options, radiusOption, onSelect, onCancel);
+}

package/dist/modes/interactive/components/scoped-models-selector.d.ts

@@ -3,6 +3,7 @@ import { Container, type Focusable, Input } from "@earendil-works/pi-tui";
 export interface ModelsConfig {
     allModels: Model<any>[];
     enabledModelIds: string[] | null;
+    refreshStatus?: string;
 }
 export interface ModelsCallbacks {
     /** Called whenever the enabled model set or order changes (session-only, no persist) */
@@ -30,7 +31,10 @@ export declare class ScopedModelsSelectorComponent extends Container implements
     private callbacks;
     private maxVisible;
     private isDirty;
+    private refreshStatusText?;
     constructor(config: ModelsConfig, callbacks: ModelsCallbacks);
+    updateModels(models: readonly Model<any>[], enabledModelIds?: string[] | null): void;
+    setRefreshStatus(message: string, kind: "muted" | "success" | "warning"): void;
     private buildItems;
     private getFooterText;
     private refresh;

package/dist/modes/interactive/components/scoped-models-selector.js

@@ -81,6 +81,7 @@ export class ScopedModelsSelectorComponent extends Container {
     callbacks;
     maxVisible = 8;
     isDirty = false;
+    refreshStatusText;
     constructor(config, callbacks) {
         super();
         this.callbacks = callbacks;
@@ -106,11 +107,36 @@ export class ScopedModelsSelectorComponent extends Container {
         this.addChild(this.listContainer);
         // Footer hint
         this.addChild(new Spacer(1));
+        if (config.refreshStatus) {
+            this.refreshStatusText = new Text(theme.fg("muted", `  ${config.refreshStatus}`), 0, 0);
+            this.addChild(this.refreshStatusText);
+        }
         this.footerText = new Text(this.getFooterText(), 0, 0);
         this.addChild(this.footerText);
         this.addChild(new DynamicBorder());
         this.updateList();
     }
+    updateModels(models, enabledModelIds) {
+        const selectedId = this.filteredItems[this.selectedIndex]?.fullId;
+        if (enabledModelIds !== undefined)
+            this.enabledIds = enabledModelIds === null ? null : [...enabledModelIds];
+        this.modelsById.clear();
+        this.allIds = [];
+        for (const model of models) {
+            const fullId = `${model.provider}/${model.id}`;
+            this.modelsById.set(fullId, model);
+            this.allIds.push(fullId);
+        }
+        this.refresh();
+        const refreshedIndex = selectedId ? this.filteredItems.findIndex((item) => item.fullId === selectedId) : -1;
+        if (refreshedIndex >= 0) {
+            this.selectedIndex = refreshedIndex;
+            this.updateList();
+        }
+    }
+    setRefreshStatus(message, kind) {
+        this.refreshStatusText?.setText(theme.fg(kind, `  ${message}`));
+    }
     buildItems() {
         return getSortedIds(this.enabledIds, this.allIds).map((id) => ({
             fullId: id,

package/dist/modes/interactive/components/settings-selector.d.ts

@@ -1,7 +1,7 @@
 import type { ThinkingLevel } from "@earendil-works/pi-agent-core";
 import { type Model, type Transport } from "@earendil-works/pi-ai";
-import { Container, type ScrollViewScrollbar, SettingsList } from "@earendil-works/pi-tui";
-import { type CacheWarmingMode, type DefaultProjectTrust, type FullscreenExitOutput, type TuiMode, type WarningSettings } from "../../../core/settings-manager.ts";
+import { Container, type ScrollViewScrollbar, SettingsList, type WheelScrollLines } from "@earendil-works/pi-tui";
+import { type CacheWarmingMode, type DefaultProjectTrust, type FullscreenExitOutput, type MermaidRenderingMode, type QuietStartup, type TuiMode, type WarningSettings } from "../../../core/settings-manager.ts";
 import { type TerminalTheme } from "../theme/theme.ts";
 import type { ModelSelectorComponent } from "./model-selector.ts";
 export interface SkillToggleItem {
@@ -13,9 +13,6 @@ export interface SkillToggleItem {
 }
 export interface SettingsConfig {
     autoCompact: boolean;
-    autoHandoffEnabled: boolean;
-    autoHandoffThresholdTokens: number;
-    capabilityGatewayJevEnabled: boolean;
     showImages: boolean;
     imageWidthCells: number;
     autoResizeImages: boolean;
@@ -39,6 +36,7 @@ export interface SettingsConfig {
     terminalTheme: TerminalTheme;
     availableThemes: string[];
     hideThinkingBlock: boolean;
+    mermaidRenderingMode: MermaidRenderingMode;
     showCacheMissNotices: boolean;
     collapseChangelog: boolean;
     enableInstallTelemetry: boolean;
@@ -48,7 +46,7 @@ export interface SettingsConfig {
     editorPaddingX: number;
     outputPad: 0 | 1;
     autocompleteMaxVisible: number;
-    quietStartup: boolean;
+    quietStartup: QuietStartup;
     defaultProjectTrust: DefaultProjectTrust;
     clearOnShrink: boolean;
     showTerminalProgress: boolean;
@@ -56,14 +54,12 @@ export interface SettingsConfig {
     fullscreenExitOutput: FullscreenExitOutput;
     fullscreenScrollbar: ScrollViewScrollbar;
     fullscreenCopyOnSelect: boolean;
+    fullscreenWheelScrollLines: WheelScrollLines;
     warnings: WarningSettings;
     skills: SkillToggleItem[];
 }
 export interface SettingsCallbacks {
     onAutoCompactChange: (enabled: boolean) => void;
-    onAutoHandoffEnabledChange: (enabled: boolean) => void;
-    onAutoHandoffThresholdTokensChange: (tokens: number) => void;
-    onCapabilityGatewayJevChange: (enabled: boolean) => boolean;
     onShowImagesChange: (enabled: boolean) => void;
     onImageWidthCellsChange: (width: number) => void;
     onAutoResizeImagesChange: (enabled: boolean) => void;
@@ -77,10 +73,10 @@ export interface SettingsCallbacks {
     onCacheWarmingModeChange: (mode: CacheWarmingMode) => void;
     onModelThinkingLevelChange: (provider: string, modelId: string, level: ThinkingLevel) => void;
     onModelThinkingLevelRemove: (provider: string, modelId: string) => void;
-    onThinkingLevelChange: (level: ThinkingLevel) => void;
     onThemeChange: (theme: string) => void;
     onThemePreview?: (theme: string) => void;
     onHideThinkingBlockChange: (hidden: boolean) => void;
+    onMermaidRenderingModeChange: (mode: MermaidRenderingMode) => void;
     onShowCacheMissNoticesChange: (shown: boolean) => void;
     onCollapseChangelogChange: (collapsed: boolean) => void;
     onEnableInstallTelemetryChange: (enabled: boolean) => void;
@@ -90,7 +86,7 @@ export interface SettingsCallbacks {
     onEditorPaddingXChange: (padding: number) => void;
     onOutputPadChange: (padding: 0 | 1) => void;
     onAutocompleteMaxVisibleChange: (maxVisible: number) => void;
-    onQuietStartupChange: (enabled: boolean) => void;
+    onQuietStartupChange: (quiet: QuietStartup) => void;
     onDefaultProjectTrustChange: (defaultProjectTrust: DefaultProjectTrust) => void;
     onClearOnShrinkChange: (enabled: boolean) => void;
     onShowTerminalProgressChange: (enabled: boolean) => void;
@@ -98,6 +94,7 @@ export interface SettingsCallbacks {
     onFullscreenExitOutputChange: (output: FullscreenExitOutput) => void;
     onFullscreenScrollbarChange: (mode: ScrollViewScrollbar) => void;
     onFullscreenCopyOnSelectChange: (enabled: boolean) => void;
+    onFullscreenWheelScrollLinesChange: (lines: WheelScrollLines) => void;
     onWarningsChange: (warnings: WarningSettings) => void;
     onSkillsToggle: (item: SkillToggleItem, enabled: boolean) => void;
     onSkillsReload: () => void;