introduced supabase and experiment management UI (#23)

* introduced supabase and experiment management UI * fixing cookie import
2026-05-31 16:43:36 +00:00 · 2025-11-18 20:45:11 +01:00
parent ab8b8787a8
commit 894ce87a5d
18 changed files with 977 additions and 176 deletions
--- a/web/src/app/start-task/page.tsx
+++ b/web/src/app/start-task/page.tsx
@@ -0,0 +1,93 @@
+'use client';
+
+import { useEffect, useState, Suspense } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+
+const StartTaskContent = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const [status, setStatus] = useState<'loading' | 'error' | 'redirecting'>('loading');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const uuid = searchParams.get('uuid');
+
+    if (!uuid) {
+      setError('no experiment UUID provided');
+      setStatus('error');
+      return;
+    }
+
+    const validateAndStore = async () => {
+      try {
+        const res = await fetch(`/api/admin/experiments?id=${uuid}`);
+        if (!res.ok) throw new Error('experiment not found');
+
+        const data = await res.json();
+        const exp = data.experiment;
+
+        if (!exp) throw new Error('invalid experiment UUID');
+
+        localStorage.setItem('phantom_experiment_id', uuid);
+
+        await fetch('/api/session', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ experimentId: uuid }),
+        });
+
+        setStatus('redirecting');
+
+        setTimeout(() => {
+          router.push("/");
+        }, 800);
+
+      } catch (err: any) {
+        setError(err.message || 'failed to start task');
+        setStatus('error');
+      }
+    };
+
+    validateAndStore();
+  }, [searchParams, router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
+      <div className="text-center">
+        {status === 'loading' && (
+          <div>
+            <div className="mb-4 h-8 w-8 animate-spin rounded-full border-4 border-zinc-200 border-t-zinc-900 dark:border-zinc-800 dark:border-t-zinc-100 mx-auto" />
+            <p className="text-zinc-600 dark:text-zinc-400">validating browser...</p>
+          </div>
+        )}
+
+        {status === 'redirecting' && (
+          <div>
+            <div className="mb-4 text-4xl">✓</div>
+            <p className="text-zinc-900 dark:text-zinc-100 font-medium">website loaded</p>
+            <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">redirecting to page...</p>
+          </div>
+        )}
+
+        {status === 'error' && (
+          <div className="rounded-lg bg-red-50 p-6 dark:bg-red-950">
+            <p className="text-red-900 dark:text-red-100 font-medium">error</p>
+            <p className="mt-2 text-sm text-red-700 dark:text-red-300">{error}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default function StartTaskPage() {
+  return (
+    <Suspense fallback={
+      <div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
+        <p className="text-zinc-600 dark:text-zinc-400">loading...</p>
+      </div>
+    }>
+      <StartTaskContent />
+    </Suspense>
+  );
+}