sparkecoder 0.1.35 → 0.1.37

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import {
@@ -9,17 +8,13 @@ import {
   ChevronRightIcon,
   SearchIcon,
   XCircleIcon,
-  Loader2Icon,
-  FileIcon,
-  CodeIcon,
   FolderIcon,
   TerminalIcon,
   FileTextIcon,
-  BotIcon,
-  ExternalLinkIcon,
-  MaximizeIcon,
+  SparklesIcon,
+  EyeIcon,
 } from "lucide-react";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { SubagentModal } from "./subagent-modal";
 
 export interface SearchInput {
@@ -47,6 +42,8 @@ export interface SearchOutput {
   formattedResult?: string;
   executionId?: string;
   stepsCount?: number;
+  // Raw result text from agent
+  result?: string;
 }
 
 export interface SubagentStep {
@@ -83,6 +80,53 @@ const getToolIcon = (toolName?: string) => {
   }
 };
 
+/** Truncate text with ellipsis */
+const truncate = (text: string, maxLen: number) => {
+  if (!text) return "";
+  return text.length > maxLen ? text.slice(0, maxLen) + "..." : text;
+};
+
+/** Get the latest meaningful step for display */
+const getLatestStep = (steps: SubagentStep[]) => {
+  if (steps.length === 0) return null;
+  const latest = steps[steps.length - 1];
+  if (latest.type === "tool_call" && latest.toolName) {
+    return { type: "tool", name: latest.toolName };
+  }
+  if (latest.type === "thought" || latest.type === "text") {
+    return { type: "text", content: truncate(latest.content, 40) };
+  }
+  return null;
+};
+
+/** Extract stats from steps */
+const getStatsFromSteps = (steps: SubagentStep[]) => {
+  const toolCalls = steps.filter(s => s.type === "tool_call");
+  const filesRead = new Set<string>();
+  
+  for (const step of toolCalls) {
+    if (step.toolName === "read_file" && step.toolInput) {
+      const input = step.toolInput as { path?: string };
+      if (input.path) filesRead.add(input.path);
+    }
+  }
+  
+  return {
+    toolCallCount: toolCalls.length,
+    filesExplored: filesRead.size,
+  };
+};
+
+/** Get first line or sentence as summary */
+const getFirstSentence = (text: string): string => {
+  if (!text) return "";
+  // Get first line
+  const firstLine = text.split('\n')[0].trim();
+  // Or first sentence
+  const match = firstLine.match(/^[^.!?]+[.!?]/);
+  return match ? match[0] : truncate(firstLine, 100);
+};
+
 export function SearchTool({
   input,
   output,
@@ -90,8 +134,8 @@ export function SearchTool({
   steps = [],
   className,
 }: SearchToolProps) {
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [isStepsExpanded, setIsStepsExpanded] = useState(true);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isResultExpanded, setIsResultExpanded] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const stepsContainerRef = useRef<HTMLDivElement>(null);
 
@@ -99,100 +143,113 @@ export function SearchTool({
   const isCompleted = status === "completed";
   const isError = status === "error" || output?.success === false;
 
-  // Auto-open modal when exploration starts (optional - can be removed if not desired)
-  useEffect(() => {
-    if (isLoading && steps.length === 1) {
-      setIsModalOpen(true);
-    }
-  }, [isLoading, steps.length]);
+  // Calculate stats from steps
+  const stats = useMemo(() => getStatsFromSteps(steps), [steps]);
 
-  // Auto-scroll steps
+  // Auto-scroll steps when expanded
   useEffect(() => {
-    if (stepsContainerRef.current && isLoading) {
+    if (stepsContainerRef.current && isLoading && isExpanded) {
       stepsContainerRef.current.scrollTop = stepsContainerRef.current.scrollHeight;
     }
-  }, [steps, isLoading]);
+  }, [steps, isLoading, isExpanded]);
 
   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 ? `Exploring... (${steps.length} steps)` : "Starting exploration...",
-      };
-    }
-    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: "Explore failed",
-      };
-    }
-    return {
-      Icon: SearchIcon,
-      color: "text-muted-foreground",
-      iconClass: "",
-      label: "",
-    };
-  };
+  const latestStep = getLatestStep(steps);
+  
+  // Get the result text - could be in different fields
+  const resultText = useMemo(() => {
+    if (!output) return "";
+    // Try different possible fields
+    if (typeof output === "string") return output;
+    if (output.result) return output.result;
+    if (output.formattedResult) return output.formattedResult;
+    if (output.summary) return output.summary;
+    // Check if output has a nested structure
+    const anyOutput = output as Record<string, unknown>;
+    if (anyOutput.text) return String(anyOutput.text);
+    if (anyOutput.content) return String(anyOutput.content);
+    return "";
+  }, [output]);
 
-  const { Icon, color, iconClass, label } = getStatusDisplay();
+  const summaryText = getFirstSentence(resultText);
+  const hasLongResult = resultText.length > 200;
 
   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">Explore 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"
