sparkecoder 0.1.61 → 0.1.63

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

@@ -2,8 +2,8 @@
 
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
-import { CheckCircle2, XCircle, AlertTriangle, ListChecks } from "lucide-react";
-import { CodeBlock } from "./code-block";
+import { CheckCircle2, XCircle, AlertTriangle } from "lucide-react";
+import { VisualJson, TreeView } from "@visual-json/react";
 
 interface CompleteTaskToolProps {
   toolName: "complete_task" | "task_failed";
@@ -12,7 +12,7 @@ interface CompleteTaskToolProps {
   status: string;
 }
 
-export function CompleteTaskTool({ toolName, input, output, status }: CompleteTaskToolProps) {
+export function CompleteTaskTool({ toolName, input, output }: CompleteTaskToolProps) {
   const isComplete = toolName === "complete_task";
   const isFailed = toolName === "task_failed";
   const isValidationError = output && (output as any).status === "validation_error";
@@ -20,7 +20,7 @@ export function CompleteTaskTool({ toolName, input, output, status }: CompleteTa
   return (
     <div
       className={cn(
-        "mb-4 w-full max-w-full overflow-hidden rounded-md border",
+        "mb-4 w-full max-w-full overflow-hidden rounded-lg border transition-colors",
         isComplete && !isValidationError && "border-emerald-500/30",
         isFailed && "border-red-500/30",
         isValidationError && "border-amber-500/30"
@@ -29,82 +29,65 @@ export function CompleteTaskTool({ toolName, input, output, status }: CompleteTa
       {/* Header */}
       <div
         className={cn(
-          "flex items-center gap-2 p-3",
+          "flex items-center gap-2.5 px-4 py-3",
           isComplete && !isValidationError && "bg-emerald-500/5",
           isFailed && "bg-red-500/5",
           isValidationError && "bg-amber-500/5"
         )}
       >
         {isValidationError ? (
-          <AlertTriangle className="size-4 text-amber-500" />
+          <AlertTriangle className="size-4 text-amber-500 shrink-0" />
         ) : isComplete ? (
-          <CheckCircle2 className="size-4 text-emerald-500" />
+          <CheckCircle2 className="size-4 text-emerald-500 shrink-0" />
         ) : (
-          <XCircle className="size-4 text-red-500" />
+          <XCircle className="size-4 text-red-500 shrink-0" />
         )}
         <span className="font-medium text-sm">
           {isValidationError
-            ? "Task Result — Validation Error"
+            ? "Schema mismatch"
             : isComplete
-            ? "Task Completed"
-            : "Task Failed"}
+            ? "Task completed"
+            : "Task failed"}
         </span>
-        <Badge
-          variant="secondary"
-          className={cn(
-            "ml-auto text-xs",
-            isComplete && !isValidationError && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
-            isFailed && "bg-red-500/10 text-red-600 dark:text-red-400",
-            isValidationError && "bg-amber-500/10 text-amber-600 dark:text-amber-400"
-          )}
-        >
-          <ListChecks className="size-3" />
-          {isValidationError ? "Retry Needed" : isComplete ? "Done" : "Failed"}
-        </Badge>
+        {isValidationError && (
+          <Badge
+            variant="secondary"
+            className="ml-auto text-[10px] bg-amber-500/10 text-amber-600 dark:text-amber-400"
+          >
+            Retry needed
+          </Badge>
+        )}
       </div>
 
       {/* Body */}
-      <div className="p-4 space-y-3">
-        {/* Show the result / reason */}
+      <div className="p-4">
+        {/* Completed — show result tree */}
         {isComplete && input.result && (
-          <div className="space-y-1.5">
-            <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-              Result
-            </h4>
-            <div className="rounded-md bg-muted/50 overflow-x-auto max-w-full">
-              <CodeBlock
-                code={JSON.stringify(input.result, null, 2)}
-                language="json"
-              />
-            </div>
+          <div className="rounded-md border bg-muted/30 overflow-hidden">
+            <VisualJson value={input.result as any}>
+              <TreeView className="max-h-64 text-sm" />
+            </VisualJson>
           </div>
         )}
 
+        {/* Failed — show reason */}
         {isFailed && input.reason && (
-          <div className="space-y-1.5">
-            <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-              Reason
-            </h4>
-            <p className="text-sm text-red-600 dark:text-red-400">
-              {String(input.reason)}
-            </p>
-          </div>
+          <p className="text-sm text-red-600 dark:text-red-400">
+            {String(input.reason)}
+          </p>
         )}
 
-        {/* Validation errors */}
+        {/* Validation errors — actionable detail */}
         {isValidationError && (output as any).errors && (
-          <div className="space-y-1.5">
-            <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-              Validation Errors
-            </h4>
-            <div className="rounded-md bg-amber-500/5 p-3 space-y-1">
+          <div className="space-y-2">
+            <div className="rounded-md bg-amber-500/5 border border-amber-500/20 p-3 space-y-1.5">
               {((output as any).errors as Array<{ path: string; message: string }>).map(
                 (err, i) => (
-                  <div key={i} className="text-sm">
-                    <code className="text-xs bg-muted px-1 py-0.5 rounded">
+                  <div key={i} className="flex items-baseline gap-2 text-sm">
+                    <code className="text-[11px] bg-muted px-1.5 py-0.5 rounded shrink-0 font-mono">
                       {err.path}
-                    </code>{" "}
-                    <span className="text-amber-600 dark:text-amber-400">
+                    </code>
+                    <span className="text-amber-700 dark:text-amber-300">
                       {err.message}
                     </span>
                   </div>
@@ -113,13 +96,6 @@ export function CompleteTaskTool({ toolName, input, output, status }: CompleteTa
             </div>
           </div>
         )}
-
-        {/* Status message from tool output */}
-        {output && (output as any).message && !isValidationError && (
-          <p className="text-xs text-muted-foreground">
-            {String((output as any).message)}
-          </p>
-        )}
       </div>
     </div>
   );

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

@@ -2654,42 +2654,46 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
       <Conversation className={cn("flex-1 p-4", isEmbed && "p-2")}>
         <ConversationContent className={cn("max-w-3xl mx-auto w-full", isEmbed && "max-w-none")}>
           {/* Task mode banner */}
-          {session.config?.task?.enabled && (
-            <div className={cn(
-              "mb-4 rounded-lg border p-3 text-sm",
-              session.config.task.status === 'completed' && "border-emerald-500/30 bg-emerald-500/5",
-              session.config.task.status === 'failed' && "border-red-500/30 bg-red-500/5",
-              session.config.task.status === 'running' && "border-blue-500/30 bg-blue-500/5",
-            )}>
-              <div className="flex items-center gap-2 mb-2">
-                <ListChecks className="size-4" />
-                <span className="font-medium">Task Mode</span>
-                <Badge variant="outline" className={cn(
-                  "text-xs",
-                  session.config.task.status === 'completed' && "border-emerald-500/30 text-emerald-600 dark:text-emerald-400",
-                  session.config.task.status === 'failed' && "border-red-500/30 text-red-600 dark:text-red-400",
-                  session.config.task.status === 'running' && "border-blue-500/30 text-blue-600 dark:text-blue-400",
+          {session.config?.task?.enabled && (() => {
+            const t = session.config.task!;
+            const isRunning = t.status === 'running';
+            const isDone = t.status === 'completed';
+            const isFailed = t.status === 'failed';
+            return (
+              <div className={cn(
+                "mb-4 rounded-lg border px-3.5 py-2.5 flex items-center gap-2.5 text-sm transition-colors",
+                isDone && "border-emerald-500/30 bg-emerald-500/5",
+                isFailed && "border-red-500/30 bg-red-500/5",
+                isRunning && "border-blue-500/30 bg-blue-500/5",
+              )}>
+                <ListChecks className={cn(
+                  "size-4 shrink-0",
+                  isDone && "text-emerald-500",
+                  isFailed && "text-red-500",
+                  isRunning && "text-blue-500",
+                )} />
+                <span className="font-medium truncate">{session.name || 'Task'}</span>
+                <span className={cn(
+                  "text-xs shrink-0",
+                  isDone && "text-emerald-600 dark:text-emerald-400",
+                  isFailed && "text-red-600 dark:text-red-400",
+                  isRunning && "text-blue-600 dark:text-blue-400 animate-pulse",
                 )}>
-                  {session.config.task.status === 'running' ? 'Running' : session.config.task.status === 'completed' ? 'Completed' : 'Failed'}
-                </Badge>
-                {session.config.task.iterations != null && (
-                  <span className="text-xs text-muted-foreground ml-auto">
-                    {session.config.task.iterations} iteration{session.config.task.iterations !== 1 ? 's' : ''}
+                  {isRunning ? 'Running' : isDone ? 'Completed' : 'Failed'}
+                </span>
+                {t.iterations != null && (
+                  <span className="text-xs text-muted-foreground ml-auto tabular-nums shrink-0">
+                    {t.iterations} iter.
+                  </span>
+                )}
+                {isFailed && t.error && (
+                  <span className="text-xs text-red-500 truncate ml-1" title={t.error}>
+                    — {t.error}
                   </span>
                 )}
               </div>
-              {session.config.task.webhookUrl && (
-                <div className="text-xs text-muted-foreground">
-                  Webhook: <code className="bg-muted px-1 py-0.5 rounded text-[10px]">{session.config.task.webhookUrl}</code>
-                </div>
-              )}
-              {session.config.task.error && (
-                <div className="mt-1 text-xs text-red-600 dark:text-red-400">
-                  Error: {session.config.task.error}
-                </div>
-              )}
-            </div>
-          )}
+            );
+          })()}
 
           {/* Loading history */}
           {isLoadingHistory && (

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, Volume2, ListChecks } from 'lucide-react';
+import { Plus, MessageSquare, Trash2, Loader2, Settings, PanelLeftClose, PanelLeft, Key, Check, X, Eye, EyeOff, Volume2, ListChecks, ChevronDown } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import {
   Sidebar,
@@ -42,7 +42,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { createSession, deleteSession, getApiKeys, setApiKey, type ApiKeyStatus } from '@/lib/api';
+import { createSession, createTask, deleteSession, getApiKeys, setApiKey, type ApiKeyStatus } from '@/lib/api';
+import { Textarea } from '@/components/ui/textarea';
+import { VisualJson, TreeView } from '@visual-json/react';
 import { getConfig, type AppConfig } from '@/lib/config';
 import { cn } from '@/lib/utils';
 import { useSessions, mutateSessions } from '@/hooks/use-sessions';
@@ -82,6 +84,18 @@ export function SessionsSidebar() {
   const [selectedModel, setSelectedModel] = useState('');
   const [toolApprovals, setToolApprovals] = useState<Record<string, boolean>>({});
 
+  // New task dialog state
+  const [taskDialogOpen, setTaskDialogOpen] = useState(false);
+  const [taskPrompt, setTaskPrompt] = useState('');
+  const defaultSchema = { type: 'object', properties: {}, required: [] as string[] };
+  const [taskSchema, setTaskSchema] = useState<Record<string, unknown>>(defaultSchema);
+  const [taskSchemaError, setTaskSchemaError] = useState('');
+  const [taskWebhookUrl, setTaskWebhookUrl] = useState('');
+  const [taskName, setTaskName] = useState('');
+  const [taskModel, setTaskModel] = useState('');
+  const [taskMaxIterations, setTaskMaxIterations] = useState('50');
+  const [creatingTask, setCreatingTask] = useState(false);
+
   // API Keys state
   const [apiKeys, setApiKeys] = useState<ApiKeyStatus[]>([]);
   const [editingProvider, setEditingProvider] = useState<string | null>(null);
@@ -217,6 +231,44 @@ export function SessionsSidebar() {
     }
   };
 
+  const resetTaskForm = () => {
+    setTaskPrompt('');
+    setTaskSchema(defaultSchema);
+    setTaskSchemaError('');
+    setTaskWebhookUrl('');
+    setTaskName('');
+    setTaskModel(config?.defaultModel || '');
+    setTaskMaxIterations('50');
+  };
+
+  const handleCreateTask = async () => {
+    if (!taskPrompt.trim()) return;
+    setTaskSchemaError('');
+    if (!taskSchema || typeof taskSchema !== 'object') {
+      setTaskSchemaError('Schema must be a JSON object');
+      return;
+    }
+    setCreatingTask(true);
+    try {
+      const result = await createTask({
+        prompt: taskPrompt,
+        outputSchema: taskSchema,
+        webhookUrl: taskWebhookUrl || undefined,
+        model: taskModel || config?.defaultModel,
+        name: taskName || undefined,
+        maxIterations: parseInt(taskMaxIterations) || 50,
+      });
+      mutateSessions();
+      setTaskDialogOpen(false);
+      resetTaskForm();
+      router.push(`${sessionBasePath}/${result.taskId}`);
+    } catch (err) {
+      console.error('Failed to create task:', err);
+    } finally {
+      setCreatingTask(false);
+    }
+  };
+
   const handleDelete = async (e: React.MouseEvent, id: string) => {
     e.preventDefault();
     e.stopPropagation();
@@ -307,18 +359,34 @@ export function SessionsSidebar() {
               </div>
             </div>
 
-            <Button 
-              onClick={handleQuickCreate}
-              disabled={creating}
-              className="w-full justify-center gap-2 h-9"
-            >
-              {creating ? (
-                <Loader2 className="size-4 animate-spin" />
-              ) : (
-                <Plus className="size-4" />
-              )}
-              New Agent
-            </Button>
+            <div className="flex gap-2 w-full">
+              <Button 
+                onClick={handleQuickCreate}
+                disabled={creating}
+                className="flex-1 justify-center gap-2 h-9"
+              >
+                {creating ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <Plus className="size-4" />
+                )}
+                New Agent
+              </Button>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button 
+                      variant="outline"
+                      onClick={() => { if (!config) loadConfig(); setTaskDialogOpen(true); }}
+                      className="h-9 px-2.5"
+                    >
+                      <ListChecks className="size-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">New Task</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
           </>
         )}
 
@@ -387,6 +455,23 @@ export function SessionsSidebar() {
                 <TooltipContent side="right">New Agent</TooltipContent>
               </Tooltip>
             </TooltipProvider>
+
+            {/* New Task button */}
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button 
+                    size="icon"
+                    variant="outline"
+                    onClick={() => { if (!config) loadConfig(); setTaskDialogOpen(true); }}
+                    className="size-8 mx-auto"
+                  >
+                    <ListChecks className="size-4" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">New Task</TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
         )}
       </SidebarHeader>
@@ -487,6 +572,136 @@ export function SessionsSidebar() {
         </DialogContent>
       </Dialog>
 
+      {/* New Task Dialog */}
+      <Dialog open={taskDialogOpen} onOpenChange={(open) => {
+        setTaskDialogOpen(open);
+        if (open) resetTaskForm();
+      }}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <div className="size-8 rounded-lg bg-blue-600 flex items-center justify-center">
+                <ListChecks className="size-4 text-white" />
+              </div>
+              New Task
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 pt-2">
+            {/* Prompt — the most important field, given visual priority */}
+            <div className="space-y-1.5">
+              <Label htmlFor="task-prompt" className="text-sm font-medium">What should the agent do?</Label>
+              <Textarea
+                id="task-prompt"
+                placeholder="e.g. Refactor the auth module to use JWT tokens..."
+                value={taskPrompt}
+                onChange={(e) => setTaskPrompt(e.target.value)}
+                rows={3}
+                autoFocus
+              />
+            </div>
+
+            {/* Expected output shape */}
+            <div className="space-y-1.5">
+              <Label className="text-sm font-medium">Expected output shape</Label>
+              <p className="text-[11px] text-muted-foreground -mt-0.5">Define the JSON structure the agent must return</p>
+              <div className={cn(
+                "rounded-md border bg-muted/30 overflow-hidden transition-colors",
+                taskSchemaError && "border-red-500"
+              )}>
+                <VisualJson
+                  value={taskSchema as any}
+                  onChange={(v) => { setTaskSchema(v as Record<string, unknown>); setTaskSchemaError(''); }}
+                >
+                  <TreeView className="h-44 text-sm" />
+                </VisualJson>
+              </div>
+              {taskSchemaError && (
+                <p className="text-xs text-red-500 mt-1">{taskSchemaError}</p>
+              )}
+            </div>
+
+            {/* Model + Name side by side */}
+            <div className="grid grid-cols-2 gap-3">
+              <div className="space-y-1.5">
+                <Label className="text-xs text-muted-foreground">Model</Label>
+                <Select value={taskModel} onValueChange={setTaskModel}>
+                  <SelectTrigger className="h-9">
+                    <SelectValue placeholder="Select a model" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {config?.availableModels.map((model) => (
+                      <SelectItem key={model.id} value={model.id}>
+                        <div className="flex items-center gap-2">
+                          <span>{model.name}</span>
+                          <span className="text-xs text-muted-foreground">{model.provider}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1.5">
+                <Label htmlFor="task-name" className="text-xs text-muted-foreground">Name</Label>
+                <Input
+                  id="task-name"
+                  placeholder="Optional"
+                  value={taskName}
+                  onChange={(e) => setTaskName(e.target.value)}
+                  className="h-9"
+                />
+              </div>
+            </div>
+
+            {/* Advanced — hidden by default */}
+            <details className="group">
+              <summary className="flex items-center gap-1.5 text-xs text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors">
+                <ChevronDown className="size-3 transition-transform group-open:rotate-180" />
+                Advanced
+              </summary>
+              <div className="grid grid-cols-2 gap-3 pt-3">
+                <div className="space-y-1.5">
+                  <Label htmlFor="task-webhook" className="text-xs text-muted-foreground">Webhook URL</Label>
+                  <Input
+                    id="task-webhook"
+                    placeholder="https://..."
+                    value={taskWebhookUrl}
+                    onChange={(e) => setTaskWebhookUrl(e.target.value)}
+                    className="h-9"
+                  />
+                </div>
+                <div className="space-y-1.5">
+                  <Label htmlFor="task-iterations" className="text-xs text-muted-foreground">Max iterations</Label>
+                  <Input
+                    id="task-iterations"
+                    type="number"
+                    min={1}
+                    max={500}
+                    value={taskMaxIterations}
+                    onChange={(e) => setTaskMaxIterations(e.target.value)}
+                    className="h-9"
+                  />
+                </div>
+              </div>
+            </details>
+
+            <Button
+              onClick={handleCreateTask}
+              disabled={creatingTask || !taskPrompt.trim()}
+              className="w-full"
+            >
+              {creatingTask ? (
+                <>
+                  <Loader2 className="size-4 animate-spin mr-2" />
+                  Creating...
+                </>
+              ) : (
+                'Start Task'
+              )}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
       {/* Sessions List */}
       <SidebarContent className="px-2">
         <SidebarGroup className="p-0">
@@ -598,7 +813,7 @@ export function SessionsSidebar() {
                             <Badge
                               variant="outline"
                               className={cn(
-                                "shrink-0 text-[9px] px-1.5 py-0 h-4 font-medium",
+                                "shrink-0 text-[10px] px-1.5 py-0 h-4 font-medium gap-1",
                                 session.config.task.status === 'completed' && "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
                                 session.config.task.status === 'failed' && "border-red-500/30 bg-red-500/10 text-red-600 dark:text-red-400",
                                 session.config.task.status === 'running' && "border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-400",
@@ -626,7 +841,7 @@ export function SessionsSidebar() {
                                 <TooltipContent side="right">Delete session</TooltipContent>
                               </Tooltip>
                             </TooltipProvider>
-                          ) : isRunning ? (
+                          ) : isRunning && !session.config?.task?.enabled ? (
                             <span className="inline-flex items-center gap-1 text-[10px] text-emerald-600 dark:text-emerald-400 shrink-0 font-medium">
                               Active
                             </span>

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

@@ -164,6 +164,23 @@ export async function deleteSession(id: string): Promise<void> {
   await fetch(`${getApiBase()}/sessions/${id}`, { method: 'DELETE' });
 }
 
+// Tasks API
+export async function createTask(params: {
+  prompt: string;
+  outputSchema: Record<string, unknown>;
+  webhookUrl?: string;
+  model?: string;
+  name?: string;
+  maxIterations?: number;
+}): Promise<{ taskId: string; status: string }> {
+  const res = await fetch(`${getApiBase()}/tasks`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(params),
+  });
+  return res.json();
+}
+
 export async function getSessionTodos(sessionId: string): Promise<TodosResponse> {
   const res = await fetch(`${getApiBase()}/sessions/${sessionId}/todos`);
   return res.json();