feat: Add Approve button for pending_approval tasks in TaskSlideOver

apps/web/src/components/execution/TaskSlideOver.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useMemo } from "react";
 import { motion, AnimatePresence } from "motion/react";
-import { X, Trash2, MessageCircle } from "lucide-react";
+import { X, Trash2, MessageCircle, CheckCircle2 } from "lucide-react";
 import type { ChatTarget } from "@/components/chat/ChatSlideOver";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -20,6 +20,7 @@ interface TaskSlideOverProps {
 export function TaskSlideOver({ onOpenChat }: TaskSlideOverProps) {
   const { selectedEntry, setSelectedTaskId } = useExecutionContext();
   const queueTaskMutation = trpc.queueTask.useMutation();
+  const approveTaskMutation = trpc.approveTask.useMutation();
   const deleteTaskMutation = trpc.deleteTask.useMutation();
   const updateTaskMutation = trpc.updateTask.useMutation();
 
@@ -229,17 +230,32 @@ export function TaskSlideOver({ onOpenChat }: TaskSlideOverProps) {
 
             {/* Footer */}
             <div className="flex items-center gap-2 border-t border-border px-5 py-3">
-              <Button
-                variant="outline"
-                size="sm"
-                disabled={!canQueue}
-                onClick={() => {
-                  queueTaskMutation.mutate({ taskId: task.id });
-                  close();
-                }}
-              >
-                Queue Task
-              </Button>
+              {task.status === "pending_approval" ? (
+                <Button
+                  size="sm"
+                  className="gap-1.5"
+                  disabled={approveTaskMutation.isPending}
+                  onClick={() => {
+                    approveTaskMutation.mutate({ taskId: task.id });
+                    close();
+                  }}
+                >
+                  <CheckCircle2 className="h-3.5 w-3.5" />
+                  Approve
+                </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  disabled={!canQueue}
+                  onClick={() => {
+                    queueTaskMutation.mutate({ taskId: task.id });
+                    close();
+                  }}
+                >
+                  Queue Task
+                </Button>
+              )}
               <Button
                 variant="outline"
                 size="sm"