add React Router v7 with URL-based routing for login, student, and instructor views

Replaces tab-based state navigation in App.tsx with react-router declarative routes:
/ (login), /student (student portal), /instructor (admin dashboard). Auth state
extracted into AuthProvider context with useAuth() hook. RootLayout handles
role-based redirects and guards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: dsshimel

attendabot/frontend/CLAUDE.md

@@ -15,14 +15,14 @@ bun run lint     # Run ESLint
 
 ```
 src/
-├── main.tsx              # React entry point
-├── App.tsx               # Root component with tab navigation and auth
+├── main.tsx              # React entry point (BrowserRouter + AuthProvider + Routes)
 ├── App.css               # Main styles
 ├── api/
 │   └── client.ts         # API client (fetch wrapper, cookie auth, all endpoints)
 ├── lib/
 │   └── auth-client.ts    # BetterAuth client for Discord OAuth
 ├── components/
+│   ├── RootLayout.tsx    # Route layout with auth-based redirects
 │   ├── Login.tsx         # Discord OAuth login page
 │   ├── StudentTable.tsx  # Sortable student list with observer dropdown
 │   ├── StudentDetail.tsx # Individual student view with summary
@@ -40,17 +40,26 @@ src/
 │   ├── TestingPanel.tsx  # Test briefings and EOD previews
 │   └── Sidebar.tsx       # Navigation sidebar
 ├── hooks/
+│   ├── useAuth.tsx       # Auth context, provider, and useAuth() hook
 │   └── useWebSocket.ts   # WebSocket connection hook (cookie auth)
+├── pages/
+│   ├── LoginPage.tsx     # Login route (/)
+│   ├── StudentPage.tsx   # Student portal route (/student)
+│   └── InstructorPage.tsx # Instructor dashboard route (/instructor)
 └── utils/
     └── linkify.tsx       # URL detection and linking
 ```
 
-## Key Components
+## Routing
+
+Uses **React Router v7** (declarative mode) with three routes:
+- `/` — Login page (redirects to dashboard if already logged in)
+- `/student` — Student portal (role-gated)
+- `/instructor` — Instructor admin dashboard (role-gated)
 
-### App.tsx
-- Root component managing auth state and tab navigation
-- Tabs: Students, Observers, Messages, Testing, Configuration
-- Auth state determined by BetterAuth `getSession()` (Discord OAuth)
+`RootLayout` handles auth-based redirects. `AuthProvider` (in `useAuth.tsx`) provides auth state via context. The `loading` state stays `true` until both `getSession()` and `getMe()` resolve, preventing redirect flicker.
+
+## Key Components
 
 ### StudentTable.tsx
 - Displays students in selected cohort with sortable columns
@@ -116,10 +125,11 @@ Authentication uses **BetterAuth** with Discord OAuth. There is no JWT or passwo
 
 ## State Management
 
-- **Local state**: useState/useEffect throughout
-- **Auth**: BetterAuth session cookies (no localStorage tokens)
+- **Auth state**: `AuthProvider` context (`useAuth()` hook) — provides `loggedIn`, `role`, `username`, `sessionInvalid`, `logout()`, etc.
+- **Local state**: useState/useEffect throughout for component-specific data
+- **Auth cookies**: BetterAuth session cookies (no localStorage tokens)
 - **Username display**: Stored in localStorage for display only (not for auth)
-- **No global store**: Each component fetches its own data
+- **No global store**: Each component fetches its own data (except auth which is in context)
 
 ## API Client (api/client.ts)
 
