add URL-based tab routing for all tabbed views and fold auth simulator into SPA

Every tab now has its own URL (/instructor/:tab, /student/:tab, /simulations/:kind/:flowId),
enabling bookmarking, refresh persistence, and browser back/forward navigation. The auth
simulator is no longer a separate Vite MPA entry point — it's rendered inside the main
React Router app behind the auth wall.

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

Author: dsshimel

attendabot/backend/src/api/index.ts

@@ -72,16 +72,10 @@ if (process.env.NODE_ENV === "production") {
 
   app.use(express.static(frontendPath));
 
-  // Fallback: serve the correct index.html based on path
+  // Fallback: serve index.html for all non-API routes (SPA routing)
   app.get("*", (req, res) => {
     if (req.path.startsWith("/api")) return;
-    if (req.path.startsWith("/simulations/auth")) {
-      res.sendFile(path.join(frontendPath, "simulations/auth/index.html"));
-    } else if (req.path.startsWith("/simulations")) {
-      res.sendFile(path.join(frontendPath, "simulations/auth/index.html"));
-    } else {
-      res.sendFile(path.join(frontendPath, "index.html"));
-    }
+    res.sendFile(path.join(frontendPath, "index.html"));
   });
 }
 

attendabot/frontend/simulations/auth/index.html

@@ -2,17 +2,21 @@
  * @fileoverview Displays available simulations as cards with links.
  */
 
