c7acbb8054
client/src/App.tsx now renders three views:
- start: scenario title + description + disclaimer acknowledgement
checkbox (required before Start) + Start button
- live: status badge, latency readout (within/over 600ms budget), End
button, live transcript with learner/AI turn indicators
- debrief: coaching debrief placeholder + latency summary + turns-this-
session recap + Start-new-session button
View transitions are driven by the voice session state (connected → live,
idle → debrief). App.css updated with scenario-card, disclaimer-check, and
summary styles. npm run typecheck + npm run build pass. Replaces the
SLICE-02 minimal page.
---ci---
phase: 1
milestone: v0.1
plan: 05
task: 05-04
status: execute
persona: frontend-engineer
requirements:
covered: [REQ-DEBRIEF-01, REQ-VOICE-01, REQ-NFR-LAT-01]
---/ci---
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, we recommend enabling type-aware lint rules by installing oxlint-tsgolint and editing .oxlintrc.json:
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["react", "typescript", "oxc"],
"options": {
"typeAware": true
},
"rules": {
"react/rules-of-hooks": "error",
"react/only-export-components": ["warn", { "allowConstantExport": true }]
}
}
See the Oxlint rules documentation for the full list of rules and categories.