+      {/* Compact Header */}
+      <div className="flex items-center gap-3 px-3 py-2.5">
+        {/* Status Icon */}
+        <div className="shrink-0">
+          {isLoading ? (
+            <div className="relative">
+              <SparklesIcon className="size-4 text-blue-500" />
+              <span className="absolute -top-0.5 -right-0.5 size-2 bg-blue-500 rounded-full animate-pulse" />
+            </div>
+          ) : isCompleted && !isError ? (
+            <CheckCircleIcon className="size-4 text-green-500" />
+          ) : isError ? (
+            <XCircleIcon className="size-4 text-red-500" />
+          ) : (
+            <SearchIcon className="size-4 text-muted-foreground" />
+          )}
+        </div>
+
+        {/* Main Text */}
+        <div className="flex-1 min-w-0">
+          <div className="text-sm">
+            {isLoading ? (
+              <span className="text-foreground">
+                SparkeCoder is exploring the codebase
+              </span>
+            ) : isCompleted && !isError ? (
+              <span className="text-foreground">
+                Exploration complete
+              </span>
+            ) : isError ? (
+              <span className="text-red-500">
+                Exploration failed
+              </span>
+            ) : (
+              <span className="text-muted-foreground">
+                Exploring...
+              </span>
+            )}
+          </div>
+          
+          {/* Tiny log line while loading */}
+          {isLoading && latestStep && (
+            <div className="text-xs text-muted-foreground truncate mt-0.5">
+              {latestStep.type === "tool" ? (
+                <span className="font-mono">{latestStep.name}</span>
+              ) : (
+                <span className="italic">{latestStep.content}</span>
               )}
-            >
-              {label}
-            </Badge>
+            </div>
+          )}
+          
+          {/* Completed stats - derived from actual steps */}
+          {isCompleted && !isError && (
+            <div className="text-xs text-muted-foreground mt-0.5">
+              {stats.toolCallCount} actions · {stats.filesExplored} files explored
+            </div>
           )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1.5 shrink-0">
           <Button
             variant="ghost"
-            size="icon"
-            className="size-7"
-            onClick={(e) => {
-              e.stopPropagation();
-              setIsModalOpen(true);
-            }}
-            title="View in fullscreen"
+            size="sm"
+            className="h-7 px-2.5 text-xs gap-1.5"
+            onClick={() => setIsModalOpen(true)}
           >
-            <MaximizeIcon className="size-3.5" />
+            <EyeIcon className="size-3" />
+            See How
           </Button>
-          <button onClick={() => setIsExpanded(!isExpanded)}>
+          <button 
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="p-1 hover:bg-muted rounded transition-colors"
+          >
             {isExpanded ? (
               <ChevronDownIcon className="size-4 text-muted-foreground" />
             ) : (
@@ -202,108 +259,75 @@ export function SearchTool({
         </div>
       </div>
 
-      {/* Content */}
+      {/* Expanded 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>
+              <SearchIcon className="size-3 text-muted-foreground mt-0.5 shrink-0" />
+              <p className="text-xs text-muted-foreground truncate" title={query}>
+                {truncate(query, 100)}
+              </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 && (
+          {/* Result - clean text with expand */}
+          {resultText && (
             <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" />
+              <div className="px-3 py-2">
+                {isResultExpanded ? (
+                  <div className="text-sm text-foreground whitespace-pre-wrap break-words max-h-[300px] overflow-auto">
+                    {resultText}
+                  </div>
                 ) : (
-                  <ChevronRightIcon className="size-3" />
+                  <p className="text-sm text-muted-foreground">
+                    {summaryText}
+                  </p>
                 )}
-                <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"
+              </div>
+              {hasLongResult && (
+                <button
+                  onClick={() => setIsResultExpanded(!isResultExpanded)}
+                  className="w-full px-3 py-1.5 text-xs text-muted-foreground hover:bg-muted/50 flex items-center justify-center gap-1 border-t"
                 >
-                  {steps.map((step, index) => (
-                    <StepItem key={step.id || index} step={step} />
-                  ))}
-                </div>
+                  {isResultExpanded ? (
+                    <>
+                      <ChevronDownIcon className="size-3" />
+                      Show less
+                    </>
+                  ) : (
+                    <>
+                      <ChevronRightIcon className="size-3" />
+                      Show full result
+                    </>
+                  )}
+                </button>
               )}
             </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 explored</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>
-              )}
+          {/* Error */}
+          {isError && output && (
+            <div className="px-3 py-2 text-xs text-red-400 border-b">
+              {(output as SearchOutput).error || "Exploration failed"}
             </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 explore agent...</span>
+          {/* Steps - compact log view */}
+          {steps.length > 0 && (
+            <div 
+              ref={stepsContainerRef}
+              className="max-h-[100px] overflow-auto bg-zinc-950/50"
+            >
+              {steps.slice(-6).map((step, index) => (
+                <MiniStepItem key={step.id || index} step={step} />
+              ))}
+              {steps.length > 6 && (
+                <div className="px-3 py-1 text-xs text-zinc-500">
+                  +{steps.length - 6} more steps
+                </div>
+              )}
             </div>
           )}
         </div>
@@ -323,78 +347,36 @@ export function SearchTool({
   );
 }
 
-function StepItem({ step }: { step: SubagentStep }) {
+/** Minimal step item for compact log view */
+function MiniStepItem({ 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 className="px-3 py-1 text-xs font-mono border-b border-zinc-800/50 last:border-0 flex items-center gap-2">
+      {step.type === "tool_call" && (
+        <>
+          <ToolIcon className="size-2.5 text-blue-400 shrink-0" />
+          <span className="text-blue-400 truncate">{step.toolName}</span>
+        </>
+      )}
+      {step.type === "tool_result" && (
+        <>
+          <CheckCircleIcon className="size-2.5 text-green-400 shrink-0" />
+          <span className="text-zinc-500 truncate">{truncate(step.content, 50)}</span>
+        </>
+      )}
+      {step.type === "text" && (
+        <>
+          <SparklesIcon className="size-2.5 text-purple-400 shrink-0" />
+          <span className="text-zinc-400 truncate">{truncate(step.content, 50)}</span>
+        </>
+      )}
+      {step.type === "thought" && (
+        <>
+          <SparklesIcon className="size-2.5 text-amber-400 shrink-0" />
+          <span className="text-zinc-500 italic truncate">{truncate(step.content, 50)}</span>
+        </>
+      )}
     </div>
   );
 }