Fix early exit with escape

Author: virattt

src/cli.ts

@@ -122,6 +122,8 @@ function renderHistory(chatLog: ChatLogComponent, history: AgentRunnerController
         } else if (display.completed && display.endEvent?.type === 'tool_error') {
           const toolError = display.endEvent as ToolErrorEvent;
           component.setError(toolError.error);
+        } else if (item.status === 'interrupted') {
+          // Don't start spinner for tools in interrupted items
         } else if (display.progressMessage) {
           component.setActive(display.progressMessage);
         }

src/components/chat-log.ts

@@ -56,6 +56,7 @@ interface ToolDisplayComponent {
   setLimitWarning(warning?: string): void;
   setApproval(decision: 'allow-once' | 'allow-session' | 'deny'): void;
   setDenied(path: string, tool: string): void;
+  dispose?(): void;
 }
 
 class BrowserSessionComponent extends Container implements ToolDisplayComponent {
@@ -145,6 +146,10 @@ export class ChatLogComponent extends Container {
   }
 
   clearAll() {
+    // Stop any running spinners before clearing
+    for (const component of this.toolById.values()) {
+      component.dispose?.();
+    }
     this.clear();
     this.toolById.clear();
     this.currentBrowserSession = null;

src/components/tool-event.ts

@@ -1,4 +1,4 @@
-import { Container, Spacer, Text } from '@mariozechner/pi-tui';
+import { Container, Spacer, Text, type TUI } from '@mariozechner/pi-tui';
 import type { ApprovalDecision } from '../agent/types.js';
 import { theme } from '../theme.js';
 
@@ -56,13 +56,19 @@ function approvalLabel(decision: ApprovalDecision): string {
   }
 }
 
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
 export class ToolEventComponent extends Container {
+  private readonly tui: TUI;
   private readonly header: Text;
   private completedDetails: Text[] = [];
   private activeDetail: Text | null = null;
+  private spinnerInterval: ReturnType<typeof setInterval> | null = null;
+  private spinnerFrame: number = 0;
 
-  constructor(_tui: unknown, tool: string, args: Record<string, unknown>) {
+  constructor(tui: TUI, tool: string, args: Record<string, unknown>) {
     super();
+    this.tui = tui;
     this.addChild(new Spacer(1));
     const title = `${formatToolName(tool)}${args ? `${theme.muted('(')}${formatArgs(tool, args)}${theme.muted(')')}` : ''}`;
     this.header = new Text(`⏺ ${title}`, 0, 0);
@@ -72,8 +78,14 @@ export class ToolEventComponent extends Container {
   setActive(progressMessage?: string) {
     this.clearDetail();
     const message = progressMessage || 'Searching...';
-    this.activeDetail = new Text(`${theme.muted('⎿  ')}${message}`, 0, 0);
+    this.activeDetail = new Text(`${theme.muted(`⎿  ${SPINNER_FRAMES[0]}`)} ${message}`, 0, 0);
     this.addChild(this.activeDetail);
+    this.spinnerFrame = 0;
+    this.spinnerInterval = setInterval(() => {
+      this.spinnerFrame = (this.spinnerFrame + 1) % SPINNER_FRAMES.length;
+      this.activeDetail?.setText(`${theme.muted(`⎿  ${SPINNER_FRAMES[this.spinnerFrame]}`)} ${message}`);
+      this.tui.requestRender();
+    }, 80);
   }
 
   setComplete(summary: string, duration: number) {
@@ -120,7 +132,15 @@ export class ToolEventComponent extends Container {
     this.addChild(detail);
   }
 
+  dispose() {
+    this.clearDetail();
+  }
+
   private clearDetail() {
+    if (this.spinnerInterval) {
+      clearInterval(this.spinnerInterval);
+      this.spinnerInterval = null;
+    }
     if (this.activeDetail) {
       this.removeChild(this.activeDetail);
       this.activeDetail = null;