@mariozechner/pi-coding-agent 0.49.1 → 0.49.3

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

@@ -9,7 +9,7 @@ import * as path from "node:path";
 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, isBunBinary, isBunRuntime, VERSION } from "../../config.js";
+import { APP_NAME, getAuthPath, getDebugLogPath, getShareViewerUrl, isBunBinary, isBunRuntime, VERSION, } from "../../config.js";
 import { FooterDataProvider } from "../../core/footer-data-provider.js";
 import { KeybindingsManager } from "../../core/keybindings.js";
 import { createCompactionSummaryMessage } from "../../core/messages.js";
@@ -108,9 +108,11 @@ export class InteractiveMode {
     extensionSelector = undefined;
     extensionInput = undefined;
     extensionEditor = undefined;
-    // Extension widgets (components rendered above the editor)
-    extensionWidgets = new Map();
-    widgetContainer;
+    // Extension widgets (components rendered above/below the editor)
+    extensionWidgetsAbove = new Map();
+    extensionWidgetsBelow = new Map();
+    widgetContainerAbove;
+    widgetContainerBelow;
     // Custom footer from extension (undefined = use built-in footer)
     customFooter = undefined;
     // Built-in header (logo + keybinding hints + changelog)
@@ -135,7 +137,8 @@ export class InteractiveMode {
         this.chatContainer = new Container();
         this.pendingMessagesContainer = new Container();
         this.statusContainer = new Container();
-        this.widgetContainer = new Container();
+        this.widgetContainerAbove = new Container();
+        this.widgetContainerBelow = new Container();
         this.keybindings = KeybindingsManager.create();
         const editorPaddingX = this.settingsManager.getEditorPaddingX();
         this.defaultEditor = new CustomEditor(this.ui, getEditorTheme(), this.keybindings, { paddingX: editorPaddingX });
@@ -277,7 +280,7 @@ export class InteractiveMode {
                 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, getMarkdownTheme()));
+                    this.ui.addChild(new Markdown(this.changelogMarkdown.trim(), 1, 0, this.getMarkdownThemeWithSettings()));
                     this.ui.addChild(new Spacer(1));
                 }
                 this.ui.addChild(new DynamicBorder());
@@ -298,9 +301,10 @@ export class InteractiveMode {
         this.ui.addChild(this.chatContainer);
         this.ui.addChild(this.pendingMessagesContainer);
         this.ui.addChild(this.statusContainer);
-        this.ui.addChild(this.widgetContainer);
         this.renderWidgets(); // Initialize with default spacer
+        this.ui.addChild(this.widgetContainerAbove);
         this.ui.addChild(this.editorContainer);
+        this.ui.addChild(this.widgetContainerBelow);
         this.ui.addChild(this.footer);
         this.ui.setFocus(this.editor);
         this.setupKeyHandlers();
@@ -309,8 +313,7 @@ export class InteractiveMode {
         this.ui.start();
         this.isInitialized = true;
         // Set terminal title
-        const cwdBasename = path.basename(process.cwd());
-        this.ui.terminal.setTitle(`pi - ${cwdBasename}`);
+        this.updateTerminalTitle();
         // Initialize extensions with TUI-based UI context
         await this.initExtensions();
         // Subscribe to agent events
@@ -326,6 +329,19 @@ export class InteractiveMode {
             this.ui.requestRender();
         });
     }
+    /**
+     * Update terminal title with session name and cwd.
+     */
+    updateTerminalTitle() {
+        const cwdBasename = path.basename(process.cwd());
+        const sessionName = this.sessionManager.getSessionName();
+        if (sessionName) {
+            this.ui.terminal.setTitle(`π - ${sessionName} - ${cwdBasename}`);
+        }
+        else {
+            this.ui.terminal.setTitle(`π - ${cwdBasename}`);
+        }
+    }
     /**
      * Run the interactive mode. This is the main entry point.
      * Initializes the UI, shows warnings, processes initial messages, and starts the interactive loop.
@@ -431,6 +447,12 @@ export class InteractiveMode {
         }
         return undefined;
     }
+    getMarkdownThemeWithSettings() {
+        return {
+            ...getMarkdownTheme(),
+            codeBlockIndent: this.settingsManager.getCodeBlockIndent(),
+        };
+    }
     // =========================================================================
     // Extension System
     // =========================================================================
@@ -505,6 +527,7 @@ export class InteractiveMode {
             },
             setSessionName: (name) => {
                 this.sessionManager.appendSessionInfo(name);
+                this.updateTerminalTitle();
             },
             getSessionName: () => {
                 return this.sessionManager.getSessionName();
@@ -697,15 +720,22 @@ export class InteractiveMode {
     /**
      * Set an extension widget (string array or custom component).
      */
-    setExtensionWidget(key, content) {
-        // Dispose and remove existing widget
-        const existing = this.extensionWidgets.get(key);
-        if (existing?.dispose)
-            existing.dispose();
+    setExtensionWidget(key, content, options) {
+        const placement = options?.placement ?? "aboveEditor";
+        const removeExisting = (map) => {
+            const existing = map.get(key);
+            if (existing?.dispose)
+                existing.dispose();
+            map.delete(key);
+        };
+        removeExisting(this.extensionWidgetsAbove);
+        removeExisting(this.extensionWidgetsBelow);
         if (content === undefined) {
-            this.extensionWidgets.delete(key);
+            this.renderWidgets();
+            return;
         }
-        else if (Array.isArray(content)) {
+        let component;
+        if (Array.isArray(content)) {
             // Wrap string array in a Container with Text components
             const container = new Container();
             for (const line of content.slice(0, InteractiveMode.MAX_WIDGET_LINES)) {
@@ -714,13 +744,14 @@ export class InteractiveMode {
             if (content.length > InteractiveMode.MAX_WIDGET_LINES) {
                 container.addChild(new Text(theme.fg("muted", "... (widget truncated)"), 1, 0));
             }
-            this.extensionWidgets.set(key, container);
+            component = container;
         }
         else {
             // Factory function - create component
-            const component = content(this.ui, theme);
-            this.extensionWidgets.set(key, component);
+            component = content(this.ui, theme);
         }
+        const targetMap = placement === "belowEditor" ? this.extensionWidgetsBelow : this.extensionWidgetsAbove;
+        targetMap.set(key, component);
         this.renderWidgets();
     }
     // Maximum total widget lines to prevent viewport overflow
@@ -729,19 +760,26 @@ export class InteractiveMode {
      * Render all extension widgets to the widget container.
      */
     renderWidgets() {
-        if (!this.widgetContainer)
+        if (!this.widgetContainerAbove || !this.widgetContainerBelow)
             return;
-        this.widgetContainer.clear();
-        if (this.extensionWidgets.size === 0) {
-            this.widgetContainer.addChild(new Spacer(1));
-            this.ui.requestRender();
+        this.renderWidgetContainer(this.widgetContainerAbove, this.extensionWidgetsAbove, true, true);
+        this.renderWidgetContainer(this.widgetContainerBelow, this.extensionWidgetsBelow, false, false);
+        this.ui.requestRender();
+    }
+    renderWidgetContainer(container, widgets, spacerWhenEmpty, leadingSpacer) {
+        container.clear();
+        if (widgets.size === 0) {
+            if (spacerWhenEmpty) {
+                container.addChild(new Spacer(1));
+            }
             return;
         }
-        this.widgetContainer.addChild(new Spacer(1));
-        for (const [_key, component] of this.extensionWidgets) {
-            this.widgetContainer.addChild(component);
+        if (leadingSpacer) {
+            container.addChild(new Spacer(1));
+        }
+        for (const component of widgets.values()) {
+            container.addChild(component);
         }
-        this.ui.requestRender();
     }
     /**
      * Set a custom footer component, or restore the built-in footer.
@@ -821,7 +859,7 @@ export class InteractiveMode {
                     }
                 }
             },
-            setWidget: (key, content) => this.setExtensionWidget(key, content),
+            setWidget: (key, content, options) => this.setExtensionWidget(key, content, options),
             setFooter: (factory) => this.setExtensionFooter(factory),
             setHeader: (factory) => this.setExtensionHeader(factory),
             setTitle: (title) => this.ui.terminal.setTitle(title),
@@ -1394,7 +1432,7 @@ export class InteractiveMode {
                     this.ui.requestRender();
                 }
                 else if (event.message.role === "assistant") {
-                    this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinkingBlock);
+                    this.streamingComponent = new AssistantMessageComponent(undefined, this.hideThinkingBlock, this.getMarkdownThemeWithSettings());
                     this.streamingMessage = event.message;
                     this.chatContainer.addChild(this.streamingComponent);
                     this.streamingComponent.updateContent(this.streamingMessage);
@@ -1644,20 +1682,20 @@ export class InteractiveMode {
             case "custom": {
                 if (message.display) {
                     const renderer = this.session.extensionRunner?.getMessageRenderer(message.customType);
-                    this.chatContainer.addChild(new CustomMessageComponent(message, renderer));
+                    this.chatContainer.addChild(new CustomMessageComponent(message, renderer, this.getMarkdownThemeWithSettings()));
                 }
                 break;
             }
             case "compactionSummary": {
                 this.chatContainer.addChild(new Spacer(1));
-                const component = new CompactionSummaryMessageComponent(message);
+                const component = new CompactionSummaryMessageComponent(message, this.getMarkdownThemeWithSettings());
                 component.setExpanded(this.toolOutputExpanded);
                 this.chatContainer.addChild(component);
                 break;
             }
             case "branchSummary": {
                 this.chatContainer.addChild(new Spacer(1));
-                const component = new BranchSummaryMessageComponent(message);
+                const component = new BranchSummaryMessageComponent(message, this.getMarkdownThemeWithSettings());
                 component.setExpanded(this.toolOutputExpanded);
                 this.chatContainer.addChild(component);
                 break;
@@ -1665,7 +1703,7 @@ export class InteractiveMode {
             case "user": {
                 const textContent = this.getUserMessageText(message);
                 if (textContent) {
-                    const userComponent = new UserMessageComponent(textContent);
+                    const userComponent = new UserMessageComponent(textContent, this.getMarkdownThemeWithSettings());
                     this.chatContainer.addChild(userComponent);
                     if (options?.populateHistory) {
                         this.editor.addToHistory?.(textContent);
@@ -1674,7 +1712,7 @@ export class InteractiveMode {
                 break;
             }
             case "assistant": {
-                const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock);
+                const assistantComponent = new AssistantMessageComponent(message, this.hideThinkingBlock, this.getMarkdownThemeWithSettings());
                 this.chatContainer.addChild(assistantComponent);
                 break;
             }
@@ -2179,6 +2217,7 @@ export class InteractiveMode {
                 doubleEscapeAction: this.settingsManager.getDoubleEscapeAction(),
                 showHardwareCursor: this.settingsManager.getShowHardwareCursor(),
                 editorPaddingX: this.settingsManager.getEditorPaddingX(),
+                quietStartup: this.settingsManager.getQuietStartup(),
             }, {
                 onAutoCompactChange: (enabled) => {
                     this.session.setAutoCompactionEnabled(enabled);
@@ -2242,6 +2281,9 @@ export class InteractiveMode {
                 onCollapseChangelogChange: (collapsed) => {
                     this.settingsManager.setCollapseChangelog(collapsed);
                 },
+                onQuietStartupChange: (enabled) => {
+                    this.settingsManager.setQuietStartup(enabled);
+                },
                 onDoubleEscapeActionChange: (action) => {
                     this.settingsManager.setDoubleEscapeAction(action);
                 },
@@ -2817,7 +2859,7 @@ export class InteractiveMode {
                 return;
             }
             // Create the preview URL
-            const previewUrl = `https://buildwithpi.ai/session/#${gistId}`;
+            const previewUrl = getShareViewerUrl(gistId);
             this.showStatus(`Share URL: ${previewUrl}\nGist: ${gistUrl}`);
         }
         catch (error) {
@@ -2856,6 +2898,7 @@ export class InteractiveMode {
             return;
         }
         this.sessionManager.appendSessionInfo(name);
+        this.updateTerminalTitle();
         this.chatContainer.addChild(new Spacer(1));
         this.chatContainer.addChild(new Text(theme.fg("dim", `Session name set: ${name}`), 1, 0));
         this.ui.requestRender();
@@ -2906,7 +2949,7 @@ export class InteractiveMode {
         this.chatContainer.addChild(new DynamicBorder());
         this.chatContainer.addChild(new Text(theme.bold(theme.fg("accent", "What's New")), 1, 0));
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Markdown(changelogMarkdown, 1, 1, getMarkdownTheme()));
+        this.chatContainer.addChild(new Markdown(changelogMarkdown, 1, 1, this.getMarkdownThemeWithSettings()));
         this.chatContainer.addChild(new DynamicBorder());
         this.ui.requestRender();
     }
@@ -3025,7 +3068,7 @@ export class InteractiveMode {
         this.chatContainer.addChild(new DynamicBorder());
         this.chatContainer.addChild(new Text(theme.bold(theme.fg("accent", "Keyboard Shortcuts")), 1, 0));
         this.chatContainer.addChild(new Spacer(1));
-        this.chatContainer.addChild(new Markdown(hotkeys.trim(), 1, 1, getMarkdownTheme()));
+        this.chatContainer.addChild(new Markdown(hotkeys.trim(), 1, 1, this.getMarkdownThemeWithSettings()));
         this.chatContainer.addChild(new DynamicBorder());
         this.ui.requestRender();
     }