@mariozechner/pi-coding-agent 0.50.0 → 0.50.2

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

@@ -116,6 +116,8 @@ export class InteractiveMode {
     widgetContainerBelow;
     // Custom footer from extension (undefined = use built-in footer)
     customFooter = undefined;
+    // Header container that holds the built-in or custom header
+    headerContainer;
     // Built-in header (logo + keybinding hints + changelog)
     builtInHeader = undefined;
     // Custom header from extension (undefined = use built-in header)
@@ -135,6 +137,7 @@ export class InteractiveMode {
         this.session = session;
         this.version = VERSION;
         this.ui = new TUI(new ProcessTerminal(), this.settingsManager.getShowHardwareCursor());
+        this.headerContainer = new Container();
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
@@ -142,7 +145,11 @@ export class InteractiveMode {
         this.widgetContainerBelow = new Container();
         this.keybindings = KeybindingsManager.create();
         const editorPaddingX = this.settingsManager.getEditorPaddingX();
-        this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, { paddingX: editorPaddingX });
+        const autocompleteMaxVisible = this.settingsManager.getAutocompleteMaxVisible();
+        this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, {
+            paddingX: editorPaddingX,
+            autocompleteMaxVisible,
+        });
         this.editor = this.defaultEditor;
         this.editorContainer = new Container();
         this.editorContainer.addChild(this.editor);
@@ -239,6 +246,8 @@ export class InteractiveMode {
         // Setup autocomplete with fd tool for file path completion
         this.fdPath = await ensureTool("fd");
         this.setupAutocomplete(this.fdPath);
+        // Add header container as first child
+        this.ui.addChild(this.headerContainer);
         // Add header with keybindings from config (unless silenced)
         if (this.options.verbose || !this.settingsManager.getQuietStartup()) {
             const logo = theme.bold(theme.fg("accent", APP_NAME)) + theme.fg("dim", ` v${this.version}`);
@@ -268,37 +277,38 @@ export class InteractiveMode {
             ].join("\n");
             this.builtInHeader = new Text(`${logo}\n${instructions}`, 1, 0);
             // Setup UI layout
-            this.ui.addChild(new Spacer(1));
-            this.ui.addChild(this.builtInHeader);
-            this.ui.addChild(new Spacer(1));
+            this.headerContainer.addChild(new Spacer(1));
+            this.headerContainer.addChild(this.builtInHeader);
+            this.headerContainer.addChild(new Spacer(1));
             // Add changelog if provided
             if (this.changelogMarkdown) {
-                this.ui.addChild(new DynamicBorder());
+                this.headerContainer.addChild(new DynamicBorder());
                 if (this.settingsManager.getCollapseChangelog()) {
                     const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/);
                     const latestVersion = versionMatch ? versionMatch[1] : this.version;
                     const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`;
-                    this.ui.addChild(new Text(condensedText, 1, 0));
+                    this.headerContainer.addChild(new Text(condensedText, 1, 0));
                 }
                 else {
-                    this.ui.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
-                    this.ui.addChild(new Spacer(1));
-                    this.ui.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings()));
-                    this.ui.addChild(new Spacer(1));
+                    this.headerContainer.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
+                    this.headerContainer.addChild(new Spacer(1));
+                    this.headerContainer.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings()));
+                    this.headerContainer.addChild(new Spacer(1));
                 }
-                this.ui.addChild(new DynamicBorder());
+                this.headerContainer.addChild(new DynamicBorder());
             }
         }
         else {
             // Minimal header when silenced
             this.builtInHeader = new Text("", 0, 0);
+            this.headerContainer.addChild(this.builtInHeader);
             if (this.changelogMarkdown) {
                 // Still show changelog notification even in silent mode
-                this.ui.addChild(new Spacer(1));
+                this.headerContainer.addChild(new Spacer(1));
                 const versionMatch = this.changelogMarkdown.match(/##\s+\[?(\d+\.\d+\.\d+)\]?/);
                 const latestVersion = versionMatch ? versionMatch[1] : this.version;
                 const condensedText = `Updated to v${latestVersion}. Use ${theme.bold("/changelog")} to view full changelog.`;
-                this.ui.addChild(new Text(condensedText, 1, 0));
+                this.headerContainer.addChild(new Text(condensedText, 1, 0));
             }
         }
         this.ui.addChild(this.chatContainer);
@@ -312,6 +322,8 @@ export class InteractiveMode {
         this.ui.setFocus(this.editor);
         this.setupKeyHandlers();
         this.setupEditorSubmitHandler();
+        // Render initial messages before starting the UI to avoid layout jump
+        this.renderInitialMessages();
         // Start the UI
         this.ui.start();
         this.isInitialized = true;
@@ -359,7 +371,6 @@ export class InteractiveMode {
                 this.showNewVersionNotification(newVersion);
             }
         });
-        this.renderInitialMessages();
         // Show startup warnings
         const { migratedProviders, modelFallbackMessage, initialMessage, initialImages, initialMessages } = this.options;
         if (migratedProviders && migratedProviders.length > 0) {
@@ -741,12 +752,6 @@ export class InteractiveMode {
      * Initialize the extension system with TUI-based UI context.
      */
     async initExtensions() {
-        const extensionRunner = this.session.extensionRunner;
-        if (!extensionRunner) {
-            this.showLoadedResources({ extensionPaths: [], force: false });
-            return;
-        }
-        // Create extension UI context
         const uiContext = this.createExtensionUIContext();
         await this.session.bindExtensions({
             uiContext,
@@ -758,21 +763,20 @@ export class InteractiveMode {
                         this.loadingAnimation = undefined;
                     }
                     this.statusContainer.clear();
-                    const success = await this.session.newSession({ parentSession: options?.parentSession });
+                    // Delegate to AgentSession (handles setup + agent state sync)
+                    const success = await this.session.newSession(options);
                     if (!success) {
                         return { cancelled: true };
                     }
-                    if (options?.setup) {
-                        await options.setup(this.sessionManager);
-                    }
+                    // Clear UI state
                     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));
+                    // Render any messages added via setup, or show empty session
+                    this.renderInitialMessages();
                     this.ui.requestRender();
                     return { cancelled: false };
                 },
@@ -813,6 +817,11 @@ export class InteractiveMode {
                 this.showExtensionError(error.extensionPath, error.error, error.stack);
             },
         });
+        const extensionRunner = this.session.extensionRunner;
+        if (!extensionRunner) {
+            this.showLoadedResources({ extensionPaths: [], force: false });
+            return;
+        }
         this.setupExtensionShortcuts(extensionRunner);
         this.showLoadedResources({ extensionPaths: extensionRunner.getExtensionPaths(), force: false });
     }
@@ -1020,22 +1029,26 @@ export class InteractiveMode {
         if (this.customHeader?.dispose) {
             this.customHeader.dispose();
         }
-        // Remove current header from UI
-        if (this.customHeader) {
-            this.ui.removeChild(this.customHeader);
-        }
-        else {
-            this.ui.removeChild(this.builtInHeader);
-        }
+        // Find the index of the current header in the header container
+        const currentHeader = this.customHeader || this.builtInHeader;
+        const index = this.headerContainer.children.indexOf(currentHeader);
         if (factory) {
-            // Create and add custom header at position 1 (after initial spacer)
+            // Create and add custom header
             this.customHeader = factory(this.ui, theme);
-            this.ui.children.splice(1, 0, this.customHeader);
+            if (index !== -1) {
+                this.headerContainer.children[index] = this.customHeader;
+            }
+            else {
+                // If not found (e.g. builtInHeader was never added), add at the top
+                this.headerContainer.children.unshift(this.customHeader);
+            }
         }
         else {
-            // Restore built-in header at position 1
+            // Restore built-in header
             this.customHeader = undefined;
-            this.ui.children.splice(1, 0, this.builtInHeader);
+            if (index !== -1) {
+                this.headerContainer.children[index] = this.builtInHeader;
+            }
         }
         this.ui.requestRender();
     }
@@ -2479,6 +2492,7 @@ export class InteractiveMode {
                 doubleEscapeAction: this.settingsManager.getDoubleEscapeAction(),
                 showHardwareCursor: this.settingsManager.getShowHardwareCursor(),
                 editorPaddingX: this.settingsManager.getEditorPaddingX(),
+                autocompleteMaxVisible: this.settingsManager.getAutocompleteMaxVisible(),
                 quietStartup: this.settingsManager.getQuietStartup(),
             }, {
                 onAutoCompactChange: (enabled) => {
@@ -2560,6 +2574,13 @@ export class InteractiveMode {
                         this.editor.setPaddingX(padding);
                     }
                 },
+                onAutocompleteMaxVisibleChange: (maxVisible) => {
+                    this.settingsManager.setAutocompleteMaxVisible(maxVisible);
+                    this.defaultEditor.setAutocompleteMaxVisible(maxVisible);
+                    if (this.editor !== this.defaultEditor && this.editor.setAutocompleteMaxVisible !== undefined) {
+                        this.editor.setAutocompleteMaxVisible(maxVisible);
+                    }
+                },
                 onCancel: () => {
                     done();
                     this.ui.requestRender();
@@ -3394,7 +3415,8 @@ export class InteractiveMode {
 `;
                 for (const [key, shortcut] of shortcuts) {
                     const description = shortcut.description ?? shortcut.extensionPath;
-                    hotkeys += `| \`${key}\` | ${description} |\n`;
+                    const keyDisplay = key.replace(/\b\w/g, (c) => c.toUpperCase());
+                    hotkeys += `| \`${keyDisplay}\` | ${description} |\n`;
                 }
             }
         }