/* Student-facing views — home, take assessment (recorder), reports. Recording UI has 3 variants (Tweak): radial, wave, minimal. */ function StudentHome({ me, reports, setView }) { if (!reports || reports.length === 0) { return (
Welcome, {me && me.name ? me.name.split(' ')[0] : 'Student'}

Your progress

No evaluations yet. Take your first assessment below.
); } const latest = reports[reports.length - 1]; const trend = reports.map((r, i) => ({ label: `#${i + 1}`, value: r.scores.overall })); const avg = Math.round(reports.reduce((a, r) => a + r.scores.overall, 0) / reports.length); const best = Math.max(...reports.map((r) => r.scores.overall)); return (
Welcome back, {me.name.split(' ')[0]}

Your progress

{reports.length} evaluations · averaging {avg}/100 · your personal best is {best}
{[ { k: 'Latest score', v: latest.scores.overall, sub: latest.grade.label, spark: reports.slice(-5).map((r) => r.scores.overall), c: '--viz-1' }, { k: 'Average', v: avg, sub: gradeOf(avg).label, c: '--viz-4' }, { k: 'Personal best', v: best, sub: 'all-time', c: '--viz-6' }, ].map((s, i) => (
{s.k}
{s.v}
{s.spark && }
{s.sub}
))}
Progress over time
Available slots
setView('student_take')}>Browse open assessments →
); } function StudentTakeAssessment({ slots, setView, onBegin }) { const [passkeyInput, setPasskeyInput] = React.useState(''); const [passkeySearching, setPasskeySearching] = React.useState(false); const [passkeyErr, setPasskeyErr] = React.useState(''); const [unlockedSlots, setUnlockedSlots] = React.useState({}); // { slotId: true } const [showPasskeyEntry, setShowPasskeyEntry] = React.useState(false); // Split slots: open (no passkey) vs passkey-gated const openSlots = slots.filter((s) => s.status === 'open' && !s.passkey); const lockedSlots = slots.filter((s) => s.status === 'open' && s.passkey); const unlockedList = lockedSlots.filter((s) => unlockedSlots[s.id]); // Try to unlock a slot by passkey — calls verify endpoint to find matching slot const tryUnlockByCode = async () => { const code = passkeyInput.trim().toUpperCase(); if (!code) { setPasskeyErr('Enter a passkey code first.'); return; } setPasskeySearching(true); setPasskeyErr(''); // Try each locked slot that hasn't been unlocked yet const toTry = lockedSlots.filter((s) => !unlockedSlots[s.id]); let found = false; for (const s of toTry) { try { await apiFetch(`/slots/${s.id}/verify-passkey`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ passkey: code }), }); setUnlockedSlots((prev) => ({ ...prev, [s.id]: true })); found = true; break; } catch { /* try next */ } } setPasskeySearching(false); if (!found) { setPasskeyErr('Passkey does not match any available assessment. Check with your faculty and try again.'); } else { setPasskeyInput(''); setShowPasskeyEntry(false); window.__toast && window.__toast('Assessment unlocked! You can now begin.', 'ok'); } }; return (
Student portal

Available assessments

Select an open assessment to begin. Passkey-protected assessments are only visible after entering your faculty's passkey.
{lockedSlots.length > 0 && (
)}
{/* Passkey entry panel */} {(showPasskeyEntry || (lockedSlots.length > 0 && openSlots.length === 0)) && (
Enter your session passkey Your faculty will share this at the start of the session {showPasskeyEntry && ( )}
{ setPasskeyInput(e.target.value.toUpperCase()); setPasskeyErr(''); }} placeholder="ABCD1234" maxLength={10} style={{ flex: 1, letterSpacing: '0.12em', fontSize: 16, textAlign: 'center', textTransform: 'uppercase' }} onKeyDown={(e) => e.key === 'Enter' && tryUnlockByCode()} />
{passkeyErr && (
{passkeyErr}
)}
)} {/* No passkey notice if locked slots exist but user hasn't entered one */} {lockedSlots.length > 0 && !showPasskeyEntry && unlockedList.length < lockedSlots.length && (
{lockedSlots.length - unlockedList.length} passkey-protected assessment{lockedSlots.length - unlockedList.length !== 1 ? 's' : ''} available — ask your faculty for the passkey, then click "Enter passkey" to access {lockedSlots.length - unlockedList.length !== 1 ? 'them' : 'it'}.
)} {/* Open (no passkey) slots */} {openSlots.length > 0 && ( <> {unlockedList.length > 0 &&
Open assessments
}
{openSlots.map((s) => { const used = s.myAttempts != null ? s.myAttempts : (s.my_attempts != null ? s.my_attempts : 0); const max = s.attempts != null ? s.attempts : (s.max_attempts != null ? s.max_attempts : null); const exhausted = max !== null && used >= max; return (
!exhausted && onBegin(s)}>
Open {exhausted && Limit reached}
{s.title}
Closes {fmtDate(s.expires)} · {max ? `${used}/${max} attempt${max > 1 ? 's' : ''}` : 'Unlimited attempts'}
); })}
)} {/* Unlocked passkey slots */} {unlockedList.length > 0 && ( <>
Unlocked assessments
{unlockedList.map((s) => { const used = s.myAttempts != null ? s.myAttempts : (s.my_attempts != null ? s.my_attempts : 0); const max = s.attempts != null ? s.attempts : (s.max_attempts != null ? s.max_attempts : null); const exhausted = max !== null && used >= max; return (
!exhausted && onBegin(s)}>
Open Unlocked {exhausted && Limit reached}
{s.title}
Closes {fmtDate(s.expires)} · {max ? `${used}/${max} attempt${max > 1 ? 's' : ''}` : 'Unlimited attempts'}
); })}
)} {openSlots.length === 0 && unlockedList.length === 0 && lockedSlots.length === 0 && (
No open assessments available right now. Check back later.
)}
); } function RecorderPanel({ variant = 'radial', recording, seconds, onToggle, onStop }) { const max = 180; const pct = Math.min(1, seconds / max); const mm = String(Math.floor(seconds / 60)).padStart(2, '0'); const ss = String(seconds % 60).padStart(2, '0'); if (variant === 'minimal') { return (
{mm}:{ss}
{recording ? 'Recording' : 'Paused'} · max 3 min
{recording || seconds > 0 ? ( ) : null}
); } if (variant === 'wave') { return (
{mm}:{ss}
{recording ? 'Recording' : 'Ready'}
); } // radial (default) const size = 220, r = 96, c = 2 * Math.PI * r; return (
{mm}:{ss}
{recording ? 'Recording · tap to pause' : seconds ? 'Paused' : 'Tap to start'}
); } function EvaluationFlow({ slot, setView, onDone, recUI = 'radial', user }) { const isSuperAdmin = user?.role === 'superadmin' || user?.role === 'admin'; // For superadmin: start at student selection step (-1), else start at topic (0) const [step, setStep] = React.useState(isSuperAdmin ? -1 : 0); const [topic, setTopic] = React.useState(''); const [self, setSelf] = React.useState({ q1: 5, q2: 5, q3: 5 }); const [recording, setRecording] = React.useState(false); const [seconds, setSeconds] = React.useState(0); const [procStep, setProcStep] = React.useState(0); const [procErr, setProcErr] = React.useState(''); // Superadmin: selected student from DB const [studentList, setStudentList] = React.useState([]); const [studentSearch, setStudentSearch] = React.useState(''); const [selectedStudent, setSelectedStudent] = React.useState(null); const [loadingStudents, setLoadingStudents] = React.useState(false); // Audio upload (superadmin only) const [uploadedFile, setUploadedFile] = React.useState(null); const uploadRef = React.useRef(null); React.useEffect(() => { if (!isSuperAdmin) return; setLoadingStudents(true); apiFetch('/auth/admin/users') .then((users) => { const students = (Array.isArray(users) ? users : []).filter((u) => u.role === 'user' && u.is_active); setStudentList(students); }) .catch(() => setStudentList([])) .finally(() => setLoadingStudents(false)); }, [isSuperAdmin]); const mediaRef = React.useRef(null); const chunksRef = React.useRef([]); const streamRef = React.useRef(null); React.useEffect(() => { if (!recording) return; const i = setInterval(() => setSeconds((s) => { if (s >= 179) { handleStop(); return 180; } return s + 1; }), 1000); return () => clearInterval(i); }, [recording]); const handleToggle = async () => { if (!recording) { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); streamRef.current = stream; const mr = new MediaRecorder(stream); mediaRef.current = mr; chunksRef.current = []; mr.ondataavailable = (e) => { if (e.data.size > 0) chunksRef.current.push(e.data); }; mr.start(1000); setRecording(true); } catch (ex) { alert('Microphone access denied or unavailable. Please allow microphone access and try again.'); } } else { // pause not supported well — just treat as stop if re-clicked handleStop(); } }; const handleStop = () => { if (!mediaRef.current) { setRecording(false); setStep('review'); return; } // requestData() forces the browser to flush any buffered audio into // ondataavailable BEFORE stop() fires onstop — prevents empty blobs // on browsers that don't auto-flush on stop (Safari, some Android). try { mediaRef.current.requestData(); } catch (_) {} mediaRef.current.onstop = () => { streamRef.current?.getTracks().forEach((t) => t.stop()); // Verify we actually captured audio before moving to review const totalBytes = chunksRef.current.reduce((s, c) => s + c.size, 0); if (totalBytes === 0) { alert('No audio was captured. Please check your microphone and try again.'); setStep(2); return; } setStep('review'); }; mediaRef.current.stop(); setRecording(false); }; const MAX_POLL_ATTEMPTS = 120; const submitEvaluation = async (attempt = 0) => { setProcErr(''); // Determine audio source: uploaded file or recorded chunks let audioBlob; let audioFileName = 'recording.webm'; if (uploadedFile) { audioBlob = uploadedFile; audioFileName = uploadedFile.name; } else { // Detect correct MIME type — Safari records as audio/mp4, not audio/webm const mimeType = mediaRef.current?.mimeType || 'audio/webm'; const ext = mimeType.includes('mp4') ? 'mp4' : mimeType.includes('ogg') ? 'ogg' : 'webm'; audioFileName = `recording.${ext}`; audioBlob = new Blob(chunksRef.current, { type: mimeType }); } // Guard: refuse to upload a 0-byte blob (saves a round-trip + clear error) if (!audioBlob || audioBlob.size === 0) { setProcErr('No audio data found. Please re-record and try again.'); setStep('review'); return; } // Determine student info: selected student (superadmin) or logged-in user const studentInfo = (isSuperAdmin && selectedStudent) ? { name: selectedStudent.name, reg: selectedStudent.reg_number || 'UNKNOWN', dept: selectedStudent.department || 'Unknown', college: selectedStudent.college || '', } : { name: user?.name || 'Student', reg: user?.regNo || user?.reg_number || 'UNKNOWN', dept: user?.dept || user?.department || 'Unknown', college: user?.college || '', }; const fd = new FormData(); fd.append('file', audioBlob, audioFileName); fd.append('name', studentInfo.name); fd.append('reg', studentInfo.reg); fd.append('dept', studentInfo.dept); fd.append('topic', topic); fd.append('slot_id', String(slot?.id || '')); fd.append('college', studentInfo.college); fd.append('faculty', isSuperAdmin ? (user?.name || '') : ''); fd.append('context', ''); fd.append('self_score_speaking', String(self.q1 || 0)); fd.append('self_score_confidence', String(self.q2 || 0)); fd.append('self_score_fillers', String(self.q3 || 0)); try { const token = localStorage.getItem('ca_token') || ''; const submitRes = await fetch(`${API_BASE}/evaluate`, { method: 'POST', headers: token ? { Authorization: `Bearer ${token}` } : {}, body: fd, }); if (!submitRes.ok) { let msg = `Server error ${submitRes.status}`; try { const j = await submitRes.json(); msg = j.detail?.message || j.detail || msg; } catch {} throw new Error(msg); } const { job_id } = await submitRes.json(); if (!job_id) throw new Error('No job ID returned from server.'); let polls = 0; while (polls < MAX_POLL_ATTEMPTS) { await new Promise((r) => setTimeout(r, 2500)); polls++; const pollRes = await fetch(`${API_BASE}/jobs/${job_id}`, { headers: token ? { Authorization: `Bearer ${token}` } : {}, }); if (!pollRes.ok) continue; const pollData = await pollRes.json(); setProcStep(Math.min(3, Math.floor(polls / 5))); if (pollData.status === 'complete') { const report = normaliseApiReport(pollData.result); setStep(4); onDone(report); return; } if (pollData.status === 'failed') throw new Error(pollData.error || 'Evaluation failed on the server.'); } throw new Error('Evaluation timed out. Please try again.'); } catch (ex) { if (attempt < 2) { setProcStep(0); await new Promise((r) => setTimeout(r, 5000)); submitEvaluation(attempt + 1); } else { setProcErr(ex.message || 'Evaluation failed after retries.'); } } }; React.useEffect(() => { if (step !== 3) return; const steps = ['Transcribing audio', 'Analysing delivery', 'Scoring criteria', 'Composing verdict']; let idx = 0; setProcStep(0); const t = setInterval(() => { idx++; if (idx >= steps.length) { clearInterval(t); return; } setProcStep(idx); }, 4000); return () => clearInterval(t); }, [step]); const Step = ({ n, label, active, done }) => (
{done ? '✓' : n}
{label}
); return (
Active evaluation

{slot.title}

{isSuperAdmin && selectedStudent && (
Evaluating: {selectedStudent.name} · {selectedStudent.reg_number} · {selectedStudent.department}
)}
Live session
{/* step bar */}
{(isSuperAdmin ? ['Student', 'Topic', 'Self-assess', 'Record', 'Process', 'Report'] : ['Topic', 'Self-assess', 'Record', 'Process', 'Report']).map((l, i) => { const stepNum = isSuperAdmin ? i - 1 : i; return ( {i > 0 &&
stepNum - 1 ? 'var(--accent)' : 'var(--rule)' }}/>} stepNum} /> ); })}
{/* ── Superadmin: Student selection step ── */} {step === -1 && (
Step 1 · Select student
Choose which student this evaluation is for. Only active student accounts are shown.
setStudentSearch(e.target.value)} style={{ width: '100%', padding: '9px 10px 9px 32px', fontSize: 13 }}/>
{loadingStudents ? (
Loading students…
) : (
{studentList.filter(s => !studentSearch || s.name.toLowerCase().includes(studentSearch.toLowerCase()) || (s.reg_number || '').toLowerCase().includes(studentSearch.toLowerCase()) ).map((s) => (
setSelectedStudent(s)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', borderBottom: '1px solid var(--rule)', cursor: 'pointer', background: selectedStudent?.id === s.id ? 'color-mix(in oklab, var(--accent) 8%, transparent)' : 'transparent', transition: 'background .1s', }}>
{s.name}
{s.reg_number || '—'} · {s.department || '—'}
{selectedStudent?.id === s.id && }
))} {studentList.length === 0 && (
No student accounts found. Create students via User Management first.
)}
)}
)} {step === 0 && !isSuperAdmin && user?.role === 'user' && (
Your identity — locked to your account
{user?.name} {user?.reg_number || user?.regNo || '—'} {user?.department || user?.dept || '—'} {(user?.college) && {user.college}}
Your name and register number are taken from your account and cannot be changed here.
)} {step === 0 && (
Step 1 · Your topic
setTopic(e.target.value)}/>
Drop a PDF or click to upload
PDF · DOCX · Max 5 MB
)} {step === 1 && (
Step 2 · Self-assessment
“Before you present, rate your own expectations. We'll compare these to the AI's scores after.”
{[ { k: 'q1', label: 'How prepared do you feel about the content?' }, { k: 'q2', label: 'How confident are you about your delivery?' }, { k: 'q3', label: 'How clear is your structure in your own head?' }, ].map((q) => (
{q.label}
{Array.from({ length: 10 }, (_, i) => ( ))}
))}
)} {step === 2 && (
Step {isSuperAdmin ? 4 : 3} · {isSuperAdmin ? 'Upload or record audio' : 'Record your presentation'} on: {topic} {recUI === 'radial' ? 'Radial' : recUI === 'wave' ? 'Waveform' : 'Minimal'}
{/* Superadmin: audio file upload option */} {isSuperAdmin && (
Upload audio file
{ const f = e.target.files?.[0]; if (f) { setUploadedFile(f); chunksRef.current = []; } }}/> {uploadedFile && ( {uploadedFile.name} ({(uploadedFile.size / 1024).toFixed(0)} KB) )}
{uploadedFile && (
)}
Or record live below ↓ (WAV, MP3, WebM, M4A accepted · max 50 MB)
)}
)} {step === 'review' && (
Recording complete
{Math.floor(seconds / 60)}:{String(seconds % 60).padStart(2, '0')} of audio captured for topic: {topic}
Review your recording details above before submitting for AI analysis.
)} {step === 3 && (
{!procErr &&
} {procErr &&
}
{procErr ? 'Evaluation failed' : 'Your report is being prepared'}
{procErr ? procErr : 'This usually takes 20–40 seconds. We\'ll retry if the server is slow.'}
{!procErr && (
{['Transcribing audio', 'Analysing delivery', 'Scoring criteria', 'Composing verdict'].map((s, i) => (
{i < procStep ? '✓' : ''} {s} {i === procStep && running…}
))}
)} {procErr && (
)}
)}
); } function MyReportsView({ reports, openReport }) { return (
Portfolio

My reports

{reports.length} evaluations · track your progress over time.
{[...reports].reverse().map((r) => (
openReport(r)}>
{r.topic}
{r.grade.g} {fmtDate(r.date)}
{r.duration}s{r.words}w{r.wpm} wpm{r.fillers} fillers
))}
); } // ── AUTH SCREEN ───────────────────────────────────────── function AuthScreen({ onAuth }) { const [tab, setTab] = React.useState('login'); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [regName, setRegName] = React.useState(''); const [regEmail, setRegEmail] = React.useState(''); const [regPassword, setRegPassword] = React.useState(''); const [regNo, setRegNo] = React.useState(''); const [dept, setDept] = React.useState(''); const [regCollege, setRegCollege] = React.useState(''); const [loading, setLoading] = React.useState(false); const [waking, setWaking] = React.useState(false); const [err, setErr] = React.useState(''); // Load colleges for registration dropdowns const [collegeList, setCollegeList] = React.useState([]); React.useEffect(() => { fetch(`${API_BASE}/colleges/`) .then((r) => r.ok ? r.json() : []) .then((data) => setCollegeList(Array.isArray(data) ? data : [])) .catch(() => setCollegeList([])); }, []); const deptOptions = React.useMemo(() => { if (!regCollege) return []; const c = collegeList.find((c) => c.name === regCollege); return c ? c.departments.map((d) => d.name) : []; }, [regCollege, collegeList]); const handleLogin = async (e) => { e?.preventDefault?.(); setErr(''); setLoading(true); try { setWaking(true); try { await fetch(`${API_BASE}/health`, { signal: AbortSignal.timeout(30000) }); } catch {} setWaking(false); const body = new FormData(); body.append('username', email.trim()); body.append('password', password); const res = await fetch(`${API_BASE}/auth/login`, { method: 'POST', body }); if (!res.ok) { let msg = 'Invalid credentials'; try { const j = await res.json(); msg = j.detail || msg; } catch {} throw new Error(msg); } const data = await res.json(); const user = _saveAuth(data); onAuth(user); } catch (ex) { setErr(ex.message || 'Login failed'); } finally { setLoading(false); setWaking(false); } }; const [regSuccess, setRegSuccess] = React.useState(false); const handleRegister = async (e) => { e?.preventDefault?.(); setErr(''); setLoading(true); try { const data = await apiFetch('/auth/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: regName.trim(), email: regEmail.trim(), password: regPassword, reg_number: regNo, department: dept, college: regCollege }), }); if (data.pending_approval) { setRegSuccess(true); } else { // Legacy: active immediately — switch to login setTab('login'); setEmail(regEmail); setPassword(''); setErr(''); } } catch (ex) { setErr(ex.message || 'Registration failed'); } finally { setLoading(false); } }; return (
{/* ── Brand header with new logo ── */}
ChiselAssess
ChiselAssess
Learning Solutions @Chisel