+import { useNavigate } from "react-router";
+
 const simulations = [
   {
     id: "auth",
     title: "Auth Flow Simulator",
     description: "Interactive animations of common authentication systems",
-    url: "/simulations/auth/",
+    url: "/simulations/auth",
   },
 ];
 
 /** Renders a grid of available simulation cards. */
 export function SimulationsHub() {
+  const navigate = useNavigate();
+
   return (
     <div className="panel" style={{ gridColumn: "span 2" }}>
       <h2>Simulations</h2>
@@ -45,7 +49,7 @@ export function SimulationsHub() {
             </p>
             <button
               className="primary-btn"
-              onClick={() => window.open(sim.url, "_blank")}
+              onClick={() => navigate(sim.url)}
             >
               Open
             </button>

attendabot/frontend/src/components/SimulationsHub.tsx

@@ -4,11 +4,13 @@
  */
 
 import { useState } from "react";
+import { useLocation, useNavigate } from "react-router";
 import { MyEods } from "./MyEods";
 import { StudentStats } from "./StudentStats";
 import { SimulationsHub } from "./SimulationsHub";
 
 type StudentTab = "stats" | "eods" | "simulations";
+const VALID_TABS: StudentTab[] = ["stats", "eods", "simulations"];
 
 interface StudentPortalProps {
   username: string | null;
@@ -21,8 +23,21 @@ interface StudentPortalProps {
 
 /** Student portal with tabs for Stats, My EODs, and Simulations. */
 export function StudentPortal({ username, sessionInvalid, onLogout, studentDiscordId, cohortStartDate, cohortEndDate }: StudentPortalProps) {
-  const [activeTab, setActiveTab] = useState<StudentTab>("stats");
   const embedded = !!studentDiscordId;
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // When embedded (instructor impersonation), use local state since URL is /instructor/*
+  const [embeddedTab, setEmbeddedTab] = useState<StudentTab>("stats");
+
+  // When standalone, derive tab from URL
+  const segment = location.pathname.split("/")[2] ?? "";
+  const urlTab: StudentTab = VALID_TABS.includes(segment as StudentTab) ? (segment as StudentTab) : "stats";
+
+  const activeTab = embedded ? embeddedTab : urlTab;
+  const setActiveTab = embedded
+    ? setEmbeddedTab
+    : (tab: StudentTab) => navigate(`/student/${tab}`);
 
   const content = (
     <>

attendabot/frontend/src/components/StudentPortal.tsx

@@ -8,6 +8,7 @@ import { RootLayout } from './components/RootLayout'
 import { LoginPage } from './pages/LoginPage'
 import { StudentPage } from './pages/StudentPage'
 import { InstructorPage } from './pages/InstructorPage'
+import { SimulatorPage } from './pages/SimulatorPage'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
@@ -16,8 +17,9 @@ createRoot(document.getElementById('root')!).render(
         <Routes>
           <Route element={<RootLayout />}>
             <Route path="/" element={<LoginPage />} />
-            <Route path="/student" element={<StudentPage />} />
-            <Route path="/instructor" element={<InstructorPage />} />
+            <Route path="/student/*" element={<StudentPage />} />
+            <Route path="/instructor/*" element={<InstructorPage />} />
+            <Route path="/simulations/:kind/:flowId?" element={<SimulatorPage />} />
           </Route>
         </Routes>
       </AuthProvider>

attendabot/frontend/src/main.tsx

@@ -4,6 +4,7 @@
  */
 
 import { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router";
 import { getCohorts, getStudentsByCohort } from "../api/client";
 import type { Student, Cohort } from "../api/client";
 import { MessageFeed } from "../components/MessageFeed";
@@ -17,11 +18,16 @@ import { SimulationsHub } from "../components/SimulationsHub";
 import { useAuth } from "../hooks/useAuth";
 
 type Tab = "students" | "simulations" | "observers" | "messages" | "testing" | "diagnostics";
+const VALID_TABS: Tab[] = ["students", "simulations", "observers", "messages", "testing", "diagnostics"];
 
 /** Instructor admin dashboard with tabs and impersonation. */
 export function InstructorPage() {
   const { username, sessionInvalid, logout } = useAuth();
-  const [activeTab, setActiveTab] = useState<Tab>("students");
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const segment = location.pathname.split("/")[2] ?? "";
+  const activeTab: Tab = VALID_TABS.includes(segment as Tab) ? (segment as Tab) : "students";
   const [impersonating, setImpersonating] = useState<{ discordId: string; name: string; cohortId: number } | null>(null);
   const [impersonateStudents, setImpersonateStudents] = useState<{ discordId: string; name: string; cohortId: number }[]>([]);
   const [cohorts, setCohorts] = useState<Cohort[]>([]);
@@ -115,37 +121,37 @@ export function InstructorPage() {
           <nav className="tab-navigation">
             <button
               className={`tab-btn ${activeTab === "students" ? "active" : ""}`}
-              onClick={() => setActiveTab("students")}
+              onClick={() => navigate("/instructor/students")}
             >
               Students
             </button>
             <button
               className={`tab-btn ${activeTab === "simulations" ? "active" : ""}`}
-              onClick={() => setActiveTab("simulations")}
+              onClick={() => navigate("/instructor/simulations")}
             >
               Simulations
             </button>
             <button
               className={`tab-btn ${activeTab === "observers" ? "active" : ""}`}
-              onClick={() => setActiveTab("observers")}
+              onClick={() => navigate("/instructor/observers")}
             >
               Observers
             </button>
             <button
               className={`tab-btn ${activeTab === "messages" ? "active" : ""}`}
-              onClick={() => setActiveTab("messages")}
+              onClick={() => navigate("/instructor/messages")}
             >
               Messages
             </button>
             <button
               className={`tab-btn ${activeTab === "testing" ? "active" : ""}`}
-              onClick={() => setActiveTab("testing")}
+              onClick={() => navigate("/instructor/testing")}
             >
               Testing
             </button>
             <button
               className={`tab-btn ${activeTab === "diagnostics" ? "active" : ""}`}
-              onClick={() => setActiveTab("diagnostics")}
+              onClick={() => navigate("/instructor/diagnostics")}
             >
               Configuration
             </button>

attendabot/frontend/src/pages/InstructorPage.tsx

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview Simulator page route component.
+ * Reads URL params to determine which simulation and flow to display.
+ */
+
+import { useParams, useNavigate } from "react-router";
+import SimulatorApp from "../simulations/SimulatorApp";
+import { flows } from "../simulations/flowData";
+
+/** Thin wrapper that maps URL params to SimulatorApp props. */
+export function SimulatorPage() {
+  const { kind, flowId } = useParams();
+  const navigate = useNavigate();
+
+  if (kind === "auth") {
+    const flowIndex = flowId ? flows.findIndex((f) => f.id === flowId) : 0;
+    const activeTab = flowIndex >= 0 ? flowIndex : 0;
+
+    return (
+      <div className="app">
+        <SimulatorApp
+          activeTab={activeTab}
+          onTabChange={(i) => navigate(`/simulations/auth/${flows[i].id}`)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="app">
+      <p>Unknown simulation: {kind}</p>
+    </div>
+  );
+}

attendabot/frontend/src/pages/SimulatorPage.tsx

@@ -1,28 +1,31 @@
-import { useState } from "react";
 import FlowDiagram from "./FlowDiagram";
 import { flows } from "./flowData";
+import "./simulations.css";
 
-export default function SimulatorApp() {
-  const [activeTab, setActiveTab] = useState(0);
+interface SimulatorAppProps {
+  activeTab: number;
+  onTabChange: (index: number) => void;
+}
 
+export default function SimulatorApp({ activeTab, onTabChange }: SimulatorAppProps) {
   return (
     <>
       <h1 className="app-title">Auth Flow Simulator</h1>
       <p className="app-subtitle">
         Interactive animations of common authentication systems
       </p>
 
-      <div className="tab-bar">
+      <nav className="tab-navigation">
         {flows.map((flow, i) => (
           <button
             key={flow.id}
             className={`tab-btn ${i === activeTab ? "active" : ""}`}
-            onClick={() => setActiveTab(i)}
+            onClick={() => onTabChange(i)}
           >
             {flow.title}
           </button>
         ))}
-      </div>
+      </nav>
 
       <FlowDiagram flow={flows[activeTab]} />
     </>

attendabot/frontend/src/simulations/SimulatorApp.tsx

@@ -1,21 +1,5 @@
 /* ── Simulations page – Fractal design system ── */
 
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  min-height: 100vh;
-}
-
-#root {
-  max-width: 1400px;
-  margin: 0 auto;
-  padding: var(--space-5) var(--space-6);
-}
-
 /* ── Header ── */
 .app-title {
   font-size: var(--text-2xl);
@@ -30,40 +14,6 @@ body {
   margin-bottom: var(--space-5);
 }
 
-/* ── Tabs ── */
-.tab-bar {
-  display: flex;
-  gap: 0;
-  margin-bottom: var(--space-6);
-  border: 2px solid var(--color-charcoal);
-}
-.tab-btn {
-  background: var(--color-white);
-  border: none;
-  border-right: 2px solid var(--color-charcoal);
-  box-shadow: none;
-  color: var(--color-slate);
-  padding: var(--space-3) var(--space-5);
-  cursor: pointer;
-  font-size: var(--text-sm);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-family: inherit;
-  transition: background 0.15s, color 0.15s;
-}
-.tab-btn:last-child {
-  border-right: none;
-}
-.tab-btn:hover {
-  color: var(--color-charcoal);
-  background: var(--color-platinum);
-}
-.tab-btn.active {
-  color: var(--color-white);
-  background: var(--color-charcoal);
-}
-
 /* ── Flow Diagram ── */
 .flow-diagram {
   max-width: 100%;