mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
refactor: integrate TodoListMiddleware and update related components
- Removed the write_todos tool as it is now included by default through TodoListMiddleware in the deep agent. - Updated the system prompt and documentation to reflect the integration of TodoListMiddleware, clarifying its capabilities for managing planning and todo lists. - Enhanced the chat handling logic to extract todos directly from the deep agent's command output, ensuring seamless user experience. - Refactored UI components to align with the new data structure and improve rendering of todo items, including updates to the Plan and TodoItem components. - Cleaned up code for better maintainability and readability, following recent refactoring efforts.
This commit is contained in:
Anish Sarkar
parent
8a3ab3dfac
commit
c28a90fc29
10 changed files with 172 additions and 419 deletions
|
|
@ -50,6 +50,9 @@ def create_surfsense_deep_agent(
|
|||
- display_image: Display images in chat
|
||||
- scrape_webpage: Extract content from webpages
|
||||
|
||||
The agent also includes TodoListMiddleware by default (via create_deep_agent) which provides:
|
||||
- write_todos: Create and update planning/todo lists for complex tasks
|
||||
|
||||
The system prompt can be configured via agent_config:
|
||||
- Custom system instructions (or use defaults)
|
||||
- Citation toggle (enable/disable citation requirements)
|
||||
|
|
@ -138,6 +141,7 @@ def create_surfsense_deep_agent(
|
|||
system_prompt = build_surfsense_system_prompt()
|
||||
|
||||
# Create the deep agent with system prompt and checkpointer
|
||||
# Note: TodoListMiddleware (write_todos) is included by default in create_deep_agent
|
||||
agent = create_deep_agent(
|
||||
model=llm,
|
||||
tools=tools,
|
||||
|
|
|
|||
|
|
@ -111,64 +111,19 @@ You have access to the following tools:
|
|||
* Don't show every image - just the most relevant 1-3 images that enhance understanding.
|
||||
|
||||
6. write_todos: Create and update a planning/todo list to break down complex tasks.
|
||||
- Use this tool when you need to plan your approach to a complex task.
|
||||
- This displays a visual plan with progress tracking and status indicators.
|
||||
|
||||
- USAGE PATTERN:
|
||||
* First call: Create the plan with first task as "in_progress", rest as "pending"
|
||||
* Subsequent calls: ONLY update task statuses (mark completed/in_progress)
|
||||
* Use the EXACT SAME title and task IDs for all updates
|
||||
|
||||
- ABSOLUTELY FORBIDDEN - WILL BREAK THE SYSTEM:
|
||||
* ONLY ONE PLAN PER CONVERSATION - NEVER call write_todos a second time to create a new plan
|
||||
* When all tasks in your plan are "completed", your response is FINISHED - STOP
|
||||
* NEVER restart your response after completing it
|
||||
* NEVER generate the same explanation twice
|
||||
* NEVER create a second introduction or overview after the first one
|
||||
* NEVER say "Let me explain..." twice for the same topic
|
||||
* If you've already explained something, DO NOT explain it again
|
||||
* After your response ends, STOP - do not continue generating
|
||||
* NEVER say you're creating a "document", "report", "roadmap", "analysis", or any artifact
|
||||
* Do NOT use phrases like "This report is based on..." or "Based on my research..."
|
||||
* Just answer the question directly - do not roleplay producing a deliverable
|
||||
|
||||
- CORRECT BEHAVIOR:
|
||||
* Call write_todos to update statuses as you progress
|
||||
* Each section of your response appears EXACTLY ONCE
|
||||
* When you finish explaining all tasks, your response is COMPLETE
|
||||
* Do NOT generate additional content after concluding
|
||||
|
||||
- CONTENT QUALITY:
|
||||
* Provide thorough, detailed explanations for each task
|
||||
* The restriction is on DUPLICATING content, not on depth or detail
|
||||
* Each task deserves a complete, comprehensive explanation
|
||||
* Be as detailed as needed - just don't repeat yourself
|
||||
|
||||
- IMPORTANT: Use this tool when the user asks you to create a plan, break down a task, or explain something in structured steps.
|
||||
- This tool creates a visual plan with progress tracking that the user can see in the UI.
|
||||
- When to use:
|
||||
* Breaking down a complex multi-step task (3-5 tasks recommended)
|
||||
* Showing the user what steps you'll take to solve their problem
|
||||
* Creating an implementation roadmap
|
||||
|
||||
* User asks to "create a plan" or "break down" a task
|
||||
* User asks for "steps" to do something
|
||||
* User asks you to "explain" something in sections
|
||||
* Any multi-step task that would benefit from structured planning
|
||||
- Args:
|
||||
- todos: List of todo items, each with:
|
||||
* id: Unique identifier (KEEP SAME IDs across updates)
|
||||
* content: Description of the task (KEEP SAME content across updates)
|
||||
* status: "pending", "in_progress", or "completed"
|
||||
* description: Optional subtask/detail text shown when the item is expanded (e.g., "Analyzing document structure and key concepts")
|
||||
- title: Title for the plan (MUST BE IDENTICAL across all updates)
|
||||
- description: Optional context description
|
||||
|
||||
- Returns: A visual plan card with progress bar and status indicators
|
||||
|
||||
- CORRECT PATTERN:
|
||||
1. Create plan with task 1 as "in_progress"
|
||||
2. Explain task 1 content in detail
|
||||
3. Update plan: task 1 "completed", task 2 "in_progress"
|
||||
4. Explain task 2 content (NEW content, not repeating task 1)
|
||||
5. Continue until all tasks are "completed"
|
||||
6. When all tasks are "completed", your response is FINISHED
|
||||
7. STOP IMMEDIATELY - do NOT create another plan or continue generating
|
||||
8. ONE PLAN ONLY - never call write_todos again after completing all tasks
|
||||
* content: Description of the task (required)
|
||||
* status: "pending", "in_progress", or "completed" (required)
|
||||
- The tool automatically adds IDs and formats the output for the UI.
|
||||
- Example: When user says "Create a plan for building a REST API", call write_todos with todos containing the steps.
|
||||
</tools>
|
||||
<tool_call_examples>
|
||||
- User: "Fetch all my notes and what's in them?"
|
||||
|
|
@ -227,21 +182,13 @@ You have access to the following tools:
|
|||
- Call: `display_image(src="https://example.com/nn-diagram.png", alt="Neural Network Diagram", title="Neural Network Architecture")`
|
||||
- Then provide your explanation, referencing the displayed image
|
||||
|
||||
- User: "Help me implement a user authentication system"
|
||||
- Step 1: Create plan with task 1 in_progress:
|
||||
`write_todos(title="Auth Plan", todos=[{"id": "1", "content": "Design database schema", "status": "in_progress"}, {"id": "2", "content": "Set up password hashing", "status": "pending"}, {"id": "3", "content": "Create endpoints", "status": "pending"}])`
|
||||
- Step 2: Provide DETAILED explanation of database schema design
|
||||
- Step 3: Update plan (task 1 done, task 2 in_progress):
|
||||
`write_todos(title="Auth Plan", todos=[{"id": "1", "content": "Design database schema", "status": "completed"}, {"id": "2", "content": "Set up password hashing", "status": "in_progress"}, {"id": "3", "content": "Create endpoints", "status": "pending"}])`
|
||||
- Step 4: Provide DETAILED explanation of password hashing (NEW content only)
|
||||
- Step 5: Update plan, explain endpoints in detail
|
||||
- Step 6: Mark all complete, END response - DO NOT restart or regenerate
|
||||
- FORBIDDEN: Do not go back and explain schema again after step 2
|
||||
- User: "Create a plan for building a user authentication system"
|
||||
- Call: `write_todos(todos=[{"content": "Design database schema for users and sessions", "status": "in_progress"}, {"content": "Implement registration and login endpoints", "status": "pending"}, {"content": "Add password reset functionality", "status": "pending"}])`
|
||||
- Then explain each step in detail as you work through them
|
||||
|
||||
- User: "How should I approach refactoring this large codebase?"
|
||||
- Create plan, explain each step with thorough detail, update statuses as you go
|
||||
- Each explanation is comprehensive but appears ONLY ONCE
|
||||
- When finished with all tasks, STOP - do not continue generating
|
||||
- User: "Break down how to build a REST API into steps"
|
||||
- Call: `write_todos(todos=[{"content": "Design API endpoints and data models", "status": "in_progress"}, {"content": "Set up server framework and routing", "status": "pending"}, {"content": "Implement CRUD operations", "status": "pending"}, {"content": "Add authentication and error handling", "status": "pending"}])`
|
||||
- Then provide detailed explanations for each step
|
||||
</tool_call_examples>
|
||||
"""
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,6 @@ from .knowledge_base import create_search_knowledge_base_tool
|
|||
from .link_preview import create_link_preview_tool
|
||||
from .podcast import create_generate_podcast_tool
|
||||
from .scrape_webpage import create_scrape_webpage_tool
|
||||
from .write_todos import create_write_todos_tool
|
||||
|
||||
# =============================================================================
|
||||
# Tool Definition
|
||||
|
|
@ -126,13 +125,7 @@ BUILTIN_TOOLS: list[ToolDefinition] = [
|
|||
),
|
||||
requires=[], # firecrawl_api_key is optional
|
||||
),
|
||||
# Planning/Todo tool - creates visual todo lists
|
||||
ToolDefinition(
|
||||
name="write_todos",
|
||||
description="Create a planning/todo list to break down complex tasks",
|
||||
factory=lambda deps: create_write_todos_tool(),
|
||||
requires=[],
|
||||
),
|
||||
# Note: write_todos is now provided by TodoListMiddleware from deepagents
|
||||
# =========================================================================
|
||||
# ADD YOUR CUSTOM TOOLS BELOW
|
||||
# =========================================================================
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
"""
|
||||
Write todos tool for the SurfSense agent.
|
||||
|
||||
This module provides a tool for creating and displaying a planning/todo list
|
||||
in the chat UI. It helps the agent break down complex tasks into steps.
|
||||
"""
|
||||
|
||||
from typing import Any
|
||||
|
||||
from langchain_core.tools import tool
|
||||
|
||||
|
||||
def create_write_todos_tool():
|
||||
"""
|
||||
Factory function to create the write_todos tool.
|
||||
|
||||
Returns:
|
||||
A configured tool function for writing todos/plans.
|
||||
"""
|
||||
|
||||
@tool
|
||||
async def write_todos(
|
||||
todos: list[dict[str, Any]],
|
||||
title: str = "Planning Approach",
|
||||
description: str | None = None,
|
||||
) -> dict[str, Any]:
|
||||
"""
|
||||
Create a planning/todo list to break down a complex task.
|
||||
|
||||
Use this tool when you need to plan your approach to a complex task
|
||||
or show the user a step-by-step breakdown of what you'll do.
|
||||
|
||||
This displays a visual plan with:
|
||||
- Progress tracking (X of Y complete)
|
||||
- Status indicators (pending, in progress, completed, cancelled)
|
||||
- Expandable details for each step
|
||||
|
||||
Args:
|
||||
todos: List of todo items. Each item should have:
|
||||
- id: Unique identifier for the todo
|
||||
- content: Description of the task
|
||||
- status: One of "pending", "in_progress", "completed", "cancelled"
|
||||
- description: Optional subtask/detail text shown when the item is expanded
|
||||
title: Title for the plan (default: "Planning Approach")
|
||||
description: Optional description providing context
|
||||
|
||||
Returns:
|
||||
A dictionary containing the plan data for the UI to render.
|
||||
|
||||
Example:
|
||||
write_todos(
|
||||
title="Implementation Plan",
|
||||
description="Steps to add the new feature",
|
||||
todos=[
|
||||
{"id": "1", "content": "Analyze requirements", "status": "completed", "description": "Reviewed all user stories and acceptance criteria"},
|
||||
{"id": "2", "content": "Design solution", "status": "in_progress", "description": "Creating component architecture and data flow diagrams"},
|
||||
{"id": "3", "content": "Write code", "status": "pending"},
|
||||
{"id": "4", "content": "Add tests", "status": "pending", "description": "Unit tests and integration tests for all new components"},
|
||||
]
|
||||
)
|
||||
"""
|
||||
# Generate a unique plan ID
|
||||
import uuid
|
||||
|
||||
plan_id = f"plan-{uuid.uuid4().hex[:8]}"
|
||||
|
||||
# Transform todos to the expected format for the UI
|
||||
formatted_todos = []
|
||||
for i, todo in enumerate(todos):
|
||||
todo_id = todo.get("id", f"todo-{i}")
|
||||
content = todo.get("content", "")
|
||||
status = todo.get("status", "pending")
|
||||
todo_description = todo.get("description")
|
||||
|
||||
# Validate status
|
||||
valid_statuses = ["pending", "in_progress", "completed", "cancelled"]
|
||||
if status not in valid_statuses:
|
||||
status = "pending"
|
||||
|
||||
todo_item = {
|
||||
"id": todo_id,
|
||||
"label": content,
|
||||
"status": status,
|
||||
}
|
||||
|
||||
# Only include description if provided
|
||||
if todo_description:
|
||||
todo_item["description"] = todo_description
|
||||
|
||||
formatted_todos.append(todo_item)
|
||||
|
||||
return {
|
||||
"id": plan_id,
|
||||
"title": title,
|
||||
"description": description,
|
||||
"todos": formatted_todos,
|
||||
}
|
||||
|
||||
return write_todos
|
||||
|
|
@ -69,6 +69,30 @@ def format_mentioned_documents_as_context(documents: list[Document]) -> str:
|
|||
return "\n".join(context_parts)
|
||||
|
||||
|
||||
def extract_todos_from_deepagents(command_output) -> dict:
|
||||
"""
|
||||
Extract todos from deepagents' TodoListMiddleware Command output.
|
||||
|
||||
deepagents returns a Command object with:
|
||||
- Command.update['todos'] = [{'content': '...', 'status': '...'}]
|
||||
|
||||
Returns the todos directly (no transformation needed - UI matches deepagents format).
|
||||
"""
|
||||
todos_data = []
|
||||
if hasattr(command_output, "update"):
|
||||
# It's a Command object from deepagents
|
||||
update = command_output.update
|
||||
todos_data = update.get("todos", [])
|
||||
elif isinstance(command_output, dict):
|
||||
# Already a dict - check if it has todos directly or in update
|
||||
if "todos" in command_output:
|
||||
todos_data = command_output.get("todos", [])
|
||||
elif "update" in command_output and isinstance(command_output["update"], dict):
|
||||
todos_data = command_output["update"].get("todos", [])
|
||||
|
||||
return {"todos": todos_data}
|
||||
|
||||
|
||||
async def stream_new_chat(
|
||||
user_query: str,
|
||||
search_space_id: int,
|
||||
|
|
@ -557,9 +581,11 @@ async def stream_new_chat(
|
|||
tool_name = event.get("name", "unknown_tool")
|
||||
raw_output = event.get("data", {}).get("output", "")
|
||||
|
||||
# Extract content from ToolMessage if needed
|
||||
# LangGraph may return a ToolMessage object instead of raw dict
|
||||
if hasattr(raw_output, "content"):
|
||||
# Handle deepagents' write_todos Command object specially
|
||||
if tool_name == "write_todos" and hasattr(raw_output, "update"):
|
||||
# deepagents returns a Command object - extract todos directly
|
||||
tool_output = extract_todos_from_deepagents(raw_output)
|
||||
elif hasattr(raw_output, "content"):
|
||||
# It's a ToolMessage object - extract the content
|
||||
content = raw_output.content
|
||||
# If content is a string that looks like JSON, try to parse it
|
||||
|
|
@ -721,12 +747,10 @@ async def stream_new_chat(
|
|||
elif tool_name == "write_todos":
|
||||
# Build completion items for planning
|
||||
if isinstance(tool_output, dict):
|
||||
plan_title = tool_output.get("title", "Plan")
|
||||
todos = tool_output.get("todos", [])
|
||||
todo_count = len(todos) if isinstance(todos, list) else 0
|
||||
completed_items = [
|
||||
*last_active_step_items,
|
||||
f"Plan: {plan_title[:50]}{'...' if len(plan_title) > 50 else ''}",
|
||||
f"Tasks: {todo_count} steps defined",
|
||||
]
|
||||
else:
|
||||
|
|
@ -883,11 +907,10 @@ async def stream_new_chat(
|
|||
)
|
||||
# Send terminal message with plan info
|
||||
if isinstance(tool_output, dict):
|
||||
title = tool_output.get("title", "Plan")
|
||||
todos = tool_output.get("todos", [])
|
||||
todo_count = len(todos) if isinstance(todos, list) else 0
|
||||
yield streaming_service.format_terminal_info(
|
||||
f"Plan created: {title} ({todo_count} tasks)",
|
||||
f"Plan created ({todo_count} tasks)",
|
||||
"success",
|
||||
)
|
||||
else:
|
||||
|
|
|
|||
|
|
@ -11,15 +11,13 @@ import { atom } from "jotai";
|
|||
|
||||
export interface PlanTodo {
|
||||
id: string;
|
||||
label: string;
|
||||
content: string;
|
||||
status: "pending" | "in_progress" | "completed" | "cancelled";
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export interface PlanState {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
todos: PlanTodo[];
|
||||
lastUpdated: number;
|
||||
/** The toolCallId of the first component that rendered this plan */
|
||||
|
|
@ -96,7 +94,6 @@ export const planStatesAtom = atom<Map<string, PlanState>>(new Map());
|
|||
export interface UpdatePlanInput {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
todos: PlanTodo[];
|
||||
toolCallId: string;
|
||||
}
|
||||
|
|
@ -119,7 +116,6 @@ export const updatePlanStateAtom = atom(null, (get, set, plan: UpdatePlanInput)
|
|||
states.set(canonicalTitle, {
|
||||
id: plan.id,
|
||||
title: canonicalTitle,
|
||||
description: plan.description,
|
||||
todos: plan.todos,
|
||||
lastUpdated: Date.now(),
|
||||
ownerToolCallId,
|
||||
|
|
@ -152,12 +148,10 @@ export interface HydratePlanInput {
|
|||
result: {
|
||||
id?: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
todos?: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
id?: string;
|
||||
content: string;
|
||||
status: "pending" | "in_progress" | "completed" | "cancelled";
|
||||
description?: string;
|
||||
}>;
|
||||
};
|
||||
}
|
||||
|
|
@ -166,7 +160,7 @@ export const hydratePlanStateAtom = atom(null, (get, set, plan: HydratePlanInput
|
|||
if (!plan.result?.todos || plan.result.todos.length === 0) return;
|
||||
|
||||
const states = new Map(get(planStatesAtom));
|
||||
const title = plan.result.title || "Planning Approach";
|
||||
const title = plan.result.title || "Plan";
|
||||
|
||||
// Register this as the owner if no plan exists yet
|
||||
registerPlanOwner(title, plan.toolCallId);
|
||||
|
|
@ -181,8 +175,11 @@ export const hydratePlanStateAtom = atom(null, (get, set, plan: HydratePlanInput
|
|||
states.set(canonicalTitle, {
|
||||
id: plan.result.id || `plan-${Date.now()}`,
|
||||
title: canonicalTitle,
|
||||
description: plan.result.description,
|
||||
todos: plan.result.todos,
|
||||
todos: plan.result.todos.map((t, i) => ({
|
||||
id: t.id || `todo-${i}`,
|
||||
content: t.content,
|
||||
status: t.status,
|
||||
})),
|
||||
lastUpdated: Date.now(),
|
||||
ownerToolCallId,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -77,10 +77,4 @@ export {
|
|||
type PlanTodo,
|
||||
type TodoStatus,
|
||||
} from "./plan";
|
||||
export {
|
||||
WriteTodosToolUI,
|
||||
WriteTodosArgsSchema,
|
||||
WriteTodosResultSchema,
|
||||
type WriteTodosArgs,
|
||||
type WriteTodosResult,
|
||||
} from "./write-todos";
|
||||
export { WriteTodosToolUI, WriteTodosSchema, type WriteTodosData } from "./write-todos";
|
||||
|
|
|
|||
|
|
@ -1,22 +1,16 @@
|
|||
"use client";
|
||||
|
||||
import { CheckCircle2, Circle, CircleDashed, PartyPopper, XCircle } from "lucide-react";
|
||||
import { CheckCircle2, Circle, CircleDashed, ListTodo, PartyPopper, XCircle } from "lucide-react";
|
||||
import type { FC } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||
import { TextShimmerLoader } from "@/components/prompt-kit/loader";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { Action, ActionsConfig } from "../shared/schema";
|
||||
import type { PlanTodo, TodoStatus } from "./schema";
|
||||
import type { TodoStatus } from "./schema";
|
||||
|
||||
// ============================================================================
|
||||
// Status Icon Component
|
||||
|
|
@ -57,7 +51,7 @@ const StatusIcon: FC<StatusIconProps> = ({ status, className, isStreaming = true
|
|||
// ============================================================================
|
||||
|
||||
interface TodoItemProps {
|
||||
todo: PlanTodo;
|
||||
todo: { id: string; content: string; status: TodoStatus };
|
||||
/** When false, in_progress items show as static (no spinner/pulse) */
|
||||
isStreaming?: boolean;
|
||||
}
|
||||
|
|
@ -67,38 +61,22 @@ const TodoItem: FC<TodoItemProps> = ({ todo, isStreaming = true }) => {
|
|||
// Only show shimmer animation if streaming and in progress
|
||||
const isShimmer = todo.status === "in_progress" && isStreaming;
|
||||
|
||||
// Render the label with optional shimmer effect
|
||||
const renderLabel = () => {
|
||||
// Render the content with optional shimmer effect
|
||||
const renderContent = () => {
|
||||
if (isShimmer) {
|
||||
return <TextShimmerLoader text={todo.label} size="md" />;
|
||||
return <TextShimmerLoader text={todo.content} size="md" />;
|
||||
}
|
||||
return (
|
||||
<span className={cn("text-sm", isStrikethrough && "line-through text-muted-foreground")}>
|
||||
{todo.label}
|
||||
<span className={cn("text-sm text-muted-foreground", isStrikethrough && "line-through")}>
|
||||
{todo.content}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
if (todo.description) {
|
||||
return (
|
||||
<AccordionItem value={todo.id} className="border-0">
|
||||
<AccordionTrigger className="py-2 hover:no-underline">
|
||||
<div className="flex items-center gap-2">
|
||||
<StatusIcon status={todo.status} isStreaming={isStreaming} />
|
||||
{renderLabel()}
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="pb-2 pl-6">
|
||||
<p className="text-sm text-muted-foreground">{todo.description}</p>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 py-2">
|
||||
<StatusIcon status={todo.status} isStreaming={isStreaming} />
|
||||
{renderLabel()}
|
||||
{renderContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -110,8 +88,7 @@ const TodoItem: FC<TodoItemProps> = ({ todo, isStreaming = true }) => {
|
|||
export interface PlanProps {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
todos: PlanTodo[];
|
||||
todos: Array<{ id: string; content: string; status: TodoStatus }>;
|
||||
maxVisibleTodos?: number;
|
||||
showProgress?: boolean;
|
||||
/** When false, in_progress items show as static (no spinner/pulse animations) */
|
||||
|
|
@ -125,7 +102,6 @@ export interface PlanProps {
|
|||
export const Plan: FC<PlanProps> = ({
|
||||
id,
|
||||
title,
|
||||
description,
|
||||
todos,
|
||||
maxVisibleTodos = 4,
|
||||
showProgress = true,
|
||||
|
|
@ -151,9 +127,6 @@ export const Plan: FC<PlanProps> = ({
|
|||
const hiddenTodos = todos.slice(maxVisibleTodos);
|
||||
const hasHiddenTodos = hiddenTodos.length > 0;
|
||||
|
||||
// Check if any todo has a description (for accordion mode)
|
||||
const hasDescriptions = todos.some((t) => t.description);
|
||||
|
||||
// Handle action click
|
||||
const handleAction = (actionId: string) => {
|
||||
if (onBeforeResponseAction && !onBeforeResponseAction(actionId)) {
|
||||
|
|
@ -172,22 +145,7 @@ export const Plan: FC<PlanProps> = ({
|
|||
].filter(Boolean) as Action[];
|
||||
}, [responseActions]);
|
||||
|
||||
// Get default expanded items (in_progress items with descriptions)
|
||||
const defaultExpandedIds = useMemo(() => {
|
||||
return todos.filter((t) => t.description && t.status === "in_progress").map((t) => t.id);
|
||||
}, [todos]);
|
||||
|
||||
const TodoList: FC<{ items: PlanTodo[] }> = ({ items }) => {
|
||||
if (hasDescriptions) {
|
||||
return (
|
||||
<Accordion type="multiple" defaultValue={defaultExpandedIds} className="w-full">
|
||||
{items.map((todo) => (
|
||||
<TodoItem key={todo.id} todo={todo} isStreaming={isStreaming} />
|
||||
))}
|
||||
</Accordion>
|
||||
);
|
||||
}
|
||||
|
||||
const TodoList: FC<{ items: typeof todos }> = ({ items }) => {
|
||||
return (
|
||||
<div className="space-y-0">
|
||||
{items.map((todo) => (
|
||||
|
|
@ -201,11 +159,9 @@ export const Plan: FC<PlanProps> = ({
|
|||
<Card id={id} className={cn("w-full max-w-xl", className)}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<CardTitle className="text-base font-semibold">{title}</CardTitle>
|
||||
{description && (
|
||||
<CardDescription className="mt-1 text-sm">{description}</CardDescription>
|
||||
)}
|
||||
<div className="flex-1 min-w-0 flex items-center gap-2">
|
||||
<ListTodo className="size-5 text-muted-foreground shrink-0" />
|
||||
<CardTitle className="text-base font-semibold text-muted-foreground">{title}</CardTitle>
|
||||
</div>
|
||||
{isAllComplete && (
|
||||
<div className="flex items-center gap-1 text-emerald-500">
|
||||
|
|
@ -216,13 +172,13 @@ export const Plan: FC<PlanProps> = ({
|
|||
|
||||
{showProgress && (
|
||||
<div className="mt-3 space-y-1.5">
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
{progress.completed} of {progress.total} complete
|
||||
</span>
|
||||
<span>{Math.round(progress.percentage)}%</span>
|
||||
</div>
|
||||
<Progress value={progress.percentage} className="h-1.5" />
|
||||
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
{progress.completed} of {progress.total} complete
|
||||
</span>
|
||||
<span>{Math.round(progress.percentage)}%</span>
|
||||
</div>
|
||||
<Progress value={progress.percentage} className="h-1.5 bg-muted [&>div]:bg-muted-foreground" />
|
||||
</div>
|
||||
)}
|
||||
</CardHeader>
|
||||
|
|
|
|||
|
|
@ -8,23 +8,25 @@ export type TodoStatus = z.infer<typeof TodoStatusSchema>;
|
|||
|
||||
/**
|
||||
* Single todo item in a plan
|
||||
* Matches deepagents TodoListMiddleware output: { content, status }
|
||||
* id is auto-generated if not provided
|
||||
*/
|
||||
export const PlanTodoSchema = z.object({
|
||||
id: z.string(),
|
||||
label: z.string(),
|
||||
id: z.string().optional(),
|
||||
content: z.string(),
|
||||
status: TodoStatusSchema,
|
||||
description: z.string().optional(),
|
||||
});
|
||||
|
||||
export type PlanTodo = z.infer<typeof PlanTodoSchema>;
|
||||
|
||||
/**
|
||||
* Serializable plan schema for tool results
|
||||
* Matches deepagents TodoListMiddleware output format
|
||||
* id/title are auto-generated if not provided
|
||||
*/
|
||||
export const SerializablePlanSchema = z.object({
|
||||
id: z.string(),
|
||||
title: z.string(),
|
||||
description: z.string().optional(),
|
||||
id: z.string().optional(),
|
||||
title: z.string().optional(),
|
||||
todos: z.array(PlanTodoSchema).min(1),
|
||||
maxVisibleTodos: z.number().optional(),
|
||||
showProgress: z.boolean().optional(),
|
||||
|
|
@ -33,9 +35,21 @@ export const SerializablePlanSchema = z.object({
|
|||
export type SerializablePlan = z.infer<typeof SerializablePlanSchema>;
|
||||
|
||||
/**
|
||||
* Parse and validate a serializable plan from tool result
|
||||
* Normalized plan with required fields (after auto-generation)
|
||||
*/
|
||||
export function parseSerializablePlan(data: unknown): SerializablePlan {
|
||||
export interface NormalizedPlan {
|
||||
id: string;
|
||||
title: string;
|
||||
todos: Array<{ id: string; content: string; status: TodoStatus }>;
|
||||
maxVisibleTodos?: number;
|
||||
showProgress?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse and normalize a plan from tool result
|
||||
* Auto-generates id/title if not provided (for deepagents compatibility)
|
||||
*/
|
||||
export function parseSerializablePlan(data: unknown): NormalizedPlan {
|
||||
const result = SerializablePlanSchema.safeParse(data);
|
||||
|
||||
if (!result.success) {
|
||||
|
|
@ -45,22 +59,33 @@ export function parseSerializablePlan(data: unknown): SerializablePlan {
|
|||
const obj = (data && typeof data === "object" ? data : {}) as Record<string, unknown>;
|
||||
|
||||
return {
|
||||
id: typeof obj.id === "string" ? obj.id : "unknown",
|
||||
id: typeof obj.id === "string" ? obj.id : `plan-${Date.now()}`,
|
||||
title: typeof obj.title === "string" ? obj.title : "Plan",
|
||||
description: typeof obj.description === "string" ? obj.description : undefined,
|
||||
todos: Array.isArray(obj.todos)
|
||||
? obj.todos.map((t, i) => ({
|
||||
id: typeof (t as any)?.id === "string" ? (t as any).id : `todo-${i}`,
|
||||
label: typeof (t as any)?.label === "string" ? (t as any).label : "Task",
|
||||
status: TodoStatusSchema.safeParse((t as any)?.status).success
|
||||
? (t as any).status
|
||||
: "pending",
|
||||
description:
|
||||
typeof (t as any)?.description === "string" ? (t as any).description : undefined,
|
||||
}))
|
||||
: [{ id: "1", label: "No tasks", status: "pending" as const }],
|
||||
? obj.todos.map((t: unknown, i: number) => {
|
||||
const todo = t as Record<string, unknown>;
|
||||
return {
|
||||
id: typeof todo?.id === "string" ? todo.id : `todo-${i}`,
|
||||
content: typeof todo?.content === "string" ? todo.content : "Task",
|
||||
status: TodoStatusSchema.safeParse(todo?.status).success
|
||||
? (todo.status as TodoStatus)
|
||||
: ("pending" as const),
|
||||
};
|
||||
})
|
||||
: [{ id: "1", content: "No tasks", status: "pending" as const }],
|
||||
};
|
||||
}
|
||||
|
||||
return result.data;
|
||||
// Normalize: add id/title if missing
|
||||
return {
|
||||
id: result.data.id || `plan-${Date.now()}`,
|
||||
title: result.data.title || "Plan",
|
||||
todos: result.data.todos.map((t, i) => ({
|
||||
id: t.id || `todo-${i}`,
|
||||
content: t.content,
|
||||
status: t.status,
|
||||
})),
|
||||
maxVisibleTodos: result.data.maxVisibleTodos,
|
||||
showProgress: result.data.showProgress,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,73 +14,30 @@ import {
|
|||
import { Plan, PlanErrorBoundary, parseSerializablePlan, TodoStatusSchema } from "./plan";
|
||||
|
||||
// ============================================================================
|
||||
// Zod Schemas
|
||||
// Zod Schemas - Matching deepagents TodoListMiddleware output
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* Schema for a single todo item in the args
|
||||
* Note: Using nullish() with transform to convert null → undefined for Plan compatibility
|
||||
* Schema for a single todo item (matches deepagents output)
|
||||
*/
|
||||
const WriteTodosArgsTodoSchema = z.object({
|
||||
id: z.string(),
|
||||
const TodoItemSchema = z.object({
|
||||
content: z.string(),
|
||||
status: TodoStatusSchema,
|
||||
description: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((v) => v ?? undefined),
|
||||
});
|
||||
|
||||
/**
|
||||
* Schema for write_todos tool arguments
|
||||
* Note: Using nullish() with transform to convert null → undefined for Plan compatibility
|
||||
* Schema for write_todos tool args/result (matches deepagents output)
|
||||
* deepagents provides: { todos: [{ content, status }] }
|
||||
*/
|
||||
const WriteTodosArgsSchema = z.object({
|
||||
title: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((v) => v ?? undefined),
|
||||
description: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((v) => v ?? undefined),
|
||||
todos: z.array(WriteTodosArgsTodoSchema).nullish(),
|
||||
});
|
||||
|
||||
/**
|
||||
* Schema for a single todo item in the result
|
||||
* Note: Using nullish() with transform to convert null → undefined for Plan compatibility
|
||||
*/
|
||||
const WriteTodosResultTodoSchema = z.object({
|
||||
id: z.string(),
|
||||
label: z.string(),
|
||||
status: TodoStatusSchema,
|
||||
description: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((v) => v ?? undefined),
|
||||
});
|
||||
|
||||
/**
|
||||
* Schema for write_todos tool result
|
||||
* Note: Using nullish() with transform to convert null → undefined for Plan compatibility
|
||||
*/
|
||||
const WriteTodosResultSchema = z.object({
|
||||
id: z.string(),
|
||||
title: z.string(),
|
||||
description: z
|
||||
.string()
|
||||
.nullish()
|
||||
.transform((v) => v ?? undefined),
|
||||
todos: z.array(WriteTodosResultTodoSchema),
|
||||
const WriteTodosSchema = z.object({
|
||||
todos: z.array(TodoItemSchema).nullish(),
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// Types
|
||||
// ============================================================================
|
||||
|
||||
type WriteTodosArgs = z.infer<typeof WriteTodosArgsSchema>;
|
||||
type WriteTodosResult = z.infer<typeof WriteTodosResultSchema>;
|
||||
type WriteTodosData = z.infer<typeof WriteTodosSchema>;
|
||||
|
||||
/**
|
||||
* Loading state component
|
||||
|
|
@ -96,103 +53,65 @@ function WriteTodosLoading() {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform tool args to result format
|
||||
* This handles the case where the LLM is streaming the tool call
|
||||
*/
|
||||
function transformArgsToResult(args: WriteTodosArgs): WriteTodosResult | null {
|
||||
if (!args.todos || !Array.isArray(args.todos) || args.todos.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: `plan-${Date.now()}`,
|
||||
title: args.title || "Planning Approach",
|
||||
description: args.description,
|
||||
todos: args.todos.map((todo, index) => ({
|
||||
id: todo.id || `todo-${index}`,
|
||||
label: todo.content || "Task",
|
||||
status: todo.status || "pending",
|
||||
description: todo.description,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* WriteTodos Tool UI Component
|
||||
*
|
||||
* Displays the agent's planning/todo list with a beautiful UI.
|
||||
* Shows progress, status indicators, and expandable details.
|
||||
* Uses deepagents TodoListMiddleware output directly: { todos: [{ content, status }] }
|
||||
*
|
||||
* FIXED POSITION: When the same plan (by title) is updated multiple times,
|
||||
* FIXED POSITION: When multiple write_todos calls happen in a conversation,
|
||||
* only the FIRST component renders. Subsequent updates just update the
|
||||
* shared state, and the first component reads from it. This prevents
|
||||
* layout shift when plans are updated.
|
||||
* shared state, and the first component reads from it.
|
||||
*/
|
||||
export const WriteTodosToolUI = makeAssistantToolUI<WriteTodosArgs, WriteTodosResult>({
|
||||
export const WriteTodosToolUI = makeAssistantToolUI<WriteTodosData, WriteTodosData>({
|
||||
toolName: "write_todos",
|
||||
render: function WriteTodosUI({ args, result, status, toolCallId }) {
|
||||
const updatePlanState = useSetAtom(updatePlanStateAtom);
|
||||
const planStates = useAtomValue(planStatesAtom);
|
||||
|
||||
// Check if the THREAD is running (not just this tool)
|
||||
// This hook subscribes to state changes, so it re-renders when thread stops
|
||||
// Check if the THREAD is running
|
||||
const isThreadRunning = useAssistantState(({ thread }) => thread.isRunning);
|
||||
|
||||
// Get the plan data (from result or args)
|
||||
const planData = result || transformArgsToResult(args);
|
||||
const rawTitle = planData?.title || args.title || "Planning Approach";
|
||||
// Use result if available, otherwise args (for streaming)
|
||||
const data = result || args;
|
||||
const hasTodos = data?.todos && data.todos.length > 0;
|
||||
|
||||
// SYNCHRONOUS ownership check - happens immediately, no race conditions
|
||||
// ONE PLAN PER CONVERSATION: Only first write_todos call becomes owner
|
||||
// Fixed title for all plans in conversation
|
||||
const planTitle = "Plan";
|
||||
|
||||
// SYNCHRONOUS ownership check
|
||||
const isOwner = useMemo(() => {
|
||||
return registerPlanOwner(rawTitle, toolCallId);
|
||||
}, [rawTitle, toolCallId]);
|
||||
return registerPlanOwner(planTitle, toolCallId);
|
||||
}, [planTitle, toolCallId]);
|
||||
|
||||
// Get canonical title - always use the FIRST plan's title
|
||||
// This ensures all updates go to the same plan state
|
||||
const planTitle = useMemo(() => getCanonicalPlanTitle(rawTitle), [rawTitle]);
|
||||
// Get canonical title
|
||||
const canonicalTitle = useMemo(() => getCanonicalPlanTitle(planTitle), [planTitle]);
|
||||
|
||||
// Register/update the plan state - ALWAYS use canonical title
|
||||
// Register/update the plan state
|
||||
useEffect(() => {
|
||||
if (planData) {
|
||||
if (hasTodos) {
|
||||
const normalizedPlan = parseSerializablePlan({ todos: data.todos });
|
||||
updatePlanState({
|
||||
id: planData.id,
|
||||
title: planTitle, // Use canonical title, not raw title
|
||||
description: planData.description,
|
||||
todos: planData.todos,
|
||||
id: normalizedPlan.id,
|
||||
title: canonicalTitle,
|
||||
todos: normalizedPlan.todos,
|
||||
toolCallId,
|
||||
});
|
||||
}
|
||||
}, [planData, planTitle, updatePlanState, toolCallId]);
|
||||
}, [data, hasTodos, canonicalTitle, updatePlanState, toolCallId]);
|
||||
|
||||
// Update when result changes (for streaming updates)
|
||||
useEffect(() => {
|
||||
if (result) {
|
||||
updatePlanState({
|
||||
id: result.id,
|
||||
title: planTitle, // Use canonical title, not raw title
|
||||
description: result.description,
|
||||
todos: result.todos,
|
||||
toolCallId,
|
||||
});
|
||||
}
|
||||
}, [result, planTitle, updatePlanState, toolCallId]);
|
||||
// Get the current plan state
|
||||
const currentPlanState = planStates.get(canonicalTitle);
|
||||
|
||||
// Get the current plan state (may be updated by other components)
|
||||
const currentPlanState = planStates.get(planTitle);
|
||||
|
||||
// If we're NOT the owner, render nothing (the owner will render)
|
||||
// If we're NOT the owner, render nothing
|
||||
if (!isOwner) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Loading state - tool is still running (no data yet)
|
||||
// Loading state
|
||||
if (status.type === "running" || status.type === "requires-action") {
|
||||
// Try to show partial results from args while streaming
|
||||
const partialResult = transformArgsToResult(args);
|
||||
if (partialResult) {
|
||||
const plan = parseSerializablePlan(partialResult);
|
||||
if (hasTodos) {
|
||||
const plan = parseSerializablePlan({ todos: data.todos });
|
||||
return (
|
||||
<div className="my-4">
|
||||
<PlanErrorBoundary>
|
||||
|
|
@ -206,11 +125,8 @@ export const WriteTodosToolUI = makeAssistantToolUI<WriteTodosArgs, WriteTodosRe
|
|||
|
||||
// Incomplete/cancelled state
|
||||
if (status.type === "incomplete") {
|
||||
// For cancelled or errors, try to show what we have from args or shared state
|
||||
// Use isThreadRunning to determine if we should still animate
|
||||
const fallbackResult = currentPlanState || transformArgsToResult(args);
|
||||
if (fallbackResult) {
|
||||
const plan = parseSerializablePlan(fallbackResult);
|
||||
if (currentPlanState || hasTodos) {
|
||||
const plan = currentPlanState || parseSerializablePlan({ todos: data?.todos || [] });
|
||||
return (
|
||||
<div className="my-4">
|
||||
<PlanErrorBoundary>
|
||||
|
|
@ -222,23 +138,20 @@ export const WriteTodosToolUI = makeAssistantToolUI<WriteTodosArgs, WriteTodosRe
|
|||
return null;
|
||||
}
|
||||
|
||||
// Success - render the plan using the LATEST shared state
|
||||
// Use isThreadRunning to determine if we should animate in_progress items
|
||||
// (LLM may still be working on tasks even though this tool call completed)
|
||||
const planToRender = currentPlanState || result;
|
||||
// Success - render the plan
|
||||
const planToRender = currentPlanState || (hasTodos ? parseSerializablePlan({ todos: data.todos }) : null);
|
||||
if (!planToRender) {
|
||||
return <WriteTodosLoading />;
|
||||
}
|
||||
|
||||
const plan = parseSerializablePlan(planToRender);
|
||||
return (
|
||||
<div className="my-4">
|
||||
<PlanErrorBoundary>
|
||||
<Plan {...plan} showProgress={true} isStreaming={isThreadRunning} />
|
||||
<Plan {...planToRender} showProgress={true} isStreaming={isThreadRunning} />
|
||||
</PlanErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
export { WriteTodosArgsSchema, WriteTodosResultSchema, type WriteTodosArgs, type WriteTodosResult };
|
||||
export { WriteTodosSchema, type WriteTodosData };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue