@tomsun28/pizza 0.1.0 → 0.1.1

package/dist/modes/interactive/components/login-dialog.d.ts

@@ -0,0 +1,41 @@
+import { Container, type Focusable, type TUI } from "@earendil-works/pi-tui";
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export declare class LoginDialogComponent extends Container implements Focusable {
+    private onComplete;
+    private contentContainer;
+    private input;
+    private tui;
+    private abortController;
+    private inputResolver?;
+    private inputRejecter?;
+    private _focused;
+    get focused(): boolean;
+    set focused(value: boolean);
+    constructor(tui: TUI, providerId: string, onComplete: (success: boolean, message?: string) => void);
+    get signal(): AbortSignal;
+    private cancel;
+    /**
+     * Called by onAuth callback - show URL and optional instructions
+     */
+    showAuth(url: string, instructions?: string): void;
+    /**
+     * Show input for manual code/URL entry (for callback server providers)
+     */
+    showManualInput(prompt: string): Promise<string>;
+    /**
+     * Called by onPrompt callback - show prompt and wait for input
+     * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+     */
+    showPrompt(message: string, placeholder?: string): Promise<string>;
+    /**
+     * Show waiting message (for polling flows like GitHub Copilot)
+     */
+    showWaiting(message: string): void;
+    /**
+     * Called by onProgress callback
+     */
+    showProgress(message: string): void;
+    handleInput(data: string): void;
+}

package/dist/modes/interactive/components/login-dialog.js

