Liverooms Implementation: Solo quizzes, Collaboration Whiteboard, and Group Quizzes

.gitignore

@@ -1,11 +1,17 @@
 .env
 node_modules/
+.venv/
 certs/
 dist/
 tmp/*
 
 /PanTS/
 downloaded.nii.gz
+PanTS-Demo/public/image_only/PanTS_*/
+PanTS-Demo/public/mask_only/PanTS_*/
+PanTS-Demo/public/quiz/
+/quiz-data/
+PanTS-Demo/public/metadata.official.xlsx
 PanTS/data/pdf/
 .DS_Store
 
@@ -19,3 +25,6 @@ flask-server/pants-dev.db-shm
 
 # Local Claude Code scratch config (launch profiles etc.)
 .claude/
+
+# Local Playwright MCP artifacts.
+.playwright-mcp/

PanTS-Demo/eslint.config.js

@@ -28,7 +28,8 @@ export default tseslint.config([
           caughtErrorsIgnorePattern: "^_"
         }
       ],
-      "@typescript-eslint/no-explicity-any": "off"
+      "@typescript-eslint/no-explicit-any": "off",
+      "react-refresh/only-export-components": "off"
     }
   },
 ])

PanTS-Demo/src/App.tsx

@@ -19,6 +19,9 @@ import ScrollToTopButton from "./components/ScrollToTopButton";
 const VisualizationPage = lazy(() => import("./routes/VisualizationPage"));
 const CompareViewerPage = lazy(() => import("./routes/CompareViewerPage"));
 const UploadPage = lazy(() => import("./routes/UploadPage"));
+const LiveRoomPage = lazy(() => import("./liveRooms/LiveRoomPage"));
+const SoloChallengePage = lazy(() => import("./education/SoloChallengePage"));
+const QuizPracticePage = lazy(() => import("./education/QuizPracticePage"));
 const SettingsPage = lazy(() => import("./routes/Settings"));
 const ProfileSettings = lazy(() => import("./routes/Settings/ProfileSettings"));
 const PlanSettings = lazy(() => import("./routes/Settings/PlanSettings"));
