feat(frontend): router shell + PrivateRoute + stub pages

frontend/src/App.tsx

@@ -1,10 +1,24 @@
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { PrivateRoute } from "./auth/PrivateRoute";
+import { AppShell } from "./layout/AppShell";
+import LoginPage from "./pages/LoginPage";
+import WorkflowsPage from "./pages/WorkflowsPage";
+import ConnectionsPage from "./pages/ConnectionsPage";
+
 export default function App() {
   return (
-    <div className="min-h-screen flex items-center justify-center">
-      <div className="rounded-lg bg-slate-900 border border-slate-800 p-6">
-        <h1 className="text-2xl font-semibold text-brand-500">VolcanicCore</h1>
-        <p className="text-slate-400 mt-2 text-sm">Frontend scaffold — Tailwind wired.</p>
-      </div>
-    </div>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<LoginPage />} />
+        <Route element={<PrivateRoute />}>
+          <Route element={<AppShell />}>
+            <Route path="/" element={<Navigate to="/workflows" replace />} />
+            <Route path="/workflows" element={<WorkflowsPage />} />
+            <Route path="/connections" element={<ConnectionsPage />} />
+          </Route>
+        </Route>
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </BrowserRouter>
   );
 }

frontend/src/auth/PrivateRoute.tsx

@@ -0,0 +1,14 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useSession } from "./session";
+
+export function PrivateRoute() {
+  const q = useSession();
+  const loc = useLocation();
+  if (q.isLoading) {
+    return <div className="p-8 text-slate-400 text-sm">Loading…</div>;
+  }
+  if (!q.data?.authenticated) {
+    return <Navigate to="/login" replace state={{ from: loc.pathname }} />;
+  }
+  return <Outlet />;
+}

frontend/src/layout/AppShell.tsx

@@ -0,0 +1,35 @@
+import { NavLink, Outlet } from "react-router-dom";
+import { Boxes, Cable, LogOut } from "lucide-react";
+import { useLogout } from "@/auth/session";
+
+export function AppShell() {
+  const logout = useLogout();
+  const link = (isActive: boolean) =>
+    `flex items-center gap-2 px-3 py-2 rounded text-sm ${
+      isActive ? "bg-brand-600 text-white" : "text-slate-300 hover:bg-slate-800"
+    }`;
+  return (
+    <div className="min-h-screen flex">
+      <aside className="w-56 border-r border-slate-800 flex flex-col">
+        <div className="px-4 py-4 text-lg font-semibold text-brand-500">VolcanicCore</div>
+        <nav className="px-2 space-y-1 flex-1">
+          <NavLink to="/workflows" className={({ isActive }) => link(isActive)}>
+            <Boxes size={16} /> Workflows
+          </NavLink>
+          <NavLink to="/connections" className={({ isActive }) => link(isActive)}>
+            <Cable size={16} /> Connections
+          </NavLink>
+        </nav>
+        <button
+          onClick={() => logout.mutate()}
+          className="m-2 px-3 py-2 text-sm rounded text-slate-300 hover:bg-slate-800 flex items-center gap-2"
+        >
+          <LogOut size={16} /> Sign out
+        </button>
+      </aside>
+      <main className="flex-1 overflow-auto">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

frontend/src/main.tsx

@@ -1,10 +1,20 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import App from "./App";
 import "./index.css";
+import "@xyflow/react/dist/style.css";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: { retry: false, refetchOnWindowFocus: false },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </React.StrictMode>,
 );

frontend/src/pages/ConnectionsPage.tsx

@@ -0,0 +1,3 @@
+export default function ConnectionsPage() {
+  return <div className="p-8">Connections stub — replaced Task 11.</div>;
+}

frontend/src/pages/LoginPage.tsx

@@ -0,0 +1,3 @@
+export default function LoginPage() {
+  return <div className="p-8">Login stub — replaced Task 8.</div>;
+}

frontend/src/pages/WorkflowsPage.tsx

@@ -0,0 +1,3 @@
+export default function WorkflowsPage() {
+  return <div className="p-8">Workflows stub — replaced Task 9.</div>;
+}