Route	Screen	Use cases
`/`	Danh sách công việc (Patient Worklist)	UC-48376
`/workspace/:patientId`	Không gian chẩn đoán (Clinical Workspace)	UC-47988, UC-25776, FR-02 partial (session replay)

Run locally

cd CODEBASE/frontend/implementation
npm install
npm run dev

Open http://localhost:5173

Backend proxy (ML analyze): FastAPI on :8001 — see repo root / backend docs.

Build

npm run build
npm run preview

Session recording (PoC)

Implemented in the Xem lại phiên chẩn đoán sidebar layer:

Feature	Modes
Một khung / Nhiều khung	`RecordingModeSelector.tsx`
Multi-frame UIX vector log + WAL	`uixSessionRecorder.ts`, `workers/uixSessionRecorder.worker.ts`
Chronological replay (frame switch + overlay draw)	`uixSessionReplayEngine.ts`, `useDiagnosticSessionReplay.ts`
Hủy ghi / Phiên mới / Lưu phiên	`SessionLifecycleToolbar.tsx`

Full spec: ../spec/session_recording_frame_switch_spec.md
Coverage map: ../spec/uix_prototype_coverage.md

File structure

implementation/
├── public/assets/          # SVG ultrasound overlays + Stitch reference thumbnails
├── src/
│   ├── components/
│   │   ├── layout/         # TopBar, BottomBar, AppShell
│   │   ├── shells/         # PatientListShell, WorkspaceShell (65/35)
│   │   ├── organisms/      # DiagnosticCanvas, ReviewDiagnosticSessionPanel, ReplaySandboxOverlay
│   │   └── molecules/      # SessionLifecycleToolbar, RecordingModeSelector, PatientCard, …
│   ├── hooks/              # useDiagnosticSessionReplay, useImageCanvasTools, …
│   ├── lib/                # sessionLifecycle, uixSession*, segmentationApi, …
│   ├── workers/            # uixSessionRecorder.worker.ts (IndexedDB WAL)
│   ├── data/               # mockData, scanFrames, diagnosticSessionReplay
│   ├── pages/              # Worklist + Clinical Workspace routes
│   └── styles/global.css   # Glassmorphism tokens from spec/DESIGN.md
├── package.json
└── vite.config.ts

Design tokens

Colors, typography, and glassmorphism (blur(12px), #056B58 mint, teal secondary) follow ../spec/DESIGN.md.

Demo flows

Happy path (grading)

Open worklist → Mở phiên chẩn đoán.
Wait for segmentation / grade in Zone B.
Toggle mask, pan/zoom, draw on canvas.
Ký & Hoàn tất (local draft only).

Multi-frame session replay

Sidebar → Xem lại phiên chẩn đoán → Nhiều khung → Ghi.
Draw on frame 1 → switch frame → draw on frame 2 → Kết thúc ghi → Lưu phiên.
Load saved session → Phát liên tục → scrub across frame switch and mid-stroke overlay.

README.md Unescape Escape

Lumina MSK — Front-end Mockup

Screens