Disable buttons if logged out

Also add prod.env for FE config

4 files changed, 75 insertions, 4 deletions

diff --git a/makima/frontend/prod.env b/makima/frontend/prod.env
new file mode 100644
index 0000000..ac420e2
--- /dev/null
+++ b/makima/frontend/prod.env
@@ -0,0 +1,3 @@
+# These are all public tokens / config
+VITE_SUPABASE_URL=https://jalcdbwvbzvtxrwduwop.supabase.co
+VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY=sb_publishable_7aM3npUD3py5tVei-juGJw_PmdT-hl0
diff --git a/makima/frontend/src/components/NavStrip.tsx b/makima/frontend/src/components/NavStrip.tsx
index 806f0c5..642e9a3 100644
--- a/makima/frontend/src/components/NavStrip.tsx
+++ b/makima/frontend/src/components/NavStrip.tsx
@@ -4,14 +4,14 @@ import { RewriteLink } from "./RewriteLink";
 interface NavLink {
   label: string;
   href: string;
-  disabled?: boolean;
+  requiresAuth?: boolean;
   external?: boolean;
 }
 
 const NAV_LINKS: NavLink[] = [
   { label: "Listen", href: "/listen" },
-  { label: "Files", href: "/files" },
-  { label: "Mesh", href: "/mesh" },
+  { label: "Files", href: "/files", requiresAuth: true },
+  { label: "Mesh", href: "/mesh", requiresAuth: true },
 ];
 
 export function NavStrip() {
@@ -22,6 +22,9 @@ export function NavStrip() {
     window.location.href = "/login";
   };
 
+  // Check if user has access (authenticated or auth not configured)
+  const hasAccess = isAuthenticated || !isAuthConfigured;
+
   return (
     <nav
       className="flex items-center gap-2.5 px-3 py-2.5 border-t border-b border-dashed border-[rgba(117,170,252,0.35)] bg-[#0c1729] font-mono uppercase tracking-wide text-[11px]"
@@ -35,7 +38,7 @@ export function NavStrip() {
           <RewriteLink
             key={link.label}
             to={link.href}
-            disabled={link.disabled}
+            disabled={link.requiresAuth && !hasAccess}
             external={link.external}
           >
             {link.label}
diff --git a/makima/frontend/src/routes/files.tsx b/makima/frontend/src/routes/files.tsx
index 0645b85..3ba2d52 100644
--- a/makima/frontend/src/routes/files.tsx
+++ b/makima/frontend/src/routes/files.tsx
@@ -14,8 +14,40 @@ import {
 } from "../hooks/useFileSubscription";
 import type { FileDetail as FileDetailType, BodyElement, Task } from "../lib/api";
 import { createTask } from "../lib/api";
+import { useAuth } from "../contexts/AuthContext";
 
 export default function FilesPage() {
+  const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
+  const navigate = useNavigate();
+
+  // Redirect to login if not authenticated (when auth is configured)
+  useEffect(() => {
+    if (!authLoading && isAuthConfigured && !isAuthenticated) {
+      navigate("/login");
+    }
+  }, [authLoading, isAuthConfigured, isAuthenticated, navigate]);
+
+  // Show loading while checking auth
+  if (authLoading) {
+    return (
+      <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]">
+        <Masthead showNav />
+        <main className="flex-1 flex items-center justify-center">
+          <p className="text-[#7788aa] font-mono text-sm">Loading...</p>
+        </main>
+      </div>
+    );
+  }
+
+  // Don't render if not authenticated (will redirect)
+  if (isAuthConfigured && !isAuthenticated) {
+    return null;
+  }
+
+  return <FilesPageContent />;
+}
+
+function FilesPageContent() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const { files, loading, error, conflict, clearConflict, fetchFile, editFile, removeFile, saveFile } = useFiles();
diff --git a/makima/frontend/src/routes/mesh.tsx b/makima/frontend/src/routes/mesh.tsx
index 852ce58..7ecf96d 100644
--- a/makima/frontend/src/routes/mesh.tsx
+++ b/makima/frontend/src/routes/mesh.tsx
@@ -9,6 +9,7 @@ import { useTasks } from "../hooks/useTasks";
 import { useTaskSubscription, type TaskUpdateEvent, type TaskOutputEvent } from "../hooks/useTaskSubscription";
 import type { TaskWithSubtasks, MeshChatContext } from "../lib/api";
 import { startTask as startTaskApi, stopTask as stopTaskApi, getTaskOutput } from "../lib/api";
+import { useAuth } from "../contexts/AuthContext";
 
 // View modes for the task detail page
 type ViewMode = "split" | "task" | "output";
@@ -76,7 +77,15 @@ function clearPersistedOutput(taskId: string): void {
 export default function MeshPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
+  const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth();
   const { tasks, loading, error, conflict, clearConflict, fetchTask, fetchTasks, editTask, removeTask, saveTask } = useTasks();
+
+  // Redirect to login if not authenticated
+  useEffect(() => {
+    if (!authLoading && isAuthConfigured && !isAuthenticated) {
+      navigate("/login");
+    }
+  }, [authLoading, isAuthConfigured, isAuthenticated, navigate]);
   const [taskDetail, setTaskDetail] = useState<TaskWithSubtasks | null>(null);
   const [detailLoading, setDetailLoading] = useState(false);
   const [creating, setCreating] = useState(false);
@@ -488,6 +497,30 @@ export default function MeshPage() {
     }
   };
 
+  // Show loading state while checking auth
+  if (authLoading) {
+    return (
+      <div className="relative z-10 h-screen flex flex-col overflow-hidden">
+        <Masthead showTicker={false} showNav />
+        <main className="flex-1 flex items-center justify-center">
+          <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>
+        </main>
+      </div>
+    );
+  }
+
+  // Don't render content if not authenticated (redirect will happen via useEffect)
+  if (isAuthConfigured && !isAuthenticated) {
+    return (
+      <div className="relative z-10 h-screen flex flex-col overflow-hidden">
+        <Masthead showTicker={false} showNav />
+        <main className="flex-1 flex items-center justify-center">
+          <div className="font-mono text-[#9bc3ff] text-sm">Redirecting to login...</div>
+        </main>
+      </div>
+    );
+  }
+
   return (
     <div className="relative z-10 h-screen flex flex-col overflow-hidden">
       <Masthead showTicker={false} showNav />