chore: merge test to main

components/Sandboxes/SandboxCreateSection.tsx

@@ -6,14 +6,13 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import useCreateSandbox from "@/hooks/useCreateSandbox";
-import type { Sandbox } from "@/lib/sandboxes/createSandbox";
 
 interface SandboxCreateSectionProps {
-  onSandboxCreated: (sandboxes: Sandbox[]) => void;
+  onSuccess: () => void;
 }
 
 export default function SandboxCreateSection({
-  onSandboxCreated,
+  onSuccess,
 }: SandboxCreateSectionProps) {
   const [prompt, setPrompt] = useState("");
   const { createSandbox, isCreating } = useCreateSandbox();
@@ -25,10 +24,10 @@ export default function SandboxCreateSection({
     }
 
     try {
-      const newSandboxes = await createSandbox(prompt);
-      onSandboxCreated(newSandboxes);
+      await createSandbox(prompt);
       toast.success("Sandbox created successfully");
       setPrompt("");
+      onSuccess();
     } catch {
       // Error is handled by the hook
     }

components/Sandboxes/SandboxList.tsx

@@ -1,26 +1,25 @@
 import type { Sandbox } from "@/lib/sandboxes/createSandbox";
+import SandboxListCard from "./SandboxListCard";
 
 interface SandboxListProps {
   sandboxes: Sandbox[];
 }
 
 export default function SandboxList({ sandboxes }: SandboxListProps) {
-  if (sandboxes.length === 0) return null;
+  if (sandboxes.length === 0) {
+    return (
+      <div className="w-full max-w-md text-center text-muted-foreground">
+        <p>No sandboxes yet. Create one above to get started.</p>
+      </div>
+    );
+  }
 
   return (
     <div className="w-full max-w-md space-y-2">
-      <h2 className="text-lg font-medium">Created Sandboxes</h2>
+      <h2 className="text-lg font-medium">Sandbox History</h2>
       <div className="space-y-2">
         {sandboxes.map((sandbox) => (
-          <div
-            key={sandbox.sandboxId}
-            className="rounded-lg border border-border p-3"
-          >
-            <p className="text-sm font-medium">{sandbox.sandboxId}</p>
-            <p className="text-xs text-muted-foreground">
-              Status: {sandbox.sandboxStatus}
-            </p>
-          </div>
+          <SandboxListCard key={sandbox.sandboxId} sandbox={sandbox} />
         ))}
       </div>
     </div>

components/Sandboxes/SandboxListCard.tsx

@@ -0,0 +1,34 @@
+import type { Sandbox } from "@/lib/sandboxes/createSandbox";
+
+interface SandboxListCardProps {
+  sandbox: Sandbox;
+}
+
+const statusColors: Record<Sandbox["sandboxStatus"], string> = {
+  pending: "bg-yellow-500",
+  running: "bg-green-500",
+  stopping: "bg-orange-500",
+  stopped: "bg-gray-500",
+  failed: "bg-red-500",
+};
+
+export default function SandboxListCard({ sandbox }: SandboxListCardProps) {
+  return (
+    <div className="rounded-lg border border-border p-3">
+      <div className="flex items-center justify-between">
+        <p className="text-sm font-medium font-mono">{sandbox.sandboxId}</p>
+        <div className="flex items-center gap-2">
+          <span
+            className={`h-2 w-2 rounded-full ${statusColors[sandbox.sandboxStatus]}`}
+          />
+          <span className="text-xs text-muted-foreground capitalize">
+            {sandbox.sandboxStatus}
+          </span>
+        </div>
+      </div>
+      <p className="mt-1 text-xs text-muted-foreground">
+        Created: {new Date(sandbox.createdAt).toLocaleString()}
+      </p>
+    </div>
+  );
+}

components/Sandboxes/SandboxesPage.tsx

@@ -1,22 +1,35 @@
 "use client";
 
-import { useState } from "react";
+import { Loader } from "lucide-react";
 import SandboxCreateSection from "@/components/Sandboxes/SandboxCreateSection";
 import SandboxList from "@/components/Sandboxes/SandboxList";
-import type { Sandbox } from "@/lib/sandboxes/createSandbox";
+import useSandboxes from "@/hooks/useSandboxes";
 
 export default function SandboxesPage() {
-  const [sandboxes, setSandboxes] = useState<Sandbox[]>([]);
-
-  const handleSandboxCreated = (newSandboxes: Sandbox[]) => {
-    setSandboxes((prev) => [...newSandboxes, ...prev]);
-  };
+  const { sandboxes, isLoading, error, refetch } = useSandboxes();
 
   return (
     <div className="flex h-screen flex-col items-center justify-center gap-6 p-4">
       <h1 className="text-2xl font-semibold">Sandboxes</h1>
-      <SandboxCreateSection onSandboxCreated={handleSandboxCreated} />
-      <SandboxList sandboxes={sandboxes} />
+      <SandboxCreateSection onSuccess={refetch} />
+      {isLoading ? (
+        <div className="flex items-center gap-2 text-muted-foreground">
+          <Loader className="h-4 w-4 animate-spin" />
+          <span>Loading sandboxes...</span>
+        </div>
+      ) : error ? (
+        <div className="text-destructive">
+          <p>Failed to load sandboxes</p>
+          <button
+            onClick={() => refetch()}
+            className="text-sm underline hover:no-underline"
+          >
+            Try again
+          </button>
+        </div>
+      ) : (
+        <SandboxList sandboxes={sandboxes} />
+      )}
     </div>
   );
 }

hooks/useSandboxes.ts

@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import { usePrivy } from "@privy-io/react-auth";
+import { getSandboxes } from "@/lib/sandboxes/getSandboxes";
+import type { Sandbox } from "@/lib/sandboxes/createSandbox";
+
+interface UseSandboxesReturn {
+  sandboxes: Sandbox[];
+  isLoading: boolean;
+  error: Error | null;
+  refetch: () => void;
+}
+
+export default function useSandboxes(): UseSandboxesReturn {
+  const { getAccessToken, authenticated } = usePrivy();
+
+  const query = useQuery({
+    queryKey: ["sandboxes"],
+    queryFn: async () => {
+      const accessToken = await getAccessToken();
+      if (!accessToken) {
+        throw new Error("Please sign in to view sandboxes");
+      }
+      return getSandboxes(accessToken);
+    },
+    enabled: authenticated,
+  });
+
+  return {
+    sandboxes: query.data || [],
+    isLoading: query.isLoading,
+    error: query.error,
+    refetch: query.refetch,
+  };
+}

lib/sandboxes/getSandboxes.ts

@@ -0,0 +1,25 @@
+import { NEW_API_BASE_URL } from "@/lib/consts";
+import type { Sandbox } from "./createSandbox";
+
+interface GetSandboxesResponse {
+  status: "success" | "error";
+  sandboxes?: Sandbox[];
+  error?: string;
+}
+
+export async function getSandboxes(accessToken: string): Promise<Sandbox[]> {
+  const response = await fetch(`${NEW_API_BASE_URL}/api/sandboxes`, {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  const data: GetSandboxesResponse = await response.json();
+
+  if (!response.ok || data.status === "error") {
+    throw new Error(data.error || "Failed to fetch sandboxes");
+  }
+
+  return data.sandboxes || [];
+}