refactor: improve write_todos tool and UI components

- Refactored the write_todos tool to enhance argument and result schemas using Zod for better validation and type safety.
- Updated the WriteTodosToolUI to streamline the rendering logic and improve loading states, ensuring a smoother user experience.
- Enhanced the Plan and TodoItem components to better handle streaming states and display progress, providing clearer feedback during task management.
- Cleaned up code formatting and structure for improved readability and maintainability.

surfsense_web/components/tool-ui/shared/action-buttons.tsx

@@ -5,38 +5,37 @@ import { Button } from "@/components/ui/button";
 import type { Action, ActionsConfig } from "./schema";
 
 interface ActionButtonsProps {
-  actions?: Action[] | ActionsConfig;
-  onAction?: (actionId: string) => void;
-  disabled?: boolean;
+	actions?: Action[] | ActionsConfig;
+	onAction?: (actionId: string) => void;
+	disabled?: boolean;
 }
 
 export const ActionButtons: FC<ActionButtonsProps> = ({ actions, onAction, disabled }) => {
-  if (!actions) return null;
+	if (!actions) return null;
 
-  // Normalize actions to array format
-  const actionArray: Action[] = Array.isArray(actions)
-    ? actions
-    : [
-        actions.confirm && { ...actions.confirm, id: "confirm" },
-        actions.cancel && { ...actions.cancel, id: "cancel" },
-      ].filter(Boolean) as Action[];
+	// Normalize actions to array format
+	const actionArray: Action[] = Array.isArray(actions)
+		? actions
+		: ([
+				actions.confirm && { ...actions.confirm, id: "confirm" },
+				actions.cancel && { ...actions.cancel, id: "cancel" },
+			].filter(Boolean) as Action[]);
 
-  if (actionArray.length === 0) return null;
+	if (actionArray.length === 0) return null;
 
-  return (
-    <div className="flex flex-wrap gap-2 pt-3">
-      {actionArray.map((action) => (
-        <Button
-          key={action.id}
-          variant={action.variant || "default"}
-          size="sm"
-          disabled={disabled || action.disabled}
-          onClick={() => onAction?.(action.id)}
-        >
-          {action.label}
-        </Button>
-      ))}
-    </div>
-  );
+	return (
+		<div className="flex flex-wrap gap-2 pt-3">
+			{actionArray.map((action) => (
+				<Button
+					key={action.id}
+					variant={action.variant || "default"}
+					size="sm"
+					disabled={disabled || action.disabled}
+					onClick={() => onAction?.(action.id)}
+				>
+					{action.label}
+				</Button>
+			))}
+		</div>
+	);
 };
-