@dreb/coding-agent 2.31.1 → 2.32.0

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

@@ -7,7 +7,7 @@ import * as fs from "node:fs";
 import * as os from "node:os";
 import * as path from "node:path";
 import { supportsAdaptiveThinking } from "@dreb/ai";
-import { CombinedAutocompleteProvider, Container, fuzzyFilter, Loader, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@dreb/tui";
+import { CombinedAutocompleteProvider, Container, fuzzyFilter, Markdown, matchesKey, ProcessTerminal, Spacer, setKeybindings, Text, TruncatedText, TUI, visibleWidth, } from "@dreb/tui";
 import { spawn, spawnSync } from "child_process";
 import { APP_NAME, getAgentDir, getAuthPath, getDebugLogPath, getUpdateInstruction, VERSION } from "../../config.js";
 import { parseSkillBlock } from "../../core/agent-session.js";
@@ -87,9 +87,16 @@ export class InteractiveMode {
     version;
     isInitialized = false;
     onInputCallback;
-    loadingAnimation = undefined;
     pendingWorkingMessage = undefined;
     defaultWorkingMessage = "Working...";
+    workingFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    workingFrame = 0;
+    workingInterval = undefined;
+    inlineStatusOwner = undefined;
+    inlineStatusSpinner = (spinner) => theme.fg("accent", spinner);
+    warnedMissingInlineStatus = false;
+    isAgentWorking = false;
+    currentWorkingMessage = this.defaultWorkingMessage;
     lastSigintTime = 0;
     lastEscapeTime = 0;
     changelogMarkdown = undefined;
@@ -1016,10 +1023,7 @@ export class InteractiveMode {
             commandContextActions: {
                 waitForIdle: () => this.session.agent.waitForIdle(),
                 newSession: async (options) => {
-                    if (this.loadingAnimation) {
-                        this.loadingAnimation.stop();
-                        this.loadingAnimation = undefined;
-                    }
+                    this.stopAllInlineStatus();
                     this.statusContainer.clear();
                     // Delegate to AgentSession (handles setup + agent state sync)
                     const success = await this.session.newSession(options);
@@ -1230,8 +1234,8 @@ export class InteractiveMode {
         this.setCustomEditorComponent(undefined);
         this.defaultEditor.onExtensionShortcut = undefined;
         this.updateTerminalTitle();
-        if (this.loadingAnimation) {
-            this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`);
+        if (this.isAgentWorking) {
+            this.setWorkingMessage();
         }
         // Re-mount buddy so it survives reload
         if (buddyState) {
@@ -1343,6 +1347,100 @@ export class InteractiveMode {
         }
         this.extensionTerminalInputUnsubscribers.clear();
     }
+    defaultInterruptWorkingMessage() {
+        return `${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`;
+    }
+    setEditorInlineStatus(text) {
+        this.defaultEditor.setInlineStatus(text);
+        if (this.editor === this.defaultEditor)
+            return;
+        this.editor.setInlineStatus?.(text);
+        if (!text || this.editor.setInlineStatus || this.warnedMissingInlineStatus)
+            return;
+        this.warnedMissingInlineStatus = true;
+        this.showWarning("Custom editor component does not support inline working status; progress and interrupt hints may be hidden.");
+    }
+    renderWorkingIndicator() {
+        if (!this.inlineStatusOwner)
+            return;
+        const frame = this.workingFrames[this.workingFrame] ?? this.workingFrames[0];
+        this.setEditorInlineStatus(`${this.inlineStatusSpinner(frame)} ${theme.fg("muted", this.currentWorkingMessage)}`);
+    }
+    startInlineStatus(owner, message, spinner = (frame) => theme.fg("accent", frame)) {
+        this.stopInlineStatus();
+        this.inlineStatusOwner = owner;
+        this.inlineStatusSpinner = spinner;
+        this.currentWorkingMessage = message;
+        this.workingFrame = 0;
+        this.renderWorkingIndicator();
+        this.workingInterval = setInterval(() => {
+            this.workingFrame = (this.workingFrame + 1) % this.workingFrames.length;
+            this.renderWorkingIndicator();
+        }, 80);
+    }
+    stopInlineStatus(owner) {
+        if (owner && this.inlineStatusOwner !== owner)
+            return;
+        if (this.workingInterval) {
+            clearInterval(this.workingInterval);
+            this.workingInterval = undefined;
+        }
+        if (this.inlineStatusOwner) {
+            this.inlineStatusOwner = undefined;
+            this.currentWorkingMessage = this.defaultWorkingMessage;
+            this.inlineStatusSpinner = (spinner) => theme.fg("accent", spinner);
+            this.setEditorInlineStatus(null);
+        }
+    }
+    startInlineLoader(owner, message, spinner = (frame) => theme.fg("accent", frame)) {
+        this.startInlineStatus(owner, message, spinner);
+        return {
+            stop: () => this.stopInlineStatus(owner),
+            setText: (text) => {
+                if (this.inlineStatusOwner !== owner)
+                    return;
+                this.currentWorkingMessage = text;
+                this.renderWorkingIndicator();
+            },
+        };
+    }
+    startAgentWorking(message) {
+        this.stopAgentWorking();
+        this.isAgentWorking = true;
+        this.startInlineStatus("agent", message || this.defaultInterruptWorkingMessage());
+    }
+    stopAgentWorking() {
+        if (this.isAgentWorking) {
+            this.isAgentWorking = false;
+            this.stopInlineStatus("agent");
+        }
+    }
+    stopAllInlineStatus() {
+        this.isAgentWorking = false;
+        this.pendingWorkingMessage = undefined;
+        this.stopInlineStatus();
+        this.autoCompactionLoader = undefined;
+        this.retryLoader = undefined;
+        if (this.autoCompactionEscapeHandler) {
+            this.defaultEditor.onEscape = this.autoCompactionEscapeHandler;
+            this.autoCompactionEscapeHandler = undefined;
+        }
+        if (this.retryEscapeHandler) {
+            this.defaultEditor.onEscape = this.retryEscapeHandler;
+            this.retryEscapeHandler = undefined;
+        }
+    }
+    setWorkingMessage(message) {
+        const nextMessage = message || this.defaultInterruptWorkingMessage();
+        if (this.isAgentWorking) {
+            this.currentWorkingMessage = nextMessage;
+            this.renderWorkingIndicator();
+        }
+        else {
+            // Queue message for when the next agent_start arrives.
+            this.pendingWorkingMessage = message;
+        }
+    }
     /**
      * Create the ExtensionUIContext for extensions.
      */
@@ -1354,20 +1452,7 @@ export class InteractiveMode {
             notify: (message, type) => this.showExtensionNotify(message, type),
             onTerminalInput: (handler) => this.addExtensionTerminalInputListener(handler),
             setStatus: (key, text) => this.setExtensionStatus(key, text),
-            setWorkingMessage: (message) => {
-                if (this.loadingAnimation) {
-                    if (message) {
-                        this.loadingAnimation.setMessage(message);
-                    }
-                    else {
-                        this.loadingAnimation.setMessage(`${this.defaultWorkingMessage} (${keyText("app.interrupt")} to interrupt)`);
-                    }
-                }
-                else {
-                    // Queue message for when loadingAnimation is created (handles agent_start race)
-                    this.pendingWorkingMessage = message;
-                }
-            },
+            setWorkingMessage: (message) => this.setWorkingMessage(message),
             setWidget: (key, content, options) => this.setExtensionWidget(key, content, options),
             setFooter: (factory) => this.setExtensionFooter(factory),
             setHeader: (factory) => this.setExtensionHeader(factory),
@@ -1563,6 +1648,9 @@ export class InteractiveMode {
             this.defaultEditor.setText(currentText);
             this.editor = this.defaultEditor;
         }
+        if (this.isAgentWorking) {
+            this.renderWorkingIndicator();
+        }
         this.editorContainer.addChild(this.editor);
         this.ui.setFocus(this.editor);
         this.ui.requestRender();
@@ -1676,7 +1764,7 @@ export class InteractiveMode {
         this.defaultEditor.onEscape = () => {
             // Always clear ghost text on Escape (CustomEditor intercepts before super.handleInput)
             this.editor.setGhostText?.(null);
-            if (this.loadingAnimation) {
+            if (this.isAgentWorking) {
                 this.cancelBackgroundAgents();
                 this.restoreQueuedMessagesToEditor({ abort: true });
             }
@@ -1972,20 +2060,9 @@ export class InteractiveMode {
                     this.retryLoader.stop();
                     this.retryLoader = undefined;
                 }
-                if (this.loadingAnimation) {
-                    this.loadingAnimation.stop();
-                }
                 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();
+                this.startAgentWorking(this.pendingWorkingMessage);
+                this.pendingWorkingMessage = undefined;
                 break;
             case "message_start":
                 if (event.message.role === "custom") {
@@ -2128,10 +2205,7 @@ export class InteractiveMode {
                     this.retryLoader.stop();
                     this.retryLoader = undefined;
                 }
-                if (this.loadingAnimation) {
-                    this.loadingAnimation.stop();
-                    this.loadingAnimation = undefined;
-                }
+                this.stopAgentWorking();
                 this.statusContainer.clear();
                 if (this.streamingComponent) {
                     this.chatContainer.removeChild(this.streamingComponent);
@@ -2155,12 +2229,10 @@ export class InteractiveMode {
                 this.defaultEditor.onEscape = () => {
                     this.session.abortCompaction();
                 };
-                // Show compacting indicator with reason
+                // Show compacting indicator inside the editor line so start/end is constant-height.
                 this.statusContainer.clear();
                 const reasonText = event.reason === "overflow" ? "Context overflow detected, " : "";
-                this.autoCompactionLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `${reasonText}Auto-compacting... (${keyText("app.interrupt")} to cancel)`);
-                this.statusContainer.addChild(this.autoCompactionLoader);
-                this.ui.requestRender();
+                this.autoCompactionLoader = this.startInlineLoader("autoCompaction", `${reasonText}Auto-compacting... (${keyText("app.interrupt")} to cancel)`);
                 break;
             }
             case "auto_compaction_end": {
@@ -2208,12 +2280,10 @@ export class InteractiveMode {
                 this.defaultEditor.onEscape = () => {
                     this.session.abortRetry();
                 };
-                // Show retry indicator
+                // Show retry indicator inside the editor line so start/end is constant-height.
                 this.statusContainer.clear();
                 const delaySeconds = Math.round(event.delayMs / 1000);
-                this.retryLoader = new Loader(this.ui, (spinner) => theme.fg("warning", spinner), (text) => theme.fg("muted", text), `Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s... (${keyText("app.interrupt")} to cancel)`);
-                this.statusContainer.addChild(this.retryLoader);
-                this.ui.requestRender();
+                this.retryLoader = this.startInlineLoader("autoRetry", `Retrying (${event.attempt}/${event.maxAttempts}) in ${delaySeconds}s... (${keyText("app.interrupt")} to cancel)`, (spinner) => theme.fg("warning", spinner));
                 break;
             }
             case "auto_retry_end": {
@@ -2247,8 +2317,8 @@ export class InteractiveMode {
                     this.chatContainer.removeChild(component);
                 }
                 this.pendingTools.clear();
-                // Warn in the chat scrollback — keep the working spinner running so ESC
-                // aborts via the normal loadingAnimation path (same AbortController).
+                // Warn in the chat scrollback — keep the inline working indicator active so ESC
+                // aborts via the normal agent-working path (same AbortController).
                 this.showWarning(`Stream dropped, retrying (${event.attempt}/${event.maxAttempts})…`);
                 break;
             }
@@ -2264,8 +2334,8 @@ export class InteractiveMode {
                     this.chatContainer.removeChild(component);
                 }
                 this.pendingTools.clear();
-                // Warn in the chat scrollback — keep the working spinner running so ESC
-                // aborts via the normal loadingAnimation path (same AbortController).
+                // Warn in the chat scrollback — keep the inline working indicator active so ESC
+                // aborts via the normal agent-working path (same AbortController).
                 this.showWarning(`Response truncated, retrying with larger token budget (${event.attempt}/${event.maxAttempts})…`);
                 break;
             }
@@ -3492,7 +3562,7 @@ export class InteractiveMode {
                         break;
                     }
                 }
-                // Set up escape handler and loader if summarizing
+                // Set up escape handler and inline loader if summarizing
                 let summaryLoader;
                 const originalOnEscape = this.defaultEditor.onEscape;
                 if (wantsSummary) {
@@ -3500,9 +3570,7 @@ export class InteractiveMode {
                         this.session.abortBranchSummary();
                     };
                     this.chatContainer.addChild(new Spacer(1));
-                    summaryLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `Summarizing branch... (${keyText("app.interrupt")} to cancel)`);
-                    this.statusContainer.addChild(summaryLoader);
-                    this.ui.requestRender();
+                    summaryLoader = this.startInlineLoader("branchSummary", `Summarizing branch... (${keyText("app.interrupt")} to cancel)`);
                 }
                 try {
                     const result = await this.session.navigateTree(entryId, {
@@ -3571,11 +3639,8 @@ export class InteractiveMode {
         });
     }
     async handleResumeSession(sessionPath) {
-        // Stop loading animation
-        if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
-            this.loadingAnimation = undefined;
-        }
+        // Stop inline working indicator/status loader
+        this.stopAllInlineStatus();
         this.statusContainer.clear();
         // Clear UI state
         this.editor.setGhostText?.(null);
@@ -3803,11 +3868,8 @@ export class InteractiveMode {
             return;
         }
         try {
-            // Stop loading animation
-            if (this.loadingAnimation) {
-                this.loadingAnimation.stop();
-                this.loadingAnimation = undefined;
-            }
+            // Stop inline working indicator/status loader
+            this.stopAllInlineStatus();
             this.statusContainer.clear();
             // Clear UI state
             this.pendingMessagesContainer.clear();
@@ -4108,11 +4170,8 @@ ${cycleModelForward || cycleModelBackward ? `| \`${cycleModelForward}\` / \`${cy
         this.ui.requestRender();
     }
     async handleClearCommand() {
-        // Stop loading animation
-        if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
-            this.loadingAnimation = undefined;
-        }
+        // Stop inline working indicator/status loader
+        this.stopAllInlineStatus();
         this.statusContainer.clear();
         // New session via session (emits extension session events)
         await this.session.newSession();
@@ -4275,11 +4334,8 @@ ${cycleModelForward || cycleModelBackward ? `| \`${cycleModelForward}\` / \`${cy
         }
     }
     async executeDream() {
-        // Stop any existing loading animation
-        if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
-            this.loadingAnimation = undefined;
-        }
+        // Stop any existing inline working indicator/status loader
+        this.stopAllInlineStatus();
         this.statusContainer.clear();
         let releaseLock;
         let dreamContext;
@@ -4289,12 +4345,10 @@ ${cycleModelForward || cycleModelBackward ? `| \`${cycleModelForward}\` / \`${cy
             // User pressed escape — abort the dream
             this.session.abort();
         };
-        // Show loading spinner
+        // Show loading spinner inside the editor line so start/end is constant-height.
         this.chatContainer.addChild(new Spacer(1));
         const cancelHint = `(${keyText("app.interrupt")} to cancel)`;
-        const dreamLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), `Dreaming... ${cancelHint}`);
-        this.statusContainer.addChild(dreamLoader);
-        this.ui.requestRender();
+        const dreamLoader = this.startInlineLoader("dream", `Dreaming... ${cancelHint}`);
         try {
             // Acquire lock
             try {
@@ -4334,7 +4388,6 @@ ${cycleModelForward || cycleModelBackward ? `| \`${cycleModelForward}\` / \`${cy
             }
             // Update loader text
             dreamLoader.setText(`Consolidating memories... ${cancelHint}`);
-            this.ui.requestRender();
             // Build prompt and inject into session
             const prompt = buildDreamPrompt(dreamContext, backupResult);
             await this.session.prompt(prompt);
@@ -4381,24 +4434,19 @@ ${cycleModelForward || cycleModelBackward ? `| \`${cycleModelForward}\` / \`${cy
         await this.executeCompaction(customInstructions, false);
     }
     async executeCompaction(customInstructions, isAuto = false) {
-        // Stop loading animation
-        if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
-            this.loadingAnimation = undefined;
-        }
+        // Stop inline working indicator/status loader
+        this.stopAllInlineStatus();
         this.statusContainer.clear();
         // Set up escape handler during compaction
         const originalOnEscape = this.defaultEditor.onEscape;
         this.defaultEditor.onEscape = () => {
             this.session.abortCompaction();
         };
-        // Show compacting status
+        // Show compacting status inside the editor line so start/end is constant-height.
         this.chatContainer.addChild(new Spacer(1));
         const cancelHint = `(${keyText("app.interrupt")} to cancel)`;
         const label = isAuto ? `Auto-compacting context... ${cancelHint}` : `Compacting context... ${cancelHint}`;
-        const compactingLoader = new Loader(this.ui, (spinner) => theme.fg("accent", spinner), (text) => theme.fg("muted", text), label);
-        this.statusContainer.addChild(compactingLoader);
-        this.ui.requestRender();
+        const compactingLoader = this.startInlineLoader("compaction", label);
         let result;
         try {
             result = await this.session.compact(customInstructions);
@@ -4632,10 +4680,7 @@ ${cycleModelForward || cycleModelBackward ? `| \`${cycleModelForward}\` / \`${cy
     }
     stop() {
         this.buddyController.stop();
-        if (this.loadingAnimation) {
-            this.loadingAnimation.stop();
-            this.loadingAnimation = undefined;
-        }
+        this.stopAllInlineStatus();
         this.removeBuddy();
         this.clearExtensionTerminalInputListeners();
         this.footer.dispose();