sparkecoder 0.1.51 → 0.1.53

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

@@ -116,6 +116,7 @@ import {
 import { TodoPanel } from '@/components/ai-elements/todo-panel';
 import { getConfig, type AppConfig } from '@/lib/config';
 import { mutateSessions } from '@/hooks/use-sessions';
+import { useNotificationSound } from '@/hooks/use-notification-sound';
 import {
   Select,
   SelectContent,
@@ -368,6 +369,10 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
   const [pendingSelectedElements, setPendingSelectedElements] = useState<string | null>(null);
   const [isRunning, setIsRunning] = useState(false);
   const [messageQueue, setMessageQueue] = useState<QueuedMessage[]>([]);
+  // Ref mirror of messageQueue so SSE event handlers can read the latest queue
+  // without stale closures. Updated on every render.
+  const messageQueueRef = useRef<QueuedMessage[]>([]);
+  messageQueueRef.current = messageQueue;
   const [editingQueueId, setEditingQueueId] = useState<string | null>(null);
   const [editingQueueText, setEditingQueueText] = useState('');
   const [queueExpanded, setQueueExpanded] = useState(true);
@@ -405,6 +410,13 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
   const [sessionSettingsOpen, setSessionSettingsOpen] = useState(false);
   const nameInputRef = useRef<HTMLInputElement>(null);
   
+  // Track current session ID via ref so async callbacks can check for staleness
+  const sessionIdRef = useRef(session.id);
+  sessionIdRef.current = session.id;
+  
+  // Notification sound
+  const { playDing } = useNotificationSound();
+
   // Version check state
   const [versionInfo, setVersionInfo] = useState<VersionInfo | null>(null);
   const [updateBannerDismissed, setUpdateBannerDismissed] = useState(false);
@@ -1172,16 +1184,19 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
         setCurrentToolCalls([...toolCallsRef.current]);
         
         // Add to chatItems (or update if already there from API load)
+        // Spread completedTool first to preserve extra fields like exploreSteps,
+        // then override with the final output and status
         const completedToolItem: ChatItem = {
           id: `tool-${event.toolCallId}`,
           type: 'tool-call',
           toolCall: {
+            ...(completedTool || {}),
             toolCallId: event.toolCallId,
             toolName: completedTool?.toolName || 'unknown',
             input: completedTool?.input || {},
             output: unwrappedOutput,
             status: finalStatus,
-          },
+          } as ToolCallInfo,
         };
         
         setChatItems((prev) => {
@@ -1224,6 +1239,47 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
         break;
 
       case 'finish':
+        // Flush any remaining streaming text into chatItems BEFORE clearing
+        if (currentTextRef.current.trim()) {
+          const remainingTextItem: ChatItem = {
+            id: `text-finish-${Date.now()}`,
+            type: 'assistant-text',
+            content: currentTextRef.current,
+          };
+          setChatItems((prev) => [...prev, remainingTextItem]);
+        }
+        
+        // Flush any remaining reasoning
+        if (currentReasoningRef.current.trim()) {
+          const remainingReasoningItem: ChatItem = {
+            id: `reasoning-finish-${Date.now()}`,
+            type: 'reasoning',
+            content: currentReasoningRef.current,
+          };
+          setChatItems((prev) => [...prev, remainingReasoningItem]);
+        }
+        
+        // Move any remaining streaming tool calls into chatItems so they stay visible
+        // (e.g. tool calls whose output arrived but weren't yet committed)
+        if (toolCallsRef.current.length > 0) {
+          const remainingTools: ChatItem[] = toolCallsRef.current.map((tc) => ({
+            id: `tool-${tc.toolCallId}`,
+            type: 'tool-call' as const,
+            toolCall: {
+              ...tc,
+              status: tc.status === 'streaming' || tc.status === 'running' ? 'completed' as const : tc.status,
+            },
+          }));
+          setChatItems((prev) => {
+            // Only add tools that aren't already in chatItems
+            const existingToolIds = new Set(
+              prev.filter(i => i.type === 'tool-call').map(i => i.toolCall?.toolCallId)
+            );
+            const newTools = remainingTools.filter(t => !existingToolIds.has(t.toolCall?.toolCallId));
+            return newTools.length > 0 ? [...prev, ...newTools] : prev;
+          });
+        }
+        
         // Reset streaming state
         setCurrentText('');
         setCurrentReasoning('');
@@ -1239,21 +1295,34 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
         // Don't reset lastKnownStreamIdRef here - it helps prevent reconnecting to same stream
         setIsRunning(false);
         setIsWatching(false);
+        playDing();
         
-        // Reload messages and checkpoints after stream finishes
-        // This ensures messages have proper messageSequence for the revert button
-        // and avoids duplicate key issues from streaming vs API-loaded items
-        Promise.all([
-          getSessionMessages(session.id),
-          getSessionCheckpoints(session.id).catch(() => ({ checkpoints: [] })),
-        ]).then(([apiMessages, checkpointsData]) => {
-          const sorted = [...apiMessages].sort((a, b) => 
-            new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
-          );
-          const converted = convertApiMessages(sorted);
-          setChatItems(converted);
-          setCheckpoints(checkpointsData.checkpoints || []);
-        }).catch(() => {}); // Silently ignore errors
+        // Only refresh checkpoints (for revert buttons) - NOT chatItems.
+        {
+          const finishSessionId = session.id;
+          getSessionCheckpoints(finishSessionId)
+            .then((checkpointsData) => {
+              if (sessionIdRef.current !== finishSessionId) return;
+              setCheckpoints(checkpointsData.checkpoints || []);
+            })
+            .catch(() => {});
+        }
+        
+        // Send next queued message directly from the finish event.
+        // This is the correct place to do it: one event → one send.
+        // No useEffect, no timers, no race conditions.
+        {
+          const queue = messageQueueRef.current;
+          if (queue.length > 0) {
+            const next = queue[0];
+            setMessageQueue((prev) => prev.slice(1));
+            // Small delay so React can commit the state reset above first,
+            // then start the new stream in a fresh render cycle
+            setTimeout(() => {
+              executeSubmitRef.current(next.text, next.attachments, next.selectedElements);
+            }, 50);
+          }
+        }
         break;
 
       case 'abort':
@@ -1794,46 +1863,12 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
     setIsWatching(false);
   };
 
-  // Keep a ref to executeSubmit so the auto-send effect always calls the
-  // latest version (avoids stale closure capturing old handleSSEEvent, etc.)
+  // Ref to executeSubmit so SSE handlers and sendNow can always call the latest version
   const executeSubmitRef = useRef(executeSubmit);
   executeSubmitRef.current = executeSubmit;
-
-  // Auto-send next queued message when assistant finishes
-  const prevIsRunningRef = useRef(isRunning);
-  const skipAutoSendRef = useRef(false); // Set by sendNow to prevent double-send
-  useEffect(() => {
-    const wasRunning = prevIsRunningRef.current;
-    prevIsRunningRef.current = isRunning;
-
-    // Auto-send whenever we're idle and there are queued messages.
-    // This covers both:
-    // 1. Agent just finished (wasRunning=true → isRunning=false) with a queue
-    // 2. Queue got a new item while already idle (e.g., agent finished BEFORE
-    //    the user queued a message, so the running→stopped transition was missed)
-    // Safe because executeSubmit sets isRunning=true, preventing re-entry
-    // until the next agent response finishes.
-    const shouldAutoSend = !isRunning && messageQueue.length > 0;
-
-    if (shouldAutoSend) {
-      // If sendNow triggered the stop, skip auto-send (it handles its own send)
-      if (skipAutoSendRef.current) {
-        skipAutoSendRef.current = false;
-        return;
-      }
-      // Small delay to let UI settle
-      const timer = setTimeout(() => {
-        setMessageQueue((prev) => {
-          if (prev.length === 0) return prev;
-          const [next, ...rest] = prev;
-          // Use ref to always call the latest executeSubmit (not a stale closure)
-          executeSubmitRef.current(next.text, next.attachments, next.selectedElements);
-          return rest;
-        });
-      }, 300);
-      return () => clearTimeout(timer);
-    }
-  }, [isRunning, messageQueue.length]);
+  
+  // Note: Queue auto-send is handled directly in the 'finish' SSE event handler,
+  // not via useEffect. This avoids timers, stale closures, and double-fires.
 
   // Queue management helpers
   const removeFromQueue = (id: string) => {
@@ -1870,11 +1905,9 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
     // Remove from queue  
     setMessageQueue((prev) => prev.filter((m) => m.id !== id));
     
-    // Stop current if running
+    // Stop current if running, then send after it settles
     if (isRunning) {
-      skipAutoSendRef.current = true; // Prevent auto-send from firing
       await handleStop();
-      // Wait for stop to settle, then send using ref for fresh closure
       setTimeout(() => {
         executeSubmitRef.current(item.text, item.attachments, item.selectedElements);
       }, 500);
@@ -2616,14 +2649,17 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
                 );
                 if (isPendingApproval) return false;
                 
-                // Don't show if it's currently in the streaming tool calls
+                // Don't show if this exact tool call is currently in the streaming section
                 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'))
+                  (tc) => tc.toolCallId === item.toolCall?.toolCallId
+                );
+                // Also hide if there's a placeholder that will be replaced by this tool
+                // (placeholder toolCallIds start with the toolName + "_pending_")
+                const hasPlaceholder = currentToolCalls.some(
+                  (tc) => tc.toolCallId.startsWith(`${item.toolCall?.toolName}_pending_`) &&
+                    (tc.status === 'streaming' || tc.status === 'running')
                 );
-                if (isStreaming) return false;
+                if (isStreaming || hasPlaceholder) return false;
               }
               return true;
             })

package/web/.next/standalone/web/src/components/sessions-sidebar.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Plus, MessageSquare, Trash2, Loader2, Settings, PanelLeftClose, PanelLeft, Key, Check, X, Eye, EyeOff } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, Loader2, Settings, PanelLeftClose, PanelLeft, Key, Check, X, Eye, EyeOff, Volume2 } from 'lucide-react';
 import {
   Sidebar,
   SidebarContent,
@@ -45,6 +45,7 @@ import { createSession, deleteSession, getApiKeys, setApiKey, type ApiKeyStatus
 import { getConfig, type AppConfig } from '@/lib/config';
 import { cn } from '@/lib/utils';
 import { useSessions, mutateSessions } from '@/hooks/use-sessions';
+import { useNotificationSound } from '@/hooks/use-notification-sound';
 
 // Format relative time like "2m", "1h", "3d"
 function formatRelativeTime(dateString: string): string {
@@ -87,6 +88,9 @@ export function SessionsSidebar() {
   const [showApiKey, setShowApiKey] = useState(false);
   const [savingApiKey, setSavingApiKey] = useState(false);
 
+  // Notification sound setting
+  const { enabled: soundEnabled, setEnabled: setSoundEnabled } = useNotificationSound();
+
   // Detect if we're in embed mode
   const isEmbedMode = pathname.startsWith('/embed/');
   
@@ -828,6 +832,24 @@ export function SessionsSidebar() {
                       </div>
                     </div>
 
+                    {/* Notification Sound */}
+                    <div className="space-y-1.5">
+                      <Label className="flex items-center gap-2 text-sm font-medium">
+                        <Volume2 className="size-4" />
+                        Notification Sound
+                      </Label>
+                      <div className="flex items-center justify-between rounded-lg border p-2.5 bg-muted/30">
+                        <div className="space-y-0">
+                          <span className="text-sm font-medium">Play sound when done</span>
+                          <p className="text-[11px] text-muted-foreground">Ding when the assistant finishes responding</p>
+                        </div>
+                        <Switch
+                          checked={soundEnabled}
+                          onCheckedChange={setSoundEnabled}
+                        />
+                      </div>
+                    </div>
+
                     <p className="text-xs text-muted-foreground">
                       These settings apply to new sessions. You can also change the model per-session in the chat header.
                     </p>

package/web/.next/standalone/web/src/hooks/use-notification-sound.ts

@@ -0,0 +1,78 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+const STORAGE_KEY = 'sparkecoder_notification_sound';
+
+/**
+ * Synthesize a pleasant two-tone "ding" using the Web Audio API.
+ * No audio file needed – it generates the tones on the fly.
+ */
+function playDingSound() {
+  try {
+    const ctx = new (window.AudioContext || (window as any).webkitAudioContext)();
+
+    // --- first tone (higher, shorter) ---
+    const osc1 = ctx.createOscillator();
+    const gain1 = ctx.createGain();
+    osc1.type = 'sine';
+    osc1.frequency.setValueAtTime(880, ctx.currentTime); // A5
+    gain1.gain.setValueAtTime(0.3, ctx.currentTime);
+    gain1.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
+    osc1.connect(gain1);
+    gain1.connect(ctx.destination);
+    osc1.start(ctx.currentTime);
+    osc1.stop(ctx.currentTime + 0.3);
+
+    // --- second tone (slightly higher, slightly delayed) ---
+    const osc2 = ctx.createOscillator();
+    const gain2 = ctx.createGain();
+    osc2.type = 'sine';
+    osc2.frequency.setValueAtTime(1174.66, ctx.currentTime + 0.15); // D6
+    gain2.gain.setValueAtTime(0.0001, ctx.currentTime);
+    gain2.gain.setValueAtTime(0.25, ctx.currentTime + 0.15);
+    gain2.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5);
+    osc2.connect(gain2);
+    gain2.connect(ctx.destination);
+    osc2.start(ctx.currentTime + 0.15);
+    osc2.stop(ctx.currentTime + 0.5);
+
+    // Clean up context after the sound finishes
+    setTimeout(() => ctx.close(), 600);
+  } catch {
+    // Silently ignore – e.g. if AudioContext isn't available
+  }
+}
+
+/**
+ * Hook to manage the notification sound setting and playback.
+ *
+ * - `enabled` / `setEnabled` – toggle stored in localStorage
+ * - `playDing()` – plays the ding only when enabled
+ */
+export function useNotificationSound() {
+  const [enabled, setEnabledState] = useState(() => {
+    if (typeof window === 'undefined') return true;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored === null ? true : stored === 'true'; // default ON
+  });
+
+  // Keep a ref so callbacks that capture stale closures still see the latest value
+  const enabledRef = useRef(enabled);
+  useEffect(() => {
+    enabledRef.current = enabled;
+  }, [enabled]);
+
+  const setEnabled = useCallback((value: boolean) => {
+    setEnabledState(value);
+    localStorage.setItem(STORAGE_KEY, String(value));
+  }, []);
+
+  const playDing = useCallback(() => {
+    if (enabledRef.current) {
+      playDingSound();
+    }
+  }, []);
+
+  return { enabled, setEnabled, playDing } as const;
+}