@mariozechner/pi-coding-agent 0.50.1 → 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) {
@@ -1018,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();
     }
@@ -2477,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) => {
@@ -2558,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();