sparkecoder 0.1.21 → 0.1.23

package/web/.next/standalone/web/src/components/chat-interface.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
+import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -70,10 +72,18 @@ import {
 import {
   PromptInput,
   PromptInputBody,
-  PromptInputTextarea,
   PromptInputFooter,
   PromptInputSubmit,
+  PromptInputHeader,
+  usePromptInputAttachments,
 } from '@/components/ai-elements/prompt-input';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentRemove,
+  AttachmentInfo,
+} from '@/components/ai-elements/attachments';
 import { Suggestion, Suggestions } from '@/components/ai-elements/suggestion';
 import {
   runAgent,
@@ -90,6 +100,8 @@ import {
   getSessionTodos,
   getSessionCheckpoints,
   revertToCheckpoint,
+  checkVersion,
+  createSession,
   type Session,
   type SSEEvent,
   type PendingApproval,
@@ -98,6 +110,8 @@ import {
   type TodosResponse,
   type SessionConfig,
   type Checkpoint,
+  type RunAgentAttachment,
+  type VersionInfo,
 } from '@/lib/api';
 import { TodoPanel } from '@/components/ai-elements/todo-panel';
 import { getConfig, type AppConfig } from '@/lib/config';
@@ -109,7 +123,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { MessageSquare, Copy, RefreshCw, AlertTriangle, Terminal as TerminalIcon, FileCode, Radio, Pencil, Check, Settings, RotateCcw, FolderOpen, PanelLeft } from 'lucide-react';
+import { MessageSquare, Copy, RefreshCw, AlertTriangle, Terminal as TerminalIcon, FileCode, Radio, Pencil, Check, Settings, RotateCcw, FolderOpen, PanelLeft, FileIcon, Download, X } from 'lucide-react';
 import { useSidebar } from '@/components/ui/sidebar';
 import {
   Dialog,
@@ -124,9 +138,15 @@ import { Input } from '@/components/ui/input';
 import { WriteFileTool, type WriteFileInput, type WriteFileOutput } from '@/components/ai-elements/write-file-tool';
 import { ReadFileTool, type ReadFileInput, type ReadFileOutput } from '@/components/ai-elements/read-file-tool';
 import { BashTool, type BashInput, type BashOutput } from '@/components/ai-elements/bash-tool';
+import { SearchTool, type SearchInput, type SearchOutput, type SubagentStep } from '@/components/ai-elements/search-tool';
 import { TodoTool, type TodoInput, type TodoOutput } from '@/components/ai-elements/todo-tool';
 import { LoadSkillTool, type LoadSkillInput, type LoadSkillOutput } from '@/components/ai-elements/load-skill-tool';
 import { LinterTool, type LinterInput, type LinterOutput } from '@/components/ai-elements/linter-tool';
+import { SpeechInput } from '@/components/ai-elements/speech-input';
+import {
+  MentionInputProvider,
+  MentionTextarea,
+} from '@/components/ai-elements/mention-input';
 
 interface ToolCallOutput {
   status?: string;
@@ -152,6 +172,22 @@ interface ToolCallInfo {
   terminalId?: string;
   /** Live terminal output being streamed */
   liveOutput?: string;
+  /** Live content for write_file streaming */
+  liveContent?: string;
+  /** Live old_string for write_file str_replace mode */
+  liveOldString?: string;
+  /** Live new_string for write_file str_replace mode */
+  liveNewString?: string;
+  /** Search subagent steps - for live search progress */
+  searchSteps?: SubagentStep[];
+}
+
+/** Attachment stored with user messages */
+interface UserAttachment {
+  type: 'image' | 'file';
+  data: string; // base64 data URL
+  mediaType?: string;
+  filename?: string;
 }
 
 interface ChatItem {
@@ -161,6 +197,8 @@ interface ChatItem {
   toolCall?: ToolCallInfo;
   /** For user messages: the message sequence number (used for revert) */
   messageSequence?: number;
+  /** For user messages: any attached files/images */
+  attachments?: UserAttachment[];
 }
 
 interface ChatInterfaceProps {
@@ -204,10 +242,62 @@ function SidebarToggle() {
   );
 }
 
+// Component to display attachments in the prompt input
+function PromptInputAttachmentsDisplay() {
+  const attachments = usePromptInputAttachments();
+  
+  if (attachments.files.length === 0) {
+    return null;
+  }
+  
+  return (
+    <Attachments variant="inline">
+      {attachments.files.map((attachment) => (
+        <Attachment
+          data={attachment}
+          key={attachment.id}
+          onRemove={() => attachments.remove(attachment.id)}
+        >
+          <AttachmentPreview />
+          <AttachmentInfo />
+          <AttachmentRemove />
+        </Attachment>
+      ))}
+    </Attachments>
+  );
+}
+
+// Custom submit button that checks both text input and attachments
+function ChatSubmitButton({ 
+  input, 
+  isRunning, 
+  onStop 
+}: { 
+  input: string; 
+  isRunning: boolean; 
+  onStop: () => void;
+}) {
+  const attachments = usePromptInputAttachments();
+  const hasContent = input.trim() || attachments.files.length > 0;
+  
+  return (
+    <PromptInputSubmit
+      disabled={!isRunning && !hasContent}
+      status={isRunning ? 'streaming' : 'ready'}
+      onStop={onStop}
+      className="bg-primary hover:bg-primary/90 transition-colors"
+    />
+  );
+}
+
 export function ChatInterface({ session }: ChatInterfaceProps) {
   const [chatItems, setChatItems] = useState<ChatItem[]>([]);
   const [input, setInput] = useState('');
+  const [interimTranscript, setInterimTranscript] = useState('');
   const [isRunning, setIsRunning] = useState(false);
+  const [sseDebugEnabled, setSseDebugEnabled] = useState(false);
+  const [sseDebugEvents, setSseDebugEvents] = useState<string[]>([]);
+  const [sseDebugErrors, setSseDebugErrors] = useState<string[]>([]);
   const [isWatching, setIsWatching] = useState(false); // True when watching another client's stream
   const [currentStreamId, setCurrentStreamId] = useState<string | null>(null);
   const [currentText, setCurrentText] = useState('');
@@ -238,11 +328,34 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
   const [sessionConfig, setSessionConfig] = useState<SessionConfig>(session.config || {});
   const [sessionSettingsOpen, setSessionSettingsOpen] = useState(false);
   const nameInputRef = useRef<HTMLInputElement>(null);
+  
+  // Version check state
+  const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null);
+  const [updateBannerDismissed, setUpdateBannerDismissed] = useState(false);
+  const [isCreatingUpdateSession, setIsCreatingUpdateSession] = useState(false);
+  const router = useRouter();
 
   // Load config for available models
   useEffect(() => {
     getConfig().then(setConfig);
   }, []);
+  
+  // Check for version updates on mount
+  useEffect(() => {
+    // Check localStorage for dismissed version
+    const dismissedVersion = localStorage.getItem('sparkecoder-dismissed-version');
+    
+    checkVersion()
+      .then((info) => {
+        // Only show banner if update available and not previously dismissed for this version
+        if (info.updateAvailable && info.latestVersion !== dismissedVersion) {
+          setVersionInfo(info);
+        }
+      })
+      .catch((err) => {
+        console.error('Failed to check version:', err);
+      });
+  }, []);
 
   // Sync local state when session changes (e.g., switching sessions or loading from CLI)
   useEffect(() => {
@@ -286,6 +399,36 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     }
   };
 
+  // Handle creating a session to update sparkecoder
+  const handleCreateUpdateSession = async () => {
+    if (!versionInfo?.updateCommand) return;
+    
+    setIsCreatingUpdateSession(true);
+    try {
+      const updateSession = await createSession({
+        name: `Update to v${versionInfo.latestVersion}`,
+      });
+      mutateSessions();
+      // Navigate to the new session - the user can then ask the agent to run the update
+      router.push(`/session/${updateSession.id}`);
+      // Dismiss the banner
+      setUpdateBannerDismissed(true);
+    } catch (err) {
+      console.error('Failed to create update session:', err);
+    } finally {
+      setIsCreatingUpdateSession(false);
+    }
+  };
+
+  // Handle dismissing the update banner
+  const handleDismissUpdateBanner = () => {
+    setUpdateBannerDismissed(true);
+    // Remember this version was dismissed
+    if (versionInfo?.latestVersion) {
+      localStorage.setItem('sparkecoder-dismissed-version', versionInfo.latestVersion);
+    }
+  };
+
   // Helper to unwrap AI Gateway format (output may be wrapped as { type: "json", value: ... })
   const unwrapOutput = (output: unknown): unknown => {
     if (output && typeof output === 'object' && 'type' in output && 'value' in output) {
@@ -317,11 +460,40 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     let messageSequence = 0;
     for (const msg of apiMessages) {
       if (msg.role === 'user') {
+        // Extract text and attachments from user message
+        let textContent = '';
+        const attachments: UserAttachment[] = [];
+        
+        if (typeof msg.content === 'string') {
+          textContent = msg.content;
+        } else if (Array.isArray(msg.content)) {
+          for (const part of msg.content) {
+            if (part.type === 'text' && 'text' in part) {
+              textContent += (part as { type: 'text'; text: string }).text;
+            } else if (part.type === 'image' && 'image' in part) {
+              const imagePart = part as { type: 'image'; image: string; mediaType?: string };
+              attachments.push({
+                type: 'image',
+                data: imagePart.image,
+                mediaType: imagePart.mediaType,
+              });
+            } else if (part.type === 'file' && 'data' in part) {
+              const filePart = part as { type: 'file'; data: string; mediaType?: string };
+              attachments.push({
+                type: 'file',
+                data: filePart.data,
+                mediaType: filePart.mediaType,
+              });
+            }
+          }
+        }
+        
         items.push({
           id: msg.id,
           type: 'user-message',
-          content: typeof msg.content === 'string' ? msg.content : '',
+          content: textContent,
           messageSequence, // Track sequence for revert
+          attachments: attachments.length > 0 ? attachments : undefined,
         });
       } else if (msg.role === 'assistant') {
         if (typeof msg.content === 'string') {
@@ -477,7 +649,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     if (event.type === 'tool-progress') {
       // Terminal started - subscribe to live output stream
       if (event.toolName === 'bash' && event.data.status === 'started') {
-        const terminalId = event.data.terminalId;
+        const terminalId = typeof event.data.terminalId === 'string' ? event.data.terminalId : undefined;
+        if (!terminalId) {
+          return;
+        }
         
         // Find the most recent bash tool call that doesn't have a terminal ID yet
         // Note: Status might be 'streaming' or 'running' depending on event order
@@ -511,6 +686,178 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           terminalStreamsRef.current.set(terminalId, cancelStream);
         }
       }
+      
+      // Write file progress - stream content as it's being written
+      // NOTE: Progress events may arrive BEFORE tool-input-available because the AI SDK
+      // executes tools before emitting the tool-call part. We handle this by creating
+      // a placeholder tool call when we receive the first progress event.
+      if (event.toolName === 'write_file') {
+        const data = event.data as { 
+          status: 'started' | 'content' | 'completed';
+          path?: string;
+          relativePath?: string;
+          mode?: 'full' | 'str_replace';
+          content?: string;
+          oldString?: string;
+          newString?: string;
+          chunkIndex?: number;
+          chunkCount?: number;
+          chunkStart?: number;
+          isChunked?: boolean;
+        };
+        
+        console.log(
+          '[FRONTEND] tool-progress received:',
+          event.toolName,
+          data.status,
+          data.isChunked ? `chunk=${data.chunkIndex}/${data.chunkCount}` : '',
+          `contentLength=${data.content?.length || 0}`,
+          'currentToolCalls:',
+          toolCallsRef.current.length
+        );
+        
+        // Find existing write_file tool call that's running/streaming
+        const existingWriteFile = toolCallsRef.current.find(
+          (tc) => tc.toolName === 'write_file' && (tc.status === 'running' || tc.status === 'streaming')
+        );
+        
+        if (data.status === 'started') {
+          if (!existingWriteFile) {
+            // Progress arrived before tool-input-available - create placeholder tool call
+            // Use the path as a temporary ID (will be updated when tool-input-available arrives)
+            console.log('[FRONTEND] Creating placeholder write_file tool call for:', data.path);
+            const placeholderToolCall: ToolCallInfo = {
+              toolCallId: `write_file_pending_${Date.now()}`,
+              toolName: 'write_file',
+              input: { path: data.relativePath || data.path, mode: data.mode || 'full' },
+              status: 'streaming',
+              liveContent: '',
+              liveOldString: '',
+              liveNewString: '',
+            };
+            toolCallsRef.current = [...toolCallsRef.current, placeholderToolCall];
+            console.log('[FRONTEND] After adding placeholder, toolCallsRef.current:', toolCallsRef.current.length);
+          } else {
+            // Tool call exists - initialize live content fields
+            toolCallsRef.current = toolCallsRef.current.map((tc) => {
+              if (tc.toolName === 'write_file' && (tc.status === 'running' || tc.status === 'streaming')) {
+                return { 
+                  ...tc, 
+                  liveContent: '',
+                  liveOldString: '',
+                  liveNewString: '',
+                };
+              }
+              return tc;
+            });
+          }
+          setCurrentToolCalls([...toolCallsRef.current]);
+        } else if (data.status === 'content') {
+          console.log('[FRONTEND] Received content for write_file, length:', data.content?.length || 0, 'existingWriteFile:', !!existingWriteFile);
+          if (!existingWriteFile) {
+            // Content arrived before we even got 'started' - create placeholder with content
+            console.log('[FRONTEND] Creating placeholder with content');
+            const placeholderToolCall: ToolCallInfo = {
+              toolCallId: `write_file_pending_${Date.now()}`,
+              toolName: 'write_file',
+              input: { path: data.relativePath || data.path, mode: data.mode || 'full' },
+              status: 'streaming',
+              liveContent: data.mode !== 'str_replace' ? (data.content || '') : '',
+              liveOldString: data.mode === 'str_replace' ? (data.oldString || '') : '',
+              liveNewString: data.mode === 'str_replace' ? (data.newString || '') : '',
+            };
+            toolCallsRef.current = [...toolCallsRef.current, placeholderToolCall];
+          } else {
+            console.log('[FRONTEND] Updating existing write_file with content');
+            // Update the tool call with the content
+            toolCallsRef.current = toolCallsRef.current.map((tc) => {
+              if (tc.toolName === 'write_file' && (tc.status === 'running' || tc.status === 'streaming')) {
+                if (data.mode === 'str_replace') {
+                  return { 
+                    ...tc, 
+                    liveOldString: data.oldString || '',
+                    liveNewString: data.newString || '',
+                  };
+                } else {
+                  const isChunked = data.isChunked || data.chunkIndex !== undefined || data.chunkCount !== undefined;
+                  const nextContent = data.content || '';
+                  return { 
+                    ...tc, 
+                    liveContent: isChunked ? (tc.liveContent || '') + nextContent : nextContent,
+                  };
+                }
+              }
+              return tc;
+            });
+          }
+          setCurrentToolCalls([...toolCallsRef.current]);
+        }
+        // 'completed' status is handled by the tool-output-available event
+      }
+      
+      // Search tool progress - stream subagent steps as they happen
+      if (event.toolName === 'search') {
+        const data = event.data as {
+          status: 'started' | 'step' | 'complete' | 'error';
+          subagentId?: string;
+          stepType?: 'thought' | 'tool_call' | 'tool_result' | 'text';
+          stepContent?: string;
+          toolName?: string;
+          toolInput?: unknown;
+          toolOutput?: unknown;
+          error?: string;
+        };
+        
+        console.log('[FRONTEND] Search tool-progress:', data.status, data.stepType || '');
+        
+        // Find existing search tool call that's running/streaming
+        const existingSearch = toolCallsRef.current.find(
+          (tc) => tc.toolName === 'search' && (tc.status === 'running' || tc.status === 'streaming')
+        );
+        
+        if (data.status === 'started') {
+          if (!existingSearch) {
+            // Progress arrived before tool-input-available - create placeholder
+            const placeholderToolCall: ToolCallInfo = {
+              toolCallId: `search_pending_${Date.now()}`,
+              toolName: 'search',
+              input: {},
+              status: 'streaming',
+              searchSteps: [],
+            };
+            toolCallsRef.current = [...toolCallsRef.current, placeholderToolCall];
+          } else {
+            // Initialize search steps
+            toolCallsRef.current = toolCallsRef.current.map((tc) => {
+              if (tc.toolName === 'search' && (tc.status === 'running' || tc.status === 'streaming')) {
+                return { ...tc, searchSteps: [] };
+              }
+              return tc;
+            });
+          }
+          setCurrentToolCalls([...toolCallsRef.current]);
+        } else if (data.status === 'step' && data.stepType) {
+          // Add step to the search tool call
+          const newStep: SubagentStep = {
+            id: `step_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+            type: data.stepType,
+            content: data.stepContent || '',
+            toolName: data.toolName,
+            toolInput: data.toolInput,
+            toolOutput: data.toolOutput,
+            timestamp: Date.now(),
+          };
+          
+          toolCallsRef.current = toolCallsRef.current.map((tc) => {
+            if (tc.toolName === 'search' && (tc.status === 'running' || tc.status === 'streaming')) {
+              return { ...tc, searchSteps: [...(tc.searchSteps || []), newStep] };
+            }
+            return tc;
+          });
+          setCurrentToolCalls([...toolCallsRef.current]);
+        }
+        // 'complete' and 'error' are handled by tool-output-available
+      }
       return;
     }
 
@@ -529,10 +876,36 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
         // Skip if this client initiated the stream (we already added the message in handleSubmit)
         if (event.data?.content && !isStreamInitiatorRef.current) {
           setChatItems((prev) => {
+            // Parse content - can be string or array with text/image/file parts
+            let textContent = '';
+            const attachments: UserAttachment[] = [];
+            
+            const rawContent = event.data.content;
+            if (typeof rawContent === 'string') {
+              textContent = rawContent;
+            } else if (Array.isArray(rawContent)) {
+              for (const part of rawContent as Array<{ type: string; text?: string; image?: string; data?: string; mediaType?: string }>) {
+                if (part.type === 'text' && part.text) {
+                  textContent += part.text;
+                } else if (part.type === 'image' && part.image) {
+                  attachments.push({
+                    type: 'image',
+                    data: part.image,
+                    mediaType: part.mediaType,
+                  });
+                } else if (part.type === 'file' && part.data) {
+                  attachments.push({
+                    type: 'file',
+                    data: part.data,
+                    mediaType: part.mediaType,
+                  });
+                }
+              }
+            }
+            
             // Check if we already have a user message with this content
-            // (handles ID mismatches between API-loaded messages and SSE events)
             const contentExists = prev.some(
-              (item) => item.type === 'user-message' && item.content === event.data.content
+              (item) => item.type === 'user-message' && item.content === textContent
             );
             if (contentExists) return prev;
             
@@ -540,7 +913,8 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
             return [...prev, {
               id: messageId,
               type: 'user-message',
-              content: event.data.content,
+              content: textContent,
+              attachments: attachments.length > 0 ? attachments : undefined,
             }];
           });
         }
@@ -629,6 +1003,25 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
         // Check if this tool call already exists (was streaming via tool-input-start)
         const existingToolCall = toolCallsRef.current.find(tc => tc.toolCallId === event.toolCallId);
         
+        // Check for placeholder write_file tool call created from early progress events
+        // (Progress events arrive before tool-input-available due to AI SDK timing)
+        const placeholderWriteFile = event.toolName === 'write_file' 
+          ? toolCallsRef.current.find(tc => 
+              tc.toolName === 'write_file' && 
+              tc.toolCallId.startsWith('write_file_pending_') &&
+              tc.status === 'streaming'
+            )
+          : undefined;
+        
+        // Check for placeholder search tool call created from early progress events
+        const placeholderSearch = event.toolName === 'search'
+          ? toolCallsRef.current.find(tc =>
+              tc.toolName === 'search' &&
+              tc.toolCallId.startsWith('search_pending_') &&
+              tc.status === 'streaming'
+            )
+          : undefined;
+        
         // Flush any remaining text before showing tool
         if (currentTextRef.current.trim()) {
           const textItem: ChatItem = {
@@ -641,17 +1034,35 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           setCurrentText('');
         }
         
-        // Create/update the tool call info
+        // Create/update the tool call info, preserving live content from placeholder
         const toolCallInfo: ToolCallInfo = {
           toolCallId: event.toolCallId,
           toolName: event.toolName,
           input: event.input,
           status: 'running' as const,
           streamingArgsText: existingToolCall?.streamingArgsText,
+          // Preserve live content from placeholder if it exists
+          liveContent: placeholderWriteFile?.liveContent,
+          liveOldString: placeholderWriteFile?.liveOldString,
+          liveNewString: placeholderWriteFile?.liveNewString,
+          // Preserve search steps from placeholder if it exists
+          searchSteps: placeholderSearch?.searchSteps,
         };
         
         // Update toolCallsRef
-        if (existingToolCall) {
+        if (placeholderWriteFile) {
+          // Replace the placeholder with the real tool call (with real toolCallId)
+          toolCallsRef.current = toolCallsRef.current.map((tc) => {
+            if (tc.toolCallId === placeholderWriteFile.toolCallId) return toolCallInfo;
+            return tc;
+          });
+        } else if (placeholderSearch) {
+          // Replace the search placeholder with the real tool call (with real toolCallId)
+          toolCallsRef.current = toolCallsRef.current.map((tc) => {
+            if (tc.toolCallId === placeholderSearch.toolCallId) return toolCallInfo;
+            return tc;
+          });
+        } else if (existingToolCall) {
           toolCallsRef.current = toolCallsRef.current.map((tc) => {
             if (tc.toolCallId !== event.toolCallId) return tc;
             return toolCallInfo;
@@ -818,6 +1229,9 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
 
   // Load messages and check for active streams when session changes
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    
     const loadMessagesAndCheckStream = async () => {
       setIsLoadingHistory(true);
       setChatItems([]);
@@ -838,6 +1252,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           getSessionMessages(session.id),
           getSessionCheckpoints(session.id).catch(() => ({ checkpoints: [] })),
         ]);
+        
+        // Don't update state if session changed during async work
+        if (isStale) return;
+        
         const sorted = [...apiMessages].sort((a, b) => 
           new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
         );
@@ -847,6 +1265,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
 
         // Check if there's an active stream to watch
         const streamInfo = await getActiveStream(session.id);
+        
+        // Check again after await
+        if (isStale) return;
+        
         if (streamInfo.hasActiveStream && streamInfo.stream) {
           console.log('Found active stream, connecting...', streamInfo.stream.streamId);
           isStreamInitiatorRef.current = false; // We're watching, not initiating
@@ -862,9 +1284,13 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           cancelRef.current = cancel;
         }
       } catch (err) {
-        console.error('Failed to load messages:', err);
+        if (!isStale) {
+          console.error('Failed to load messages:', err);
+        }
       } finally {
-        setIsLoadingHistory(false);
+        if (!isStale) {
+          setIsLoadingHistory(false);
+        }
       }
     };
     
@@ -875,6 +1301,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     
     // Cleanup on unmount or session change
     return () => {
+      isStale = true; // Mark as stale so async work doesn't update state
       if (cancelRef.current) {
         cancelRef.current();
         cancelRef.current = null;
@@ -887,9 +1314,15 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
 
   // Check for pending approvals - API is source of truth
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    const currentSessionId = session.id;
+    
     const checkApprovals = async () => {
       try {
-        const approvals = await getPendingApprovals(session.id);
+        const approvals = await getPendingApprovals(currentSessionId);
+        // Don't update state if session changed during async work
+        if (isStale) return;
         // Use API response as source of truth - this correctly filters out
         // already-handled approvals that might have come from SSE replay
         setPendingApprovals(approvals);
@@ -900,14 +1333,23 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     // Initial check
     checkApprovals();
     const interval = setInterval(checkApprovals, 2000);
-    return () => clearInterval(interval);
+    return () => {
+      isStale = true;
+      clearInterval(interval);
+    };
   }, [session.id]);
 
   // Poll for todos - more frequently when running
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    const currentSessionId = session.id;
+    
     const checkTodos = async () => {
       try {
-        const data = await getSessionTodos(session.id);
+        const data = await getSessionTodos(currentSessionId);
+        // Don't update state if session changed during async work
+        if (isStale) return;
         setTodosData(data);
       } catch {
         // Ignore errors
@@ -918,12 +1360,55 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     // Poll every 2 seconds when running, 5 seconds otherwise
     const pollInterval = isRunning ? 1000 : 5000;
     const interval = setInterval(checkTodos, pollInterval);
-    return () => clearInterval(interval);
+    return () => {
+      isStale = true;
+      clearInterval(interval);
+    };
   }, [session.id, isRunning]);
 
+  // Optional SSE debug overlay (enable with ?debugSSE=1)
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const params = new URLSearchParams(window.location.search);
+    const enabled = params.get('debugSSE') === '1';
+    setSseDebugEnabled(enabled);
+    if (!enabled) return;
+
+    (window as any).__sparkeSseDebug = true;
+
+    const onEvent = (event: Event) => {
+      const detail = (event as CustomEvent<{ type?: string; size?: number; label?: string; toolName?: string }>).detail;
+      const meta = [detail?.label, detail?.toolName].filter(Boolean).join(' ');
+      const label = detail?.type
+        ? `${detail.type}${meta ? ` ${meta}` : ''} (${detail?.size ?? 0}b)`
+        : 'unknown';
+      setSseDebugEvents((prev) => [...prev.slice(-49), label]);
+    };
+
+    const onParseError = (event: Event) => {
+      const detail = (event as CustomEvent<{ error?: string; size?: number }>).detail;
+      const label = `parse-error: ${detail?.error || 'unknown'} (${detail?.size ?? 0}b)`;
+      setSseDebugErrors((prev) => [...prev.slice(-49), label]);
+    };
+
+    window.addEventListener('sparke:sse-event', onEvent as EventListener);
+    window.addEventListener('sparke:sse-parse-error', onParseError as EventListener);
+
+    return () => {
+      window.removeEventListener('sparke:sse-event', onEvent as EventListener);
+      window.removeEventListener('sparke:sse-parse-error', onParseError as EventListener);
+      (window as any).__sparkeSseDebug = false;
+    };
+  }, []);
+
   // Poll for new active streams when not currently streaming
   // This allows auto-attaching to streams started from CLI or other tabs
   useEffect(() => {
+    // Track if this effect is stale (session changed during async work)
+    let isStale = false;
+    // Capture session.id for async closure
+    const currentSessionId = session.id;
+    
     const checkForNewStream = async () => {
       // Skip if we're already running, watching, or connecting
       if (isRunning || isConnectingRef.current) {
@@ -931,7 +1416,10 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
       }
       
       try {
-        const streamInfo = await getActiveStream(session.id);
+        const streamInfo = await getActiveStream(currentSessionId);
+        
+        // Don't process if session changed
+        if (isStale) return;
         
         if (streamInfo.hasActiveStream && streamInfo.stream) {
           const newStreamId = streamInfo.stream.streamId;
@@ -948,7 +1436,14 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
             // Refresh messages from server to get the user message that triggered this stream
             // This ensures we see the user message even if we missed the SSE event
             try {
-              const apiMessages = await getSessionMessages(session.id);
+              const apiMessages = await getSessionMessages(currentSessionId);
+              
+              // Check again after await
+              if (isStale) {
+                isConnectingRef.current = false;
+                return;
+              }
+              
               const sorted = [...apiMessages].sort((a, b) => 
                 new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
               );
@@ -958,13 +1453,19 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
               console.error('Failed to refresh messages:', err);
             }
             
+            // Final stale check before setting up stream
+            if (isStale) {
+              isConnectingRef.current = false;
+              return;
+            }
+            
             setIsWatching(true);
             setIsRunning(true);
             setCurrentStreamId(newStreamId);
             lastKnownStreamIdRef.current = newStreamId;
             
             // Start watching the stream
-            const cancel = watchStream(session.id, handleSSEEvent, {
+            const cancel = watchStream(currentSessionId, handleSSEEvent, {
               streamId: newStreamId,
               onStreamId: (id) => {
                 setCurrentStreamId(id);
@@ -985,17 +1486,28 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     const interval = setInterval(checkForNewStream, 1000);
     
     return () => {
+      isStale = true; // Mark as stale so async work doesn't update state
       clearInterval(interval);
     };
   }, [session.id, isRunning]);
 
-  const handleSubmit = () => {
-    if (!input.trim() || isRunning) return;
+  const handleSubmit = (promptText: string, attachments?: RunAgentAttachment[]) => {
+    if (!promptText.trim() && (!attachments || attachments.length === 0)) return;
+    if (isRunning) return;
+
+    // Convert RunAgentAttachment to UserAttachment for display
+    const userAttachments: UserAttachment[] | undefined = attachments?.map((a) => ({
+      type: a.type,
+      data: a.data,
+      mediaType: a.mediaType,
+      filename: a.filename,
+    }));
 
     const userItem: ChatItem = {
       id: `user-${Date.now()}`,
       type: 'user-message',
-      content: input,
+      content: promptText || '',
+      attachments: userAttachments,
     };
 
     setChatItems((prev) => [...prev, userItem]);
@@ -1011,14 +1523,66 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     currentReasoningRef.current = '';
     toolCallsRef.current = [];
 
-    const cancel = runAgent(session.id, input, handleSSEEvent, {
+    const cancel = runAgent(session.id, promptText || 'Please analyze the attached files.', handleSSEEvent, {
       onStreamId: (id) => setCurrentStreamId(id),
+      attachments,
     });
     
     // Store the cancel function so we can call it from the stop button
     cancelRef.current = cancel;
   };
 
+  // Handler for PromptInput that handles file attachments
+  // Note: @ mentions are now inline in the text (e.g., "analyze @src/components/")
+  const handlePromptSubmit = async (message: { text: string; files: Array<{ url?: string; filename?: string; mediaType?: string }> }) => {
+    if (isRunning) return;
+    
+    const hasText = Boolean(message.text?.trim());
+    const hasFiles = Boolean(message.files?.length);
+    
+    if (!hasText && !hasFiles) return;
+    
+    // Convert files to attachments for the API
+    const attachments: RunAgentAttachment[] = [];
+    
+    if (hasFiles && message.files.length > 0) {
+      for (const file of message.files) {
+        if (!file.url) continue;
+        
+        try {
+          // Fetch the blob and convert to base64
+          const response = await fetch(file.url);
+          const blob = await response.blob();
+          const base64 = await new Promise<string>((resolve) => {
+            const reader = new FileReader();
+            reader.onloadend = () => resolve(reader.result as string);
+            reader.readAsDataURL(blob);
+          });
+          
+          // Determine if it's an image or file
+          const mediaType = file.mediaType || blob.type || 'application/octet-stream';
+          const isImage = mediaType.startsWith('image/');
+          
+          attachments.push({
+            type: isImage ? 'image' : 'file',
+            data: base64,
+            mediaType,
+            filename: file.filename,
+          });
+        } catch (err) {
+          console.error('Failed to process attachment:', err);
+        }
+      }
+    }
+    
+    // Text already contains @mentions inline (e.g., "explain @src/utils.ts")
+    // Just send it directly - the agent will see the @ references
+    handleSubmit(message.text || '', attachments.length > 0 ? attachments : undefined);
+  };
+
+  // Slash commands now insert prompt text directly via MentionTextarea
+  // No handler needed - the component inserts the prompt text inline
+
   const handleStop = async () => {
     // Send abort request to server - this stops the agent properly
     // The agent will send an abort event back through the stream
@@ -1070,29 +1634,34 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
   };
 
   const handleApprove = async (approval: PendingApproval) => {
+    // Always remove from UI immediately - if it's stale, it shouldn't be shown anyway
+    setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     try {
       await approveExecution(session.id, approval.toolCallId);
-      setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     } catch (err) {
       console.error('Failed to approve:', err);
+      // Don't add back - the API poll will restore it if it's still valid
     }
   };
 
   const handleReject = async (approval: PendingApproval) => {
+    // Always remove from UI immediately - if it's stale, it shouldn't be shown anyway
+    setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     try {
       await rejectExecution(session.id, approval.toolCallId, 'User rejected');
-      setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     } catch (err) {
       console.error('Failed to reject:', err);
+      // Don't add back - the API poll will restore it if it's still valid
     }
   };
 
   // Handle "Don't show again" - approve and disable approval for this tool
   const handleApproveAndDisable = async (approval: PendingApproval) => {
+    // Always remove from UI immediately - if it's stale, it shouldn't be shown anyway
+    setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
     try {
       // First approve this execution
       await approveExecution(session.id, approval.toolCallId);
-      setPendingApprovals((prev) => prev.filter((a) => a.id !== approval.id));
       
       // Then disable approval for this tool in session config
       const updatedSession = await updateToolApproval(
@@ -1106,6 +1675,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
       setSessionConfig(updatedSession.config || {});
     } catch (err) {
       console.error('Failed to approve and disable:', err);
+      // Don't add back - the API poll will restore it if it's still valid
     }
   };
 
@@ -1204,6 +1774,19 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
       );
     }
 
+    // Search tool - use dedicated SearchTool component with subagent steps
+    if (tc.toolName === 'search') {
+      return (
+        <SearchTool
+          input={tc.input as SearchInput}
+          output={tc.output as SearchOutput}
+          status={tc.status}
+          steps={tc.searchSteps}
+          className="mt-2"
+        />
+      );
+    }
+
     // Todo tool - use dedicated TodoTool component
     if (tc.toolName === 'todo') {
       return (
@@ -1588,6 +2171,57 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
         </div>
       </div>
 
+      {/* Update Available Banner */}
+      {versionInfo?.updateAvailable && !updateBannerDismissed && (
+        <div className="px-4 py-2 border-b border-amber-500/30 bg-amber-500/10 flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <Download className="size-4 text-amber-600 dark:text-amber-400 shrink-0" />
+            <span className="text-sm text-amber-700 dark:text-amber-300">
+              Update available: <strong>v{versionInfo.latestVersion}</strong>
+              <span className="text-amber-600/70 dark:text-amber-400/70 ml-1">
+                (current: v{versionInfo.currentVersion})
+              </span>
+            </span>
+          </div>
+          <div className="flex items-center gap-2 shrink-0">
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-7 text-xs border-amber-500/50 bg-amber-500/20 hover:bg-amber-500/30 text-amber-700 dark:text-amber-300"
+              onClick={handleCreateUpdateSession}
+              disabled={isCreatingUpdateSession}
+            >
+              {isCreatingUpdateSession ? (
+                <>
+                  <RefreshCw className="size-3 mr-1.5 animate-spin" />
+                  Creating...
+                </>
+              ) : (
+                <>
+                  <Download className="size-3 mr-1.5" />
+                  Update Now
+                </>
+              )}
+            </Button>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="size-6 text-amber-600 dark:text-amber-400 hover:bg-amber-500/20"
+                    onClick={handleDismissUpdateBanner}
+                  >
+                    <X className="size-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Dismiss (won't show again for this version)</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </div>
+      )}
+
       {/* Todo Panel - sticky at top */}
       {todosData && todosData.todos && todosData.todos.length > 0 && (
         <div className="px-4 py-2 border-b border-border/50 bg-muted/20">
@@ -1699,12 +2333,22 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
           {/* Chat items */}
           {chatItems
             // Filter out tool calls that are pending approval (shown in approval section above)
+            // Also filter out tool calls that are currently streaming (shown in streaming section below)
             .filter((item) => {
               if (item.type === 'tool-call' && item.toolCall) {
                 const isPendingApproval = pendingApprovals.some(
                   (a) => a.toolCallId === item.toolCall?.toolCallId
                 );
                 if (isPendingApproval) return false;
+                
+                // Don't show if it's currently in the streaming tool calls
+                const isStreaming = currentToolCalls.some(
+                  (tc) => tc.toolCallId === item.toolCall?.toolCallId ||
+                    // Also check for placeholder matches (same tool name, streaming status)
+                    (tc.toolName === item.toolCall?.toolName && 
+                     (tc.status === 'streaming' || tc.status === 'running'))
+                );
+                if (isStreaming) return false;
               }
               return true;
             })
@@ -1717,7 +2361,35 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
               return (
                 <Message key={item.id} from="user">
                   <MessageContent>
-                    <p className="whitespace-pre-wrap">{item.content}</p>
+                    {/* Display attachments if any */}
+                    {item.attachments && item.attachments.length > 0 && (
+                      <div className="flex flex-wrap gap-2 mb-2">
+                        {item.attachments.map((attachment, idx) => (
+                          <div key={idx} className="relative">
+                            {attachment.type === 'image' ? (
+                              <div className="relative rounded-lg overflow-hidden border border-border/50 max-w-[200px]">
+                                {/* eslint-disable-next-line @next/next/no-img-element */}
+                                <img
+                                  src={attachment.data.startsWith('data:') ? attachment.data : `data:${attachment.mediaType || 'image/png'};base64,${attachment.data}`}
+                                  alt={attachment.filename || 'Image attachment'}
+                                  className="max-w-full h-auto max-h-[150px] object-contain"
+                                />
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted/50 border border-border/50">
+                                <FileIcon className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-sm text-muted-foreground truncate max-w-[150px]">
+                                  {attachment.filename || 'File'}
+                                </span>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                    {item.content && (
+                      <p className="whitespace-pre-wrap">{item.content}</p>
+                    )}
                   </MessageContent>
                   {hasCheckpoint && !isRunning && (
                     <MessageActions className="justify-end mt-1">
@@ -1779,6 +2451,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
                           onClick={() => navigator.clipboard.writeText(item.content || '')}
                         >
                           <Copy className="size-3" />
+                          
                         </MessageAction>
                       </MessageActions>
                     </div>
@@ -1800,6 +2473,9 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
                     output={tc.output as WriteFileOutput}
                     status={tc.status}
                     streamingArgsText={tc.streamingArgsText}
+                    liveContent={tc.liveContent}
+                    liveOldString={tc.liveOldString}
+                    liveNewString={tc.liveNewString}
                   />
                 );
               }
@@ -1830,6 +2506,19 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
                 );
               }
               
+              // Use dedicated SearchTool component for search
+              if (tc.toolName === 'search') {
+                return (
+                  <SearchTool
+                    key={item.id}
+                    input={tc.input as SearchInput}
+                    output={tc.output as SearchOutput}
+                    status={tc.status}
+                    steps={tc.searchSteps}
+                  />
+                );
+              }
+              
               // Use dedicated TodoTool component for todo
               if (tc.toolName === 'todo') {
                 return (
@@ -1949,6 +2638,9 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
                   output={tc.output as WriteFileOutput}
                   status={tc.status}
                   streamingArgsText={tc.streamingArgsText}
+                  liveContent={tc.liveContent}
+                  liveOldString={tc.liveOldString}
+                  liveNewString={tc.liveNewString}
                 />
               );
             }
@@ -1979,6 +2671,19 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
               );
             }
 
+            // Use dedicated SearchTool component for search
+            if (tc.toolName === 'search') {
+              return (
+                <SearchTool
+                  key={tc.toolCallId}
+                  input={tc.input as SearchInput}
+                  output={tc.output as SearchOutput}
+                  status={tc.status}
+                  steps={tc.searchSteps}
+                />
+              );
+            }
+
             // Use dedicated TodoTool component for todo
             if (tc.toolName === 'todo') {
               return (
@@ -2046,6 +2751,23 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
         <ConversationScrollButton />
       </Conversation>
 
+        {sseDebugEnabled && (
+          <div className="fixed bottom-28 right-4 w-80 max-h-80 overflow-auto border bg-background/95 shadow-lg rounded-md text-xs">
+            <div className="px-3 py-2 border-b font-mono text-muted-foreground">SSE Debug</div>
+            <div className="px-3 py-2 space-y-1">
+              {sseDebugEvents.length === 0 && sseDebugErrors.length === 0 && (
+                <div className="text-muted-foreground">No events yet</div>
+              )}
+              {sseDebugEvents.map((evt, index) => (
+                <div key={`evt-${index}`} className="font-mono">{evt}</div>
+              ))}
+              {sseDebugErrors.map((err, index) => (
+                <div key={`err-${index}`} className="font-mono text-red-600">{err}</div>
+              ))}
+            </div>
+          </div>
+        )}
+
       {/* Input */}
       <div className="border-t border-border/50 p-4 pb-6 bg-card/30">
         <div className="max-w-3xl mx-auto">
@@ -2064,30 +2786,78 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
             </Suggestions>
           )}
           
-          <PromptInput
-            onSubmit={handleSubmit}
-            className="shadow-sm"
-          >
-            <PromptInputBody>
-              <PromptInputTextarea
-                value={input}
-                onChange={(e) => setInput(e.target.value)}
-                placeholder="Ask SparkECoder to help..."
-                disabled={isRunning}
-                autoFocus
-                className="min-h-[80px] focus:ring-2 focus:ring-primary/20 transition-all"
-              />
-            </PromptInputBody>
-            <PromptInputFooter>
-              <div className="flex-1" />
-              <PromptInputSubmit
-                disabled={!isRunning && !input.trim()}
-                status={isRunning ? 'streaming' : 'ready'}
-                onStop={handleStop}
-                className="bg-primary hover:bg-primary/90 transition-colors"
-              />
-            </PromptInputFooter>
-          </PromptInput>
+          <MentionInputProvider>
+            <PromptInput
+              onSubmit={handlePromptSubmit}
+              className="shadow-sm"
+              globalDrop
+              multiple
+            >
+              <PromptInputHeader>
+                <PromptInputAttachmentsDisplay />
+              </PromptInputHeader>
+              <PromptInputBody>
+                <div className="relative w-full">
+                  <MentionTextarea
+                    sessionId={session.id}
+                    value={input + (interimTranscript ? (input && !input.endsWith(' ') && !input.endsWith('\n') ? ' ' : '') + interimTranscript : '')}
+                    onChange={(value) => {
+                      // Only update if not currently showing interim transcript
+                      if (!interimTranscript) {
+                        setInput(value);
+                      } else {
+                        // If user types while interim is showing, clear interim and use their input
+                        setInterimTranscript('');
+                        setInput(value);
+                      }
+                    }}
+                    placeholder="Ask SparkECoder... (@ to mention files, / for commands)"
+                    disabled={isRunning}
+                    autoFocus
+                    className={cn(
+                      "min-h-[80px] focus:ring-2 focus:ring-primary/20 transition-all field-sizing-content max-h-48",
+                      interimTranscript && "caret-red-500"
+                    )}
+                  />
+                  {/* Live transcription indicator */}
+                  {interimTranscript && (
+                    <div className="absolute bottom-2 right-2 flex items-center gap-1.5 text-xs text-red-500 bg-background/80 backdrop-blur-sm px-2 py-1 rounded-full">
+                      <span className="size-2 bg-red-500 rounded-full animate-pulse" />
+                      Listening...
+                    </div>
+                  )}
+                </div>
+              </PromptInputBody>
+              <PromptInputFooter>
+                <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                  <span className="hidden sm:inline">Type @ to mention files, / for commands</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <SpeechInput
+                    size="icon"
+                    className="size-9"
+                    onTranscriptionChange={(text) => {
+                      // Add finalized transcript to input
+                      setInput((prev) => {
+                        const needsSpace = prev && !prev.endsWith(' ') && !prev.endsWith('\n');
+                        return prev + (needsSpace ? ' ' : '') + text;
+                      });
+                    }}
+                    onInterimTranscription={(text) => {
+                      // Show live preview of what's being spoken
+                      setInterimTranscript(text);
+                    }}
+                    disabled={isRunning}
+                  />
+                  <ChatSubmitButton 
+                    input={input + interimTranscript} 
+                    isRunning={isRunning} 
+                    onStop={handleStop} 
+                  />
+                </div>
+              </PromptInputFooter>
+            </PromptInput>
+          </MentionInputProvider>
         </div>
       </div>
     </div>