sparkecoder 0.1.83 → 0.1.85

package/web/.next/standalone/web/src/components/ai-elements/todo-panel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { type TodoItem, type TodosResponse } from "@/lib/api";
+import { type TodoItem, type TodosResponse, type PlanItem } from "@/lib/api";
 import {
   CheckCircle2Icon,
   CircleIcon,
@@ -10,6 +10,8 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
   ListTodoIcon,
+  FileTextIcon,
+  XIcon,
 } from "lucide-react";
 import { useState } from "react";
 import {
@@ -20,6 +22,7 @@ import {
 
 export interface TodoPanelProps {
   todosData: TodosResponse | null;
+  plans?: PlanItem[];
   isLoading?: boolean;
   className?: string;
 }
@@ -38,14 +41,20 @@ const statusColors: Record<string, string> = {
   cancelled: "text-muted-foreground/50",
 };
 
-export function TodoPanel({ todosData, isLoading, className }: TodoPanelProps) {
+export function TodoPanel({ todosData, plans, isLoading, className }: TodoPanelProps) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const [viewingPlan, setViewingPlan] = useState<PlanItem | null>(null);
+
+  const hasTodos = todosData && todosData.todos.length > 0;
+  const hasPlans = plans && plans.length > 0;
   
-  if (!todosData || todosData.todos.length === 0) {
+  if (!hasTodos && !hasPlans) {
     return null;
   }
 
-  const { todos, stats, nextTodo } = todosData;
+  const todos = todosData?.todos || [];
+  const stats = todosData?.stats || { total: 0, pending: 0, inProgress: 0, completed: 0, cancelled: 0 };
+  const nextTodo = todosData?.nextTodo || null;
   
   // Sort: in_progress first, then pending, then completed/cancelled
   const sortedTodos = [...todos].sort((a, b) => {
@@ -58,121 +67,196 @@ export function TodoPanel({ todosData, isLoading, className }: TodoPanelProps) {
     : 0;
 
   return (
-    <div className={cn(
-      "rounded-lg border bg-card/50 backdrop-blur-sm overflow-hidden",
-      className
-    )}>
-      {/* Header - always shows current task and stats */}
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center justify-between w-full px-3 py-2 hover:bg-muted/50 transition-colors"
-      >
-        <div className="flex items-center gap-2 min-w-0 flex-1">
-          <ListTodoIcon className="size-4 text-primary shrink-0" />
-          {/* Show current task inline when collapsed */}
-          {!isExpanded && nextTodo ? (
-            <div className="flex items-center gap-2 min-w-0 flex-1">
-              <CircleDotIcon className="size-3.5 text-primary shrink-0" />
-              <span className="text-sm truncate">{nextTodo.content}</span>
-            </div>
-          ) : (
-            <span className="font-medium text-sm">Tasks</span>
-          )}
-          <span className="text-xs text-muted-foreground shrink-0">
-            {stats.completed}/{stats.total}
-          </span>
-        </div>
-        <div className="flex items-center gap-2 shrink-0">
-          {/* Progress bar */}
-          <div className="w-16 h-1.5 bg-muted rounded-full overflow-hidden">
-            <div 
-              className="h-full bg-primary transition-all duration-300"
-              style={{ width: `${progressPercent}%` }}
-            />
+    <>
+      <div className={cn(
+        "rounded-lg border bg-card/50 backdrop-blur-sm overflow-hidden",
+        className
+      )}>
+        {/* Header - always shows current task and stats */}
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center justify-between w-full px-3 py-2 hover:bg-muted/50 transition-colors"
+        >
+          <div className="flex items-center gap-2 min-w-0 flex-1">
+            <ListTodoIcon className="size-4 text-primary shrink-0" />
+            {/* Show current task inline when collapsed */}
+            {!isExpanded && nextTodo ? (
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <CircleDotIcon className="size-3.5 text-primary shrink-0" />
+                <span className="text-sm truncate">{nextTodo.content}</span>
+              </div>
+            ) : (
+              <span className="font-medium text-sm">Tasks</span>
+            )}
+            {stats.total > 0 && (
+              <span className="text-xs text-muted-foreground shrink-0">
+                {stats.completed}/{stats.total}
+              </span>
+            )}
+            {hasPlans && (
+              <span className="text-xs text-muted-foreground shrink-0 flex items-center gap-1">
+                <FileTextIcon className="size-3" />
+                {plans!.length} plan{plans!.length !== 1 ? 's' : ''}
+              </span>
+            )}
           </div>
-          {isExpanded ? (
-            <ChevronDownIcon className="size-4 text-muted-foreground" />
-          ) : (
-            <ChevronRightIcon className="size-4 text-muted-foreground" />
-          )}
-        </div>
-      </button>
-
-      {isExpanded && (
-        <div className="border-t">
-          {/* Next todo highlight */}
-          {nextTodo && (
-            <div className="px-3 py-2 bg-primary/5 border-b flex items-center gap-2">
-              <CircleDotIcon className="size-4 text-primary shrink-0" />
-              <div className="min-w-0 flex-1">
-                <span className="text-xs text-primary font-medium uppercase tracking-wide">
-                  Current
-                </span>
-                <p className="text-sm font-medium truncate">{nextTodo.content}</p>
+          <div className="flex items-center gap-2 shrink-0">
+            {stats.total > 0 && (
+              <div className="w-16 h-1.5 bg-muted rounded-full overflow-hidden">
+                <div 
+                  className="h-full bg-primary transition-all duration-300"
+                  style={{ width: `${progressPercent}%` }}
+                />
               </div>
-            </div>
-          )}
-
-          {/* Todo list */}
-          <div className="max-h-[200px] overflow-auto">
-            {sortedTodos.map((todo) => {
-              const Icon = statusIcons[todo.status] || CircleIcon;
-              const color = statusColors[todo.status] || "text-muted-foreground";
-              const isNext = todo.id === nextTodo?.id;
-              
-              return (
-                <Tooltip key={todo.id}>
-                  <TooltipTrigger asChild>
-                    <div 
-                      className={cn(
-                        "flex items-start gap-2 px-3 py-1.5 hover:bg-muted/30 transition-colors cursor-default",
-                        isNext && "bg-primary/5"
-                      )}
-                    >
-                      <Icon className={cn("size-4 mt-0.5 shrink-0", color)} />
-                      <span className={cn(
-                        "text-sm flex-1 min-w-0 truncate",
-                        todo.status === "cancelled" && "line-through text-muted-foreground/50",
-                        todo.status === "completed" && "text-muted-foreground"
-                      )}>
-                        {todo.content}
-                      </span>
-                    </div>
-                  </TooltipTrigger>
-                  <TooltipContent side="left" className="max-w-xs">
-                    <p className="text-sm">{todo.content}</p>
-                    <p className="text-xs text-muted-foreground capitalize mt-1">
-                      {todo.status.replace('_', ' ')}
-                    </p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
+            )}
+            {isExpanded ? (
+              <ChevronDownIcon className="size-4 text-muted-foreground" />
+            ) : (
+              <ChevronRightIcon className="size-4 text-muted-foreground" />
+            )}
           </div>
+        </button>
 
-          {/* Stats footer */}
-          <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center gap-3 text-xs text-muted-foreground">
-            {stats.inProgress > 0 && (
-              <span className="flex items-center gap-1">
-                <CircleDotIcon className="size-3 text-primary" />
-                {stats.inProgress} active
-              </span>
+        {isExpanded && (
+          <div className="border-t">
+            {/* Plans section */}
+            {hasPlans && (
+              <div className="border-b">
+                {plans!.map((plan) => (
+                  <button
+                    key={plan.name}
+                    onClick={() => setViewingPlan(plan)}
+                    className="flex items-center gap-2 w-full px-3 py-1.5 hover:bg-muted/30 transition-colors text-left"
+                  >
+                    <FileTextIcon className="size-4 text-blue-500 shrink-0" />
+                    <span className="text-sm font-medium flex-1 min-w-0 truncate">{plan.name}</span>
+                    <span className="text-xs text-muted-foreground shrink-0">View</span>
+                  </button>
+                ))}
+              </div>
             )}
-            {stats.pending > 0 && (
-              <span className="flex items-center gap-1">
-                <CircleIcon className="size-3" />
-                {stats.pending} pending
-              </span>
+
+            {/* Next todo highlight */}
+            {nextTodo && (
+              <div className="px-3 py-2 bg-primary/5 border-b flex items-center gap-2">
+                <CircleDotIcon className="size-4 text-primary shrink-0" />
+                <div className="min-w-0 flex-1">
+                  <span className="text-xs text-primary font-medium uppercase tracking-wide">
+                    Current
+                  </span>
+                  <p className="text-sm font-medium truncate">{nextTodo.content}</p>
+                </div>
+              </div>
             )}
-            {stats.completed > 0 && (
-              <span className="flex items-center gap-1">
-                <CheckCircle2Icon className="size-3 text-green-500" />
-                {stats.completed} done
-              </span>
+
+            {/* Todo list */}
+            {sortedTodos.length > 0 && (
+              <div className="max-h-[200px] overflow-auto">
+                {sortedTodos.map((todo) => {
+                  const Icon = statusIcons[todo.status] || CircleIcon;
+                  const color = statusColors[todo.status] || "text-muted-foreground";
+                  const isNext = todo.id === nextTodo?.id;
+                  
+                  return (
+                    <Tooltip key={todo.id}>
+                      <TooltipTrigger asChild>
+                        <div 
+                          className={cn(
+                            "flex items-start gap-2 px-3 py-1.5 hover:bg-muted/30 transition-colors cursor-default",
+                            isNext && "bg-primary/5"
+                          )}
+                        >
+                          <Icon className={cn("size-4 mt-0.5 shrink-0", color)} />
+                          <span className={cn(
+                            "text-sm flex-1 min-w-0 truncate",
+                            todo.status === "cancelled" && "line-through text-muted-foreground/50",
+                            todo.status === "completed" && "text-muted-foreground"
+                          )}>
+                            {todo.content}
+                          </span>
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent side="left" className="max-w-xs">
+                        <p className="text-sm">{todo.content}</p>
+                        <p className="text-xs text-muted-foreground capitalize mt-1">
+                          {todo.status.replace('_', ' ')}
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Stats footer */}
+            {stats.total > 0 && (
+              <div className="px-3 py-1.5 border-t bg-muted/30 flex items-center gap-3 text-xs text-muted-foreground">
+                {stats.inProgress > 0 && (
+                  <span className="flex items-center gap-1">
+                    <CircleDotIcon className="size-3 text-primary" />
+                    {stats.inProgress} active
+                  </span>
+                )}
+                {stats.pending > 0 && (
+                  <span className="flex items-center gap-1">
+                    <CircleIcon className="size-3" />
+                    {stats.pending} pending
+                  </span>
+                )}
+                {stats.completed > 0 && (
+                  <span className="flex items-center gap-1">
+                    <CheckCircle2Icon className="size-3 text-green-500" />
+                    {stats.completed} done
+                  </span>
+                )}
+              </div>
             )}
           </div>
+        )}
+      </div>
+
+      {/* Plan viewer modal */}
+      {viewingPlan && (
+        <div 
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+          onClick={() => setViewingPlan(null)}
+        >
+          <div 
+            className="bg-background rounded-xl border shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col mx-4"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal header */}
+            <div className="flex items-center justify-between px-5 py-4 border-b shrink-0">
+              <div className="flex items-center gap-2 min-w-0">
+                <FileTextIcon className="size-5 text-blue-500 shrink-0" />
+                <h2 className="font-semibold text-lg truncate">{viewingPlan.name}</h2>
+              </div>
+              <button
+                onClick={() => setViewingPlan(null)}
+                className="p-1 rounded-md hover:bg-muted transition-colors shrink-0"
+              >
+                <XIcon className="size-5" />
+              </button>
+            </div>
+            {/* Modal body — markdown content */}
+            <div className="overflow-auto flex-1 px-5 py-4">
+              <div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap font-mono text-sm leading-relaxed">
+                {viewingPlan.content}
+              </div>
+            </div>
+            {/* Modal footer */}
+            <div className="px-5 py-3 border-t bg-muted/30 flex items-center justify-between text-xs text-muted-foreground shrink-0">
+              <span>{viewingPlan.sizeChars.toLocaleString()} characters</span>
+              <button
+                onClick={() => setViewingPlan(null)}
+                className="px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:bg-primary/90 transition-colors"
+              >
+                Close
+              </button>
+            </div>
+          </div>
         </div>
       )}
-    </div>
+    </>
   );
 }

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

@@ -13,6 +13,10 @@ import {
   TrashIcon,
   XCircleIcon,
   ClockIcon,
+  FileTextIcon,
+  FolderOpenIcon,
+  EyeIcon,
+  Trash2Icon,
 } from "lucide-react";
 import { useState } from "react";
 
@@ -25,10 +29,12 @@ export interface TodoItem {
 }
 
 export interface TodoInput {
-  action: "add" | "list" | "mark" | "clear";
+  action: "add" | "list" | "mark" | "clear" | "save_plan" | "list_plans" | "get_plan" | "delete_plan";
   items?: { content: string; order?: number }[];
   todoId?: string;
   status?: "pending" | "in_progress" | "completed" | "cancelled";
+  planName?: string;
+  planContent?: string;
 }
 
 export interface TodoOutput {
@@ -46,6 +52,14 @@ export interface TodoOutput {
     completed: number;
     cancelled: number;
   };
+  planName?: string;
+  filename?: string;
+  sizeChars?: number;
+  content?: string;
+  plans?: Array<{ name: string; title: string; filename: string; sizeChars: number }>;
+  count?: number;
+  autoCreatedTodos?: TodoItem[];
+  autoCreatedFromPhase?: string;
 }
 
 export interface TodoToolProps {
@@ -74,6 +88,10 @@ const actionLabels: Record<string, string> = {
   list: "List Tasks",
   mark: "Update Task",
   clear: "Clear Tasks",
+  save_plan: "Save Plan",
+  list_plans: "List Plans",
+  get_plan: "View Plan",
+  delete_plan: "Delete Plan",
 };
 
 const ActionIcon = ({ action }: { action: string }) => {
@@ -86,6 +104,14 @@ const ActionIcon = ({ action }: { action: string }) => {
       return <CheckCircleIcon className="size-3.5" />;
     case "clear":
       return <TrashIcon className="size-3.5" />;
+    case "save_plan":
+      return <FileTextIcon className="size-3.5" />;
+    case "list_plans":
+      return <FolderOpenIcon className="size-3.5" />;
+    case "get_plan":
+      return <EyeIcon className="size-3.5" />;
+    case "delete_plan":
+      return <Trash2Icon className="size-3.5" />;
     default:
       return <ListTodoIcon className="size-3.5" />;
   }
@@ -225,6 +251,57 @@ export function TodoTool({
             </div>
           )}
 
+          {/* Plan actions output */}
+          {output?.action === "save_plan" && output.planName && (
+            <div className="px-3 py-2 space-y-1">
+              <div className="flex items-center gap-2 text-sm">
+                <FileTextIcon className="size-4 text-blue-500 shrink-0" />
+                <span className="font-medium">{output.planName}</span>
+                <span className="text-xs text-muted-foreground">
+                  ({(output.sizeChars ?? 0).toLocaleString()} chars)
+                </span>
+              </div>
+              {output.autoCreatedTodos && output.autoCreatedTodos.length > 0 && (
+                <div className="mt-2 pt-2 border-t">
+                  <span className="text-xs text-green-600 dark:text-green-400 font-medium">
+                    Auto-created {output.autoCreatedTodos.length} todo(s) from plan
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
+          {output?.action === "list_plans" && output.plans && (
+            <div className="px-3 py-2 max-h-[200px] overflow-auto">
+              {output.plans.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No plans yet</p>
+              ) : (
+                output.plans.map((plan) => (
+                  <div key={plan.name} className="flex items-center gap-2 py-1">
+                    <FileTextIcon className="size-4 text-blue-500 shrink-0" />
+                    <span className="text-sm font-medium">{plan.title || plan.name}</span>
+                    <span className="text-xs text-muted-foreground">
+                      ({plan.sizeChars.toLocaleString()} chars)
+                    </span>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+          {output?.action === "get_plan" && output.content && (
+            <div className="px-3 py-2 max-h-[300px] overflow-auto">
+              <pre className="text-xs font-mono whitespace-pre-wrap leading-relaxed text-muted-foreground">
+                {output.content.length > 2000
+                  ? output.content.slice(0, 2000) + '\n... (truncated in UI)'
+                  : output.content}
+              </pre>
+            </div>
+          )}
+          {output?.action === "delete_plan" && output.planName && (
+            <div className="px-3 py-2 text-sm text-muted-foreground">
+              Deleted plan: {output.planName}
+            </div>
+          )}
+
           {/* Empty state */}
           {action === "list" && output?.items?.length === 0 && (
             <div className="px-3 py-4 text-center text-muted-foreground text-sm">

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

@@ -97,6 +97,8 @@ import {
   updateSession,
   updateToolApproval,
   getSessionTodos,
+  getSessionPlans,
+  type PlanItem,
   getSessionCheckpoints,
   revertToCheckpoint,
   checkVersion,
@@ -403,6 +405,7 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
   const [currentToolCalls, setCurrentToolCalls] = useState<ToolCallInfo[]>([]);
   const [pendingApprovals, setPendingApprovals] = useState<PendingApproval[]>([]);
   const [todosData, setTodosData] = useState<TodosResponse | null>(null);
+  const [plansData, setPlansData] = useState<PlanItem[]>([]);
   const [checkpoints, setCheckpoints] = useState<Checkpoint[]>([]);
   const [isReverting, setIsReverting] = useState(false);
   const currentTextRef = useRef('');
@@ -1621,21 +1624,24 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
     let isStale = false;
     const currentSessionId = session.id;
     
-    const checkTodos = async () => {
+    const checkTodosAndPlans = async () => {
       try {
-        const data = await getSessionTodos(currentSessionId);
-        // Don't update state if session changed during async work
+        const [todosResult, plansResult] = await Promise.all([
+          getSessionTodos(currentSessionId),
+          getSessionPlans(currentSessionId).catch(() => ({ plans: [] as PlanItem[] })),
+        ]);
         if (isStale) return;
-        setTodosData(data);
+        setTodosData(todosResult);
+        setPlansData(plansResult.plans || []);
       } catch {
         // Ignore errors
       }
     };
     // Initial fetch
-    checkTodos();
+    checkTodosAndPlans();
     // Poll every 2 seconds when running, 5 seconds otherwise
     const pollInterval = isRunning ? 1000 : 5000;
-    const interval = setInterval(checkTodos, pollInterval);
+    const interval = setInterval(checkTodosAndPlans, pollInterval);
     return () => {
       isStale = true;
       clearInterval(interval);
@@ -2813,10 +2819,10 @@ export function ChatInterface({ session, isEmbed = false }: ChatInterfaceProps)
         </div>
       )}
 
-      {/* Todo Panel - hidden in embed mode */}
-      {!isEmbed && todosData && todosData.todos && todosData.todos.length > 0 && (
+      {/* Todo Panel + Plans - hidden in embed mode */}
+      {!isEmbed && ((todosData && todosData.todos && todosData.todos.length > 0) || plansData.length > 0) && (
         <div className="px-4 py-2 border-b border-border/50 bg-muted/20">
-          <TodoPanel todosData={todosData} />
+          <TodoPanel todosData={todosData} plans={plansData} />
         </div>
       )}
 

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

@@ -187,6 +187,23 @@ export async function getSessionTodos(sessionId: string): Promise<TodosResponse>
   return res.json();
 }
 
+export interface PlanItem {
+  name: string;
+  content: string;
+  sizeChars: number;
+}
+
+export interface PlansResponse {
+  sessionId: string;
+  plans: PlanItem[];
+  count: number;
+}
+
+export async function getSessionPlans(sessionId: string): Promise<PlansResponse> {
+  const res = await fetch(`${getApiBase()}/sessions/${sessionId}/plans`);
+  return res.json();
+}
+
 export interface PendingInputResponse {
   hasPendingInput: boolean;
   text: string | null;