sparkecoder 0.1.36 → 0.1.38

package/web/.next/standalone/web/src/components/ai-elements/subagent-modal.tsx

@@ -6,10 +6,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
 } from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import {
   SearchIcon,
@@ -19,8 +16,7 @@ import {
   CheckCircleIcon,
   XCircleIcon,
   Loader2Icon,
-  BotIcon,
-  CodeIcon,
+  SparklesIcon,
   ChevronRightIcon,
 } from "lucide-react";
 
@@ -59,119 +55,108 @@ const getToolIcon = (toolName?: string) => {
   }
 };
 
+/** Truncate text */
+const truncate = (text: string, maxLen: number) => {
+  if (!text) return "";
+  return text.length > maxLen ? text.slice(0, maxLen) + "..." : text;
+};
+
 export function SubagentModal({
   open,
   onOpenChange,
   title = "Explore Agent",
-  description,
   steps,
   status,
   query,
 }: SubagentModalProps) {
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  // Auto-scroll to bottom when new steps arrive
-  useEffect(() => {
-    if (scrollContainerRef.current && status === "running") {
-      const container = scrollContainerRef.current;
-      container.scrollTop = container.scrollHeight;
-    }
-  }, [steps, status]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
 
   const isRunning = status === "running";
   const isCompleted = status === "completed";
   const isError = status === "error";
 
+  // Auto-scroll to bottom when new steps arrive
+  useEffect(() => {
+    if (bottomRef.current && isRunning) {
+      bottomRef.current.scrollIntoView({ behavior: "smooth", block: "end" });
+    }
+  }, [steps, isRunning]);
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-2xl max-h-[85vh] flex flex-col gap-0 p-0 overflow-hidden">
+      <DialogContent className="sm:max-w-xl max-h-[80vh] flex flex-col gap-0 p-0 overflow-hidden">
         {/* Header */}
-        <div className="px-6 py-4 border-b bg-gradient-to-r from-blue-500/5 to-purple-500/5">
-          <DialogHeader>
-            <div className="flex items-center gap-3">
-              <div className={cn(
-                "p-2 rounded-lg",
-                isRunning && "bg-blue-500/10",
-                isCompleted && "bg-green-500/10",
-                isError && "bg-red-500/10"
-              )}>
-                {isRunning ? (
-                  <Loader2Icon className="size-5 text-blue-500 animate-spin" />
-                ) : isCompleted ? (
-                  <CheckCircleIcon className="size-5 text-green-500" />
-                ) : (
-                  <XCircleIcon className="size-5 text-red-500" />
-                )}
-              </div>
-              <div>
-                <DialogTitle className="flex items-center gap-2">
-                  <BotIcon className="size-4 text-muted-foreground" />
-                  {title}
-                </DialogTitle>
-                {description && (
-                  <DialogDescription className="mt-1">
-                    {description}
-                  </DialogDescription>
-                )}
-              </div>
-            </div>
+        <div className="px-4 py-3 border-b flex items-center gap-3">
+          <div className="shrink-0">
+            {isRunning ? (
+              <Loader2Icon className="size-4 text-blue-500 animate-spin" />
+            ) : isCompleted ? (
+              <CheckCircleIcon className="size-4 text-green-500" />
+            ) : (
+              <XCircleIcon className="size-4 text-red-500" />
+            )}
+          </div>
+          <DialogHeader className="flex-1 space-y-0">
+            <DialogTitle className="text-sm font-medium">
+              {isRunning ? "SparkeCoder is exploring..." : isCompleted ? "Exploration complete" : "Exploration failed"}
+            </DialogTitle>
           </DialogHeader>
-
-          {/* Query display */}
-          {query && (
-            <div className="mt-3 flex items-start gap-2 p-3 bg-muted/50 rounded-lg">
-              <SearchIcon className="size-4 text-muted-foreground mt-0.5 shrink-0" />
-              <p className="text-sm text-foreground">{query}</p>
-            </div>
-          )}
+          <span className="text-xs text-muted-foreground tabular-nums">
+            {steps.length} steps
+          </span>
         </div>
 
-        {/* Steps content */}
-        <div className="flex-1 overflow-hidden">
-          <ScrollArea className="h-[50vh]">
-            <div ref={scrollContainerRef} className="p-4 space-y-2">
-              {steps.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-                  <Loader2Icon className="size-8 animate-spin mb-3" />
-                  <p className="text-sm">Initializing explore agent...</p>
-                </div>
-              ) : (
-                steps.map((step, index) => (
-                  <StepCard key={step.id || index} step={step} index={index} />
-                ))
-              )}
-
-              {/* Streaming indicator */}
-              {isRunning && steps.length > 0 && (
-                <div className="flex items-center gap-2 py-2 text-muted-foreground">
-                  <Loader2Icon className="size-4 animate-spin" />
-                  <span className="text-xs">Searching...</span>
+        {/* Query */}
+        {query && (
+          <div className="px-4 py-2 border-b bg-muted/30">
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <SearchIcon className="size-3 shrink-0" />
+              <span className="truncate" title={query}>{truncate(query, 80)}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Steps - Terminal style log */}
+        <div 
+          ref={scrollRef}
+          className="flex-1 overflow-auto bg-zinc-950 font-mono text-xs"
+        >
+          {steps.length === 0 ? (
+            <div className="flex items-center justify-center py-12 text-zinc-500">
+              <Loader2Icon className="size-4 animate-spin mr-2" />
+              Initializing...
+            </div>
+          ) : (
+            <div className="py-2">
+              {steps.map((step, index) => (
+                <LogLine key={step.id || index} step={step} />
+              ))}
+              
+              {/* Auto-scroll anchor */}
+              <div ref={bottomRef} />
+              
+              {/* Running indicator */}
+              {isRunning && (
+                <div className="px-3 py-1 flex items-center gap-2 text-zinc-500">
+                  <Loader2Icon className="size-3 animate-spin" />
+                  <span className="animate-pulse">_</span>
                 </div>
               )}
             </div>
-          </ScrollArea>
+          )}
         </div>
 
-        {/* Footer with status */}
-        <div className="px-6 py-3 border-t bg-muted/30 flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Badge
-              variant="secondary"
-              className={cn(
-                "text-xs",
-                isRunning && "bg-blue-500/10 text-blue-600",
-                isCompleted && "bg-green-500/10 text-green-600",
-                isError && "bg-red-500/10 text-red-600"
-              )}
-            >
-              {isRunning ? "Running" : isCompleted ? "Completed" : "Error"}
-            </Badge>
-            <span className="text-xs text-muted-foreground">
-              {steps.length} step{steps.length !== 1 ? "s" : ""}
-            </span>
-          </div>
-          <span className="text-xs text-muted-foreground">
-            Powered by Gemini 2.0 Flash
+        {/* Footer */}
+        <div className="px-4 py-2 border-t bg-zinc-950 flex items-center gap-2">
+          <div className={cn(
+            "size-2 rounded-full",
+            isRunning && "bg-blue-500 animate-pulse",
+            isCompleted && "bg-green-500",
+            isError && "bg-red-500"
+          )} />
+          <span className="text-xs text-zinc-500">
+            {isRunning ? "Running" : isCompleted ? "Done" : "Failed"}
           </span>
         </div>
       </DialogContent>
@@ -179,97 +164,56 @@ export function SubagentModal({
   );
 }
 
-function StepCard({ step, index }: { step: SubagentStep; index: number }) {
+/** Single log line in terminal style */
+function LogLine({ step }: { step: SubagentStep }) {
   const ToolIcon = getToolIcon(step.toolName);
 
-  return (
-    <div className={cn(
-      "rounded-lg border overflow-hidden",
-      step.type === "tool_call" && "bg-blue-500/5 border-blue-500/20",
-      step.type === "tool_result" && "bg-green-500/5 border-green-500/20",
-      step.type === "text" && "bg-muted/50",
-      step.type === "thought" && "bg-amber-500/5 border-amber-500/20"
-    )}>
-      <div className="px-3 py-2">
-        <div className="flex items-start gap-2">
-          {/* Step number */}
-          <div className="flex items-center justify-center size-5 rounded-full bg-muted text-[10px] font-medium shrink-0 mt-0.5">
-            {index + 1}
-          </div>
-
-          {/* Step content */}
-          <div className="flex-1 min-w-0">
-            {step.type === "tool_call" && (
-              <div className="space-y-1">
-                <div className="flex items-center gap-2">
-                  <ToolIcon className="size-4 text-blue-500" />
-                  <span className="font-medium text-sm text-blue-600">
-                    {step.toolName}
-                  </span>
-                </div>
-                {step.toolInput !== undefined && step.toolInput !== null && (
-                  <pre className="text-xs text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto">
-                    {formatToolInput(step.toolInput)}
-                  </pre>
-                )}
-              </div>
-            )}
-
-            {step.type === "tool_result" && (
-              <div className="space-y-1">
-                <div className="flex items-center gap-2">
-                  <CheckCircleIcon className="size-4 text-green-500" />
-                  <span className="font-medium text-sm text-green-600">
-                    Result from {step.toolName}
-                  </span>
-                </div>
-                {step.toolOutput !== undefined && step.toolOutput !== null && (
-                  <pre className="text-xs text-muted-foreground bg-background/50 rounded p-2 overflow-x-auto max-h-[150px] overflow-y-auto">
-                    {formatToolOutput(step.toolOutput)}
-                  </pre>
-                )}
-              </div>
-            )}
+  if (step.type === "tool_call") {
+    const inputStr = formatToolInput(step.toolInput);
+    return (
+      <div className="px-3 py-0.5 hover:bg-zinc-900/50 flex items-start gap-2">
+        <ChevronRightIcon className="size-3 text-blue-400 mt-0.5 shrink-0" />
+        <ToolIcon className="size-3 text-blue-400 mt-0.5 shrink-0" />
+        <span className="text-blue-400">{step.toolName}</span>
+        {inputStr && (
+          <span className="text-zinc-600 truncate">{truncate(inputStr, 60)}</span>
+        )}
+      </div>
+    );
+  }
 
-            {step.type === "text" && (
-              <div className="flex items-start gap-2">
-                <CodeIcon className="size-4 text-purple-500 mt-0.5 shrink-0" />
-                <p className="text-sm">{step.content}</p>
-              </div>
-            )}
+  if (step.type === "tool_result") {
+    return (
+      <div className="px-3 py-0.5 hover:bg-zinc-900/50 flex items-start gap-2">
+        <CheckCircleIcon className="size-3 text-green-500 mt-0.5 shrink-0" />
+        <span className="text-zinc-500 truncate">{truncate(step.content, 80)}</span>
+      </div>
+    );
+  }
 
-            {step.type === "thought" && (
-              <div className="flex items-start gap-2">
-                <BotIcon className="size-4 text-amber-500 mt-0.5 shrink-0" />
-                <p className="text-sm italic text-muted-foreground">{step.content}</p>
-              </div>
-            )}
-          </div>
-        </div>
+  if (step.type === "thought") {
+    return (
+      <div className="px-3 py-0.5 hover:bg-zinc-900/50 flex items-start gap-2">
+        <SparklesIcon className="size-3 text-amber-400 mt-0.5 shrink-0" />
+        <span className="text-zinc-400 italic">{truncate(step.content, 80)}</span>
       </div>
+    );
+  }
+
+  // text type
+  return (
+    <div className="px-3 py-0.5 hover:bg-zinc-900/50 flex items-start gap-2">
+      <span className="text-zinc-300">{truncate(step.content, 100)}</span>
     </div>
   );
 }
 
 function formatToolInput(input: unknown): string {
   try {
+    if (input === undefined || input === null) return "";
     if (typeof input === "string") return input;
-    return JSON.stringify(input, null, 2);
+    return JSON.stringify(input);
   } catch {
     return String(input);
   }
 }
-
-function formatToolOutput(output: unknown): string {
-  try {
-    if (typeof output === "string") return output;
-    const str = JSON.stringify(output, null, 2);
-    // Truncate long outputs
-    if (str.length > 1000) {
-      return str.slice(0, 1000) + "\n... (truncated)";
-    }
-    return str;
-  } catch {
-    return String(output);
-  }
-}

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

@@ -101,6 +101,8 @@ import {
   revertToCheckpoint,
   checkVersion,
   createSession,
+  getPendingInput,
+  getDevtoolsContext,
   type Session,
   type SSEEvent,
   type PendingApproval,
@@ -1486,10 +1488,73 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     };
   }, [session.id, isRunning]);
 
-  const handleSubmit = (promptText: string, attachments?: RunAgentAttachment[]) => {
+  // Poll for pending input from devtools (when user selects a component externally)
+  useEffect(() => {
+    let isStale = false;
+    const currentSessionId = session.id;
+    
+    const checkForPendingInput = async () => {
+      // Skip if we're running
+      if (isRunning) return;
+      
+      try {
+        const pendingResult = await getPendingInput(currentSessionId);
+        
+        // Check if stale or running after async
+        if (isStale || isRunning) return;
+        
+        if (pendingResult.hasPendingInput && pendingResult.text) {
+          // Populate the input field with the pending text
+          setInput((prev) => {
+            // If there's already text, append with newline
+            if (prev.trim()) {
+              return prev + '\n\n' + pendingResult.text;
+            }
+            return pendingResult.text || '';
+          });
+          
+          // Focus the input field - find the textarea and focus it
+          setTimeout(() => {
+            const textarea = document.querySelector('textarea[placeholder*="Ask SparkECoder"]') as HTMLTextAreaElement | null;
+            if (textarea) {
+              textarea.focus();
+              // Move cursor to end
+              textarea.selectionStart = textarea.value.length;
+              textarea.selectionEnd = textarea.value.length;
+            }
+          }, 100);
+        }
+      } catch (err) {
+        // Ignore errors when polling
+      }
+    };
+    
+    // Poll every 500ms for responsive feel
+    const interval = setInterval(checkForPendingInput, 500);
+    
+    return () => {
+      isStale = true;
+      clearInterval(interval);
+    };
+  }, [session.id, isRunning]);
+
+  const handleSubmit = async (promptText: string, attachments?: RunAgentAttachment[]) => {
     if (!promptText.trim() && (!attachments || attachments.length === 0)) return;
     if (isRunning) return;
 
+    // Check if devtools is connected and get current page context
+    let finalPrompt = promptText;
+    try {
+      const devtoolsInfo = await getDevtoolsContext(session.id);
+      if (devtoolsInfo.connected && devtoolsInfo.context) {
+        const ctx = devtoolsInfo.context;
+        const contextPrefix = `[Sparkecode Devtools connected - User is currently viewing: ${ctx.pageName} (${ctx.path})]\n\n`;
+        finalPrompt = contextPrefix + promptText;
+      }
+    } catch {
+      // Ignore devtools context errors
+    }
+
     // Convert RunAgentAttachment to UserAttachment for display
     const userAttachments: UserAttachment[] | undefined = attachments?.map((a) => ({
       type: a.type,
@@ -1501,7 +1566,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     const userItem: ChatItem = {
       id: `user-${Date.now()}`,
       type: 'user-message',
-      content: promptText || '',
+      content: promptText || '', // Show original prompt in UI (without context prefix)
       attachments: userAttachments,
     };
 
@@ -1518,7 +1583,7 @@ export function ChatInterface({ session }: ChatInterfaceProps) {
     currentReasoningRef.current = '';
     toolCallsRef.current = [];
 
-    const cancel = runAgent(session.id, promptText || 'Please analyze the attached files.', handleSSEEvent, {
+    const cancel = runAgent(session.id, finalPrompt || 'Please analyze the attached files.', handleSSEEvent, {
       onStreamId: (id) => setCurrentStreamId(id),
       attachments,
     });

package/web/.next/standalone/web/src/lib/api.ts

@@ -157,6 +157,39 @@ export async function getSessionTodos(sessionId: string): Promise<TodosResponse>
   return res.json();
 }
 
+export interface PendingInputResponse {
+  hasPendingInput: boolean;
+  text: string | null;
+  createdAt?: string;
+}
+
+// Get pending input for a session (from devtools, etc.)
+// This clears the pending input after reading
+export async function getPendingInput(sessionId: string): Promise<PendingInputResponse> {
+  const res = await fetch(`${getApiBase()}/sessions/${sessionId}/pending-input`);
+  return res.json();
+}
+
+export interface DevtoolsContextResponse {
+  connected: boolean;
+  context: {
+    url: string;
+    path: string;
+    pageName: string;
+    lastHeartbeat: string;
+  } | null;
+}
+
+// Get devtools context for a session (current page user is viewing)
+export async function getDevtoolsContext(sessionId: string): Promise<DevtoolsContextResponse> {
+  try {
+    const res = await fetch(`${getApiBase()}/sessions/${sessionId}/devtools-context`);
+    return res.json();
+  } catch {
+    return { connected: false, context: null };
+  }
+}
+
 export async function updateSession(id: string, updates: { model?: string; name?: string; toolApprovals?: Record<string, boolean> }): Promise<Session> {
   const res = await fetch(`${getApiBase()}/sessions/${id}`, {
     method: 'PATCH',