sparkecoder 0.1.21 → 0.1.23

package/web/.next/standalone/web/src/components/ai-elements/search-tool.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  SearchIcon,
+  XCircleIcon,
+  Loader2Icon,
+  FileIcon,
+  CodeIcon,
+  FolderIcon,
+  TerminalIcon,
+  FileTextIcon,
+  BotIcon,
+  ExternalLinkIcon,
+  MaximizeIcon,
+} from "lucide-react";
+import { useState, useEffect, useRef } from "react";
+import { SubagentModal } from "./subagent-modal";
+
+export interface SearchInput {
+  query: string;
+  context?: string;
+}
+
+export interface SearchFinding {
+  type: "file" | "match" | "pattern";
+  path: string;
+  content?: string;
+  lineNumber?: number;
+  relevance: "high" | "medium" | "low";
+  context?: string;
+}
+
+export interface SearchOutput {
+  success?: boolean;
+  error?: string;
+  query?: string;
+  summary?: string;
+  findings?: SearchFinding[];
+  matchCount?: number;
+  filesSearched?: number;
+  formattedResult?: string;
+  executionId?: string;
+  stepsCount?: number;
+}
+
+export interface SubagentStep {
+  id: string;
+  type: "thought" | "tool_call" | "tool_result" | "text";
+  content: string;
+  toolName?: string;
+  toolInput?: unknown;
+  toolOutput?: unknown;
+  timestamp: number;
+}
+
+export interface SearchToolProps {
+  input: SearchInput;
+  output?: SearchOutput;
+  status: "pending" | "streaming" | "running" | "completed" | "rejected" | "error";
+  /** Live progress steps from the subagent */
+  steps?: SubagentStep[];
+  className?: string;
+}
+
+const getToolIcon = (toolName?: string) => {
+  switch (toolName) {
+    case "grep":
+      return SearchIcon;
+    case "glob":
+      return FolderIcon;
+    case "read_file":
+      return FileTextIcon;
+    case "list_dir":
+      return FolderIcon;
+    default:
+      return TerminalIcon;
+  }
+};
+
+export function SearchTool({
+  input,
+  output,
+  status,
+  steps = [],
+  className,
+}: SearchToolProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isStepsExpanded, setIsStepsExpanded] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const stepsContainerRef = useRef<HTMLDivElement>(null);
+
+  const isLoading = status === "pending" || status === "streaming" || status === "running";
+  const isCompleted = status === "completed";
+  const isError = status === "error" || output?.success === false;
+
+  // Auto-open modal when search starts (optional - can be removed if not desired)
+  useEffect(() => {
+    if (isLoading && steps.length === 1) {
+      setIsModalOpen(true);
+    }
+  }, [isLoading, steps.length]);
+
+  // Auto-scroll steps
+  useEffect(() => {
+    if (stepsContainerRef.current && isLoading) {
+      stepsContainerRef.current.scrollTop = stepsContainerRef.current.scrollHeight;
+    }
+  }, [steps, isLoading]);
+
+  const query = input?.query || "";
+  const displayQuery = query.length > 80 ? query.slice(0, 80) + "..." : query;
+
+  const getStatusDisplay = () => {
+    if (isLoading) {
+      return {
+        Icon: Loader2Icon,
+        color: "text-blue-600 dark:text-blue-500",
+        iconClass: "animate-spin",
+        label: steps.length > 0 ? `Searching... (${steps.length} steps)` : "Starting search...",
+      };
+    }
+    if (isCompleted && output?.success) {
+      return {
+        Icon: CheckCircleIcon,
+        color: "text-green-600 dark:text-green-500",
+        iconClass: "",
+        label: `Found ${output.matchCount || 0} matches`,
+      };
+    }
+    if (isError) {
+      return {
+        Icon: XCircleIcon,
+        color: "text-red-600 dark:text-red-500",
+        iconClass: "",
+        label: "Search failed",
+      };
+    }
+    return {
+      Icon: SearchIcon,
+      color: "text-muted-foreground",
+      iconClass: "",
+      label: "",
+    };
+  };
+
+  const { Icon, color, iconClass, label } = getStatusDisplay();
+
+  return (
+    <div className={cn("rounded-lg border overflow-hidden bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between w-full px-3 py-2.5 bg-gradient-to-r from-blue-500/5 to-purple-500/5">
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center gap-2 min-w-0 flex-1 hover:opacity-80 transition-opacity"
+        >
+          <Icon className={cn("size-4 shrink-0", color, iconClass)} />
+          <BotIcon className="size-3.5 text-muted-foreground shrink-0" />
+          <span className="text-sm font-medium">Search Agent</span>
+          <code className="text-xs text-muted-foreground font-mono truncate ml-1" title={query}>
+            "{displayQuery}"
+          </code>
+        </button>
+        <div className="flex items-center gap-2 shrink-0">
+          {label && (
+            <Badge 
+              variant="secondary" 
+              className={cn(
+                "text-xs gap-1",
+                isLoading && "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+                isCompleted && output?.success && "bg-green-500/10 text-green-600 dark:text-green-400",
+                isError && "bg-red-500/10 text-red-600 dark:text-red-400"
+              )}
+            >
+              {label}
+            </Badge>
+          )}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="size-7"
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsModalOpen(true);
+            }}
+            title="View in fullscreen"
+          >
+            <MaximizeIcon className="size-3.5" />
+          </Button>
+          <button onClick={() => setIsExpanded(!isExpanded)}>
+            {isExpanded ? (
+              <ChevronDownIcon className="size-4 text-muted-foreground" />
+            ) : (
+              <ChevronRightIcon className="size-4 text-muted-foreground" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      {isExpanded && (
+        <div className="border-t">
+          {/* Query */}
+          <div className="px-3 py-2 bg-muted/30 border-b">
+            <div className="flex items-start gap-2">
+              <SearchIcon className="size-3.5 text-muted-foreground mt-0.5 shrink-0" />
+              <p className="text-xs text-muted-foreground">{query}</p>
+            </div>
+            {input.context && (
+              <div className="mt-1.5 pl-5 text-xs text-muted-foreground/70 italic">
+                Context: {input.context}
+              </div>
+            )}
+          </div>
+
+          {/* Steps - Show subagent activity */}
+          {steps.length > 0 && (
+            <div className="border-b">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setIsStepsExpanded(!isStepsExpanded);
+                }}
+                className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted/50"
+              >
+                {isStepsExpanded ? (
+                  <ChevronDownIcon className="size-3" />
+                ) : (
+                  <ChevronRightIcon className="size-3" />
+                )}
+                <span>Agent Steps ({steps.length})</span>
+                {isLoading && (
+                  <Loader2Icon className="size-3 animate-spin ml-auto" />
+                )}
+              </button>
+              
+              {isStepsExpanded && (
+                <div 
+                  ref={stepsContainerRef}
+                  className="max-h-[200px] overflow-auto bg-zinc-950"
+                >
+                  {steps.map((step, index) => (
+                    <StepItem key={step.id || index} step={step} />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Results */}
+          {output && (
+            <div className="p-3">
+              {output.success ? (
+                <div className="space-y-3">
+                  {/* Summary */}
+                  {output.summary && (
+                    <div className="text-sm text-foreground">
+                      {output.summary}
+                    </div>
+                  )}
+
+                  {/* Findings */}
+                  {output.findings && output.findings.length > 0 && (
+                    <div className="space-y-1">
+                      <div className="text-xs font-medium text-muted-foreground mb-2">
+                        Key Findings ({output.findings.length})
+                      </div>
+                      <div className="space-y-1 max-h-[200px] overflow-auto">
+                        {output.findings.slice(0, 10).map((finding, index) => (
+                          <FindingItem key={index} finding={finding} />
+                        ))}
+                        {output.findings.length > 10 && (
+                          <div className="text-xs text-muted-foreground pl-5">
+                            ... and {output.findings.length - 10} more
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Stats */}
+                  <div className="flex items-center gap-4 text-xs text-muted-foreground pt-2 border-t">
+                    <span>{output.matchCount || 0} matches</span>
+                    <span>{output.filesSearched || 0} files searched</span>
+                    <span>{output.stepsCount || 0} steps</span>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-start gap-2 text-red-600 dark:text-red-400 text-sm">
+                  <XCircleIcon className="size-4 mt-0.5 shrink-0" />
+                  <span>{output.error || "Search failed"}</span>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Loading state */}
+          {isLoading && !output && steps.length === 0 && (
+            <div className="p-4 flex items-center justify-center gap-2 text-muted-foreground">
+              <Loader2Icon className="size-4 animate-spin" />
+              <span className="text-sm">Initializing search agent...</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Fullscreen Modal */}
+      <SubagentModal
+        open={isModalOpen}
+        onOpenChange={setIsModalOpen}
+        title="Search Agent"
+        description="Exploring your codebase to find relevant information"
+        query={query}
+        steps={steps}
+        status={isLoading ? "running" : isError ? "error" : "completed"}
+      />
+    </div>
+  );
+}
+
+function StepItem({ step }: { step: SubagentStep }) {
+  const ToolIcon = getToolIcon(step.toolName);
+
+  return (
+    <div className="px-3 py-1.5 text-xs font-mono border-b border-zinc-800 last:border-0">
+      <div className="flex items-start gap-2">
+        {step.type === "tool_call" && (
+          <>
+            <ToolIcon className="size-3 text-blue-400 mt-0.5 shrink-0" />
+            <div className="min-w-0">
+              <span className="text-blue-400">{step.toolName}</span>
+              {step.toolInput !== undefined && step.toolInput !== null && (
+                <span className="text-zinc-500 ml-1 truncate">
+                  {(() => {
+                    try {
+                      return JSON.stringify(step.toolInput).slice(0, 50) + "...";
+                    } catch {
+                      return "...";
+                    }
+                  })()}
+                </span>
+              )}
+            </div>
+          </>
+        )}
+        {step.type === "tool_result" && (
+          <>
+            <CheckCircleIcon className="size-3 text-green-400 mt-0.5 shrink-0" />
+            <span className="text-zinc-400 truncate">{step.content}</span>
+          </>
+        )}
+        {step.type === "text" && (
+          <>
+            <CodeIcon className="size-3 text-purple-400 mt-0.5 shrink-0" />
+            <span className="text-zinc-300 truncate">{step.content}</span>
+          </>
+        )}
+        {step.type === "thought" && (
+          <>
+            <BotIcon className="size-3 text-amber-400 mt-0.5 shrink-0" />
+            <span className="text-zinc-400 italic truncate">{step.content}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function FindingItem({ finding }: { finding: SearchFinding }) {
+  const Icon = finding.type === "match" ? CodeIcon : FileIcon;
+  const relevanceColor = {
+    high: "text-green-500",
+    medium: "text-amber-500",
+    low: "text-muted-foreground",
+  }[finding.relevance];
+
+  return (
+    <div className="flex items-start gap-2 text-xs py-1 px-2 rounded hover:bg-muted/50">
+      <Icon className={cn("size-3 mt-0.5 shrink-0", relevanceColor)} />
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <span className="font-mono text-foreground truncate">{finding.path}</span>
+          {finding.lineNumber && (
+            <span className="text-muted-foreground">:{finding.lineNumber}</span>
+          )}
+        </div>
+        {finding.content && (
+          <code className="text-muted-foreground block truncate mt-0.5">
+            {finding.content}
+          </code>
+        )}
+      </div>
+    </div>
+  );
+}

package/web/.next/standalone/web/src/components/ai-elements/speech-input.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { LoaderIcon, MicIcon, SquareIcon } from "lucide-react";
+import { LoaderIcon, MicIcon, MicOffIcon } from "lucide-react";
 import {
   type ComponentProps,
   useCallback,
@@ -17,6 +17,7 @@ interface SpeechRecognition extends EventTarget {
   lang: string;
   start(): void;
   stop(): void;
+  abort(): void;
   onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
   onend: ((this: SpeechRecognition, ev: Event) => void) | null;
   onresult:
@@ -67,8 +68,11 @@ declare global {
 
 type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
 
-export type SpeechInputProps = ComponentProps<typeof Button> & {
+export type SpeechInputProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
+  /** Called with finalized transcript text (confirmed words) */
   onTranscriptionChange?: (text: string) => void;
+  /** Called with interim transcript text as user speaks (live preview) */
+  onInterimTranscription?: (text: string) => void;
   /**
    * Callback for when audio is recorded using MediaRecorder fallback.
    * This is called in browsers that don't support the Web Speech API (Firefox, Safari).
@@ -98,19 +102,20 @@ const detectSpeechInputMode = (): SpeechInputMode => {
 export const SpeechInput = ({
   className,
   onTranscriptionChange,
+  onInterimTranscription,
   onAudioRecorded,
   lang = "en-US",
+  disabled,
   ...props
 }: SpeechInputProps) => {
   const [isListening, setIsListening] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [mode, setMode] = useState<SpeechInputMode>("none");
-  const [recognition, setRecognition] = useState<SpeechRecognition | null>(
-    null
-  );
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
+  // Track the accumulated final transcript for the current session
+  const sessionTranscriptRef = useRef<string>("");
 
   // Detect mode on mount
   useEffect(() => {
@@ -123,9 +128,9 @@ export const SpeechInput = ({
       return;
     }
 
-    const SpeechRecognition =
+    const SpeechRecognitionAPI =
       window.SpeechRecognition || window.webkitSpeechRecognition;
-    const speechRecognition = new SpeechRecognition();
+    const speechRecognition = new SpeechRecognitionAPI();
 
     speechRecognition.continuous = true;
     speechRecognition.interimResults = true;
@@ -133,41 +138,58 @@ export const SpeechInput = ({
 
     speechRecognition.onstart = () => {
       setIsListening(true);
+      sessionTranscriptRef.current = "";
     };
 
     speechRecognition.onend = () => {
       setIsListening(false);
+      // Clear any interim display when stopped
+      onInterimTranscription?.("");
     };
 
     speechRecognition.onresult = (event) => {
-      let finalTranscript = "";
+      let interimTranscript = "";
+      let newFinalTranscript = "";
 
       for (let i = event.resultIndex; i < event.results.length; i++) {
         const result = event.results[i];
+        const transcript = result[0]?.transcript ?? "";
+        
         if (result.isFinal) {
-          finalTranscript += result[0]?.transcript ?? "";
+          newFinalTranscript += transcript;
+        } else {
+          interimTranscript += transcript;
         }
       }
 
-      if (finalTranscript) {
-        onTranscriptionChange?.(finalTranscript);
+      // If we have new finalized text, add it to the input
+      if (newFinalTranscript) {
+        sessionTranscriptRef.current += newFinalTranscript;
+        onTranscriptionChange?.(newFinalTranscript);
+        // Clear interim since it's now final
+        onInterimTranscription?.("");
+      }
+      
+      // Show interim results as live preview
+      if (interimTranscript) {
+        onInterimTranscription?.(interimTranscript);
       }
     };
 
     speechRecognition.onerror = (event) => {
       console.error("Speech recognition error:", event.error);
       setIsListening(false);
+      onInterimTranscription?.("");
     };
 
     recognitionRef.current = speechRecognition;
-    setRecognition(speechRecognition);
 
     return () => {
       if (recognitionRef.current) {
-        recognitionRef.current.stop();
+        recognitionRef.current.abort();
       }
     };
-  }, [mode, onTranscriptionChange, lang]);
+  }, [mode, lang, onTranscriptionChange, onInterimTranscription]);
 
   // Start MediaRecorder recording
   const startMediaRecorder = useCallback(async () => {
@@ -241,11 +263,16 @@ export const SpeechInput = ({
   }, []);
 
   const toggleListening = useCallback(() => {
-    if (mode === "speech-recognition" && recognition) {
+    if (mode === "speech-recognition" && recognitionRef.current) {
       if (isListening) {
-        recognition.stop();
+        recognitionRef.current.stop();
       } else {
-        recognition.start();
+        try {
+          recognitionRef.current.start();
+        } catch (e) {
+          // Recognition might already be started
+          console.warn("Speech recognition start error:", e);
+        }
       }
     } else if (mode === "media-recorder") {
       if (isListening) {
@@ -254,45 +281,71 @@ export const SpeechInput = ({
         startMediaRecorder();
       }
     }
-  }, [mode, recognition, isListening, startMediaRecorder, stopMediaRecorder]);
+  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);
 
   // Determine if button should be disabled
-  const isDisabled =
+  const isButtonDisabled =
+    disabled ||
     mode === "none" ||
-    (mode === "speech-recognition" && !recognition) ||
+    (mode === "speech-recognition" && !recognitionRef.current) ||
     (mode === "media-recorder" && !onAudioRecorded) ||
     isProcessing;
 
+  // Not supported - show disabled mic with tooltip hint
+  if (mode === "none") {
+    return (
+      <Button
+        type="button"
+        className={cn(
+          "relative rounded-full opacity-50 cursor-not-allowed",
+          className
+        )}
+        disabled
+        title="Speech recognition not supported in this browser"
+        {...props}
+      >
+        <MicOffIcon className="size-4" />
+      </Button>
+    );
+  }
+
   return (
     <div className="relative inline-flex items-center justify-center">
-      {/* Animated pulse rings */}
-      {isListening &&
-        [0, 1, 2].map((index) => (
-          <div
-            className="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"
-            key={index}
-            style={{
-              animationDelay: `${index * 0.3}s`,
-              animationDuration: "2s",
-            }}
+      {/* Animated pulse rings when listening */}
+      {isListening && (
+        <>
+          <span className="absolute inset-0 rounded-full bg-red-500/20 animate-ping" />
+          <span 
+            className="absolute inset-0 rounded-full bg-red-500/10 animate-ping" 
+            style={{ animationDelay: "0.2s" }}
           />
-        ))}
+        </>
+      )}
 
       {/* Main record button */}
       <Button
+        type="button"
         className={cn(
-          "relative z-10 rounded-full transition-all duration-300",
+          "relative z-10 rounded-full transition-all duration-200",
           isListening
-            ? "bg-destructive text-white hover:bg-destructive/80 hover:text-white"
-            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+            ? "bg-red-500 text-white hover:bg-red-600 shadow-lg shadow-red-500/25"
+            : "hover:bg-muted",
           className
         )}
-        disabled={isDisabled}
+        disabled={isButtonDisabled}
         onClick={toggleListening}
+        title={isListening ? "Stop recording" : "Start voice input"}
+        variant={isListening ? "default" : "ghost"}
         {...props}
       >
         {isProcessing && <LoaderIcon className="size-4 animate-spin" />}
-        {!isProcessing && isListening && <SquareIcon className="size-4" />}
+        {!isProcessing && isListening && (
+          <div className="relative">
+            <MicIcon className="size-4" />
+            {/* Recording indicator dot */}
+            <span className="absolute -top-0.5 -right-0.5 size-2 bg-white rounded-full animate-pulse" />
+          </div>
+        )}
         {!(isProcessing || isListening) && <MicIcon className="size-4" />}
       </Button>
     </div>