@mariozechner/pi-coding-agent 0.49.3 → 0.50.0

package/dist/modes/interactive/interactive-mode.js

@@ -10,12 +10,12 @@ import { getOAuthProviders, } from "@mariozechner/pi-ai";
 import { CombinedAutocompleteProvider, Container, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, Text, TruncatedText, TUI, visibleWidth, } from "@mariozechner/pi-tui";
 import { spawn, spawnSync } from "child_process";
 import { APP_NAME, getAuthPath, getDebugLogPath, getShareViewerUrl, isBunBinary, isBunRuntime, VERSION, } from "../../config.js";
+import { parseSkillBlock } from "../../core/agent-session.js";
 import { FooterDataProvider } from "../../core/footer-data-provider.js";
 import { KeybindingsManager } from "../../core/keybindings.js";
 import { createCompactionSummaryMessage } from "../../core/messages.js";
 import { resolveModelScope } from "../../core/model-resolver.js";
 import { SessionManager } from "../../core/session-manager.js";
-import { loadProjectContextFiles } from "../../core/system-prompt.js";
 import { getChangelogPath, getNewEntries, parseChangelog } from "../../utils/changelog.js";
 import { copyToClipboard } from "../../utils/clipboard.js";
 import { extensionForImageMimeType, readClipboardImage } from "../../utils/clipboard-image.js";
@@ -40,11 +40,12 @@ import { OAuthSelectorComponent } from "./components/oauth-selector.js";
 import { ScopedModelsSelectorComponent } from "./components/scoped-models-selector.js";
 import { SessionSelectorComponent } from "./components/session-selector.js";
 import { SettingsSelectorComponent } from "./components/settings-selector.js";
+import { SkillInvocationMessageComponent } from "./components/skill-invocation-message.js";
 import { ToolExecutionComponent } from "./components/tool-execution.js";
 import { TreeSelectorComponent } from "./components/tree-selector.js";
 import { UserMessageComponent } from "./components/user-message.js";
 import { UserMessageSelectorComponent } from "./components/user-message-selector.js";
-import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getThemeByName, initTheme, onThemeChange, setTheme, setThemeInstance, Theme, theme, } from "./theme/theme.js";
+import { getAvailableThemes, getAvailableThemesWithPaths, getEditorTheme, getMarkdownTheme, getThemeByName, initTheme, onThemeChange, setRegisteredThemes, setTheme, setThemeInstance, Theme, theme, } from "./theme/theme.js";
 function isExpandable(obj) {
     return typeof obj === "object" && obj !== null && "setExpanded" in obj && typeof obj.setExpanded === "function";
 }
