1 files changed, 33 insertions, 0 deletions
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 />