jettypod 4.4.118 → 4.4.121

package/apps/dashboard/lib/session-stream-manager.ts

@@ -3,9 +3,31 @@
  *
  * Extracted from useClaudeStream hook to enable each session to have its own
  * independent stream state. Multiple instances can run concurrently.
+ *
+ * Uses Tauri IPC (invoke) to spawn Claude processes and Tauri events to receive
+ * streaming output, replacing the previous fetch-based SSE approach.
  */
 
 import type { AttachedImage } from '../components/ClaudePanelInput';
+import { invoke, listen } from './tauri';
+
+// Tauri event listener type
+type UnlistenFn = () => void;
+
+interface ProcessOutputBatchEvent {
+  pid: number;
+  stream: string;  // "stdout" | "stderr"
+  lines: string[];
+  label: string;
+  kind: string;
+}
+
+interface ProcessExitEvent {
+  pid: number;
+  code: number | null;
+  label: string;
+  kind: string;
+}
 
 // ============================================================================
 // Types
@@ -46,12 +68,14 @@ export interface StreamState {
   isReconnecting: boolean;
   reconnectAttempt: number;
   narratedMode: boolean;
+  fullReadoutMode: boolean;
+  rawEvents: unknown[];
   queuedMessage: QueuedMessage | null;
 }
 
 export interface StreamManagerCallbacks {
   onStateChange?: (state: StreamState) => void;
-  onWorkItemCreated?: (workItemId: number, title: string) => void;
+  onWorkItemCreated?: (workItemId: number, title: string, sourceSessionId: string) => void;
   onGate?: (gate: ClaudeMessage) => void;
   onQuestion?: (gate: ClaudeMessage) => void;
 }