The voice
of every
student.

AI-powered oral-presentation evaluation — detailed rubrics, voice telemetry, and a trend line for every learner.
© {new Date().getFullYear()} Learning Solutions @Chisel · www.ls-chisel.com
{/* Tabs */}
{['login', 'register'].map((t) => ( ))}
{tab === 'login' && ( <>

Welcome back.

setEmail(e.target.value)} placeholder="you@college.ac.in" type="email" required autoFocus/>
setPassword(e.target.value)} required/>
{err &&
{err}
}
Protected by college SSO · setTab('register')}>Create account
)} {tab === 'register' && ( <>

Create account.

{regSuccess ? (
Registration submitted!
Your account is pending admin approval.
A superadmin must activate your account before you can sign in.
Contact your faculty or institution admin to expedite access.
) : (
setRegName(e.target.value)} placeholder="Your full name" required/>
setRegEmail(e.target.value)} placeholder="you@college.ac.in" required/>
setRegNo(e.target.value.toUpperCase())} placeholder="Register number"/>
{collegeList.length > 0 ? : setRegCollege(e.target.value)} placeholder="College name"/> }
{deptOptions.length > 0 ? : setDept(e.target.value)} placeholder="e.g. CSE, ECE, IT"/> }
setRegPassword(e.target.value)} required minLength={6}/>
{err &&
{err}
}
)} )}
); } Object.assign(window, { StudentHome, StudentTakeAssessment, EvaluationFlow, MyReportsView, AuthScreen });