fixing vault. allow users to delete their builds or update

app/vault/page.tsx

@@ -6,6 +6,7 @@ import { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/navigation";
 
 import { useAuth } from "@/context/AuthContext";
+import { useApi } from "@/lib/api";
 
 type BuildDto = {
   id: string; // internal numeric id (not used by UI)
@@ -35,26 +36,36 @@ function fmt(d?: string | null) {
 
 export default function VaultPage() {
   const router = useRouter();
-  const { user, loading, getAuthHeaders } = useAuth();
+  const api = useApi();
+
+  // NOTE:
+  // - `loading` here is AuthContext hydration, not network.
+  // - `token` is the real gate for /me endpoints.
+  const { user, token, loading: authLoading } = useAuth();
 
   const [builds, setBuilds] = useState<BuildDto[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [busy, setBusy] = useState(false);
 
-  const authed = !!user;
+  const authed = !!user && !!token;
 
-  // Redirect if not logged in
+  // Redirect if not logged in (after auth hydrates)
   useEffect(() => {
-    if (!loading && !authed) {
+    if (!authLoading && !authed) {
       router.replace("/login");
     }
-  }, [loading, authed, router]);
+  }, [authLoading, authed, router]);
 
-  const headers = useMemo(() => getAuthHeaders(), [getAuthHeaders]);
+  // When auth identity changes, clear stale list to avoid “ghost builds”
+  useEffect(() => {
+    if (authLoading) return;
+    setBuilds([]);
+    setError(null);
+  }, [authLoading, user?.uuid, token]);
 
   // Fetch user builds
   useEffect(() => {
-    if (loading || !authed) return;
+    if (authLoading || !authed) return;
 
     let cancelled = false;
 
@@ -63,11 +74,9 @@ export default function VaultPage() {
       setError(null);
 
       try {
-        const res = await fetch(`${API_BASE_URL}/api/v1/builds/me`, {
-          method: "GET",
-          headers,
-          credentials: "include",
-        });
+        // IMPORTANT:
+        // Use api wrapper so Authorization: Bearer <token> is consistently applied.
+        const res = await api.get("/api/v1/builds/me");
 
         if (!res.ok) {
           const text = await res.text().catch(() => "");
@@ -86,9 +95,9 @@ export default function VaultPage() {
     return () => {
       cancelled = true;
     };
-  }, [loading, authed, headers]);
+  }, [authLoading, authed, api]);
 
-  if (loading) {
+  if (authLoading) {
     return (
       <div className="mx-auto max-w-6xl px-4 py-6">
         <div className="text-sm opacity-70">Loading…</div>
@@ -142,7 +151,7 @@ export default function VaultPage() {
 
         {builds.length === 0 ? (
           <div className="p-4 text-sm opacity-70">
-            No builds yet. Create one in the builder and hit “Save Build”.
+            No builds yet. Create one in the builder and hit “Save As…”
           </div>
         ) : (
           <ul className="divide-y divide-white/10">
@@ -186,7 +195,7 @@ export default function VaultPage() {
                       {!valid && (
                         <span
                           className="shrink-0 rounded-full border border-red-500/30 bg-red-500/10 px-2 py-0.5 text-[11px] text-red-200"
-                          title="This build record has an invalid UUID. The backend returned a bad identifier."
+                          title="This build record has an invalid UUID."
                         >
                           Invalid UUID
                         </span>
@@ -215,11 +224,7 @@ export default function VaultPage() {
                           ? "border-white/10 bg-white/5 hover:bg-white/10"
                           : "border-white/10 bg-white/5 opacity-40 pointer-events-none"
                       }`}
-                      title={
-                        valid
-                          ? "Load this build into the builder"
-                          : "Invalid build id"
-                      }
+                      title={valid ? "Load this build into the builder" : "Invalid build id"}
                     >
                       Open
                     </Link>
@@ -233,11 +238,7 @@ export default function VaultPage() {
                           ? "border-white/10 bg-white/5 hover:bg-white/10"
                           : "border-white/10 bg-white/5 opacity-40 pointer-events-none"
                       }`}
-                      title={
-                        valid
-                          ? "Add details + submit/publish later"
-                          : "Invalid build id"
-                      }
+                      title={valid ? "Edit details / publish later" : "Invalid build id"}
                     >
                       Edit
                     </Link>