@@ -65,9 +66,9 @@ export class InteractiveMode {
     keybindings;
     version;
     isInitialized = false;
-    hasRenderedInitialMessages = false;
     onInputCallback;
     loadingAnimation = undefined;
+    pendingWorkingMessage = undefined;
     defaultWorkingMessage = "Working...";
     lastSigintTime = 0;
     lastEscapeTime = 0;
@@ -150,7 +151,8 @@ export class InteractiveMode {
         this.footer.setAutoCompactEnabled(session.autoCompactionEnabled);
         // Load hide thinking block setting
         this.hideThinkingBlock = this.settingsManager.getHideThinkingBlock();
-        // Initialize theme with watcher for interactive mode
+        // Register themes from resource loader and initialize
+        setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
         initTheme(this.settingsManager.getTheme(), true);
     }
     setupAutocomplete(fdPath) {
@@ -199,6 +201,7 @@ export class InteractiveMode {
             { name: "new", description: "Start a new session" },
             { name: "compact", description: "Manually compact the session context" },
             { name: "resume", description: "Resume a different session" },
+            { name: "reload", description: "Reload extensions, skills, prompts, and themes" },
         ];
         // Convert prompt templates to SlashCommand format for autocomplete
         const templateCommands = this.session.promptTemplates.map((cmd) => ({
@@ -215,7 +218,7 @@ export class InteractiveMode {
         this.skillCommands.clear();
         const skillCommandList = [];
         if (this.settingsManager.getEnableSkillCommands()) {
-            for (const skill of this.session.skills) {
+            for (const skill of this.session.resourceLoader.getSkills().skills) {
                 const commandName = `skill:${skill.name}`;
                 this.skillCommands.set(commandName, skill.filePath);
                 skillCommandList.push({ name: commandName, description: skill.description });
@@ -237,7 +240,7 @@ export class InteractiveMode {
         this.fdPath = await ensureTool("fd");
         this.setupAutocomplete(this.fdPath);
         // Add header with keybindings from config (unless silenced)
-        if (!this.settingsManager.getQuietStartup()) {
+        if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
             const logo = theme.bold(theme.fg("accent", APP_NAME)) + theme.fg("dim", ` v${this.version}`);
             // Build startup instructions using keybinding hint helpers
             const kb = this.keybindings;
@@ -249,11 +252,11 @@ export class InteractiveMode {
                 hint("exit", "to exit (empty)"),
                 hint("suspend", "to suspend"),
                 keyHint("deleteToLineEnd", "to delete to end"),
-                hint("cycleThinkingLevel", "to cycle thinking"),
+                hint("cycleThinkingLevel", "to cycle thinking level"),
                 rawKeyHint(`${appKey(kb, "cycleModelForward")}/${appKey(kb, "cycleModelBackward")}`, "to cycle models"),
                 hint("selectModel", "to select model"),
                 hint("expandTools", "to expand tools"),
-                hint("toggleThinking", "to toggle thinking"),
+                hint("toggleThinking", "to expand thinking"),
                 hint("externalEditor", "for external editor"),
                 rawKeyHint("/", "for commands"),
                 rawKeyHint("!", "to run bash"),
@@ -328,6 +331,8 @@ export class InteractiveMode {
         this.footerDataProvider.onBranchChange(() => {
             this.ui.requestRender();
         });
+        // Initialize available provider count for footer display
+        await this.updateAvailableProviderCount();
     }
     /**
      * Update terminal title with session name and cwd.
@@ -456,199 +461,360 @@ export class InteractiveMode {
     // =========================================================================
     // Extension System
     // =========================================================================
+    formatDisplayPath(p) {
+        const home = os.homedir();
+        let result = p;
+        // Replace home directory with ~
+        if (result.startsWith(home)) {
+            result = `~${result.slice(home.length)}`;
+        }
+        return result;
+    }
     /**
-     * Initialize the extension system with TUI-based UI context.
+     * Get a short path relative to the package root for display.
      */
-    async initExtensions() {
-        // Show discovery info unless silenced
-        if (!this.settingsManager.getQuietStartup()) {
-            // Show loaded project context files
-            const contextFiles = loadProjectContextFiles();
-            if (contextFiles.length > 0) {
-                const contextList = contextFiles.map((f) => theme.fg("dim", `  ${f.path}`)).join("\n");
-                this.chatContainer.addChild(new Text(theme.fg("muted", "Loaded context:\n") + contextList, 0, 0));
-                this.chatContainer.addChild(new Spacer(1));
+    getShortPath(fullPath, source) {
+        // For npm packages, show path relative to node_modules/pkg/
+        const npmMatch = fullPath.match(/node_modules\/(@?[^/]+(?:\/[^/]+)?)\/(.*)/);
+        if (npmMatch && source.startsWith("npm:")) {
+            return npmMatch[2];
+        }
+        // For git packages, show path relative to repo root
+        const gitMatch = fullPath.match(/git\/[^/]+\/[^/]+\/(.*)/);
+        if (gitMatch && source.startsWith("git:")) {
+            return gitMatch[1];
+        }
+        // For local/auto, just use formatDisplayPath
+        return this.formatDisplayPath(fullPath);
+    }
+    getDisplaySourceInfo(source, scope) {
+        if (source === "local") {
+            if (scope === "user") {
+                return { label: "user", color: "muted" };
+            }
+            if (scope === "project") {
+                return { label: "project", color: "muted" };
+            }
+            if (scope === "temporary") {
+                return { label: "path", scopeLabel: "temp", color: "muted" };
+            }
+            return { label: "path", color: "muted" };
+        }
+        if (source === "cli") {
+            return { label: "path", scopeLabel: scope === "temporary" ? "temp" : undefined, color: "muted" };
+        }
+        const scopeLabel = scope === "user" ? "user" : scope === "project" ? "project" : scope === "temporary" ? "temp" : undefined;
+        return { label: source, scopeLabel, color: "accent" };
+    }
+    getScopeGroup(source, scope) {
+        if (source === "cli" || scope === "temporary")
+            return "path";
+        if (scope === "user")
+            return "user";
+        if (scope === "project")
+            return "project";
+        return "path";
+    }
+    isPackageSource(source) {
+        return source.startsWith("npm:") || source.startsWith("git:");
+    }
+    buildScopeGroups(paths, metadata) {
+        const groups = {
+            user: { scope: "user", paths: [], packages: new Map() },
+            project: { scope: "project", paths: [], packages: new Map() },
+            path: { scope: "path", paths: [], packages: new Map() },
+        };
+        for (const p of paths) {
+            const meta = this.findMetadata(p, metadata);
+            const source = meta?.source ?? "local";
+            const scope = meta?.scope ?? "project";
+            const groupKey = this.getScopeGroup(source, scope);
+            const group = groups[groupKey];
+            if (this.isPackageSource(source)) {
+                const list = group.packages.get(source) ?? [];
+                list.push(p);
+                group.packages.set(source, list);
             }
-            // Show loaded skills (already discovered by SDK)
-            const skills = this.session.skills;
-            if (skills.length > 0) {
-                const skillList = skills.map((s) => theme.fg("dim", `  ${s.filePath}`)).join("\n");
-                this.chatContainer.addChild(new Text(theme.fg("muted", "Loaded skills:\n") + skillList, 0, 0));
-                this.chatContainer.addChild(new Spacer(1));
+            else {
+                group.paths.push(p);
             }
-            // Show skill warnings if any
-            const skillWarnings = this.session.skillWarnings;
-            if (skillWarnings.length > 0) {
-                const warningList = skillWarnings
-                    .map((w) => theme.fg("warning", `  ${w.skillPath}: ${w.message}`))
-                    .join("\n");
-                this.chatContainer.addChild(new Text(theme.fg("warning", "Skill warnings:\n") + warningList, 0, 0));
-                this.chatContainer.addChild(new Spacer(1));
+        }
+        return [groups.user, groups.project, groups.path].filter((group) => group.paths.length > 0 || group.packages.size > 0);
+    }
+    formatScopeGroups(groups, options) {
+        const lines = [];
+        for (const group of groups) {
+            lines.push(`  ${theme.fg("accent", group.scope)}`);
+            const sortedPaths = [...group.paths].sort((a, b) => a.localeCompare(b));
+            for (const p of sortedPaths) {
+                lines.push(theme.fg("dim", `    ${options.formatPath(p)}`));
             }
-            // Show loaded prompt templates
-            const templates = this.session.promptTemplates;
-            if (templates.length > 0) {
-                const templateList = templates.map((t) => theme.fg("dim", `  /${t.name} ${t.source}`)).join("\n");
-                this.chatContainer.addChild(new Text(theme.fg("muted", "Loaded prompt templates:\n") + templateList, 0, 0));
-                this.chatContainer.addChild(new Spacer(1));
+            const sortedPackages = Array.from(group.packages.entries()).sort(([a], [b]) => a.localeCompare(b));
+            for (const [source, paths] of sortedPackages) {
+                lines.push(`    ${theme.fg("mdLink", source)}`);
+                const sortedPackagePaths = [...paths].sort((a, b) => a.localeCompare(b));
+                for (const p of sortedPackagePaths) {
+                    lines.push(theme.fg("dim", `      ${options.formatPackagePath(p, source)}`));
+                }
             }
         }
+        return lines.join("\n");
+    }
+    /**
+     * Find metadata for a path, checking parent directories if exact match fails.
+     * Package manager stores metadata for directories, but we display file paths.
+     */
+    findMetadata(p, metadata) {
+        // Try exact match first
+        const exact = metadata.get(p);
+        if (exact)
+            return exact;
+        // Try parent directories (package manager stores directory paths)
+        let current = p;
+        while (current.includes("/")) {
+            current = current.substring(0, current.lastIndexOf("/"));
+            const parent = metadata.get(current);
+            if (parent)
+                return parent;
+        }
+        return undefined;
+    }
+    /**
+     * Format a path with its source/scope info from metadata.
+     */
+    formatPathWithSource(p, metadata) {
+        const meta = this.findMetadata(p, metadata);
+        if (meta) {
+            const shortPath = this.getShortPath(p, meta.source);
+            const { label, scopeLabel } = this.getDisplaySourceInfo(meta.source, meta.scope);
+            const labelText = scopeLabel ? `${label} (${scopeLabel})` : label;
+            return `${labelText} ${shortPath}`;
+        }
+        return this.formatDisplayPath(p);
+    }
+    /**
+     * Format resource diagnostics with nice collision display using metadata.
+     */
+    formatDiagnostics(diagnostics, metadata) {
+        const lines = [];
+        // Group collision diagnostics by name
+        const collisions = new Map();
+        const otherDiagnostics = [];
+        for (const d of diagnostics) {
+            if (d.type === "collision" && d.collision) {
+                const list = collisions.get(d.collision.name) ?? [];
+                list.push(d);
+                collisions.set(d.collision.name, list);
+            }
+            else {
+                otherDiagnostics.push(d);
+            }
+        }
+        // Format collision diagnostics grouped by name
+        for (const [name, collisionList] of collisions) {
+            const first = collisionList[0]?.collision;
+            if (!first)
+                continue;
+            lines.push(theme.fg("warning", `  "${name}" collision:`));
+            // Show winner
+            lines.push(theme.fg("dim", `    ${theme.fg("success", "✓")} ${this.formatPathWithSource(first.winnerPath, metadata)}`));
+            // Show all losers
+            for (const d of collisionList) {
+                if (d.collision) {
+                    lines.push(theme.fg("dim", `    ${theme.fg("warning", "✗")} ${this.formatPathWithSource(d.collision.loserPath, metadata)} (skipped)`));
+                }
+            }
+        }
+        // Format other diagnostics (skill name collisions, parse errors, etc.)
+        for (const d of otherDiagnostics) {
+            if (d.path) {
+                // Use metadata-aware formatting for paths
+                const sourceInfo = this.formatPathWithSource(d.path, metadata);
+                lines.push(theme.fg(d.type === "error" ? "error" : "warning", `  ${sourceInfo}`));
+                lines.push(theme.fg(d.type === "error" ? "error" : "warning", `    ${d.message}`));
+            }
+            else {
+                lines.push(theme.fg(d.type === "error" ? "error" : "warning", `  ${d.message}`));
+            }
+        }
+        return lines.join("\n");
+    }
+    showLoadedResources(options) {
+        const shouldShow = options?.force || this.options.verbose || !this.settingsManager.getQuietStartup();
+        if (!shouldShow) {
+            return;
+        }
+        const metadata = this.session.resourceLoader.getPathMetadata();
+        const sectionHeader = (name, color = "mdHeading") => theme.fg(color, `[${name}]`);
+        const contextFiles = this.session.resourceLoader.getAgentsFiles().agentsFiles;
+        if (contextFiles.length > 0) {
+            const contextList = contextFiles.map((f) => theme.fg("dim", `  ${this.formatDisplayPath(f.path)}`)).join("\n");
+            this.chatContainer.addChild(new Text(`${sectionHeader("Context")}\n${contextList}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const skills = this.session.resourceLoader.getSkills().skills;
+        if (skills.length > 0) {
+            const skillPaths = skills.map((s) => s.filePath);
+            const groups = this.buildScopeGroups(skillPaths, metadata);
+            const skillList = this.formatScopeGroups(groups, {
+                formatPath: (p) => this.formatDisplayPath(p),
+                formatPackagePath: (p, source) => this.getShortPath(p, source),
+            });
+            this.chatContainer.addChild(new Text(`${sectionHeader("Skills")}\n${skillList}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const skillDiagnostics = this.session.resourceLoader.getSkills().diagnostics;
+        if (skillDiagnostics.length > 0) {
+            const warningLines = this.formatDiagnostics(skillDiagnostics, metadata);
+            this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Skill conflicts]")}\n${warningLines}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const templates = this.session.promptTemplates;
+        if (templates.length > 0) {
+            const templatePaths = templates.map((t) => t.filePath);
+            const groups = this.buildScopeGroups(templatePaths, metadata);
+            const templateByPath = new Map(templates.map((t) => [t.filePath, t]));
+            const templateList = this.formatScopeGroups(groups, {
+                formatPath: (p) => {
+                    const template = templateByPath.get(p);
+                    return template ? `/${template.name}` : this.formatDisplayPath(p);
+                },
+                formatPackagePath: (p) => {
+                    const template = templateByPath.get(p);
+                    return template ? `/${template.name}` : this.formatDisplayPath(p);
+                },
+            });
+            this.chatContainer.addChild(new Text(`${sectionHeader("Prompts")}\n${templateList}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const promptDiagnostics = this.session.resourceLoader.getPrompts().diagnostics;
+        if (promptDiagnostics.length > 0) {
+            const warningLines = this.formatDiagnostics(promptDiagnostics, metadata);
+            this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Prompt conflicts]")}\n${warningLines}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const extensionPaths = options?.extensionPaths ?? [];
+        if (extensionPaths.length > 0) {
+            const groups = this.buildScopeGroups(extensionPaths, metadata);
+            const extList = this.formatScopeGroups(groups, {
+                formatPath: (p) => this.formatDisplayPath(p),
+                formatPackagePath: (p, source) => this.getShortPath(p, source),
+            });
+            this.chatContainer.addChild(new Text(`${sectionHeader("Extensions", "mdHeading")}\n${extList}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const extensionDiagnostics = [];
+        const extensionErrors = this.session.resourceLoader.getExtensions().errors;
+        if (extensionErrors.length > 0) {
+            for (const error of extensionErrors) {
+                extensionDiagnostics.push({ type: "error", message: error.error, path: error.path });
+            }
+        }
+        const shortcutDiagnostics = this.session.extensionRunner?.getShortcutDiagnostics() ?? [];
+        extensionDiagnostics.push(...shortcutDiagnostics);
+        if (extensionDiagnostics.length > 0) {
+            const warningLines = this.formatDiagnostics(extensionDiagnostics, metadata);
+            this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Extension issues]")}\n${warningLines}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        // Show loaded themes (excluding built-in)
+        const loadedThemes = this.session.resourceLoader.getThemes().themes;
+        const customThemes = loadedThemes.filter((t) => t.sourcePath);
+        if (customThemes.length > 0) {
+            const themePaths = customThemes.map((t) => t.sourcePath);
+            const groups = this.buildScopeGroups(themePaths, metadata);
+            const themeList = this.formatScopeGroups(groups, {
+                formatPath: (p) => this.formatDisplayPath(p),
+                formatPackagePath: (p, source) => this.getShortPath(p, source),
+            });
+            this.chatContainer.addChild(new Text(`${sectionHeader("Themes")}\n${themeList}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+        const themeDiagnostics = this.session.resourceLoader.getThemes().diagnostics;
+        if (themeDiagnostics.length > 0) {
+            const warningLines = this.formatDiagnostics(themeDiagnostics, metadata);
+            this.chatContainer.addChild(new Text(`${theme.fg("warning", "[Theme conflicts]")}\n${warningLines}`, 0, 0));
+            this.chatContainer.addChild(new Spacer(1));
+        }
+    }
+    /**
+     * Initialize the extension system with TUI-based UI context.
+     */
+    async initExtensions() {
         const extensionRunner = this.session.extensionRunner;
         if (!extensionRunner) {
-            return; // No extensions loaded
+            this.showLoadedResources({ extensionPaths: [], force: false });
+            return;
         }
         // Create extension UI context
         const uiContext = this.createExtensionUIContext();
-        extensionRunner.initialize(
-        // ExtensionActions - for pi.* API
-        {
-            sendMessage: (message, options) => {
-                const wasStreaming = this.session.isStreaming;
-                this.session
-                    .sendCustomMessage(message, options)
-                    .then(() => {
-                    // Don't rebuild if initial render hasn't happened yet
-                    // (renderInitialMessages will handle it)
-                    if (!wasStreaming && message.display && this.hasRenderedInitialMessages) {
-                        this.rebuildChatFromMessages();
+        await this.session.bindExtensions({
+            uiContext,
+            commandContextActions: {
+                waitForIdle: () => this.session.agent.waitForIdle(),
+                newSession: async (options) => {
+                    if (this.loadingAnimation) {
+                        this.loadingAnimation.stop();
+                        this.loadingAnimation = undefined;
                     }
-                })
-                    .catch((err) => {
-                    this.showError(`Extension sendMessage failed: ${err instanceof Error ? err.message : String(err)}`);
-                });
-            },
-            sendUserMessage: (content, options) => {
-                this.session.sendUserMessage(content, options).catch((err) => {
-                    this.showError(`Extension sendUserMessage failed: ${err instanceof Error ? err.message : String(err)}`);
-                });
-            },
-            appendEntry: (customType, data) => {
-                this.sessionManager.appendCustomEntry(customType, data);
-            },
-            setSessionName: (name) => {
-                this.sessionManager.appendSessionInfo(name);
-                this.updateTerminalTitle();
-            },
-            getSessionName: () => {
-                return this.sessionManager.getSessionName();
-            },
-            setLabel: (entryId, label) => {
-                this.sessionManager.appendLabelChange(entryId, label);
-            },
-            getActiveTools: () => this.session.getActiveToolNames(),
-            getAllTools: () => this.session.getAllTools(),
-            setActiveTools: (toolNames) => this.session.setActiveToolsByName(toolNames),
-            setModel: async (model) => {
-                const key = await this.session.modelRegistry.getApiKey(model);
-                if (!key)
-                    return false;
-                await this.session.setModel(model);
-                return true;
-            },
-            getThinkingLevel: () => this.session.thinkingLevel,
-            setThinkingLevel: (level) => this.session.setThinkingLevel(level),
-        }, 
-        // ExtensionContextActions - for ctx.* in event handlers
-        {
-            getModel: () => this.session.model,
-            isIdle: () => !this.session.isStreaming,
-            abort: () => this.session.abort(),
-            hasPendingMessages: () => this.session.pendingMessageCount > 0,
-            shutdown: () => {
-                this.shutdownRequested = true;
-            },
-            getContextUsage: () => this.session.getContextUsage(),
-            compact: (options) => {
-                void (async () => {
-                    try {
-                        const result = await this.executeCompaction(options?.customInstructions, false);
-                        if (result) {
-                            options?.onComplete?.(result);
-                        }
+                    this.statusContainer.clear();
+                    const success = await this.session.newSession({ parentSession: options?.parentSession });
+                    if (!success) {
+                        return { cancelled: true };
                     }
-                    catch (error) {
-                        const err = error instanceof Error ? error : new Error(String(error));
-                        options?.onError?.(err);
+                    if (options?.setup) {
+                        await options.setup(this.sessionManager);
                     }
-                })();
-            },
-        }, 
-        // ExtensionCommandContextActions - for ctx.* in command handlers
-        {
-            waitForIdle: () => this.session.agent.waitForIdle(),
-            newSession: async (options) => {
-                if (this.loadingAnimation) {
-                    this.loadingAnimation.stop();
-                    this.loadingAnimation = undefined;
-                }
-                this.statusContainer.clear();
-                const success = await this.session.newSession({ parentSession: options?.parentSession });
-                if (!success) {
-                    return { cancelled: true };
-                }
-                if (options?.setup) {
-                    await options.setup(this.sessionManager);
-                }
-                this.chatContainer.clear();
-                this.pendingMessagesContainer.clear();
-                this.compactionQueuedMessages = [];
-                this.streamingComponent = undefined;
-                this.streamingMessage = undefined;
-                this.pendingTools.clear();
-                this.chatContainer.addChild(new Spacer(1));
-                this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ New session started")}`, 1, 1));
-                this.ui.requestRender();
-                return { cancelled: false };
+                    this.chatContainer.clear();
+                    this.pendingMessagesContainer.clear();
+                    this.compactionQueuedMessages = [];
+                    this.streamingComponent = undefined;
+                    this.streamingMessage = undefined;
+                    this.pendingTools.clear();
+                    this.chatContainer.addChild(new Spacer(1));
+                    this.chatContainer.addChild(new Text(`${theme.fg("accent", "✓ New session started")}`, 1, 1));
+                    this.ui.requestRender();
+                    return { cancelled: false };
+                },
+                fork: async (entryId) => {
+                    const result = await this.session.fork(entryId);
+                    if (result.cancelled) {
+                        return { cancelled: true };
+                    }
+                    this.chatContainer.clear();
+                    this.renderInitialMessages();
+                    this.editor.setText(result.selectedText);
+                    this.showStatus("Forked to new session");
+                    return { cancelled: false };
+                },
+                navigateTree: async (targetId, options) => {
+                    const result = await this.session.navigateTree(targetId, {
+                        summarize: options?.summarize,
+                        customInstructions: options?.customInstructions,
+                        replaceInstructions: options?.replaceInstructions,
+                        label: options?.label,
+                    });
+                    if (result.cancelled) {
+                        return { cancelled: true };
+                    }
+                    this.chatContainer.clear();
+                    this.renderInitialMessages();
+                    if (result.editorText) {
+                        this.editor.setText(result.editorText);
+                    }
+                    this.showStatus("Navigated to selected point");
+                    return { cancelled: false };
+                },
             },
-            fork: async (entryId) => {
-                const result = await this.session.fork(entryId);
-                if (result.cancelled) {
-                    return { cancelled: true };
-                }
-                this.chatContainer.clear();
-                this.renderInitialMessages();
-                this.editor.setText(result.selectedText);
-                this.showStatus("Forked to new session");
-                return { cancelled: false };
+            shutdownHandler: () => {
+                this.shutdownRequested = true;
             },
-            navigateTree: async (targetId, options) => {
-                const result = await this.session.navigateTree(targetId, {
-                    summarize: options?.summarize,
-                    customInstructions: options?.customInstructions,
-                    replaceInstructions: options?.replaceInstructions,
-                    label: options?.label,
-                });
-                if (result.cancelled) {
-                    return { cancelled: true };
-                }
-                this.chatContainer.clear();
-                this.renderInitialMessages();
-                if (result.editorText) {
-                    this.editor.setText(result.editorText);
-                }
-                this.showStatus("Navigated to selected point");
-                return { cancelled: false };
+            onError: (error) => {
+                this.showExtensionError(error.extensionPath, error.error, error.stack);
             },
-        }, uiContext);
-        // Subscribe to extension errors
-        extensionRunner.onError((error) => {
-            this.showExtensionError(error.extensionPath, error.error, error.stack);
         });
-        // Set up extension-registered shortcuts
         this.setupExtensionShortcuts(extensionRunner);
-        // Show loaded extensions (unless silenced)
-        if (!this.settingsManager.getQuietStartup()) {
-            const extensionPaths = extensionRunner.getExtensionPaths();
-            if (extensionPaths.length > 0) {
-                const extList = extensionPaths.map((p) => theme.fg("dim", `  ${p}`)).join("\n");
-                this.chatContainer.addChild(new Text(theme.fg("muted", "Loaded extensions:\n") + extList, 0, 0));
-                this.chatContainer.addChild(new Spacer(1));
-            }
-        }
-        // Emit session_start event
-        await extensionRunner.emit({
-            type: "session_start",
-        });
+        this.showLoadedResources({ extensionPaths: extensionRunner.getExtensionPaths(), force: false });
     }
     /**
      * Get a registered tool definition by name (for custom rendering).
@@ -754,6 +920,40 @@ export class InteractiveMode {
         targetMap.set(key, component);
         this.renderWidgets();
     }
+    clearExtensionWidgets() {
+        for (const widget of this.extensionWidgetsAbove.values()) {
+            widget.dispose?.();
+        }
+        for (const widget of this.extensionWidgetsBelow.values()) {
+            widget.dispose?.();
+        }
+        this.extensionWidgetsAbove.clear();
+        this.extensionWidgetsBelow.clear();
+        this.renderWidgets();
+    }
+    resetExtensionUI() {
+        if (this.extensionSelector) {
+            this.hideExtensionSelector();
+        }
+        if (this.extensionInput) {
+            this.hideExtensionInput();
+        }
+        if (this.extensionEditor) {
+            this.hideExtensionEditor();
+        }
+        this.ui.hideOverlay();
+        this.setExtensionFooter(undefined);
+        this.setExtensionHeader(undefined);
+        this.clearExtensionWidgets();
+        this.footerDataProvider.clearExtensionStatuses();
+        this.footer.invalidate();
+        this.setCustomEditorComponent(undefined);
+        this.defaultEditor.onExtensionShortcut = undefined;
+        this.updateTerminalTitle();
+        if (this.loadingAnimation) {
+            this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`);
+        }
+    }
     // Maximum total widget lines to prevent viewport overflow
     static MAX_WIDGET_LINES = 10;
     /**
@@ -858,6 +1058,10 @@ export class InteractiveMode {
                         this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${appKey(this.keybindings, "interrupt")} to interrupt)`);
                     }
                 }
+                else {
+                    // Queue message for when loadingAnimation is created (handles agent_start race)
+                    this.pendingWorkingMessage = message;
+                }
             },
             setWidget: (key, content, options) => this.setExtensionWidget(key, content, options),
             setFooter: (factory) => this.setExtensionFooter(factory),
@@ -1022,6 +1226,9 @@ export class InteractiveMode {
             if (newEditor.borderColor !== undefined) {
                 newEditor.borderColor = this.defaultEditor.borderColor;
             }
+            if (newEditor.setPaddingX !== undefined) {
+                newEditor.setPaddingX(this.defaultEditor.getPaddingX());
+            }
             // Set autocomplete if supported
             if (newEditor.setAutocompleteProvider && this.autocompleteProvider) {
                 newEditor.setAutocompleteProvider(this.autocompleteProvider);
@@ -1033,7 +1240,7 @@ export class InteractiveMode {
                 customEditor.onEscape = this.defaultEditor.onEscape;
                 customEditor.onCtrlD = this.defaultEditor.onCtrlD;
                 customEditor.onPasteImage = this.defaultEditor.onPasteImage;
-                customEditor.onExtensionShortcut = this.defaultEditor.onExtensionShortcut;
+                customEditor.onExtensionShortcut = (data) => this.defaultEditor.onExtensionShortcut?.(data);
                 // Copy action handlers (clear, suspend, model switching, etc.)
                 for (const [action, handler] of this.defaultEditor.actionHandlers) {
                     customEditor.actionHandlers.set(action, handler);
@@ -1323,6 +1530,11 @@ export class InteractiveMode {
                 await this.handleCompactCommand(customInstructions);
                 return;
             }
+            if (text === "/reload") {
+                this.editor.setText("");
+                await this.handleReloadCommand();
+                return;
+            }
             if (text === "/debug") {
                 this.handleDebugCommand();
                 this.editor.setText("");
@@ -1419,6 +1631,13 @@ export class InteractiveMode {
                 this.statusContainer.clear();
                 this.loadingAnimation = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), this.defaultWorkingMessage);
                 this.statusContainer.addChild(this.loadingAnimation);
+                // Apply any pending working message queued before loader existed
+                if (this.pendingWorkingMessage !== undefined) {
+                    if (this.pendingWorkingMessage) {
+                        this.loadingAnimation.setMessage(this.pendingWorkingMessage);
+                    }
+                    this.pendingWorkingMessage = undefined;
+                }
                 this.ui.requestRender();
                 break;
             case "message_start":
@@ -1703,8 +1922,23 @@ export class InteractiveMode {
             case "user": {
                 const textContent = this.getUserMessageText(message);
                 if (textContent) {
-                    const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings());
-                    this.chatContainer.addChild(userComponent);
+                    const skillBlock = parseSkillBlock(textContent);
+                    if (skillBlock) {
+                        // Render skill block (collapsible)
+                        this.chatContainer.addChild(new Spacer(1));
+                        const component = new SkillInvocationMessageComponent(skillBlock, this.getMarkdownThemeWithSettings());
+                        component.setExpanded(this.toolOutputExpanded);
+                        this.chatContainer.addChild(component);
+                        // Render user message separately if present
+                        if (skillBlock.userMessage) {
+                            const userComponent = new UserMessageComponent(skillBlock.userMessage, this.getMarkdownThemeWithSettings());
+                            this.chatContainer.addChild(userComponent);
+                        }
+                    }
+                    else {
+                        const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings());
+                        this.chatContainer.addChild(userComponent);
+                    }
                     if (options?.populateHistory) {
                         this.editor.addToHistory?.(textContent);
                     }
@@ -1784,7 +2018,6 @@ export class InteractiveMode {
         this.ui.requestRender();
     }
     renderInitialMessages() {
-        this.hasRenderedInitialMessages = true;
         // Get aligned messages and entries from session context
         const context = this.sessionManager.buildSessionContext();
         this.renderSessionContext(context, {
@@ -1871,7 +2104,7 @@ export class InteractiveMode {
         process.kill(0, "SIGTSTP");
     }
     async handleFollowUp() {
-        const text = this.editor.getText().trim();
+        const text = (this.editor.getExpandedText?.() ?? this.editor.getText()).trim();
         if (!text)
             return;
         // Queue input during compaction (extension commands execute immediately)
@@ -2034,22 +2267,51 @@ export class InteractiveMode {
             ? `Download from: ${theme.fg("accent", "https://github.com/badlogic/pi-mono/releases/latest")}`
             : `Run: ${theme.fg("accent", `${isBunRuntime ? "bun" : "npm"} install -g @mariozechner/pi-coding-agent`)}`;
         const updateInstruction = theme.fg("muted", `New version ${newVersion} is available. `) + action;
+        const changelogUrl = theme.fg("accent", "https://github.com/badlogic/pi-mono/blob/main/packages/coding-agent/CHANGELOG.md");
+        const changelogLine = theme.fg("muted", "Changelog: ") + changelogUrl;
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
-        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}`, 1, 0));
+        this.chatContainer.addChild(new Text(`${theme.bold(theme.fg("warning", "Update Available"))}\n${updateInstruction}\n${changelogLine}`, 1, 0));
         this.chatContainer.addChild(new DynamicBorder((text) => theme.fg("warning", text)));
         this.ui.requestRender();
     }
+    /**
+     * Get all queued messages (read-only).
+     * Combines session queue and compaction queue.
+     */
+    getAllQueuedMessages() {
+        return {
+            steering: [
+                ...this.session.getSteeringMessages(),
+                ...this.compactionQueuedMessages.filter((msg) => msg.mode === "steer").map((msg) => msg.text),
+            ],
+            followUp: [
+                ...this.session.getFollowUpMessages(),
+                ...this.compactionQueuedMessages.filter((msg) => msg.mode === "followUp").map((msg) => msg.text),
+            ],
+        };
+    }
+    /**
+     * Clear all queued messages and return their contents.
+     * Clears both session queue and compaction queue.
+     */
+    clearAllQueues() {
+        const { steering, followUp } = this.session.clearQueue();
+        const compactionSteering = this.compactionQueuedMessages
+            .filter((msg) => msg.mode === "steer")
+            .map((msg) => msg.text);
+        const compactionFollowUp = this.compactionQueuedMessages
+            .filter((msg) => msg.mode === "followUp")
+            .map((msg) => msg.text);
+        this.compactionQueuedMessages = [];
+        return {
+            steering: [...steering, ...compactionSteering],
+            followUp: [...followUp, ...compactionFollowUp],
+        };
+    }
     updatePendingMessagesDisplay() {
         this.pendingMessagesContainer.clear();
-        const steeringMessages = [
-            ...this.session.getSteeringMessages(),
-            ...this.compactionQueuedMessages.filter((msg) => msg.mode === "steer").map((msg) => msg.text),
-        ];
-        const followUpMessages = [
-            ...this.session.getFollowUpMessages(),
-            ...this.compactionQueuedMessages.filter((msg) => msg.mode === "followUp").map((msg) => msg.text),
-        ];
+        const { steering: steeringMessages, followUp: followUpMessages } = this.getAllQueuedMessages();
         if (steeringMessages.length > 0 || followUpMessages.length > 0) {
             this.pendingMessagesContainer.addChild(new Spacer(1));
             for (const message of steeringMessages) {
@@ -2066,7 +2328,7 @@ export class InteractiveMode {
         }
     }
     restoreQueuedMessagesToEditor(options) {
-        const { steering, followUp } = this.session.clearQueue();
+        const { steering, followUp } = this.clearAllQueues();
         const allQueued = [...steering, ...followUp];
         if (allQueued.length === 0) {
             this.updatePendingMessagesDisplay();
@@ -2294,6 +2556,9 @@ export class InteractiveMode {
                 onEditorPaddingXChange: (padding) => {
                     this.settingsManager.setEditorPaddingX(padding);
                     this.defaultEditor.setPaddingX(padding);
+                    if (this.editor !== this.defaultEditor && this.editor.setPaddingX !== undefined) {
+                        this.editor.setPaddingX(padding);
+                    }
                 },
                 onCancel: () => {
                     done();
@@ -2359,6 +2624,12 @@ export class InteractiveMode {
             return [];
         }
     }
+    /** Update the footer's available provider count from current model candidates */
+    async updateAvailableProviderCount() {
+        const models = await this.getModelCandidates();
+        const uniqueProviders = new Set(models.map((m) => m.provider));
+        this.footerDataProvider.setAvailableProviderCount(uniqueProviders.size);
+    }
     showModelSelector(initialSearchInput) {
         this.showSelector((done) => {
             const selector = new ModelSelectorComponent(this.ui, this.session.model, this.settingsManager, this.session.modelRegistry, this.session.scopedModels, async (model) => {
@@ -2632,8 +2903,17 @@ export class InteractiveMode {
                 this.ui.requestRender();
             }, () => {
                 void this.shutdown();
-            }, () => this.ui.requestRender(), this.sessionManager.getSessionFile());
-            return { component: selector, focus: selector.getSessionList() };
+            }, () => this.ui.requestRender(), {
+                renameSession: async (sessionFilePath, nextName) => {
+                    const next = (nextName ?? "").trim();
+                    if (!next)
+                        return;
+                    const mgr = SessionManager.open(sessionFilePath);
+                    mgr.appendSessionInfo(next);
+                },
+                showRenameHint: true,
+            }, this.sessionManager.getSessionFile());
+            return { component: selector, focus: selector };
         });
     }
     async handleResumeSession(sessionPath) {
@@ -2678,6 +2958,7 @@ export class InteractiveMode {
                     try {
                         this.session.modelRegistry.authStorage.logout(providerId);
                         this.session.modelRegistry.refresh();
+                        await this.updateAvailableProviderCount();
                         this.showStatus(`Logged out of ${providerName}`);
                     }
                     catch (error) {
@@ -2695,7 +2976,7 @@ export class InteractiveMode {
         const providerInfo = getOAuthProviders().find((p) => p.id === providerId);
         const providerName = providerInfo?.name || providerId;
         // Providers that use callback servers (can paste redirect URL)
-        const usesCallbackServer = providerId === "openai-codex" || providerId === "google-gemini-cli" || providerId === "google-antigravity";
+        const usesCallbackServer = providerInfo?.usesCallbackServer ?? false;
         // Create login dialog component
         const dialog = new LoginDialogComponent(this.ui, providerId, (_success, _message) => {
             // Completion handled below
@@ -2758,6 +3039,7 @@ export class InteractiveMode {
             // Success
             restoreEditor();
             this.session.modelRegistry.refresh();
+            await this.updateAvailableProviderCount();
             this.showStatus(`Logged in to ${providerName}. Credentials saved to ${getAuthPath()}`);
         }
         catch (error) {
@@ -2771,6 +3053,53 @@ export class InteractiveMode {
     // =========================================================================
     // Command handlers
     // =========================================================================
+    async handleReloadCommand() {
+        if (this.session.isStreaming) {
+            this.showWarning("Wait for the current response to finish before reloading.");
+            return;
+        }
+        if (this.session.isCompacting) {
+            this.showWarning("Wait for compaction to finish before reloading.");
+            return;
+        }
+        this.resetExtensionUI();
+        const loader = new BorderedLoader(this.ui, theme, "Reloading extensions, skills, prompts, themes...", {
+            cancellable: false,
+        });
+        const previousEditor = this.editor;
+        this.editorContainer.clear();
+        this.editorContainer.addChild(loader);
+        this.ui.setFocus(loader);
+        this.ui.requestRender();
+        const dismissLoader = (editor) => {
+            loader.dispose();
+            this.editorContainer.clear();
+            this.editorContainer.addChild(editor);
+            this.ui.setFocus(editor);
+            this.ui.requestRender();
+        };
+        try {
+            await this.session.reload();
+            setRegisteredThemes(this.session.resourceLoader.getThemes().themes);
+            this.rebuildAutocomplete();
+            const runner = this.session.extensionRunner;
+            if (runner) {
+                this.setupExtensionShortcuts(runner);
+            }
+            this.rebuildChatFromMessages();
+            dismissLoader(this.editor);
+            this.showLoadedResources({ extensionPaths: runner?.getExtensionPaths() ?? [], force: true });
+            const modelsJsonError = this.session.modelRegistry.getError();
+            if (modelsJsonError) {
+                this.showError(`models.json error: ${modelsJsonError}`);
+            }
+            this.showStatus("Reloaded extensions, skills, prompts, themes");
+        }
+        catch (error) {
+            dismissLoader(previousEditor);
+            this.showError(`Reload failed: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
     async handleExportCommand(text) {
         const parts = text.split(/\s+/);
         const outputPath = parts.length > 1 ? parts[1] : undefined;
@@ -2983,6 +3312,8 @@ export class InteractiveMode {
         const cursorWordRight = this.getEditorKeyDisplay("cursorWordRight");
         const cursorLineStart = this.getEditorKeyDisplay("cursorLineStart");
         const cursorLineEnd = this.getEditorKeyDisplay("cursorLineEnd");
+        const pageUp = this.getEditorKeyDisplay("pageUp");
+        const pageDown = this.getEditorKeyDisplay("pageDown");
         // Editing keybindings
         const submit = this.getEditorKeyDisplay("submit");
         const newLine = this.getEditorKeyDisplay("newLine");
@@ -3001,6 +3332,7 @@ export class InteractiveMode {
         const suspend = this.getAppKeyDisplay("suspend");
         const cycleThinkingLevel = this.getAppKeyDisplay("cycleThinkingLevel");
         const cycleModelForward = this.getAppKeyDisplay("cycleModelForward");
+        const selectModel = this.getAppKeyDisplay("selectModel");
         const expandTools = this.getAppKeyDisplay("expandTools");
         const toggleThinking = this.getAppKeyDisplay("toggleThinking");
         const externalEditor = this.getAppKeyDisplay("externalEditor");
@@ -3014,6 +3346,7 @@ export class InteractiveMode {
 | \`${cursorWordLeft}\` / \`${cursorWordRight}\` | Move by word |
 | \`${cursorLineStart}\` | Start of line |
 | \`${cursorLineEnd}\` | End of line |
+| \`${pageUp}\` / \`${pageDown}\` | Scroll by page |
 
 **Editing**
 | Key | Action |
@@ -3038,6 +3371,7 @@ export class InteractiveMode {
 | \`${suspend}\` | Suspend to background |
 | \`${cycleThinkingLevel}\` | Cycle thinking level |
 | \`${cycleModelForward}\` | Cycle models |
+| \`${selectModel}\` | Open model selector |
 | \`${expandTools}\` | Toggle tool output expansion |
 | \`${toggleThinking}\` | Toggle thinking block visibility |
 | \`${externalEditor}\` | Edit message in external editor |
@@ -3094,11 +3428,12 @@ export class InteractiveMode {
     }
     handleDebugCommand() {
         const width = this.ui.terminal.columns;
+        const height = this.ui.terminal.rows;
         const allLines = this.ui.render(width);
         const debugLogPath = getDebugLogPath();
         const debugData = [
             `Debug output at ${new Date().toISOString()}`,
-            `Terminal width: ${width}`,
+            `Terminal: ${width}x${height}`,
             `Total lines: ${allLines.length}`,
             "",
             "=== All rendered lines with visible widths ===",