@@ -80,10 +104,12 @@ const GATE_PATTERN = /\[GATE:([\w-]+)\](.*?)\[\/GATE\]/;
 // ============================================================================
 
 /**
- * Transform Claude's stream-json format into our ClaudeMessage format
+ * Transform Claude's stream-json format into our ClaudeMessage format.
+ * Returns an array when a single event contains multiple content blocks
+ * (e.g., assistant message with both text and tool_use).
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function transformClaudeMessage(parsed: any): ClaudeMessage | null {
+function transformClaudeMessage(parsed: any): ClaudeMessage | ClaudeMessage[] | null {
   const timestamp = Date.now();
 
   switch (parsed.type) {
@@ -94,24 +120,32 @@ function transformClaudeMessage(parsed: any): ClaudeMessage | null {
     case 'assistant': {
       const messageContent = parsed.message?.content;
       if (Array.isArray(messageContent)) {
+        const messages: ClaudeMessage[] = [];
+
         const textParts = messageContent
           .filter((part: { type: string }) => part.type === 'text')
           .map((part: { text: string }) => part.text)
           .join('');
 
         if (textParts) {
-          return { type: 'assistant', content: textParts, timestamp };
+          messages.push({ type: 'assistant', content: textParts, timestamp });
         }
 
-        const toolUse = messageContent.find((part: { type: string }) => part.type === 'tool_use');
-        if (toolUse) {
-          return {
-            type: 'tool_use',
-            tool_name: toolUse.name,
-            tool_input: toolUse.input,
-            timestamp,
-          };
+        // Emit ALL tool_use blocks (Claude can call multiple tools in parallel)
+        for (const part of messageContent) {
+          if (part.type === 'tool_use') {
+            messages.push({
+              type: 'tool_use',
+              tool_name: part.name,
+              tool_input: part.input,
+              timestamp,
+            });
+          }
         }
+
+        if (messages.length === 0) return null;
+        if (messages.length === 1) return messages[0];
+        return messages;
       }
       return null;
     }
@@ -195,6 +229,23 @@ function transformClaudeMessage(parsed: any): ClaudeMessage | null {
         timestamp,
       };
 
+    // Claude CLI v2.1.49+ may emit streaming content block deltas
+    case 'content_block_delta': {
+      const delta = parsed.delta as { type?: string; text?: string } | undefined;
+      if (delta?.type === 'text_delta' && delta.text) {
+        return { type: 'assistant', content: delta.text, timestamp };
+      }
+      return null;
+    }
+
+    case 'content_block_start':
+    case 'content_block_stop':
+    case 'message_start':
+    case 'message_delta':
+    case 'message_stop':
+      // Streaming lifecycle events — no user-visible content
+      return null;
+
     default:
       return null;
   }
@@ -213,14 +264,13 @@ function extractCreatedWorkItem(content: string | undefined): { id: number; titl
  * Check any message for work item creation
  */
 function checkMessageForWorkItemCreation(message: ClaudeMessage): { id: number; title: string } | null {
-  if (message.result) {
+  // Only check tool_result messages, not assistant content.
+  // Checking message.content would false-positive when Claude mentions
+  // patterns like "Created feature #123: My Feature" in its text output.
+  if (message.type === 'tool_result' && message.result) {
     const created = extractCreatedWorkItem(message.result);
     if (created) return created;
   }
-  if (message.content) {
-    const created = extractCreatedWorkItem(message.content);
-    if (created) return created;
-  }
   return null;
 }
 
@@ -273,6 +323,9 @@ export class SessionStreamManager {
   private _isReconnecting: boolean = false;
   private _reconnectAttempt: number = 0;
   private _narratedMode: boolean = true;
+  private _userToggledNarratedMode: boolean = false;
+  private _fullReadoutMode: boolean = false;
+  private _rawEvents: unknown[] = [];
   private _pendingQuestion: ClaudeMessage | null = null;
   private _queuedMessage: QueuedMessage | null = null;
   private _isFirstMessage: boolean = true;
@@ -280,15 +333,29 @@ export class SessionStreamManager {
   // Notification batching — coalesces rapid state changes into one callback per frame
   private _notifyPending: boolean = false;
 
+  // Tauri process tracking
+  private activePid: number | null = null;
+  private unlistenOutput: UnlistenFn | null = null;
+  private unlistenExit: UnlistenFn | null = null;
+  private _isContinue: boolean = false;  // tracks if this is a follow-up message
+
   // Control
-  private abortController: AbortController | null = null;
   private creatingStatusTimeout: ReturnType<typeof setTimeout> | null = null;
   private reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
   private stopped: boolean = false;
 
+  // Last tool_use tracking (to correlate tool_result with the tool that produced it)
+  private _lastToolUse: { name: string; command: string } | null = null;
+
+  // stderr buffer — collected per-stream to surface in error messages
+  private _stderrLines: string[] = [];
+
   // Last request (for retry/reconnect)
   private lastMessage: string | null = null;
   private lastImages: AttachedImage[] | undefined = undefined;
+  private _lastWasHidden: boolean = false;
+  // Index of the user message that triggered the current request (for precise retry removal)
+  private _lastUserMessageIndex: number = -1;
 
   // Callbacks
   private callbacks: StreamManagerCallbacks;
@@ -334,6 +401,14 @@ export class SessionStreamManager {
     return this._narratedMode;
   }
 
+  get fullReadoutMode(): boolean {
+    return this._fullReadoutMode;
+  }
+
+  get rawEvents(): unknown[] {
+    return this._rawEvents;
+  }
+
   get pendingQuestion(): ClaudeMessage | null {
     return this._pendingQuestion;
   }
@@ -361,9 +436,29 @@ export class SessionStreamManager {
 
   setNarratedMode(enabled: boolean): void {
     this._narratedMode = enabled;
+    this._userToggledNarratedMode = true;
+    this.notifyStateChange();
+  }
+
+  /**
+   * Update narrated mode without firing notifyStateChange.
+   * Used when React state is the source of truth (e.g., user toggle)
+   * to keep the stream manager in sync without overwriting React state.
+   */
+  setNarratedModeQuiet(enabled: boolean): void {
+    this._narratedMode = enabled;
+    this._userToggledNarratedMode = true;
+  }
+
+  setFullReadoutMode(enabled: boolean): void {
+    this._fullReadoutMode = enabled;
     this.notifyStateChange();
   }
 
+  setFullReadoutModeQuiet(enabled: boolean): void {
+    this._fullReadoutMode = enabled;
+  }
+
   /**
    * Answer a pending question gate by clearing it and sending the selection as a message
    */
@@ -383,6 +478,8 @@ export class SessionStreamManager {
       isReconnecting: this._isReconnecting,
       reconnectAttempt: this._reconnectAttempt,
       narratedMode: this._narratedMode,
+      fullReadoutMode: this._fullReadoutMode,
+      rawEvents: this._rawEvents,
       queuedMessage: this._queuedMessage,
     };
   }
@@ -454,7 +551,9 @@ export class SessionStreamManager {
       }
       // Add the gate message instead of (or in addition to) the raw message
       this._messages = [...this._messages, gate];
-      this._narratedMode = true; // Auto-enable narrated mode on first gate
+      if (!this._userToggledNarratedMode) {
+        this._narratedMode = true; // Auto-enable narrated mode on first gate
+      }
       this.callbacks.onGate?.(gate);
 
       // Question gates pause the workflow for user input
@@ -493,11 +592,29 @@ export class SessionStreamManager {
     return false;
   }
 
-  private getEndpoint(): string {
-    const { workItemId, standalone } = this.sessionContext;
-    return standalone
-      ? `/api/claude/sessions/${workItemId}/message`
-      : `/api/claude/${workItemId}/message`;
+  /**
+   * Clean up Tauri event listeners
+   */
+  private cleanupEventListeners(): void {
+    if (this.unlistenOutput) {
+      this.unlistenOutput();
+      this.unlistenOutput = null;
+    }
+    if (this.unlistenExit) {
+      this.unlistenExit();
+      this.unlistenExit = null;
+    }
+  }
+
+  /**
+   * Process any queued message after the current stream completes
+   */
+  private processQueuedMessage(): void {
+    if (this._queuedMessage && !this.stopped) {
+      const { message, images } = this._queuedMessage;
+      this._queuedMessage = null;
+      this.sendMessage(message, images);
+    }
   }
 
   /**
@@ -522,18 +639,16 @@ export class SessionStreamManager {
     this.reconnectTimeout = setTimeout(() => {
       if (this.stopped || !this.lastMessage) return;
 
-      // Remove the user message we added (will be re-added on retry)
-      // Find and remove the last user message
-      const lastUserIndex = this._messages.findLastIndex(m => m.type === 'user');
-      if (lastUserIndex >= 0) {
-        this._messages = this._messages.slice(0, lastUserIndex);
+      // Remove messages from the failed request (will be re-added on retry)
+      if (this._lastUserMessageIndex >= 0) {
+        this._messages = this._messages.slice(0, this._lastUserMessageIndex);
       }
 
       this._isReconnecting = false;
       this.notifyStateChange();
 
       // Retry the request
-      this.sendMessage(this.lastMessage, this.lastImages);
+      this.sendMessage(this.lastMessage, this.lastImages, { hidden: this._lastWasHidden });
     }, delay);
   }
 
@@ -542,22 +657,32 @@ export class SessionStreamManager {
   // -------------------------------------------------------------------------
 
   /**
-   * Send a message to Claude and stream the response
+   * Send a message to Claude and stream the response.
+   * When hidden is true, the user message is not added to visible messages —
+   * used for conversational sessions where Claude should speak first.
    */
-  async sendMessage(message: string, images?: AttachedImage[]): Promise<void> {
+  async sendMessage(message: string, images?: AttachedImage[], options?: { hidden?: boolean }): Promise<void> {
+    const hidden = options?.hidden ?? false;
     this.stopped = false;
+    this._stderrLines = [];
 
     // Store for potential retry/reconnect
     this.lastMessage = message;
     this.lastImages = images;
-
-    // Add user message immediately
-    const userMessage: ClaudeMessage = {
-      type: 'user',
-      content: message,
-      timestamp: Date.now(),
-    };
-    this.addMessage(userMessage);
+    this._lastWasHidden = hidden;
+
+    // Add user message immediately (unless hidden — conversational system instructions)
+    if (!hidden) {
+      const userMessage: ClaudeMessage = {
+        type: 'user',
+        content: message,
+        timestamp: Date.now(),
+      };
+      this._lastUserMessageIndex = this._messages.length;
+      this.addMessage(userMessage);
+    } else {
+      this._lastUserMessageIndex = this._messages.length;
+    }
 
     // For first message in a new session, show "creating" status
     // Conversational sessions skip the 5s delay and go straight to streaming
@@ -584,119 +709,152 @@ export class SessionStreamManager {
       this.notifyStateChange();
     }
 
-    // Create new abort controller for this request
-    if (this.abortController) {
-      this.abortController.abort();
-    }
-    this.abortController = new AbortController();
+    // Clean up any previous event listeners
+    this.cleanupEventListeners();
+
+    // Set up event listeners BEFORE spawning so we never miss events.
+    // Use a mutable ref for PID filtering — events arriving before the PID is set
+    // are from other processes and get filtered out. Once the spawn returns and
+    // the PID is assigned, all subsequent events from our process are captured.
+    const pidRef = { current: 0 };
 
     try {
-      const response = await fetch(this.getEndpoint(), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
+      await this.listenForProcessEvents(pidRef);
+
+      // Spawn Claude process via Tauri IPC
+      const pid = await invoke<number>('claude_start_stream', {
+        args: {
+          session_id: this.sessionContext.workItemId,
           message,
+          work_item_id: this.sessionContext.standalone ? null : Number(this.sessionContext.workItemId) || null,
           images: images?.map(img => ({
             type: img.type,
             data: img.dataUrl,
-          })),
-        }),
-        signal: this.abortController.signal,
+          })) || null,
+          is_continue: this._isContinue,
+          narrated_mode: this._narratedMode,
+          full_readout: this._fullReadoutMode,
+        },
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
-
-      if (!response.body) {
-        throw new Error('Response body is null');
-      }
-
-      await this.processStream(response.body);
+      // Set PID — events from our process will now be accepted by the listeners
+      pidRef.current = pid;
+      this.activePid = pid;
+      this._isContinue = true;  // subsequent messages use --continue
 
-      // Success - reset reconnect state
+      // Reset reconnect state on successful spawn
       this._reconnectAttempt = 0;
       this._isReconnecting = false;
     } catch (err) {
-      if (err instanceof Error && err.name !== 'AbortError') {
-        // Check if this is a network error that we should auto-retry
-        if (this.isNetworkError(err) && this._reconnectAttempt < RECONNECT_CONFIG.maxAttempts) {
-          this._error = `Connection lost. Reconnecting... (attempt ${this._reconnectAttempt + 1}/${RECONNECT_CONFIG.maxAttempts})`;
-          this.notifyStateChange();
-          this.scheduleReconnect();
-        } else {
-          // Non-network error or max attempts exhausted
-          this._status = 'error';
-          this._error = err.message;
-          this._canRetry = true; // Allow manual retry
-          this.notifyStateChange();
-        }
-      }
+      // Clean up listeners on failure
+      this.cleanupEventListeners();
+      // Tauri invoke rejects with strings (not Error objects), so handle both.
+      this._status = 'error';
+      this._error = err instanceof Error ? err.message : String(err);
+      this._canRetry = true;
+      this.notifyStateChange();
     }
   }
 
   /**
-   * Process SSE stream from response body
+   * Listen for Tauri process events and process Claude output.
+   * Replaces the old processStream() method that consumed SSE from fetch.
    */
-  private async processStream(body: ReadableStream<Uint8Array>): Promise<void> {
-    const reader = body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-
-    try {
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          this._status = 'done';
-          this.notifyStateChange();
-          break;
-        }
-
-        buffer += decoder.decode(value, { stream: true });
-
-        const lines = buffer.split('\n');
-        buffer = lines.pop() || '';
-
-        for (const line of lines) {
-          if (line.startsWith('data: ')) {
-            const data = line.slice(6);
-            try {
-              const parsed = JSON.parse(data);
-              const claudeMessage = transformClaudeMessage(parsed);
-
-              if (claudeMessage && !this.stopped) {
+  private async listenForProcessEvents(pidRef: { current: number }): Promise<void> {
+    // Listen for stdout/stderr line batches (backend sends batches of lines every ~50ms)
+    this.unlistenOutput = await listen<ProcessOutputBatchEvent>('process-output-batch', (event) => {
+      const { payload } = event;
+      if (pidRef.current === 0 || payload.pid !== pidRef.current) return;  // Filter to our process
+
+      if (payload.stream === 'stdout') {
+        for (const line of payload.lines) {
+          // Each stdout line from `claude --output-format stream-json` is a JSON object
+          try {
+            const parsed = JSON.parse(line);
+            this._rawEvents.push(parsed);
+            const result = transformClaudeMessage(parsed);
+            const claudeMessages = result === null ? [] : Array.isArray(result) ? result : [result];
+
+            for (const claudeMessage of claudeMessages) {
+              if (!this.stopped) {
                 this.addMessage(claudeMessage);
 
+                // Track last tool_use to correlate with tool_result
+                if (claudeMessage.type === 'tool_use') {
+                  this._lastToolUse = {
+                    name: claudeMessage.tool_name || '',
+                    command: (claudeMessage.tool_input as Record<string, string>)?.command || '',
+                  };
+                }
+
                 // Check for work item creation
                 if (this.sessionContext.standalone && this.callbacks.onWorkItemCreated) {
-                  const created = checkMessageForWorkItemCreation(claudeMessage);
-                  if (created) {
-                    this.callbacks.onWorkItemCreated(created.id, created.title);
+                  const wasBashJettypod = this._lastToolUse?.name === 'Bash'
+                    && this._lastToolUse.command.includes('jettypod');
+                  if (wasBashJettypod) {
+                    const created = checkMessageForWorkItemCreation(claudeMessage);
+                    if (created) {
+                      this.callbacks.onWorkItemCreated(created.id, created.title, this.sessionContext.workItemId);
+                    }
                   }
                 }
               }
+            }
 
-              // Handle completion states
-              if (parsed.type === 'result' || parsed.type === 'done') {
-                this._status = 'done';
-                this.notifyStateChange();
-              } else if (parsed.type === 'error') {
-                this._status = 'error';
-                this._error = parsed.content || 'Unknown error';
-                this.notifyStateChange();
-              }
-            } catch {
-              // Non-JSON line, skip
+            // Handle completion states from the JSON
+            if (parsed.type === 'result' || parsed.type === 'done') {
+              this._status = 'done';
+              this.notifyStateChange();
+              this.cleanupEventListeners();
+              // Defer queued message to next microtask to avoid setting up
+              // new listeners while old ones are being cleaned up
+              queueMicrotask(() => this.processQueuedMessage());
+              return;  // Stop processing batch on completion
+            } else if (parsed.type === 'error') {
+              this._status = 'error';
+              this._error = parsed.content || 'Unknown error';
+              this.notifyStateChange();
+              this.cleanupEventListeners();
+              return;  // Stop processing batch on error
             }
+          } catch {
+            // Non-JSON line from stdout, skip (e.g., progress indicators)
           }
         }
       }
-    } finally {
-      reader.releaseLock();
-    }
+      // Collect stderr lines so we can surface them if the process fails
+      if (payload.stream === 'stderr') {
+        this._stderrLines.push(...payload.lines);
+      }
+    });
+
+    // Listen for process exit
+    this.unlistenExit = await listen<ProcessExitEvent>('process-exit', (event) => {
+      const { payload } = event;
+      if (pidRef.current === 0 || payload.pid !== pidRef.current) return;
+
+      this.activePid = null;
+
+      // If status wasn't already set to 'done' by a result/done JSON message,
+      // set it based on exit code
+      if (this._status === 'streaming' || this._status === 'creating' || this._status === 'connecting') {
+        if (payload.code === 0) {
+          this._status = 'done';
+        } else {
+          this._status = 'error';
+          // Include stderr output so users can see why the process failed
+          const stderrSummary = this._stderrLines.join('\n').trim();
+          this._error = stderrSummary
+            ? `${stderrSummary}`
+            : `Process exited with code ${payload.code}`;
+          this._canRetry = true;
+        }
+        this.notifyStateChange();
+      }
+
+      this.cleanupEventListeners();
+      queueMicrotask(() => this.processQueuedMessage());
+    });
   }
 
   /**
@@ -705,11 +863,17 @@ export class SessionStreamManager {
   stop(): void {
     this.stopped = true;
 
-    if (this.abortController) {
-      this.abortController.abort();
-      this.abortController = null;
+    // Kill the active Claude process
+    if (this.activePid !== null) {
+      invoke('claude_stop_stream', { sessionId: this.sessionContext.workItemId }).catch(err => {
+        console.error('Failed to stop stream:', this.sessionContext.workItemId, err);
+      });
+      this.activePid = null;
     }
 
+    // Clean up event listeners
+    this.cleanupEventListeners();
+
     if (this.reconnectTimeout) {
       clearTimeout(this.reconnectTimeout);
       this.reconnectTimeout = null;
@@ -723,7 +887,7 @@ export class SessionStreamManager {
     this._status = 'idle';
     this._isReconnecting = false;
     this._reconnectAttempt = 0;
-    this._queuedMessage = null; // Clear queue on stop
+    this._queuedMessage = null;
     this.notifyStateChange();
   }
 
@@ -731,6 +895,8 @@ export class SessionStreamManager {
    * Clear all messages and reset state
    */
   clear(): void {
+    this.cleanupEventListeners();
+    this._isContinue = false;  // Reset continue flag
     this._messages = [];
     this._status = 'idle';
     this._error = null;
@@ -739,6 +905,8 @@ export class SessionStreamManager {
     this._isReconnecting = false;
     this._reconnectAttempt = 0;
     this._queuedMessage = null;
+    this._rawEvents = [];
+    this._stderrLines = [];
     this.lastMessage = null;
     this.lastImages = undefined;
     this.notifyStateChange();
@@ -758,16 +926,15 @@ export class SessionStreamManager {
     this._error = null;
     this._canRetry = false;
 
-    // Remove the failed user message (will be re-added on retry)
-    const lastUserIndex = this._messages.findLastIndex(m => m.type === 'user');
-    if (lastUserIndex >= 0) {
-      this._messages = this._messages.slice(0, lastUserIndex);
+    // Remove messages from the failed request (will be re-added on retry)
+    if (this._lastUserMessageIndex >= 0) {
+      this._messages = this._messages.slice(0, this._lastUserMessageIndex);
     }
 
     this.notifyStateChange();
 
     // Resend the last message
-    this.sendMessage(this.lastMessage, this.lastImages);
+    this.sendMessage(this.lastMessage, this.lastImages, { hidden: this._lastWasHidden });
   }
 
   /**
@@ -787,7 +954,9 @@ export class SessionStreamManager {
       timestamp: Date.now(),
     };
     this._messages = [...this._messages, gate];
-    this._narratedMode = true;
+    if (!this._userToggledNarratedMode) {
+      this._narratedMode = true;
+    }
     this.callbacks.onGate?.(gate);
     this.notifyStateChange();
   }
@@ -804,7 +973,12 @@ export class SessionStreamManager {
    */
   destroy(): void {
     this.stop();
+    // Remove session from Rust tracker
+    invoke('claude_remove_stream_session', { sessionId: this.sessionContext.workItemId }).catch(err => {
+      console.error('Failed to remove stream session:', this.sessionContext.workItemId, err);
+    });
     this._messages = [];
+    this._rawEvents = [];
   }
 }