Frontend — Candidate Assessment Flow

Assessment.tsx has a basic two-column layout with a textarea for code, but it's a static placeholder with no data fetching, routing, or real functionality. The entire candidate flow needs to be built.

Already done

• Assessment.tsx — placeholder layout (question pane + code/results pane)
• Home.tsx — basic name input landing page

Remaining work

Invite landing page (/invite/:token)

• New page component (replace or repurpose Home.tsx)
• Call GET /api/invites/:token to validate the invite
• Show assessment title, description, duration, question count
• "Start Assessment" button -> POST /api/invites/:token/start
• On success, redirect to /attempts/:id
• Handle errors: expired invite, already started, invalid token

Assessment-taking page (/attempts/:id)

• Fetch attempt details + questions on mount
• Countdown timer in header (calculate from duration_minutes and started_at)
• Question navigation sidebar/tabs (numbered, mark answered)
• Display one question at a time with next/prev navigation

MCQ / Multi-select components

• Radio buttons for mcq_single, checkboxes for mcq_multi
• Auto-save: POST answers to /api/attempts/:id/answers every ~10-15s or on question change
• Visual "saved" indicator

Short answer component

• Textarea input
• Same auto-save behavior

Code editor component

• Integrate Monaco editor (or CodeMirror)
• Display language from question's language field
• "Run Code" button -> POST /api/attempts/:id/questions/:qid/submissions
• Poll GET /api/submissions/:id every 1-2s until terminal status
• Status indicator (queued -> running -> passed/failed)
• Show visible test case results (pass/fail, actual vs expected for failures)

Submit flow

• "Submit Assessment" button with confirmation dialog
• POST /api/attempts/:id/submit
• Redirect to "Assessment Complete" page
• Auto-submit when timer reaches zero

Note: this requires completion of #20 and #21