@@ -97,6 +100,9 @@ function App() {
                   />
                   <Route path="/dashboard" element={<Homepage />} />
                   <Route path="/case/:caseId" element={<VisualizationPage />} />
+                  <Route path="/live/:roomId" element={<LiveRoomPage />} />
+                  <Route path="/live/challenge/:challengeId" element={<SoloChallengePage />} />
+                  <Route path="/learn/quiz/:packId" element={<QuizPracticePage />} />
                   <Route
                     path="/session/:sessionId"
                     element={<VisualizationPage />}

PanTS-Demo/src/components/AIAssistant/AISidebar.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useAuth } from "../../contexts/authContext";
+import { track } from "../../helpers/analytics";
 import { API_BASE } from "../../helpers/constants";
 import type {
   AIAction,
@@ -853,6 +854,7 @@
       const text = (overrideText ?? input).trim();
       const outgoingAttachments = attachments;
       if ((!text && outgoingAttachments.length === 0) || loading) return;
+      track("assistant_send_message");
 
       const conversation = messages
         .filter((message) => message.role === "user" || message.role === "assistant")
@@ -1024,7 +1026,7 @@
         abortRef.current = null;
       }
     },
     [
       input,
       attachments,
       loading,

PanTS-Demo/src/components/OrganCheckbox.tsx

@@ -62,7 +62,6 @@ function Checked({
 		OrganSystem[system].forEach((sub) => {
 			if (typeof sub === "string") {
 				newCheckState[getOrganIdx(sub) + 1] = toggled;
-				console.log(toggled);
 				return;
 			}
 			const key: SubSystems = Object.keys(sub)[0] as SubSystems;
@@ -214,18 +213,16 @@ function Checked({
 					) {
 						const organKey: AllSystems = Object.keys(organ)[0] as AllSystems;
 						return (
-							<>
-								<Checked
-									key={Object.keys(organ)[0]}
-									OrganSystem={organ}
-									system={organKey}
-									labelColorMap={labelColorMap}
-									checkState={checkState}
-									setCheckState={setCheckState}
-									level={level + 1}
-									onJumpToOrgan={onJumpToOrgan}
-								/>
-							</>
+							<Checked
+								key={organKey}
+								OrganSystem={organ}
+								system={organKey}
+								labelColorMap={labelColorMap}
+								checkState={checkState}
+								setCheckState={setCheckState}
+								level={level + 1}
+								onJumpToOrgan={onJumpToOrgan}
+							/>
 						);
 					}
 				})}

PanTS-Demo/src/components/ReportScreen/ReportScreen.tsx

@@ -119,7 +119,7 @@
 function getReportMeasurements(organ: string, comments: string): ReportMeasurements {
   const section = getReportSection(organ, comments);
   const volumeMatch = section?.match(/volume:\s*([\d.]+)\s*cc/i);
-  const huMatch = section?.match(/Mean HU value:\s*([\d.]+)(?:\s*\+\/\-\s*([\d.]+))?/i);
+  const huMatch = section?.match(/Mean HU value:\s*([\d.]+)(?:\s*\+\/-\s*([\d.]+))?/i);
   const sizeMatch = section?.match(/Size:\s*([^().]+?)\s*cm/i);
 
   return {
@@ -430,10 +430,12 @@
       });
       const j = await r.json();
       setPlain2(j.plain_language || []);
-    } catch {} finally { setPLoad(false); }
+    } catch {
+      // Plain-language text is optional; retain the original report on failure.
+    } finally { setPLoad(false); }
   }, [data, plain2]);
 
   useEffect(() => { if (data) fetchPlain(); }, [data]);
 
   const go = useCallback((s: Step) => {
     setDir(s > step ? 'r' : 'l');
@@ -458,7 +460,7 @@
       const highlightName = curOrganName === 'pancreas' ? 'pancreas_body' : curOrganName;
       if (highlightName && curOrganData) onOrganHighlight?.(highlightName, curOrganData.centroid_mm);
     }
   }, [step, data]);
 
   const leftContent = React.useMemo(() => {
     if (!data) return null;

PanTS-Demo/src/components/ScrollToTopButton/ScrollToTopButton.module.css

@@ -43,4 +43,3 @@
   height: 20px;
   flex-shrink: 0;
 }
-

PanTS-Demo/src/components/viewer/MeshViewer.tsx

@@ -30,11 +30,16 @@
     : `${APP_CONSTANTS.API_ORIGIN}/api/cases/${caseId}/mesh-manifest`;
   const res = await fetch(base);
   if (!res.ok) throw new Error(`Failed to fetch mesh manifest: ${res.status}`);
-  return res.json();
+  const data = await res.json() as Partial<MeshManifest>;
+  if (!Array.isArray(data.organs) || !Array.isArray(data.center)) {
+    throw new Error("Mesh manifest response is invalid");
+  }
+  return data as MeshManifest;
 }
 
 export function SegmentationMeshViewer({ caseId, checkState, loading, opacity, crosshairMm, customOrgans = [], labelColorMap = {}, isSession = false}: SegmentationMeshViewerProps) {
   const [manifest, setManifest] = useState<MeshManifest | null>(null);
+  const [manifestError, setManifestError] = useState(false);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
   // Bumped on every mask edit so editedSegments below is recomputed — the 3D pane
   // needs to know the instant a static organ's mask changes, not just at mount.
@@ -47,7 +52,7 @@
 
   // Segment indices touched since the case loaded — includes edits to the STATIC
   // 32-organ catalog, not just brand-new custom classes.
   const editedSegments = useMemo(() => getEditedSegments(), [editVersion]);
 
   const crosshairPosition = useMemo(() => {
     if (!manifest || !crosshairMm) return null;
@@ -56,6 +61,8 @@
 
   useEffect(() => {
     let alive = true;
+    setManifest(null);
+    setManifestError(false);
     fetchMeshManifest(caseId, isSession)
       .then((data) => {
         if (!alive) return;
@@ -64,12 +71,13 @@
         for (const organ of data.organs) initialLoaded[organ.id] = true;
         setLoaded(initialLoaded);
       })
-      .catch((err) => console.error(err));
+      .catch(() => { if (alive) setManifestError(true); });
     return () => { alive = false; };
   }, [caseId, isSession]);
 
   const organs = useMemo(() => manifest?.organs ?? [], [manifest]);
 
+  if (manifestError) return <div role="alert">3D segmentation unavailable.</div>;
   if (!manifest || loading || !checkState || checkState.length === 0) {
     return <div>Loading 3D segmentation...</div>;
   }
@@ -106,6 +114,7 @@
                       organ={organ}
                       visible={!!checkState[organ.id]}
                       opacity={opacity/100}
+                      color={labelColorMap[organ.id]}
                     />
                   );
                 })}
@@ -130,4 +139,4 @@
       </main>
     </div>
   );
-}
+}

PanTS-Demo/src/components/viewer/OrganMesh.tsx

@@ -1,4 +1,5 @@
 import { useGLTF } from "@react-three/drei";
+import type { Color } from "@cornerstonejs/core/types";
 import { useEffect, useMemo } from "react";
 import * as THREE from "three";
 import { segmentation_category_colors } from '../../helpers/constants';
@@ -7,33 +8,40 @@ type OrganMeshProps = {
   organ: OrganMeshInfo;
   visible: boolean;
   opacity?: number;
+  color?: Color;
 };
 
 export const rgbToHex = (r: number, g: number, b: number, _a: number) => 
   '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
 
-export function OrganMesh({ organ, visible, opacity = 1 }: OrganMeshProps) {
+export function OrganMesh({ organ, visible, opacity = 1, color }: OrganMeshProps) {
   const gltf = useGLTF(organ.url);
   const object = useMemo(() => {
     return gltf.scene.clone(true);
   }, [gltf.scene]);
 
   useEffect(() => {
+    const createdMaterials: THREE.Material[] = [];
     object.traverse((child) => {
       if (!(child instanceof THREE.Mesh)) return;
 
-      child.material = new THREE.MeshStandardMaterial({
-        color: new THREE.Color(rgbToHex(...segmentation_category_colors[organ.id])),
+      const material = new THREE.MeshStandardMaterial({
+        color: new THREE.Color(rgbToHex(...(color ?? segmentation_category_colors[organ.id]))),
         roughness: 0.75,
         metalness: 0.0,
         transparent: opacity < 1,
         opacity,
         side: THREE.DoubleSide,
       });
+      child.material = material;
+      createdMaterials.push(material);
 
       child.frustumCulled = true;
     });
-  }, [object, organ.id, opacity]);
+    return () => {
+      for (const material of createdMaterials) material.dispose();
+    };
+  }, [object, organ.id, opacity, color]);
 
   return <primitive object={object} visible={visible} />;
-}
+}