@@ -179,7 +189,7 @@ const { logs, status, clearLogs } = useWebSocket();
      return <div>...</div>;
    }
    ```
-3. Import and add to App.tsx or parent component
+3. Import and add to the appropriate page component or add a new route
 
 ## Adding a New API Endpoint
 
@@ -198,7 +208,6 @@ const { logs, status, clearLogs } = useWebSocket();
 
 - **Auth redirects**: fetchWithAuth triggers `onAuthFailure` callback on 401/403, which shows session expired warning
 - **Vite proxy**: Only works in dev mode; production serves from backend static files
-- **No React Router**: Navigation is tab-based within App.tsx, not URL-based
 - **Styling**: CSS in App.css, no CSS modules or styled-components
 - **Two-click delete pattern**: Used for destructive actions (delete student, delete note). Click shows "Confirm?", click again deletes, blur resets.
-- **Role loading race condition**: App.tsx gates on `role` before rendering dashboards. If `role` is `null` (still loading from `getMe()`), a loading screen is shown — NOT the instructor dashboard. Rendering instructor components (e.g., `StudentCohortPanel`) before role is known causes 403s on instructor-only endpoints (`/api/cohorts`, `/api/observers`) which triggers the session expired banner for students.
+- **Role loading race condition**: `AuthProvider` waits for both `getSession()` and `getMe()` to resolve before setting `loading=false`. This prevents `RootLayout` from redirecting before the role is known, which would cause instructor components to mount for students and trigger 403 errors.

attendabot/frontend/bun.lock

@@ -13,7 +13,8 @@
     "better-auth": "^1.4.18",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "react-router": "^7.13.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

attendabot/frontend/package.json

@@ -5,13 +5,8 @@
 import { useState } from "react";
 import { authClient } from "../lib/auth-client";
 
-/** Props for the Login component. */
-interface LoginProps {
-  onLogin: () => void;
-}
-
 /** Login page with Discord OAuth button. */
-export function Login({ onLogin: _onLogin }: LoginProps) {
+export function Login() {
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 

attendabot/frontend/src/components/Login.tsx

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview Root layout with auth-based redirects.
+ */
+
+import { Outlet, Navigate, useLocation } from "react-router";
+import { useAuth } from "../hooks/useAuth";
+
+/** Layout that handles auth redirects and renders child routes via Outlet. */
+export function RootLayout() {
+  const { loading, loggedIn, role, logout } = useAuth();
+  const location = useLocation();
+
+  if (loading) {
+    return (
+      <div className="app">
+        <header>
+          <h1>Attendabot</h1>
+        </header>
+        <main><p>Loading...</p></main>
+      </div>
+    );
+  }
+
+  // Not logged in and not on login page → redirect to login
+  if (!loggedIn && location.pathname !== "/") {
+    return <Navigate to="/" replace />;
+  }
+
+  // Logged in but role couldn't be determined (getMe() failed)
+  if (loggedIn && !role && location.pathname !== "/") {
+    return (
+      <div className="app">
+        <header>
+          <h1>Attendabot</h1>
+          <div className="header-right">
+            <button onClick={logout} className="logout-btn">Logout</button>
+          </div>
+        </header>
+        <main><p>Loading...</p></main>
+      </div>
+    );
+  }
+
+  // Logged in and on login page → redirect to role-appropriate dashboard
+  if (loggedIn && location.pathname === "/") {
+    if (!role) return <Outlet />; // role unknown, stay on login page
+    const target = role === "student" ? "/student" : "/instructor";
+    return <Navigate to={target} replace />;
+  }
+
+  // Logged in but on wrong dashboard for their role
+  if (loggedIn && role === "student" && location.pathname.startsWith("/instructor")) {
+    return <Navigate to="/student" replace />;
+  }
+  if (loggedIn && role === "instructor" && location.pathname.startsWith("/student")) {
+    return <Navigate to="/instructor" replace />;
+  }
+
+  return <Outlet />;
+}

attendabot/frontend/src/components/RootLayout.tsx

@@ -0,0 +1,92 @@
+/**
+ * @fileoverview Auth context and provider. Extracts all auth state from App.tsx.
+ */
+
+import { createContext, useContext, useState, useEffect } from "react";
+import type { ReactNode } from "react";
+import { setUsername as storeUsername, clearSession, onAuthFailure, getMe } from "../api/client";
+import type { MeResponse } from "../api/client";
+import { authClient } from "../lib/auth-client";
+
+interface AuthState {
+  loading: boolean;
+  loggedIn: boolean;
+  username: string | null;
+  role: "instructor" | "student" | null;
+  sessionInvalid: boolean;
+  me: MeResponse | null;
+  studentCohortDates: { startDate?: string; endDate?: string };
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthState | null>(null);
+
+/** Provides auth state to the component tree. */
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [loading, setLoading] = useState(true);
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [username, setUsername] = useState<string | null>(null);
+  const [role, setRole] = useState<"instructor" | "student" | null>(null);
+  const [sessionInvalid, setSessionInvalid] = useState(false);
+  const [me, setMe] = useState<MeResponse | null>(null);
+  const [studentCohortDates, setStudentCohortDates] = useState<{ startDate?: string; endDate?: string }>({});
+
+  useEffect(() => {
+    // Check for BetterAuth session (Discord OAuth) then fetch role
+    authClient.getSession().then(async (result) => {
+      if (result.data?.user) {
+        const name = result.data.user.name || result.data.user.email || "Discord User";
+        storeUsername(name);
+        setLoggedIn(true);
+        setUsername(name);
+
+        // Fetch role before clearing loading state to prevent redirect flicker
+        const meData = await getMe();
+        if (meData) {
+          setRole(meData.role);
+          setMe(meData);
+          if (meData.role === "student") {
+            setStudentCohortDates({
+              startDate: meData.cohortStartDate,
+              endDate: meData.cohortEndDate,
+            });
+          }
+        }
+      }
+      setLoading(false);
+    });
+
+    const unsubscribe = onAuthFailure(() => {
+      setSessionInvalid(true);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const logout = async () => {
+    try {
+      await authClient.signOut();
+    } catch {
+      // Ignore errors if no BetterAuth session exists
+    }
+    clearSession();
+    setLoggedIn(false);
+    setSessionInvalid(false);
+    setUsername(null);
+    setRole(null);
+    setMe(null);
+  };
+
+  return (
+    <AuthContext.Provider value={{ loading, loggedIn, username, role, sessionInvalid, me, studentCohortDates, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+/** Returns the current auth state. Must be used within an AuthProvider. */
+export function useAuth(): AuthState {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be used within an AuthProvider");
+  return ctx;
+}

attendabot/frontend/src/hooks/useAuth.tsx

@@ -1,10 +1,26 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from 'react-router'
 import './index.css'
-import App from './App.tsx'
+import './App.css'
+import { AuthProvider } from './hooks/useAuth'
+import { RootLayout } from './components/RootLayout'
+import { LoginPage } from './pages/LoginPage'
+import { StudentPage } from './pages/StudentPage'
+import { InstructorPage } from './pages/InstructorPage'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <AuthProvider>
+        <Routes>
+          <Route element={<RootLayout />}>
+            <Route path="/" element={<LoginPage />} />
+            <Route path="/student" element={<StudentPage />} />
+            <Route path="/instructor" element={<InstructorPage />} />
+          </Route>
+        </Routes>
+      </AuthProvider>
+    </BrowserRouter>
   </StrictMode>,
 )