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>
+	);
 };
-

surfsense_web/components/tool-ui/shared/index.ts

@@ -1,3 +1,2 @@
 export * from "./schema";
 export * from "./action-buttons";
-

surfsense_web/components/tool-ui/shared/schema.ts

@@ -4,10 +4,10 @@ import { z } from "zod";
  * Shared action schema for tool UI components
  */
 export const ActionSchema = z.object({
-  id: z.string(),
-  label: z.string(),
-  variant: z.enum(["default", "secondary", "destructive", "outline", "ghost", "link"]).optional(),
-  disabled: z.boolean().optional(),
+	id: z.string(),
+	label: z.string(),
+	variant: z.enum(["default", "secondary", "destructive", "outline", "ghost", "link"]).optional(),
+	disabled: z.boolean().optional(),
 });
 
 export type Action = z.infer<typeof ActionSchema>;
@@ -16,9 +16,8 @@ export type Action = z.infer<typeof ActionSchema>;
  * Actions configuration schema
  */
 export const ActionsConfigSchema = z.object({
-  confirm: ActionSchema.optional(),
-  cancel: ActionSchema.optional(),
+	confirm: ActionSchema.optional(),
+	cancel: ActionSchema.optional(),
 });
 
 export type ActionsConfig = z.infer<typeof ActionsConfigSchema>;
-