@@ -0,0 +1,138 @@
+import { getOAuthProviders } from "@earendil-works/pi-ai/oauth";
+import { Container, getKeybindings, Input, Spacer, Text } from "@earendil-works/pi-tui";
+import { exec } from "child_process";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+import { keyHint } from "./keybinding-hints.js";
+/**
+ * Login dialog component - replaces editor during OAuth login flow
+ */
+export class LoginDialogComponent extends Container {
+    get focused() {
+        return this._focused;
+    }
+    set focused(value) {
+        this._focused = value;
+        this.input.focused = value;
+    }
+    constructor(tui, providerId, onComplete) {
+        super();
+        this.onComplete = onComplete;
+        this.abortController = new AbortController();
+        // Focusable implementation - propagate to input for IME cursor positioning
+        this._focused = false;
+        this.tui = tui;
+        const providerInfo = getOAuthProviders().find((p) => p.id === providerId);
+        const providerName = providerInfo?.name || providerId;
+        // Top border
+        this.addChild(new DynamicBorder());
+        // Title
+        this.addChild(new Text(theme.fg("warning", `Login to ${providerName}`), 1, 0));
+        // Dynamic content area
+        this.contentContainer = new Container();
+        this.addChild(this.contentContainer);
+        // Input (always present, used when needed)
+        this.input = new Input();
+        this.input.onSubmit = () => {
+            if (this.inputResolver) {
+                this.inputResolver(this.input.getValue());
+                this.inputResolver = undefined;
+                this.inputRejecter = undefined;
+            }
+        };
+        this.input.onEscape = () => {
+            this.cancel();
+        };
+        // Bottom border
+        this.addChild(new DynamicBorder());
+    }
+    get signal() {
+        return this.abortController.signal;
+    }
+    cancel() {
+        this.abortController.abort();
+        if (this.inputRejecter) {
+            this.inputRejecter(new Error("Login cancelled"));
+            this.inputResolver = undefined;
+            this.inputRejecter = undefined;
+        }
+        this.onComplete(false, "Login cancelled");
+    }
+    /**
+     * Called by onAuth callback - show URL and optional instructions
+     */
+    showAuth(url, instructions) {
+        this.contentContainer.clear();
+        this.contentContainer.addChild(new Spacer(1));
+        this.contentContainer.addChild(new Text(theme.fg("accent", url), 1, 0));
+        const clickHint = process.platform === "darwin" ? "Cmd+click to open" : "Ctrl+click to open";
+        const hyperlink = `\x1b]8;;${url}\x07${clickHint}\x1b]8;;\x07`;
+        this.contentContainer.addChild(new Text(theme.fg("dim", hyperlink), 1, 0));
+        if (instructions) {
+            this.contentContainer.addChild(new Spacer(1));
+            this.contentContainer.addChild(new Text(theme.fg("warning", instructions), 1, 0));
+        }
+        // Try to open browser
+        const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+        exec(`${openCmd} "${url}"`);
+        this.tui.requestRender();
+    }
+    /**
+     * Show input for manual code/URL entry (for callback server providers)
+     */
+    showManualInput(prompt) {
+        this.contentContainer.addChild(new Spacer(1));
+        this.contentContainer.addChild(new Text(theme.fg("dim", prompt), 1, 0));
+        this.contentContainer.addChild(this.input);
+        this.contentContainer.addChild(new Text(`(${keyHint("tui.select.cancel", "to cancel")})`, 1, 0));
+        this.tui.requestRender();
+        return new Promise((resolve, reject) => {
+            this.inputResolver = resolve;
+            this.inputRejecter = reject;
+        });
+    }
+    /**
+     * Called by onPrompt callback - show prompt and wait for input
+     * Note: Does NOT clear content, appends to existing (preserves URL from showAuth)
+     */
+    showPrompt(message, placeholder) {
+        this.contentContainer.addChild(new Spacer(1));
+        this.contentContainer.addChild(new Text(theme.fg("text", message), 1, 0));
+        if (placeholder) {
+            this.contentContainer.addChild(new Text(theme.fg("dim", `e.g., ${placeholder}`), 1, 0));
+        }
+        this.contentContainer.addChild(this.input);
+        this.contentContainer.addChild(new Text(`(${keyHint("tui.select.cancel", "to cancel,")} ${keyHint("tui.select.confirm", "to submit")})`, 1, 0));
+        this.input.setValue("");
+        this.tui.requestRender();
+        return new Promise((resolve, reject) => {
+            this.inputResolver = resolve;
+            this.inputRejecter = reject;
+        });
+    }
+    /**
+     * Show waiting message (for polling flows like GitHub Copilot)
+     */
+    showWaiting(message) {
+        this.contentContainer.addChild(new Spacer(1));
+        this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+        this.contentContainer.addChild(new Text(`(${keyHint("tui.select.cancel", "to cancel")})`, 1, 0));
+        this.tui.requestRender();
+    }
+    /**
+     * Called by onProgress callback
+     */
+    showProgress(message) {
+        this.contentContainer.addChild(new Text(theme.fg("dim", message), 1, 0));
+        this.tui.requestRender();
+    }
+    handleInput(data) {
+        const kb = getKeybindings();
+        if (kb.matches(data, "tui.select.cancel")) {
+            this.cancel();
+            return;
+        }
+        // Pass to input
+        this.input.handleInput(data);
+    }
+}

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

@@ -0,0 +1,32 @@
+import { type Model } from "@earendil-works/pi-ai/compat";
+import { Container, type Focusable, Input, type TUI } from "@earendil-works/pi-tui";
+import type { ModelRegistry } from "../../../core/model-registry.js";
+import type { SettingsManager } from "../../../core/settings-manager.js";
+/**
+ * Component that renders a model selector with search
+ */
+export declare class ModelSelectorComponent extends Container implements Focusable {
+    private searchInput;
+    private _focused;
+    get focused(): boolean;
+    set focused(value: boolean);
+    private listContainer;
+    private allModels;
+    private filteredModels;
+    private selectedIndex;
+    private currentModel?;
+    private settingsManager;
+    private modelRegistry;
+    private onSelectCallback;
+    private onCancelCallback;
+    private errorMessage?;
+    private tui;
+    constructor(tui: TUI, currentModel: Model<any> | undefined, settingsManager: SettingsManager, modelRegistry: ModelRegistry, onSelect: (model: Model<any>) => void, onCancel: () => void, initialSearchInput?: string);
+    private loadModels;
+    private sortModels;
+    private filterModels;
+    private updateList;
+    handleInput(keyData: string): void;
+    private handleSelect;
+    getSearchInput(): Input;
+}

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

@@ -0,0 +1,209 @@
+import { modelsAreEqual } from "@earendil-works/pi-ai/compat";
+import { Container, fuzzyFilter, getKeybindings, Input, Spacer, Text, } from "@earendil-works/pi-tui";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+/**
+ * Component that renders a model selector with search
+ */
+export class ModelSelectorComponent extends Container {
+    get focused() {
+        return this._focused;
+    }
+    set focused(value) {
+        this._focused = value;
+        this.searchInput.focused = value;
+    }
+    constructor(tui, currentModel, settingsManager, modelRegistry, onSelect, onCancel, initialSearchInput) {
+        super();
+        // Focusable implementation - propagate to searchInput for IME cursor positioning
+        this._focused = false;
+        this.allModels = [];
+        this.filteredModels = [];
+        this.selectedIndex = 0;
+        this.tui = tui;
+        this.currentModel = currentModel;
+        this.settingsManager = settingsManager;
+        this.modelRegistry = modelRegistry;
+        this.onSelectCallback = onSelect;
+        this.onCancelCallback = onCancel;
+        // Add top border
+        this.addChild(new DynamicBorder());
+        this.addChild(new Spacer(1));
+        // Add hint about model filtering
+        const hintText = "Only showing models with configured API keys (see README for details)";
+        this.addChild(new Text(theme.fg("warning", hintText), 0, 0));
+        this.addChild(new Spacer(1));
+        // Create search input
+        this.searchInput = new Input();
+        if (initialSearchInput) {
+            this.searchInput.setValue(initialSearchInput);
+        }
+        this.searchInput.onSubmit = () => {
+            // Enter on search input selects the first filtered item
+            if (this.filteredModels[this.selectedIndex]) {
+                this.handleSelect(this.filteredModels[this.selectedIndex].model);
+            }
+        };
+        this.addChild(this.searchInput);
+        this.addChild(new Spacer(1));
+        // Create list container
+        this.listContainer = new Container();
+        this.addChild(this.listContainer);
+        this.addChild(new Spacer(1));
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+        // Load models and do initial render
+        this.loadModels().then(() => {
+            if (initialSearchInput) {
+                this.filterModels(initialSearchInput);
+            }
+            else {
+                this.updateList();
+            }
+            // Request re-render after models are loaded
+            this.tui.requestRender();
+        });
+    }
+    async loadModels() {
+        let models;
+        // Refresh to pick up any changes to models.json
+        this.modelRegistry.refresh();
+        // Check for models.json errors
+        const loadError = this.modelRegistry.getError();
+        if (loadError) {
+            this.errorMessage = loadError;
+        }
+        // Load available models (built-in models still work even if models.json failed)
+        try {
+            const availableModels = await this.modelRegistry.getAvailable();
+            models = availableModels.map((model) => ({
+                provider: model.provider,
+                id: model.id,
+                model,
+            }));
+        }
+        catch (error) {
+            this.allModels = [];
+            this.filteredModels = [];
+            this.errorMessage = error instanceof Error ? error.message : String(error);
+            return;
+        }
+        this.allModels = this.sortModels(models);
+        this.filteredModels = this.allModels;
+        const currentIndex = this.filteredModels.findIndex((item) => modelsAreEqual(this.currentModel, item.model));
+        this.selectedIndex =
+            currentIndex >= 0 ? currentIndex : Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
+    }
+    sortModels(models) {
+        const sorted = [...models];
+        // Sort: current model first, then by provider
+        sorted.sort((a, b) => {
+            const aIsCurrent = modelsAreEqual(this.currentModel, a.model);
+            const bIsCurrent = modelsAreEqual(this.currentModel, b.model);
+            if (aIsCurrent && !bIsCurrent)
+                return -1;
+            if (!aIsCurrent && bIsCurrent)
+                return 1;
+            return a.provider.localeCompare(b.provider);
+        });
+        return sorted;
+    }
+    filterModels(query) {
+        this.filteredModels = query
+            ? fuzzyFilter(this.allModels, query, ({ id, provider }) => `${id} ${provider} ${provider}/${id} ${provider} ${id}`)
+            : this.allModels;
+        this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, this.filteredModels.length - 1));
+        this.updateList();
+    }
+    updateList() {
+        this.listContainer.clear();
+        const maxVisible = 10;
+        const startIndex = Math.max(0, Math.min(this.selectedIndex - Math.floor(maxVisible / 2), this.filteredModels.length - maxVisible));
+        const endIndex = Math.min(startIndex + maxVisible, this.filteredModels.length);
+        // Show visible slice of filtered models
+        for (let i = startIndex; i < endIndex; i++) {
+            const item = this.filteredModels[i];
+            if (!item)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            const isCurrent = modelsAreEqual(this.currentModel, item.model);
+            let line = "";
+            if (isSelected) {
+                const prefix = theme.fg("accent", "→ ");
+                const modelText = `${item.id}`;
+                const providerBadge = theme.fg("muted", `[${item.provider}]`);
+                const checkmark = isCurrent ? theme.fg("success", " ✓") : "";
+                line = `${prefix + theme.fg("accent", modelText)} ${providerBadge}${checkmark}`;
+            }
+            else {
+                const modelText = `  ${item.id}`;
+                const providerBadge = theme.fg("muted", `[${item.provider}]`);
+                const checkmark = isCurrent ? theme.fg("success", " ✓") : "";
+                line = `${modelText} ${providerBadge}${checkmark}`;
+            }
+            this.listContainer.addChild(new Text(line, 0, 0));
+        }
+        // Add scroll indicator if needed
+        if (startIndex > 0 || endIndex < this.filteredModels.length) {
+            const scrollInfo = theme.fg("muted", `  (${this.selectedIndex + 1}/${this.filteredModels.length})`);
+            this.listContainer.addChild(new Text(scrollInfo, 0, 0));
+        }
+        // Show error message or "no results" if empty
+        if (this.errorMessage) {
+            // Show error in red
+            const errorLines = this.errorMessage.split("\n");
+            for (const line of errorLines) {
+                this.listContainer.addChild(new Text(theme.fg("error", line), 0, 0));
+            }
+        }
+        else if (this.filteredModels.length === 0) {
+            this.listContainer.addChild(new Text(theme.fg("muted", "  No matching models"), 0, 0));
+        }
+        else {
+            const selected = this.filteredModels[this.selectedIndex];
+            this.listContainer.addChild(new Spacer(1));
+            this.listContainer.addChild(new Text(theme.fg("muted", `  Model Name: ${selected.model.name}`), 0, 0));
+        }
+    }
+    handleInput(keyData) {
+        const kb = getKeybindings();
+        // Up arrow - wrap to bottom when at top
+        if (kb.matches(keyData, "tui.select.up")) {
+            if (this.filteredModels.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === 0 ? this.filteredModels.length - 1 : this.selectedIndex - 1;
+            this.updateList();
+        }
+        // Down arrow - wrap to top when at bottom
+        else if (kb.matches(keyData, "tui.select.down")) {
+            if (this.filteredModels.length === 0)
+                return;
+            this.selectedIndex = this.selectedIndex === this.filteredModels.length - 1 ? 0 : this.selectedIndex + 1;
+            this.updateList();
+        }
+        // Enter
+        else if (kb.matches(keyData, "tui.select.confirm")) {
+            const selectedModel = this.filteredModels[this.selectedIndex];
+            if (selectedModel) {
+                this.handleSelect(selectedModel.model);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (kb.matches(keyData, "tui.select.cancel")) {
+            this.onCancelCallback();
+        }
+        // Pass everything else to search input
+        else {
+            this.searchInput.handleInput(keyData);
+            this.filterModels(this.searchInput.getValue());
+        }
+    }
+    handleSelect(model) {
+        // Save as new default
+        this.settingsManager.setDefaultModelAndProvider(model.provider, model.id);
+        this.onSelectCallback(model);
+    }
+    getSearchInput() {
+        return this.searchInput;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { Container } from "@earendil-works/pi-tui";
+import type { AuthStorage } from "../../../core/auth-storage.js";
+/**
+ * Component that renders an OAuth provider selector
+ */
+export declare class OAuthSelectorComponent extends Container {
+    private listContainer;
+    private allProviders;
+    private selectedIndex;
+    private mode;
+    private authStorage;
+    private onSelectCallback;
+    private onCancelCallback;
+    constructor(mode: "login" | "logout", authStorage: AuthStorage, onSelect: (providerId: string) => void, onCancel: () => void);
+    private loadProviders;
+    private updateList;
+    handleInput(keyData: string): void;
+}

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

@@ -0,0 +1,91 @@
+import { getOAuthProviders } from "@earendil-works/pi-ai/oauth";
+import { Container, getKeybindings, Spacer, TruncatedText } from "@earendil-works/pi-tui";
+import { theme } from "../theme/theme.js";
+import { DynamicBorder } from "./dynamic-border.js";
+/**
+ * Component that renders an OAuth provider selector
+ */
+export class OAuthSelectorComponent extends Container {
+    constructor(mode, authStorage, onSelect, onCancel) {
+        super();
+        this.allProviders = [];
+        this.selectedIndex = 0;
+        this.mode = mode;
+        this.authStorage = authStorage;
+        this.onSelectCallback = onSelect;
+        this.onCancelCallback = onCancel;
+        // Load all OAuth providers
+        this.loadProviders();
+        // Add top border
+        this.addChild(new DynamicBorder());
+        this.addChild(new Spacer(1));
+        // Add title
+        const title = mode === "login" ? "Select provider to login:" : "Select provider to logout:";
+        this.addChild(new TruncatedText(theme.bold(title)));
+        this.addChild(new Spacer(1));
+        // Create list container
+        this.listContainer = new Container();
+        this.addChild(this.listContainer);
+        this.addChild(new Spacer(1));
+        // Add bottom border
+        this.addChild(new DynamicBorder());
+        // Initial render
+        this.updateList();
+    }
+    loadProviders() {
+        this.allProviders = getOAuthProviders();
+    }
+    updateList() {
+        this.listContainer.clear();
+        for (let i = 0; i < this.allProviders.length; i++) {
+            const provider = this.allProviders[i];
+            if (!provider)
+                continue;
+            const isSelected = i === this.selectedIndex;
+            // Check if user is logged in for this provider
+            const credentials = this.authStorage.get(provider.id);
+            const isLoggedIn = credentials?.type === "oauth";
+            const statusIndicator = isLoggedIn ? theme.fg("success", " ✓ logged in") : "";
+            let line = "";
+            if (isSelected) {
+                const prefix = theme.fg("accent", "→ ");
+                const text = theme.fg("accent", provider.name);
+                line = prefix + text + statusIndicator;
+            }
+            else {
+                const text = `  ${provider.name}`;
+                line = text + statusIndicator;
+            }
+            this.listContainer.addChild(new TruncatedText(line, 0, 0));
+        }
+        // Show "no providers" if empty
+        if (this.allProviders.length === 0) {
+            const message = this.mode === "login" ? "No OAuth providers available" : "No OAuth providers logged in. Use /login first.";
+            this.listContainer.addChild(new TruncatedText(theme.fg("muted", `  ${message}`), 0, 0));
+        }
+    }
+    handleInput(keyData) {
+        const kb = getKeybindings();
+        // Up arrow
+        if (kb.matches(keyData, "tui.select.up")) {
+            this.selectedIndex = Math.max(0, this.selectedIndex - 1);
+            this.updateList();
+        }
+        // Down arrow
+        else if (kb.matches(keyData, "tui.select.down")) {
+            this.selectedIndex = Math.min(this.allProviders.length - 1, this.selectedIndex + 1);
+            this.updateList();
+        }
+        // Enter
+        else if (kb.matches(keyData, "tui.select.confirm")) {
+            const selectedProvider = this.allProviders[this.selectedIndex];
+            if (selectedProvider) {
+                this.onSelectCallback(selectedProvider.id);
+            }
+        }
+        // Escape or Ctrl+C
+        else if (kb.matches(keyData, "tui.select.cancel")) {
+            this.onCancelCallback();
+        }
+    }
+}

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

@@ -0,0 +1,57 @@
+import type { ThinkingLevel } from "../../../core/agent/types.js";
+import type { Transport } from "@earendil-works/pi-ai/compat";
+import { Container, SettingsList } from "@earendil-works/pi-tui";
+export interface SettingsConfig {
+    autoCompact: boolean;
+    showImages: boolean;
+    imageWidthCells: number;
+    autoResizeImages: boolean;
+    blockImages: boolean;
+    enableSkillCommands: boolean;
+    transport: Transport;
+    thinkingLevel: ThinkingLevel;
+    availableThinkingLevels: ThinkingLevel[];
+    currentTheme: string;
+    availableThemes: string[];
+    hideThinkingBlock: boolean;
+    collapseChangelog: boolean;
+    enableInstallTelemetry: boolean;
+    doubleEscapeAction: "fork" | "tree" | "none";
+    treeFilterMode: "default" | "no-tools" | "user-only" | "labeled-only" | "all";
+    showHardwareCursor: boolean;
+    editorPaddingX: number;
+    autocompleteMaxVisible: number;
+    quietStartup: boolean;
+    clearOnShrink: boolean;
+}
+export interface SettingsCallbacks {
+    onAutoCompactChange: (enabled: boolean) => void;
+    onShowImagesChange: (enabled: boolean) => void;
+    onImageWidthCellsChange: (width: number) => void;
+    onAutoResizeImagesChange: (enabled: boolean) => void;
+    onBlockImagesChange: (blocked: boolean) => void;
+    onEnableSkillCommandsChange: (enabled: boolean) => void;
+    onTransportChange: (transport: Transport) => void;
+    onThinkingLevelChange: (level: ThinkingLevel) => void;
+    onThemeChange: (theme: string) => void;
+    onThemePreview?: (theme: string) => void;
+    onHideThinkingBlockChange: (hidden: boolean) => void;
+    onCollapseChangelogChange: (collapsed: boolean) => void;
+    onEnableInstallTelemetryChange: (enabled: boolean) => void;
+    onDoubleEscapeActionChange: (action: "fork" | "tree" | "none") => void;
+    onTreeFilterModeChange: (mode: "default" | "no-tools" | "user-only" | "labeled-only" | "all") => void;
+    onShowHardwareCursorChange: (enabled: boolean) => void;
+    onEditorPaddingXChange: (padding: number) => void;
+    onAutocompleteMaxVisibleChange: (maxVisible: number) => void;
+    onQuietStartupChange: (enabled: boolean) => void;
+    onClearOnShrinkChange: (enabled: boolean) => void;
+    onCancel: () => void;
+}
+/**
+ * Main settings selector component.
+ */
+export declare class SettingsSelectorComponent extends Container {
+    private settingsList;
+    constructor(config: SettingsConfig, callbacks: SettingsCallbacks);
+    getSettingsList(): SettingsList;
+}