feat: replace frontend with redesigned Ethos Studio UI + update READMEs

.gitattributes

@@ -1 +0,0 @@
-*.onnx filter=lfs diff=lfs merge=lfs -text

api/README.md

@@ -1,22 +1,22 @@
-# Evoxtral Speech-to-Text (Model Layer)
+# API Layer (Python FastAPI — port 8000)
 
-Proxy API that forwards audio to the external [YongkangZOU/evoxtral-lora](https://huggingface.co/YongkangZOU/evoxtral-lora) inference endpoint (hosted on Modal), then adds VAD sentence segmentation and emotion parsing from inline expression tags.
+Local Voxtral inference pipeline. Loads `mistralai/Voxtral-Mini-3B-2507` + `YongkangZOU/evoxtral-lora` (PEFT adapter) locally, runs VAD sentence segmentation, per-segment emotion tagging, and facial emotion recognition (FER) for video inputs.
 
-**Requirements**: Python 3.10+, system **ffmpeg** (`brew install ffmpeg` / `apt install ffmpeg`). No GPU or local model download needed.
+**Requirements**: Python 3.11+, system **ffmpeg** (`brew install ffmpeg` / `apt install ffmpeg`). GPU with ~8 GB VRAM recommended; CPU fallback supported (expect ~50 s per audio second).
 
 ---
 
 ## Startup
 
 ```bash
-cd model/voxtral-server
+cd api
 python -m venv .venv
 source .venv/bin/activate   # Windows: .venv\Scripts\activate
 pip install -r requirements.txt
 uvicorn main:app --host 0.0.0.0 --port 8000 --reload
 ```
 
-Default port: **8000**. Starts instantly — inference is handled remotely.
+Default port: **8000**. On first start the Voxtral model (~8 GB total) is downloaded from HuggingFace. Set `HF_HUB_DISABLE_XET=1` if download stalls behind a local proxy.
 
 ---
 
@@ -24,14 +24,13 @@ Default port: **8000**. Starts instantly — inference is handled remotely.
 
 ### POST /transcribe
 
-Simple transcription. Audio is converted to WAV and forwarded to the evoxtral API.
-The transcription text may include inline expression tags like `[laughs]`, `[sighs]`, `[whispers]`.
+Simple transcription. Audio is converted to WAV and passed to the local Voxtral model.
 
 | | |
 |--|--|
 | **Content-Type** | `multipart/form-data` |
-| **Body** | `audio` — audio file (required) |
-| **Formats** | wav, mp3, flac, ogg, m4a, webm |
+| **Body** | `audio` — audio or video file (required) |
+| **Formats** | wav, mp3, flac, ogg, m4a, webm, mp4, mov, mkv |
 | **Max size** | `MAX_UPLOAD_MB` (default 100 MB) |
 
 **Response (200)**
@@ -48,20 +47,18 @@ The transcription text may include inline expression tags like `[laughs]`, `[sig
 
 ### POST /transcribe-diarize
 
-Full pipeline: transcription (via evoxtral API) + VAD sentence segmentation + per-segment emotion parsing.
-All segments are labelled `SPEAKER_00` (single-speaker mode).
-Emotion is derived from evoxtral's inline expression tags (`[laughs]` → Happy, `[sighs]` → Sad, etc.).
+Full pipeline: local Voxtral STT + VAD sentence segmentation + per-segment emotion tagging. For video inputs, also runs per-frame FER via MobileViT-XXS ONNX and adds `face_emotion` per segment.
 
 | | |
 |--|--|
 | **Content-Type** | `multipart/form-data` |
-| **Body** | `audio` — audio file (required) |
-| **Formats** | wav, mp3, flac, ogg, m4a, webm |
+| **Body** | `audio` — audio or video file (required) |
+| **Formats** | wav, mp3, flac, ogg, m4a, webm, mp4, mov, mkv |
 | **Max size** | `MAX_UPLOAD_MB` (default 100 MB) |
 
-Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merged. Text is distributed by sentence boundaries, with character-level fallback.
+Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merged.
 
-**Response (200)**
+**Response (200) — audio input**
 
 ```json
 {
@@ -80,11 +77,37 @@ Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merg
   "duration": 5.65,
   "text": "Hello! [laughs] How are you?",
   "filename": "audio.m4a",
-  "diarization_method": "vad"
+  "diarization_method": "vad",
+  "has_video": false
+}
+```
+
+**Response (200) — video input** (adds `face_emotion` per segment)
+
+```json
+{
+  "segments": [
+    {
+      "id": 1,
+      "speaker": "SPEAKER_00",
+      "start": 0.96,
+      "end": 3.23,
+      "text": "Hello!",
+      "emotion": "Happy",
+      "valence": 0.7,
+      "arousal": 0.6,
+      "face_emotion": "Happy"
+    }
+  ],
+  "duration": 5.65,
+  "text": "Hello!",
+  "filename": "video.mov",
+  "diarization_method": "vad",
+  "has_video": true
 }
 ```
 
-`diarization_method`: always `"vad"`.
+`face_emotion` values: `Anger | Contempt | Disgust | Fear | Happy | Neutral | Sad | Surprise`
 
 **Errors**
 
@@ -92,7 +115,7 @@ Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merg
 |--------|---------|
 | 400 | No/invalid file, empty, or unsupported format |
 | 413 | File exceeds `MAX_UPLOAD_MB` |
-| 502 | Evoxtral external API unreachable or returned an error |
+| 500 | Transcription or inference error |
 
 ---
 
@@ -103,13 +126,29 @@ Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merg
 ```json
 {
   "status": "ok",
-  "model": "YongkangZOU/evoxtral-lora (external API)",
+  "model": "mistralai/Voxtral-Mini-3B-2507 + YongkangZOU/evoxtral-lora (local)",
   "model_loaded": true,
   "ffmpeg": true,
-  "pyannote_available": false,
-  "hf_token_set": false,
-  "max_upload_mb": 100,
-  "evoxtral_api": "https://yongkang-zou1999--evoxtral-api-evoxtralmodel-web.modal.run"
+  "fer_enabled": true,
+  "device": "cpu",
+  "max_upload_mb": 100
+}
+```
+
+---
+
+### GET /debug-inference
+
+Smoke-test endpoint: synthesizes 0.5 s of silence and runs a minimal `generate()` call. Useful for verifying the model is loaded and functional without uploading a real file.
+
+**Response (200)**
+
+```json
+{
+  "ok": true,
+  "text": "",
+  "dtype": "torch.bfloat16",
+  "device": "cpu"
 }
 ```
 
@@ -119,7 +158,9 @@ Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merg
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `EVOXTRAL_API` | `https://yongkang-zou1999--evoxtral-api-evoxtralmodel-web.modal.run` | External evoxtral inference endpoint |
+| `MODEL_ID` | `mistralai/Voxtral-Mini-3B-2507` | Base Voxtral model on HF Hub |
+| `ADAPTER_ID` | `YongkangZOU/evoxtral-lora` | PEFT LoRA adapter on HF Hub |
+| `FER_MODEL_PATH` | (auto-detected) | Path to `emotion_model_web.onnx`; auto-detects `/app/models/` (Docker) and `../models/` (local) |
 | `MAX_UPLOAD_MB` | `100` | Max upload size in MB |
 
 ---
@@ -127,12 +168,18 @@ Segmentation: silence gaps ≥ 0.3 s create a new segment; gaps < 0.3 s are merg
 ## Usage examples
 
 ```bash
+# Health
+curl -s http://127.0.0.1:8000/health
+
+# Smoke-test inference
+curl -s http://127.0.0.1:8000/debug-inference
+
 # Simple transcription
 curl -X POST http://127.0.0.1:8000/transcribe -F "audio=@audio.m4a"
 
-# Transcription + VAD segmentation + emotion
+# Full pipeline (audio)
 curl -X POST http://127.0.0.1:8000/transcribe-diarize -F "audio=@audio.m4a"
 
-# Health
-curl -s http://127.0.0.1:8000/health
+# Full pipeline (video — also returns face_emotion per segment)
+curl -X POST http://127.0.0.1:8000/transcribe-diarize -F "audio=@video.mov"
 ```

proxy/README.md

@@ -1,22 +1,23 @@
-# Server Layer
+# Proxy Layer (Node/Express — port 3000)
 
-Node proxy service. Exposes the client-facing API and forwards requests to the **Model layer** (voxtral-server).
+API gateway. Accepts multipart file uploads from the browser, forwards them to the **API layer** (Python FastAPI on port 8000), and returns JSON responses.
 
 - **Port**: `3000` (override with `PORT`)
-- **Model layer URL**: `http://127.0.0.1:8000` (override with `MODEL_URL`)
+- **API layer URL**: `http://127.0.0.1:8000` (override with `MODEL_URL`)
 
 ---
 
 ## Startup
 
 ```bash
+cd proxy
 npm install
 npm run dev    # dev with --watch
 # or
 npm start
 ```
 
-Requires **Node.js 18+**.
+Requires **Node.js 22+**.
 
 ---
 
@@ -24,7 +25,7 @@ Requires **Node.js 18+**.
 
 ### POST /api/speech-to-text
 
-Simple transcription. Forwarded to Model layer `POST /transcribe`. Timeout: **5 min**.
+Simple transcription. Forwarded to API layer `POST /transcribe`. Timeout: **30 min** (CPU inference is slow).
 
 | | |
 |--|--|
@@ -38,7 +39,7 @@ Simple transcription. Forwarded to Model layer `POST /transcribe`. Timeout: **5
 {
   "text": "transcribed text",
   "words": [],
-  "languageCode": null
+  "languageCode": "en"
 }
 ```
 
@@ -47,19 +48,19 @@ Simple transcription. Forwarded to Model layer `POST /transcribe`. Timeout: **5
 | Status | Body |
 |--------|------|
 | 400 | `{"error": "Upload an audio file (form field: audio)"}` |
-| 502 | Model layer error or unreachable |
-| 504 | `{"error": "Request timeout (>5 min); try shorter audio"}` |
+| 502 | API layer error or unreachable |
+| 504 | `{"error": "Request timeout (>30 min); try shorter audio"}` |
 
 ---
 
 ### POST /api/transcribe-diarize
 
-Transcription + VAD sentence segmentation + emotion analysis. Forwarded to Model layer `POST /transcribe-diarize`. Timeout: **10 min**. All segments are labelled `SPEAKER_00`.
+Full pipeline: transcription + VAD sentence segmentation + emotion analysis. For video inputs, also returns `face_emotion` per segment. Forwarded to API layer `POST /transcribe-diarize`. Timeout: **60 min**.
 
 | | |
 |--|--|
 | **Content-Type** | `multipart/form-data` |
-| **Body** | `audio` — audio file (wav, mp3, flac, ogg, m4a, webm) |
+| **Body** | `audio` — audio or video file (wav, mp3, flac, ogg, m4a, webm, mp4, mov, mkv) |
 | **Limits** | ≤ 100 MB |
 
 **Response (200)**
@@ -73,25 +74,29 @@ Transcription + VAD sentence segmentation + emotion analysis. Forwarded to Model
       "start": 0.0,
       "end": 4.2,
       "text": "Hello, how are you?",
-      "emotion": "neutral",
-      "valence": 0.1,
-      "arousal": 0.2
+      "emotion": "Happy",
+      "valence": 0.7,
+      "arousal": 0.6,
+      "face_emotion": "Happy"
     }
   ],
   "duration": 42.3,
   "text": "full transcript",
-  "filename": "recording.m4a",
-  "diarization_method": "vad"
+  "filename": "recording.mov",
+  "diarization_method": "vad",
+  "has_video": true
 }
 ```
 
+`face_emotion` is present only when a video file is uploaded and FER is enabled. `has_video` indicates whether facial emotion recognition ran.
+
 **Errors**
 
 | Status | Body |
 |--------|------|
 | 400 | `{"error": "Upload an audio file (form field: audio)"}` |
-| 502 | Model layer error or unreachable |
-| 504 | `{"error": "Request timeout (>10 min); try shorter audio"}` |
+| 502 | API layer error or unreachable |
+| 504 | `{"error": "Request timeout (>60 min); try shorter audio"}` |
 
 ---
 
@@ -107,17 +112,17 @@ Proxies `GET {MODEL_URL}/health` and wraps it.
   "server": "ser-server",
   "model": {
     "status": "ok",
-    "model": "mistralai/Voxtral-Mini-4B-Realtime-2602",
+    "model": "mistralai/Voxtral-Mini-3B-2507 + YongkangZOU/evoxtral-lora (local)",
     "model_loaded": true,
     "ffmpeg": true,
-    "pyannote_available": false,
-    "hf_token_set": false,
+    "fer_enabled": true,
+    "device": "cpu",
     "max_upload_mb": 100
   }
 }
 ```
 
-**Response (502)** — when Model layer is unreachable:
+**Response (502)** — when API layer is unreachable:
 
 ```json
 {"ok": false, "error": "Cannot reach Model layer; start model/voxtral-server first", "url": "http://127.0.0.1:8000"}
@@ -125,15 +130,22 @@ Proxies `GET {MODEL_URL}/health` and wraps it.
 
 ---
 
+### GET /api/debug-inference
+
+Proxies `GET {MODEL_URL}/debug-inference` — smoke-tests the local Voxtral model with a short silence clip.
+
+---
+
 ## Usage examples
 
 ```bash
 # Health
 curl -s http://localhost:3000/health
 
-# Transcribe
+# Transcribe (audio)
 curl -X POST http://localhost:3000/api/speech-to-text -F "audio=@./recording.m4a"
 
-# Transcribe + segment + emotion
+# Transcribe + segment + emotion (audio or video)
 curl -X POST http://localhost:3000/api/transcribe-diarize -F "audio=@./recording.m4a"
+curl -X POST http://localhost:3000/api/transcribe-diarize -F "audio=@./video.mov"
 ```

web/.gitignore

@@ -1,41 +1,41 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web/README.md

@@ -1,41 +1,43 @@
-# demo — Frontend & Server Layer
+# Frontend (Next.js — port 3030)
 
-This folder contains the Next.js frontend (Ethos Studio) and the Node proxy server.
+Ethos Studio UI. Upload audio or video files, view transcription results with per-segment emotion badges and facial emotion (FER) badges, and explore the waveform timeline in the Studio editor.
+
+---
 
 ## Architecture
 
 ```
 Browser (port 3030)
-  → Server layer (Node, port 3000)   POST /api/speech-to-text, POST /api/transcribe-diarize, GET /health
-      → Model layer (Python, port 8000)   POST /transcribe, POST /transcribe-diarize, GET /health
+  → Proxy layer (Node, port 3000)   POST /api/speech-to-text, POST /api/transcribe-diarize, GET /health
+      → API layer (Python, port 8000)   POST /transcribe, POST /transcribe-diarize, GET /health
 ```
 
-- **Frontend** (`demo/`): Upload page + Studio editor. Calls the Server layer. See [Startup → 3](#3-frontend-nextjs-port-3030).
-- **Server layer** (`demo/server/`): Proxies client requests to the Model layer. See [demo/server/README.md](server/README.md) for API details.
-- **Model layer** (`model/voxtral-server/`): Voxtral inference + diarization + emotion analysis. See [model/voxtral-server/README.md](../model/voxtral-server/README.md) for API details.
+- **Frontend** (`web/`): Upload page + Studio editor. Calls the Proxy layer.
+- **Proxy layer** (`proxy/`): Forwards browser requests to the API layer. See [proxy/README.md](../proxy/README.md) for API details.
+- **API layer** (`api/`): Local Voxtral inference + VAD segmentation + emotion + FER. See [api/README.md](../api/README.md) for API details.
 
 ---
 
 ## Startup
 
-### 1. Model layer (Python, port 8000)
+### 1. API layer (Python, port 8000)
 
-Requires **Python 3.10+** and **ffmpeg**.
+Requires **Python 3.11+** and **ffmpeg**.
 
 ```bash
-cd ../model/voxtral-server
+cd api
 python -m venv .venv
 source .venv/bin/activate   # Windows: .venv\Scripts\activate
 pip install -r requirements.txt
 uvicorn main:app --host 0.0.0.0 --port 8000 --reload
 ```
 
-First run may download the model (~8–16GB).
+On first run the Voxtral model (~8 GB) is downloaded from HuggingFace.
 
-### 2. Server layer (Node, port 3000)
+### 2. Proxy layer (Node, port 3000)
 
 ```bash
-cd server
+cd proxy
 npm install
 npm run dev
 ```
@@ -43,15 +45,15 @@ npm run dev
 ### 3. Frontend (Next.js, port 3030)
 
 ```bash
-cd ..   # back to demo/
+cd web
 npm install
 npm run dev
 ```
 
 Open [http://localhost:3030](http://localhost:3030).
 
-- **Home page**: Click **Transcribe files**, drag-drop an audio file, choose language and options, then **Upload**. The file is sent to `/api/transcribe-diarize` and results open in the Studio.
-- **Studio page** (`/studio`): Three-column layout — transcript segments (speaker + emotion badges) on the left, waveform in the center, audio player on the right.
+- **Home page**: Click **Transcribe files**, drag-drop an audio or video file, then **Upload**. The file is sent to `/api/transcribe-diarize` and results open in the Studio.
+- **Studio page** (`/studio`): Three-column layout — transcript segments (speaker + emotion badges + FER badges for video) on the left, waveform in the center, audio player on the right.
 
 ### 4. Quick check (API only)
 
@@ -59,13 +61,14 @@ Open [http://localhost:3030](http://localhost:3030).
 curl -s http://localhost:3000/health
 curl -X POST http://localhost:3000/api/speech-to-text -F "audio=@audio.m4a"
 curl -X POST http://localhost:3000/api/transcribe-diarize -F "audio=@audio.m4a"
+curl -X POST http://localhost:3000/api/transcribe-diarize -F "audio=@video.mov"
 ```
 
 ---
 
-## API (Server layer)
+## API (Proxy layer)
 
-Clients should call the **Server layer** only. The Model layer is used internally.
+Clients should call the **Proxy layer** only. The API layer is internal.
 
 ### POST /api/speech-to-text
 
@@ -75,7 +78,7 @@ Simple transcription without diarization.
 |--|--|
 | **Content-Type** | `multipart/form-data` |
 | **Body** | `audio` — audio file (wav, mp3, flac, ogg, m4a, webm) |
-| **Limits** | ≤ 100 MB; timeout 5 min |
+| **Limits** | ≤ 100 MB; timeout 30 min |
 
 **Response (200)**
 
@@ -83,7 +86,7 @@ Simple transcription without diarization.
 {
   "text": "transcribed text",
   "words": [],
-  "languageCode": null
+  "languageCode": "en"
 }
 ```
 
@@ -91,13 +94,13 @@ Simple transcription without diarization.
 
 ### POST /api/transcribe-diarize
 
-Full pipeline: transcription + VAD sentence segmentation + per-segment emotion analysis. All segments are labelled `SPEAKER_00`.
+Full pipeline: transcription + VAD sentence segmentation + per-segment emotion analysis. For video inputs, also returns `face_emotion` per segment.
 
 | | |
 |--|--|
 | **Content-Type** | `multipart/form-data` |
-| **Body** | `audio` — audio file (wav, mp3, flac, ogg, m4a, webm) |
-| **Limits** | ≤ 100 MB; timeout 10 min |
+| **Body** | `audio` — audio or video file (wav, mp3, flac, ogg, m4a, webm, mp4, mov, mkv) |
+| **Limits** | ≤ 100 MB; timeout 60 min |
 
 **Response (200)**
 
@@ -110,19 +113,21 @@ Full pipeline: transcription + VAD sentence segmentation + per-segment emotion a
       "start": 0.0,
       "end": 4.2,
       "text": "Hello, how are you?",
-      "emotion": "neutral",
-      "valence": 0.1,
-      "arousal": 0.2
+      "emotion": "Happy",
+      "valence": 0.7,
+      "arousal": 0.6,
+      "face_emotion": "Happy"
     }
   ],
   "duration": 42.3,
   "text": "full transcript text",
-  "filename": "recording.m4a",
-  "diarization_method": "vad"
+  "filename": "recording.mov",
+  "diarization_method": "vad",
+  "has_video": true
 }
 ```
 
-`diarization_method`: `"vad"` (silence-gap segmentation by sentence boundaries).
+`face_emotion` appears only on video uploads when FER is enabled. `diarization_method` is always `"vad"`.
 
 ---
 
@@ -134,11 +139,11 @@ Full pipeline: transcription + VAD sentence segmentation + per-segment emotion a
   "server": "ser-server",
   "model": {
     "status": "ok",
-    "model": "mistralai/Voxtral-Mini-4B-Realtime-2602",
+    "model": "mistralai/Voxtral-Mini-3B-2507 + YongkangZOU/evoxtral-lora (local)",
     "model_loaded": true,
     "ffmpeg": true,
-    "pyannote_available": false,
-    "hf_token_set": false,
+    "fer_enabled": true,
+    "device": "cpu",
     "max_upload_mb": 100
   }
 }
@@ -148,15 +153,15 @@ Full pipeline: transcription + VAD sentence segmentation + per-segment emotion a
 
 ## Environment variables
 
-Create `demo/.env.local` (copy from `.env.example`):
+Create `web/.env.local`:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `NEXT_PUBLIC_API_URL` | `http://localhost:3000` | Server layer URL used by the browser |
+| `NEXT_PUBLIC_API_URL` | `http://localhost:3000` | Proxy layer URL used by the browser |
 
-Create `demo/server/.env` or export:
+Create `proxy/.env` or export:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `PORT` | `3000` | Server layer port |
-| `MODEL_URL` | `http://127.0.0.1:8000` | Model layer URL |
+| `PORT` | `3000` | Proxy layer port |
+| `MODEL_URL` | `http://127.0.0.1:8000` | API layer URL |

web/components.json

@@ -1,23 +1,23 @@
-{
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "radix-maia",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "src/app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "rtl": false,
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-maia",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
 }

web/eslint.config.mjs

@@ -1,18 +1,18 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import nextVitals from "eslint-config-next/core-web-vitals";
-import nextTs from "eslint-config-next/typescript";
-
-const eslintConfig = defineConfig([
-  ...nextVitals,
-  ...nextTs,
-  // Override default ignores of eslint-config-next.
-  globalIgnores([
-    // Default ignores of eslint-config-next:
-    ".next/**",
-    "out/**",
-    "build/**",
-    "next-env.d.ts",
-  ]),
-]);
-
-export default eslintConfig;
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

web/next.config.ts

@@ -1,7 +1,10 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "standalone",
-};
-
-export default nextConfig;
+import type { NextConfig } from "next";
+import path from "path";
+
+const nextConfig: NextConfig = {
+  turbopack: {
+    root: path.resolve(__dirname),
+  },
+};
+
+export default nextConfig;

web/package.json

@@ -1,37 +1,38 @@
-{
-  "name": "demo",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev -p 3030",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
-  },
-  "dependencies": {
-    "@fontsource/jetbrains-mono": "^5.2.8",
-    "@fontsource/lato": "^5.2.7",
-    "@phosphor-icons/react": "^2.1.10",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.34.3",
-    "lucide-react": "^0.575.0",
-    "next": "16.1.6",
-    "radix-ui": "^1.4.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "tailwind-merge": "^3.5.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.6",
-    "shadcn": "^3.8.5",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.4.0",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3030",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/lato": "^5.2.7",
+    "@phosphor-icons/react": "^2.1.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "recharts": "^3.7.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "shadcn": "^3.8.5",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

web/postcss.config.mjs

@@ -1,7 +1,7 @@
-const config = {
-  plugins: {
-    "@tailwindcss/postcss": {},
-  },
-};
-
-export default config;
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

web/src/app/api/speech-to-text/route.ts

@@ -0,0 +1,51 @@
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  try {
+    const formData = await req.formData();
+    const audioFile = formData.get("audio") as Blob;
+
+    if (!audioFile) {
+      return NextResponse.json(
+        { error: "Audio file is required" },
+        { status: 400 }
+      );
+    }
+
+    const MAX_UPLOAD_BYTES = 100 * 1024 * 1024; // 100MB
+    if (audioFile.size > MAX_UPLOAD_BYTES) {
+      return NextResponse.json(
+        { error: `File size exceeds ${MAX_UPLOAD_BYTES / 1024 / 1024}MB limit` },
+        { status: 413 }
+      );
+    }
+
+    const MODEL_URL = process.env.MODEL_URL || "http://127.0.0.1:8000";
+
+    // Forward the formData to the Python backend
+    const response = await fetch(`${MODEL_URL}/transcribe`, {
+      method: "POST",
+      body: formData,
+      // Signal timeout after 5 minutes
+      signal: AbortSignal.timeout(5 * 60 * 1000),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      return NextResponse.json(
+        { error: errorData.detail || "Transcription failed at Model layer" },
+        { status: response.status }
+      );
+    }
+
+    const data = await response.json();
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error("Transcription proxy error:", error);
+    const isTimeout = error.name === "TimeoutError" || error.name === "AbortError";
+    return NextResponse.json(
+      { error: isTimeout ? "Transcription timed out" : "Internal server error connecting to model layer" },
+      { status: isTimeout ? 504 : 500 }
+    );
+  }
+}

web/src/app/globals.css

@@ -1,149 +1,149 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-@import "shadcn/tailwind.css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-lato);
-  --font-mono: var(--font-lato);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-:root {
-  --radius: 0.875rem;
-
-  /* Background / Surface */
-  --background: oklch(0.985 0 0);
-  --foreground: oklch(0.1 0 0);
-
-  /* Card */
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.1 0 0);
-
-  /* Popover */
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.1 0 0);
-
-  /* Primary = Black */
-  --primary: oklch(0.1 0 0);
-  --primary-foreground: oklch(1 0 0);
-
-  /* Secondary = Light gray */
-  --secondary: oklch(0.94 0 0);
-  --secondary-foreground: oklch(0.2 0 0);
-
-  /* Muted = Subtle surfaces */
-  --muted: oklch(0.94 0 0);
-  --muted-foreground: oklch(0.55 0 0);
-
-  /* Accent */
-  --accent: oklch(0.92 0 0);
-  --accent-foreground: oklch(0.1 0 0);
-
-  /* Destructive */
-  --destructive: oklch(0.577 0.245 27.325);
-
-  /* Border and Input */
-  --border: oklch(0.88 0 0);
-  --input: oklch(0.88 0 0);
-  --ring: oklch(0.6 0 0);
-
-  /* Charts */
-  --chart-1: oklch(0.3 0 0);
-  --chart-2: oklch(0.55 0 0);
-  --chart-3: oklch(0.45 0.07 227.392);
-  --chart-4: oklch(0.7 0.1 84.429);
-  --chart-5: oklch(0.5 0.15 16.439);
-
-  /* Sidebar */
-  --sidebar: oklch(0.97 0 0);
-  --sidebar-foreground: oklch(0.1 0 0);
-  --sidebar-primary: oklch(0.1 0 0);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.92 0 0);
-  --sidebar-accent-foreground: oklch(0.1 0 0);
-  --sidebar-border: oklch(0.88 0 0);
-  --sidebar-ring: oklch(0.6 0 0);
-}
-
-.dark {
-  --background: oklch(0.1 0 0);
-  --foreground: oklch(0.97 0 0);
-  --card: oklch(0.15 0 0);
-  --card-foreground: oklch(0.97 0 0);
-  --popover: oklch(0.15 0 0);
-  --popover-foreground: oklch(0.97 0 0);
-  --primary: oklch(0.97 0 0);
-  --primary-foreground: oklch(0.1 0 0);
-  --secondary: oklch(0.22 0 0);
-  --secondary-foreground: oklch(0.97 0 0);
-  --muted: oklch(0.22 0 0);
-  --muted-foreground: oklch(0.62 0 0);
-  --accent: oklch(0.22 0 0);
-  --accent-foreground: oklch(0.97 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.5 0 0);
-  --chart-1: oklch(0.8 0 0);
-  --chart-2: oklch(0.6 0 0);
-  --chart-3: oklch(0.7 0.1 227.392);
-  --chart-4: oklch(0.6 0.2 303.9);
-  --chart-5: oklch(0.6 0.2 16.439);
-  --sidebar: oklch(0.15 0 0);
-  --sidebar-foreground: oklch(0.97 0 0);
-  --sidebar-primary: oklch(0.97 0 0);
-  --sidebar-primary-foreground: oklch(0.1 0 0);
-  --sidebar-accent: oklch(0.22 0 0);
-  --sidebar-accent-foreground: oklch(0.97 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.5 0 0);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-  }
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-lato);
+  --font-mono: var(--font-lato);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+}
+
+:root {
+  --radius: 0.375rem;
+
+  /* Background / Surface */
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.1 0 0);
+
+  /* Card */
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1 0 0);
+
+  /* Popover */
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1 0 0);
+
+  /* Primary = Black */
+  --primary: oklch(0.1 0 0);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Secondary = Light gray */
+  --secondary: oklch(0.94 0 0);
+  --secondary-foreground: oklch(0.2 0 0);
+
+  /* Muted = Subtle surfaces */
+  --muted: oklch(0.94 0 0);
+  --muted-foreground: oklch(0.55 0 0);
+
+  /* Accent */
+  --accent: oklch(0.92 0 0);
+  --accent-foreground: oklch(0.1 0 0);
+
+  /* Destructive */
+  --destructive: oklch(0.577 0.245 27.325);
+
+  /* Border and Input */
+  --border: oklch(0.88 0 0);
+  --input: oklch(0.88 0 0);
+  --ring: oklch(0.6 0 0);
+
+  /* Charts */
+  --chart-1: oklch(0.3 0 0);
+  --chart-2: oklch(0.55 0 0);
+  --chart-3: oklch(0.45 0.07 227.392);
+  --chart-4: oklch(0.7 0.1 84.429);
+  --chart-5: oklch(0.5 0.15 16.439);
+
+  /* Sidebar */
+  --sidebar: oklch(0.97 0 0);
+  --sidebar-foreground: oklch(0.1 0 0);
+  --sidebar-primary: oklch(0.1 0 0);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent-foreground: oklch(0.1 0 0);
+  --sidebar-border: oklch(0.88 0 0);
+  --sidebar-ring: oklch(0.6 0 0);
+}
+
+.dark {
+  --background: oklch(0.1 0 0);
+  --foreground: oklch(0.97 0 0);
+  --card: oklch(0.15 0 0);
+  --card-foreground: oklch(0.97 0 0);
+  --popover: oklch(0.15 0 0);
+  --popover-foreground: oklch(0.97 0 0);
+  --primary: oklch(0.97 0 0);
+  --primary-foreground: oklch(0.1 0 0);
+  --secondary: oklch(0.22 0 0);
+  --secondary-foreground: oklch(0.97 0 0);
+  --muted: oklch(0.22 0 0);
+  --muted-foreground: oklch(0.62 0 0);
+  --accent: oklch(0.22 0 0);
+  --accent-foreground: oklch(0.97 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.5 0 0);
+  --chart-1: oklch(0.8 0 0);
+  --chart-2: oklch(0.6 0 0);
+  --chart-3: oklch(0.7 0.1 227.392);
+  --chart-4: oklch(0.6 0.2 303.9);
+  --chart-5: oklch(0.6 0.2 16.439);
+  --sidebar: oklch(0.15 0 0);
+  --sidebar-foreground: oklch(0.97 0 0);
+  --sidebar-primary: oklch(0.97 0 0);
+  --sidebar-primary-foreground: oklch(0.1 0 0);
+  --sidebar-accent: oklch(0.22 0 0);
+  --sidebar-accent-foreground: oklch(0.97 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.5 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
 }

web/src/app/layout.tsx

@@ -1,33 +1,43 @@
-import type { Metadata } from "next";
-import { Lato } from "next/font/google";
-import "./globals.css";
-import { TooltipProvider } from "@/components/ui/tooltip";
-
-const lato = Lato({
-  weight: ["100", "300", "400", "700", "900"],
-  variable: "--font-lato",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "Ethos Studio | Emotional Speech Recognition",
-  description: "Advanced emotional speech recognition and transcription studio powered by Ethostral.",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body
-        className={`${lato.variable} antialiased selection:bg-black/10 font-sans`}
-      >
-        <TooltipProvider>
-          {children}
-        </TooltipProvider>
-      </body>
-    </html>
-  );
-}
+import type { Metadata } from "next";
+import { Lato } from "next/font/google";
+import { Suspense } from "react";
+import "./globals.css";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/sidebar";
+
+const lato = Lato({
+  weight: ["100", "300", "400", "700", "900"],
+  variable: "--font-lato",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Ethos Studio | Emotional Speech Recognition",
+  description: "Advanced emotional speech recognition and transcription studio powered by Evoxtral.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${lato.variable} antialiased selection:bg-black/10 font-sans`}
+      >
+        <TooltipProvider>
+          <SidebarProvider>
+            <Suspense fallback={<div className="w-64 flex-shrink-0" />}>
+              <AppSidebar />
+            </Suspense>
+            <main className="flex-1 flex flex-col min-w-0 min-h-screen">
+              {children}
+            </main>
+          </SidebarProvider>
+        </TooltipProvider>
+      </body>
+    </html>
+  );
+}

web/src/app/page.tsx

@@ -1,369 +1,180 @@
-"use client"
-
-import React, { useState } from "react"
-import Link from "next/link"
-import { useRouter } from "next/navigation"
-import {
-  Microphone, MagnifyingGlass, DotsThreeVertical,
-  UploadSimple, Play, Clock,
-} from "@phosphor-icons/react"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import { Switch } from "@/components/ui/switch"
-import { Label } from "@/components/ui/label"
-import {
-  Dialog, DialogContent, DialogHeader, DialogTitle,
-} from "@/components/ui/dialog"
-import {
-  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
-} from "@/components/ui/select"
-import {
-  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
-} from "@/components/ui/table"
-import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Navbar } from "@/components/navbar"
-import { Skeleton } from "@/components/ui/skeleton"
-import { createSession, type DiarizeResult } from "@/lib/session-store"
-
-// --- Constants ---
-const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000"
-const MAX_FILE_BYTES = 100 * 1024 * 1024
-
-// --- Mock sessions (demo history) ---
-const MOCK_SESSIONS = [
-  { id: "demo-1", title: "Team_Standup_2026-02-28.mp4", createdAt: "2 days ago" },
-  { id: "demo-2", title: "Customer_Interview_Batch_7.wav", createdAt: "5 days ago" },
-  { id: "demo-3", title: "Podcast_Episode_14.mp3", createdAt: "1 week ago" },
-  { id: "demo-4", title: "WeChat_20250804025710.mp4", createdAt: "7 months ago" },
-]
-
-// --- Upload Dialog ---
-function UploadDialog({
-  open,
-  onOpenChange,
-}: {
-  open: boolean
-  onOpenChange: (v: boolean) => void
-}) {
-  const router = useRouter()
-  const [file, setFile] = useState<File | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [progress, setProgress] = useState<string>("")
-  const [error, setError] = useState<string | null>(null)
-  const inputRef = React.useRef<HTMLInputElement>(null)
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const f = e.target.files?.[0] ?? null
-    setFile(f)
-    setError(null)
-    setProgress("")
-  }
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    const f = e.dataTransfer.files?.[0]
-    if (
-      f &&
-      (f.type.startsWith("audio/") ||
-        f.type.startsWith("video/") ||
-        /\.(wav|mp3|m4a|webm|ogg|flac|mp4)$/i.test(f.name))
-    ) {
-      setFile(f)
-      setError(null)
-      setProgress("")
-    }
-  }
-
-  const handleUpload = async () => {
-    if (!file) {
-      setError("Please select an audio or video file")
-      return
-    }
-    if (file.size > MAX_FILE_BYTES) {
-      setError(`File too large (${(file.size / 1024 / 1024).toFixed(1)} MB). Max 100 MB.`)
-      return
-    }
-
-    setLoading(true)
-    setError(null)
-    setProgress("Uploading…")
-
-    const isVideo = file.type.startsWith("video/") || /\.(mp4|mkv|avi|mov|m4v)$/i.test(file.name)
-
-    try {
-      const formData = new FormData()
-      formData.append("audio", file, file.name)
-
-      setProgress(isVideo
-        ? "Transcribing and analyzing facial emotions…"
-        : "Transcribing and analyzing speakers…"
-      )
-      const res = await fetch(
-        `${API_BASE}/api/transcribe-diarize`,
-        { method: "POST", body: formData }
-      )
-      const data = await res.json().catch(() => ({}))
-
-      if (!res.ok) {
-        setError((data as { error?: string }).error ?? "Transcription failed")
-        return
-      }
-
-      setProgress("Processing results…")
-      const result = data as DiarizeResult
-      const sessionId = createSession(file, result)
-
-      // Navigate to studio with session ID
-      router.push(`/studio?s=${sessionId}`)
-      onOpenChange(false)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Request failed")
-    } finally {
-      setLoading(false)
-      setProgress("")
-    }
-  }
-
-  const handleOpenChange = (v: boolean) => {
-    if (!v && !loading) {
-      setFile(null)
-      setError(null)
-      setProgress("")
-    }
-    if (!loading) onOpenChange(v)
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-[480px]">
-        <DialogHeader>
-          <DialogTitle>Transcribe files</DialogTitle>
-        </DialogHeader>
-
-        {/* Drop Zone */}
-        <div
-          className={`border-2 border-dashed rounded-lg px-6 py-10 flex flex-col items-center gap-2 text-center transition-colors ${
-            loading
-              ? "border-border opacity-50 cursor-not-allowed"
-              : "border-border cursor-pointer hover:border-foreground/30 hover:bg-muted/40"
-          }`}
-          onClick={() => !loading && inputRef.current?.click()}
-          onDrop={loading ? undefined : handleDrop}
-          onDragOver={(e) => e.preventDefault()}
-        >
-          <input
-            ref={inputRef}
-            type="file"
-            accept="audio/*,video/*,.wav,.mp3,.m4a,.webm,.ogg,.flac,.mp4"
-            className="hidden"
-            onChange={handleFileChange}
-            disabled={loading}
-          />
-          <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-1">
-            {loading ? (
-              <div className="w-5 h-5 border-2 border-foreground/30 border-t-foreground rounded-full animate-spin" />
-            ) : (
-              <UploadSimple size={20} className="text-muted-foreground" />
-            )}
-          </div>
-          <p className="text-sm font-semibold text-foreground">
-            {loading ? progress : "Click or drag files here to upload"}
-          </p>
-          <p className="text-xs text-muted-foreground">
-            {file ? `${file.name} · ${(file.size / 1024).toFixed(0)} KB` : "Audio & video files, up to 100 MB"}
-          </p>
-        </div>
-
-        {error && (
-          <p className="text-sm text-destructive font-medium">{error}</p>
-        )}
-
-        <Separator />
-
-        {/* Settings */}
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <Label htmlFor="lang-select" className="text-sm font-medium">Primary language</Label>
-            <Select defaultValue="detect">
-              <SelectTrigger id="lang-select" className="w-32 h-8 text-sm">
-                <SelectValue placeholder="Detect" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="detect">Detect</SelectItem>
-                <SelectItem value="en">English</SelectItem>
-                <SelectItem value="zh">Chinese</SelectItem>
-                <SelectItem value="es">Spanish</SelectItem>
-                <SelectItem value="fr">French</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-
-<div className="flex items-center justify-between">
-            <Label htmlFor="diarize" className="text-sm font-medium">Speaker diarization</Label>
-            <Switch id="diarize" defaultChecked disabled />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <Label htmlFor="emotion" className="text-sm font-medium">Emotion analysis</Label>
-            <Switch id="emotion" defaultChecked />
-          </div>
-
-          <div className="flex items-center justify-between">
-            <Label htmlFor="subtitles" className="text-sm font-medium">Include subtitles</Label>
-            <Switch id="subtitles" />
-          </div>
-        </div>
-
-        <Button
-          className="w-full gap-2 font-bold"
-          onClick={handleUpload}
-          disabled={loading || !file}
-        >
-          {loading ? (
-            <>
-              <div className="w-4 h-4 border-2 border-primary-foreground/40 border-t-primary-foreground rounded-full animate-spin" />
-              {progress || "Processing…"}
-            </>
-          ) : (
-            <>
-              <UploadSimple size={16} weight="bold" />
-              Upload & transcribe
-            </>
-          )}
-        </Button>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-// --- Main Page ---
-export default function HomePage() {
-  const [showModal, setShowModal] = useState(false)
-  const [search, setSearch] = useState("")
-
-  const filtered = MOCK_SESSIONS.filter((s) =>
-    s.title.toLowerCase().includes(search.toLowerCase())
-  )
-
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <Navbar />
-
-      <main className="max-w-4xl mx-auto px-6 py-10">
-        {/* Page Header */}
-        <div className="flex items-start justify-between mb-6">
-          <div>
-            <h1 className="text-2xl font-black tracking-tight">Speech to text</h1>
-            <p className="text-sm text-muted-foreground mt-1">
-              Transcribe audio and video files with our{" "}
-              <span className="underline underline-offset-2 text-foreground font-medium cursor-pointer">
-                industry-leading ASR model.
-              </span>
-            </p>
-          </div>
-          <Button onClick={() => setShowModal(true)} className="gap-2 font-bold shadow-sm">
-            <Microphone size={16} weight="bold" />
-            Transcribe files
-          </Button>
-        </div>
-
-        {/* Promo Banner */}
-        <div className="border border-border rounded-lg p-4 flex items-center gap-4 mb-5 bg-card hover:bg-muted/40 transition-colors cursor-pointer">
-          <Skeleton className="w-14 h-14 rounded-lg bg-foreground/10 flex-shrink-0" />
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-bold">Try Ethostral Realtime</p>
-            <p className="text-sm text-muted-foreground mt-0.5 leading-snug">
-              Experience lightning-fast transcription with unmatched emotional accuracy, powered by Ethostral.
-            </p>
-          </div>
-          <Button variant="outline" size="sm" className="flex-shrink-0 font-bold">
-            Try the demo
-          </Button>
-        </div>
-
-        {/* Search */}
-        <div className="relative mb-5">
-          <MagnifyingGlass
-            size={15}
-            className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-          />
-          <Input
-            placeholder="Search transcripts..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="pl-9 h-9 text-sm bg-card"
-          />
-        </div>
-
-        {/* Table */}
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="text-[11px] font-black uppercase tracking-widest text-muted-foreground">
-                Title
-              </TableHead>
-              <TableHead className="text-[11px] font-black uppercase tracking-widest text-muted-foreground">
-                Created at
-              </TableHead>
-              <TableHead className="w-10" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filtered.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={3} className="text-center text-muted-foreground py-16 text-sm">
-                  No transcripts found.
-                </TableCell>
-              </TableRow>
-            ) : (
-              filtered.map((session) => (
-                <TableRow key={session.id} className="cursor-pointer group">
-                  <TableCell>
-                    {/* Demo sessions link to studio with ?demo=1 (shows mock data) */}
-                    <Link href="/studio?demo=1" className="flex items-center gap-3">
-                      <div className="w-8 h-8 rounded-md bg-muted border border-border flex items-center justify-center flex-shrink-0">
-                        <Play size={12} weight="fill" className="text-muted-foreground" />
-                      </div>
-                      <span className="text-sm font-semibold truncate max-w-xs">
-                        {session.title}
-                      </span>
-                    </Link>
-                  </TableCell>
-                  <TableCell>
-                    <span className="text-sm text-muted-foreground flex items-center gap-1.5">
-                      <Clock size={13} />
-                      {session.createdAt}
-                    </span>
-                  </TableCell>
-                  <TableCell>
-                    <DropdownMenu>
-                      <DropdownMenuTrigger asChild>
-                        <Button
-                          variant="ghost"
-                          size="icon"
-                          className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
-                        >
-                          <DotsThreeVertical size={16} />
-                        </Button>
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem>Open</DropdownMenuItem>
-                        <DropdownMenuItem>Export</DropdownMenuItem>
-                        <DropdownMenuItem className="text-destructive">Delete</DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </main>
-
-      <UploadDialog open={showModal} onOpenChange={setShowModal} />
-    </div>
-  )
-}
+"use client"
+
+import React, { useState, useRef } from "react"
+import { useRouter } from "next/navigation"
+import {
+  UploadSimple, Microphone, VideoCamera, Waveform, CheckCircle, X,
+} from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import { Navbar } from "@/components/navbar"
+import { createPendingSession, type DiarizeResult } from "@/lib/session-store"
+import { cn } from "@/lib/utils"
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000"
+const MAX_FILE_BYTES = 100 * 1024 * 1024
+
+export default function CreatePage() {
+  const router = useRouter()
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [file, setFile] = useState<File | null>(null)
+  const [dragging, setDragging] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [progress, setProgress] = useState("")
+  const [error, setError] = useState<string | null>(null)
+
+  const isValidFile = (f: File) =>
+    f.type.startsWith("audio/") ||
+    f.type.startsWith("video/") ||
+    /\.(wav|mp3|m4a|webm|ogg|flac|mp4|mov)$/i.test(f.name)
+
+  const setFileIfValid = (f: File) => {
+    if (!isValidFile(f)) {
+      setError("Unsupported file type. Please upload audio or video.")
+      return
+    }
+    if (f.size > MAX_FILE_BYTES) {
+      setError(`File too large (${(f.size / 1024 / 1024).toFixed(1)} MB). Max 100 MB.`)
+      return
+    }
+    setFile(f)
+    setError(null)
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    setDragging(false)
+    const f = e.dataTransfer.files?.[0]
+    if (f) setFileIfValid(f)
+  }
+
+  const handleUpload = async () => {
+    if (!file) return
+    const id = createPendingSession(file)
+    router.push(`/studio?s=${id}`)
+  }
+
+  const isAudio = file?.type.startsWith("audio/") || /\.(wav|mp3|m4a|webm|ogg|flac)$/i.test(file?.name ?? "")
+
+  return (
+    <div className="flex flex-col min-h-screen bg-background">
+      <Navbar />
+
+      <main className="flex-1 flex flex-col items-center justify-center px-6 py-16 gap-12">
+        {/* Welcome */}
+        <div className="text-center space-y-3 max-w-lg">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-border bg-muted text-xs font-medium text-muted-foreground mb-2">
+            <Waveform size={12} weight="fill" className="text-primary" />
+            Emotional Speech Recognition
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            Create a new session
+          </h1>
+          <p className="text-muted-foreground text-sm leading-relaxed">
+            Upload an audio or video file and Ethos Studio will transcribe it,
+            identify speakers, and analyse emotional tone — all powered by Voxtral.
+          </p>
+        </div>
+
+        {/* Upload Zone */}
+        <div className="w-full max-w-xl space-y-4">
+          <input
+            ref={inputRef}
+            type="file"
+            accept="audio/*,video/*,.wav,.mp3,.m4a,.webm,.ogg,.flac,.mp4,.mov"
+            className="hidden"
+            onChange={(e) => {
+              const f = e.target.files?.[0]
+              if (f) setFileIfValid(f)
+            }}
+          />
+
+          {!file ? (
+            <button
+              type="button"
+              onClick={() => inputRef.current?.click()}
+              onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
+              onDragLeave={() => setDragging(false)}
+              onDrop={handleDrop}
+              className={cn(
+                "w-full border-2 border-dashed rounded-lg p-12 flex flex-col items-center gap-4 transition-colors cursor-pointer",
+                dragging
+                  ? "border-primary bg-primary/5"
+                  : "border-border hover:border-muted-foreground/40 hover:bg-muted/30"
+              )}
+            >
+              <div className="size-12 rounded-full bg-muted flex items-center justify-center">
+                <UploadSimple size={22} className="text-muted-foreground" />
+              </div>
+              <div className="text-center space-y-1">
+                <p className="text-sm font-semibold">Drop your file here, or click to browse</p>
+                <p className="text-xs text-muted-foreground">Audio & video files · MP3, WAV, MP4, MOV, M4A · up to 100 MB</p>
+              </div>
+
+              {/* Type hints */}
+              <div className="flex items-center gap-3 mt-2">
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <Microphone size={13} weight="fill" />
+                  Audio
+                </div>
+                <span className="text-border">·</span>
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <VideoCamera size={13} weight="fill" />
+                  Video
+                </div>
+              </div>
+            </button>
+          ) : (
+            <div className="border border-border rounded-lg p-5 flex items-center gap-4 bg-muted/20">
+              <div className="size-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
+                {isAudio
+                  ? <Microphone size={18} weight="fill" className="text-blue-500" />
+                  : <VideoCamera size={18} weight="fill" className="text-pink-500" />
+                }
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium truncate">{file.name}</p>
+                <p className="text-xs text-muted-foreground">
+                  {(file.size / 1024 / 1024).toFixed(1)} MB · {isAudio ? "Audio" : "Video"}
+                </p>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle size={16} weight="fill" className="text-green-500 shrink-0" />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 text-muted-foreground"
+                  onClick={() => { setFile(null); setError(null) }}
+                >
+                  <X size={14} />
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {error && (
+            <p className="text-sm text-destructive font-medium text-center">{error}</p>
+          )}
+
+          <Button
+            className="w-full gap-2 font-semibold h-10"
+            disabled={!file || loading}
+            onClick={handleUpload}
+          >
+            {loading ? (
+              <>
+                <div className="size-4 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full animate-spin" />
+                {progress || "Processing…"}
+              </>
+            ) : (
+              <>
+                <Waveform size={16} weight="bold" />
+                Transcribe & Analyse
+              </>
+            )}
+          </Button>
+        </div>
+      </main>
+    </div>
+  )
+}

web/src/app/studio/page.tsx

@@ -1,528 +1,574 @@
-"use client"
-
-import React, { useState, useRef, useEffect, useMemo, Suspense } from "react"
-import Link from "next/link"
-import { useSearchParams } from "next/navigation"
-import {
-  ArrowLeft, ArrowCounterClockwise, ArrowClockwise,
-  Export, Play, Pause, Plus, DotsThreeVertical,
-  MinusCircle, PlusCircle, Waveform,
-} from "@phosphor-icons/react"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { Slider } from "@/components/ui/slider"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
-import {
-  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import {
-  Collapsible, CollapsibleContent, CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { Progress } from "@/components/ui/progress"
-import { getSession, type Segment } from "@/lib/session-store"
-
-// --- Constants ---
-const SPEAKER_COLORS = [
-  { avatar: "bg-blue-400",    track: "bg-blue-200" },
-  { avatar: "bg-pink-400",    track: "bg-pink-200" },
-  { avatar: "bg-emerald-400", track: "bg-emerald-200" },
-  { avatar: "bg-amber-400",   track: "bg-amber-200" },
-  { avatar: "bg-violet-400",  track: "bg-violet-200" },
-  { avatar: "bg-cyan-400",    track: "bg-cyan-200" },
-  { avatar: "bg-rose-400",    track: "bg-rose-200" },
-  { avatar: "bg-lime-400",    track: "bg-lime-200" },
-]
-
-// --- Mock Data (demo / fallback) ---
-const MOCK_SEGMENTS: Segment[] = [
-  { id: 1, speaker: "SPEAKER_00", start: 0.10,  end: 7.28,  text: "[instrumental music plays]", emotion: "Neutral", valence: 0.0,  arousal: 0.1 },
-  { id: 2, speaker: "SPEAKER_00", start: 8.10,  end: 9.04,  text: "Hello, I'm here.", emotion: "Calm", valence: 0.3,  arousal: -0.1 },
-  { id: 3, speaker: "SPEAKER_01", start: 10.62, end: 11.00, text: "Oh.", emotion: "Surprise", valence: 0.4,  arousal: 0.6 },
-  { id: 4, speaker: "SPEAKER_01", start: 13.02, end: 14.18, text: "Hi.", emotion: "Neutral", valence: 0.1,  arousal: 0.0 },
-  { id: 5, speaker: "SPEAKER_00", start: 14.82, end: 16.40, text: "Hi.", emotion: "Happy", valence: 0.7,  arousal: 0.4 },
-  { id: 6, speaker: "SPEAKER_01", start: 17.20, end: 22.10, text: "It's been a long time coming. Are you nervous?", emotion: "Curious", valence: 0.2,  arousal: 0.5 },
-  { id: 7, speaker: "SPEAKER_00", start: 22.90, end: 28.50, text: "A little bit. The data is just... it's a lot to process.", emotion: "Anxiety", valence: -0.4, arousal: 0.7 },
-]
-const MOCK_FILENAME = "WeChat_20250804025710.mp4"
-const MOCK_DURATION = 28.50
-
-// --- Helpers ---
-function fmtTime(sec: number): string {
-  const m = Math.floor(sec / 60)
-  const s = (sec % 60).toFixed(2)
-  return m > 0 ? `${m}:${s.padStart(5, "0")}` : s
-}
-
-type SpeakerInfo = { label: string; avatarColor: string; trackColor: string }
-
-function buildSpeakerMap(segments: Segment[]): Record<string, SpeakerInfo> {
-  const speakers = [...new Set(segments.map(s => s.speaker))].sort()
-  return Object.fromEntries(
-    speakers.map((id, i) => {
-      const palette = SPEAKER_COLORS[i % SPEAKER_COLORS.length]
-      return [id, { label: `Speaker ${i + 1}`, avatarColor: palette.avatar, trackColor: palette.track }]
-    })
-  )
-}
-
-// --- SegmentRow ---
-function SegmentRow({
-  seg,
-  speakerMap,
-  active,
-  onClick,
-}: {
-  seg: Segment
-  speakerMap: Record<string, SpeakerInfo>
-  active: boolean
-  onClick: () => void
-}) {
-  const speaker = speakerMap[seg.speaker] ?? { label: seg.speaker, avatarColor: "bg-gray-400", trackColor: "bg-gray-200" }
-  return (
-    <div
-      onClick={onClick}
-      className={`flex gap-0 group transition-colors cursor-pointer border-b border-border last:border-0 ${
-        active ? "bg-accent" : "hover:bg-muted/40"
-      }`}
-    >
-      {/* Speaker col */}
-      <div className="w-36 flex-shrink-0 flex items-start gap-2 px-4 py-4">
-        <Avatar className="w-7 h-7 flex-shrink-0 mt-0.5">
-          <AvatarFallback className={`${speaker.avatarColor} text-white text-[10px] font-bold`}>
-            {speaker.label[0]}
-          </AvatarFallback>
-        </Avatar>
-        <span className="text-xs font-bold text-foreground leading-tight mt-1">{speaker.label}</span>
-      </div>
-
-      <Separator orientation="vertical" className="h-auto" />
-
-      {/* Time + text col */}
-      <div className="flex-1 px-5 py-4 space-y-1 min-w-0">
-        <p className="text-[11px] text-muted-foreground font-medium">{fmtTime(seg.start)}</p>
-        <p className="text-sm text-foreground leading-relaxed">{seg.text}</p>
-        <p className="text-[11px] text-muted-foreground font-medium">{fmtTime(seg.end)}</p>
-      </div>
-
-      {/* Emotion badges */}
-      <div className="flex-shrink-0 flex flex-col items-end gap-1 pt-4 pr-4">
-        <Badge
-          variant="outline"
-          className="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0 border-border text-muted-foreground"
-        >
-          {seg.emotion}
-        </Badge>
-        {seg.face_emotion && (
-          <Badge
-            variant="outline"
-            className="text-[9px] font-bold uppercase tracking-wider px-1.5 py-0 border-border text-muted-foreground/60"
-          >
-            {seg.face_emotion}
-          </Badge>
-        )}
-      </div>
-    </div>
-  )
-}
-
-// --- RightPanel ---
-function RightPanel({
-  activeSegment,
-  audioUrl,
-  filename,
-  isPlaying,
-  isVideo,
-  mediaRef,
-  currentTime,
-  duration,
-  onToggle,
-}: {
-  activeSegment: Segment | null
-  audioUrl: string
-  filename: string
-  isPlaying: boolean
-  isVideo: boolean
-  mediaRef: React.RefObject<HTMLVideoElement | null>
-  currentTime: number
-  duration: number
-  onToggle: () => void
-}) {
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-
-  return (
-    <div className="flex flex-col h-full border-l border-border bg-card">
-      {/* Media preview panel */}
-      <div className="aspect-video w-full bg-slate-950 flex items-center justify-center flex-shrink-0 relative overflow-hidden">
-        {isVideo && audioUrl ? (
-          <video
-            ref={mediaRef}
-            src={audioUrl}
-            preload="metadata"
-            className="w-full h-full object-contain"
-          />
-        ) : (
-          <>
-            <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 text-white/20">
-              <Waveform size={36} />
-              <span className="text-[10px] font-bold uppercase tracking-widest truncate max-w-[80%] text-center px-2">
-                {filename}
-              </span>
-            </div>
-            <video ref={mediaRef} src={audioUrl || undefined} preload="metadata" className="hidden" />
-          </>
-        )}
-        {/* Controls bar */}
-        <div className="absolute bottom-0 left-0 right-0 h-8 bg-black/70 flex items-center px-2 gap-2">
-          <button
-            onClick={onToggle}
-            disabled={!audioUrl}
-            className="text-white/80 hover:text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-          >
-            {isPlaying
-              ? <Pause size={12} weight="fill" />
-              : <Play size={12} weight="fill" />
-            }
-          </button>
-          <div className="flex-1 h-[2px] bg-white/20 rounded-full mx-1">
-            <div
-              className="h-full bg-white/60 rounded-full transition-[width]"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-          <span className="text-white/40 text-[9px] font-mono">{fmtTime(currentTime)}</span>
-        </div>
-      </div>
-
-      <ScrollArea className="flex-1">
-        <div className="p-4 space-y-4">
-          {/* Global Properties */}
-          <Collapsible defaultOpen>
-            <CollapsibleTrigger className="flex items-center gap-2 text-xs font-bold text-muted-foreground uppercase tracking-widest hover:text-foreground transition-colors w-full text-left">
-              <span>▾</span> Global Properties
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-              <div className="mt-3 space-y-3 text-sm">
-                <div className="flex items-center justify-between">
-                  <span className="font-semibold text-foreground truncate max-w-[160px] text-xs">{filename}</span>
-                </div>
-                <Separator />
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground text-xs">Duration</span>
-                  <span className="font-semibold text-xs">{fmtTime(duration)}</span>
-                </div>
-                <div className="flex items-center justify-between">
-                  <span className="text-muted-foreground text-xs">Subtitles</span>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" size="icon" className="h-6 w-6">
-                        <DotsThreeVertical size={14} />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                      <DropdownMenuItem>Export SRT</DropdownMenuItem>
-                      <DropdownMenuItem>Export VTT</DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
-
-          <Separator />
-
-          {/* Emotional Analysis */}
-          <Collapsible defaultOpen>
-            <CollapsibleTrigger className="flex items-center gap-2 text-xs font-bold text-muted-foreground uppercase tracking-widest hover:text-foreground transition-colors w-full text-left">
-              <span>▾</span> Emotional Analysis
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-              <div className="mt-3 space-y-3">
-                {activeSegment ? (
-                  <>
-                    <div className="flex items-center justify-between text-xs">
-                      <span className="text-muted-foreground">Voice Emotion</span>
-                      <Badge variant="outline" className="font-bold text-[10px]">{activeSegment.emotion}</Badge>
-                    </div>
-                    {activeSegment.face_emotion && (
-                      <div className="flex items-center justify-between text-xs">
-                        <span className="text-muted-foreground">Face Emotion</span>
-                        <Badge variant="outline" className="font-bold text-[10px] text-muted-foreground/70">{activeSegment.face_emotion}</Badge>
-                      </div>
-                    )}
-                    <div className="space-y-1">
-                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                        <span>Valence</span>
-                        <span className="font-bold text-foreground">{((activeSegment.valence + 1) / 2 * 100).toFixed(0)}%</span>
-                      </div>
-                      <Progress value={(activeSegment.valence + 1) / 2 * 100} className="h-1.5" />
-                    </div>
-                    <div className="space-y-1">
-                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
-                        <span>Arousal</span>
-                        <span className="font-bold text-foreground">{((activeSegment.arousal + 1) / 2 * 100).toFixed(0)}%</span>
-                      </div>
-                      <Progress value={(activeSegment.arousal + 1) / 2 * 100} className="h-1.5" />
-                    </div>
-                  </>
-                ) : (
-                  <p className="text-xs text-muted-foreground">Select a segment to view analysis.</p>
-                )}
-              </div>
-            </CollapsibleContent>
-          </Collapsible>
-        </div>
-      </ScrollArea>
-    </div>
-  )
-}
-
-// --- TimelineBar ---
-function TimelineBar({
-  isPlaying,
-  onToggle,
-  segments,
-  speakerMap,
-  duration,
-  currentTime,
-}: {
-  isPlaying: boolean
-  onToggle: () => void
-  segments: Segment[]
-  speakerMap: Record<string, SpeakerInfo>
-  duration: number
-  currentTime: number
-}) {
-  const speakers = Object.keys(speakerMap)
-
-  return (
-    <div className="border-t border-border bg-card flex-shrink-0">
-      {/* Speaker track rows */}
-      <div className="border-b border-border">
-        {speakers.map((speakerId) => {
-          const info = speakerMap[speakerId]
-          const speakerSegs = segments.filter(s => s.speaker === speakerId)
-
-          return (
-            <div key={speakerId} className="flex items-center px-3 py-1.5 gap-2 group">
-              <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground cursor-grab">
-                <DotsThreeVertical size={12} />
-              </Button>
-              <Avatar className="w-5 h-5">
-                <AvatarFallback className={`${info.avatarColor} text-white text-[8px] font-bold`}>S</AvatarFallback>
-              </Avatar>
-              <span className="text-xs font-semibold text-foreground w-20">{info.label}</span>
-              <Button variant="ghost" size="icon" className="h-5 w-5 text-muted-foreground ml-auto opacity-0 group-hover:opacity-100">
-                <DotsThreeVertical size={12} />
-              </Button>
-              {/* Track visualization */}
-              <div className="flex-1 h-5 relative overflow-hidden rounded-sm bg-muted/30">
-                {duration > 0 && speakerSegs.map(seg => (
-                  <div
-                    key={seg.id}
-                    className={`absolute top-0.5 bottom-0.5 ${info.trackColor} rounded-sm`}
-                    style={{
-                      left: `${(seg.start / duration) * 100}%`,
-                      width: `${Math.max(((seg.end - seg.start) / duration) * 100, 0.5)}%`,
-                    }}
-                  />
-                ))}
-                {/* Playhead */}
-                {duration > 0 && (
-                  <div
-                    className="absolute top-0 bottom-0 w-px bg-foreground/60 z-10"
-                    style={{ left: `${(currentTime / duration) * 100}%` }}
-                  />
-                )}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-
-      {/* Playback controls */}
-      <div className="flex items-center gap-4 px-4 h-10">
-        {/* Zoom */}
-        <div className="flex items-center gap-1.5 text-muted-foreground">
-          <MinusCircle size={14} />
-          <Slider defaultValue={[40]} max={100} className="w-16" />
-          <PlusCircle size={14} />
-        </div>
-
-        <Separator orientation="vertical" className="h-5" />
-
-        {/* Play / speed */}
-        <div className="flex items-center gap-3">
-          <Button
-            size="icon"
-            className="h-7 w-7 rounded-full"
-            onClick={onToggle}
-          >
-            {isPlaying
-              ? <Pause size={13} weight="fill" />
-              : <Play size={13} weight="fill" />
-            }
-          </Button>
-          <span className="text-xs font-bold text-muted-foreground">1.0×</span>
-        </div>
-
-        <div className="flex-1" />
-
-        <Button variant="ghost" size="sm" className="text-xs text-muted-foreground font-semibold gap-1.5 h-7">
-          <Plus size={13} />
-          Add segment
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-// --- Studio Content ---
-function StudioContent() {
-  const searchParams = useSearchParams()
-  const sessionId = searchParams.get("s")
-
-  const mediaRef = useRef<HTMLVideoElement>(null)
-  const [activeId, setActiveId] = useState<number>(1)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-
-  const session = sessionId ? getSession(sessionId) : null
-  const segments = session?.data.segments ?? MOCK_SEGMENTS
-  const audioUrl = session?.audioUrl ?? ""
-  const filename = session?.filename ?? MOCK_FILENAME
-  const duration = session?.data.duration ?? MOCK_DURATION
-  const isVideo = session?.data.has_video ?? false
-
-  const speakerMap = useMemo(() => buildSpeakerMap(segments), [segments])
-  const activeSegment = segments.find(s => s.id === activeId) ?? segments[0] ?? null
-
-  useEffect(() => {
-    const media = mediaRef.current
-    if (!media) return
-    const onTime = () => setCurrentTime(media.currentTime)
-    const onPlay = () => setIsPlaying(true)
-    const onPause = () => setIsPlaying(false)
-    media.addEventListener("timeupdate", onTime)
-    media.addEventListener("play", onPlay)
-    media.addEventListener("pause", onPause)
-    return () => {
-      media.removeEventListener("timeupdate", onTime)
-      media.removeEventListener("play", onPlay)
-      media.removeEventListener("pause", onPause)
-    }
-  }, [])
-
-  const handleSegmentClick = (seg: Segment) => {
-    setActiveId(seg.id)
-    if (mediaRef.current && audioUrl) {
-      mediaRef.current.currentTime = seg.start
-    }
-  }
-
-  const togglePlay = () => {
-    const media = mediaRef.current
-    if (!media || !audioUrl) return
-    if (isPlaying) media.pause()
-    else media.play()
-  }
-
-  return (
-    <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
-      {/* Top Bar */}
-      <header className="h-11 border-b border-border bg-card flex items-center px-4 gap-3 flex-shrink-0 sticky top-0 z-50">
-        <Link href="/">
-          <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground">
-            <ArrowLeft size={16} />
-          </Button>
-        </Link>
-
-        <div className="flex items-center gap-0.5 ml-1">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
-                <ArrowCounterClockwise size={15} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Undo</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground">
-                <ArrowClockwise size={15} />
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Redo</TooltipContent>
-          </Tooltip>
-        </div>
-
-        <div className="flex-1" />
-
-        <Button className="gap-1.5 font-bold h-8 text-xs px-3">
-          <Export size={14} weight="bold" />
-          Export
-        </Button>
-      </header>
-
-      {/* Body */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Left: Transcript */}
-        <div className="flex-1 overflow-hidden flex flex-col min-w-0">
-          <ScrollArea className="flex-1">
-            <div className="max-w-2xl mx-auto py-4">
-              {segments.map(seg => (
-                <SegmentRow
-                  key={seg.id}
-                  seg={seg}
-                  speakerMap={speakerMap}
-                  active={seg.id === activeId}
-                  onClick={() => handleSegmentClick(seg)}
-                />
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
-
-        {/* Right: Properties panel */}
-        <div className="w-[280px] flex-shrink-0 overflow-hidden flex flex-col">
-          <RightPanel
-            activeSegment={activeSegment}
-            audioUrl={audioUrl}
-            filename={filename}
-            isPlaying={isPlaying}
-            isVideo={isVideo}
-            mediaRef={mediaRef}
-            currentTime={currentTime}
-            duration={duration}
-            onToggle={togglePlay}
-          />
-        </div>
-      </div>
-
-      {/* Bottom: Timeline */}
-      <TimelineBar
-        isPlaying={isPlaying}
-        onToggle={togglePlay}
-        segments={segments}
-        speakerMap={speakerMap}
-        duration={duration}
-        currentTime={currentTime}
-      />
-    </div>
-  )
-}
-
-// --- Page (wraps in Suspense for useSearchParams) ---
-export default function StudioPage() {
-  return (
-    <Suspense fallback={
-      <div className="h-screen flex items-center justify-center text-muted-foreground text-sm">
-        Loading…
-      </div>
-    }>
-      <StudioContent />
-    </Suspense>
-  )
-}
+"use client"
+
+import React, { useState, useRef, useEffect, useMemo, Suspense } from "react"
+import Link from "next/link"
+import { useSearchParams, useRouter } from "next/navigation"
+import {
+  ArrowLeft, ArrowCounterClockwise, ArrowClockwise,
+  Export, Play, Pause, Plus, DotsThreeVertical,
+  MinusCircle, PlusCircle, Waveform, VideoCamera,
+} from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Separator } from "@/components/ui/separator"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+import { Slider } from "@/components/ui/slider"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Collapsible, CollapsibleContent, CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { Progress } from "@/components/ui/progress"
+import { getSession, updateSession, type Segment, type DiarizeResult } from "@/lib/session-store"
+import { Navbar } from "@/components/navbar"
+import { cn } from "@/lib/utils"
+import { MagnifyingGlass } from "@phosphor-icons/react"
+import NextImage from "next/image"
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000"
+
+// --- Constants ---
+const SPEAKER_COLORS = [
+  { avatar: "bg-blue-400", track: "bg-blue-200" },
+  { avatar: "bg-pink-400", track: "bg-pink-200" },
+  { avatar: "bg-emerald-400", track: "bg-emerald-200" },
+  { avatar: "bg-amber-400", track: "bg-amber-200" },
+  { avatar: "bg-violet-400", track: "bg-violet-200" },
+  { avatar: "bg-cyan-400", track: "bg-cyan-200" },
+  { avatar: "bg-rose-400", track: "bg-rose-200" },
+  { avatar: "bg-lime-400", track: "bg-lime-200" },
+]
+
+// --- Mock Data (demo / fallback) ---
+const MOCK_SEGMENTS: Segment[] = [
+  { id: 1, speaker: "Theodore", start: 0.10, end: 7.28, text: "[Instrumental music plays]", emotion: "Neutral", valence: 0.0, arousal: 0.1 },
+  { id: 2, speaker: "Theodore", start: 8.10, end: 9.04, text: "Hello, I'm here.", emotion: "Calm", valence: 0.3, arousal: -0.1 },
+  { id: 3, speaker: "Samantha", start: 10.62, end: 11.00, text: "Oh.", emotion: "Surprise", valence: 0.4, arousal: 0.6 },
+  { id: 4, speaker: "Samantha", start: 13.82, end: 14.18, text: "Hi.", emotion: "Neutral", valence: 0.1, arousal: 0.0 },
+  { id: 5, speaker: "Theodore", start: 14.82, end: 16.40, text: "Hi.", emotion: "Happy", valence: 0.7, arousal: 0.4 },
+]
+const MOCK_FILENAME = "WeChat_20250804025710.mp4"
+const MOCK_DURATION = 28.50
+
+// --- Helpers ---
+function fmtTime(sec: number): string {
+  const m = Math.floor(sec / 60)
+  const s = (sec % 60).toFixed(2)
+  return m > 0 ? `${m}:${s.padStart(5, "0")}` : s
+}
+
+type SpeakerInfo = { label: string; avatarColor: string; trackColor: string }
+
+function buildSpeakerMap(segments: Segment[]): Record<string, SpeakerInfo> {
+  const speakers = [...new Set(segments.map(s => s.speaker))].sort()
+  return Object.fromEntries(
+    speakers.map((id, i) => {
+      const palette = SPEAKER_COLORS[i % SPEAKER_COLORS.length]
+      // Use the speaker ID as the label if it's a name, otherwise "Speaker N"
+      const label = id.startsWith("SPEAKER_") ? `Speaker ${i + 1}` : id
+      return [id, { label, avatarColor: palette.avatar, trackColor: palette.track }]
+    })
+  )
+}
+
+// --- SegmentRow ---
+function SegmentRow({
+  seg,
+  active,
+  speaker,
+  onClick,
+}: {
+  seg: Segment
+  active: boolean
+  speaker: SpeakerInfo
+  onClick: () => void
+}) {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "flex items-start gap-12 group transition-all duration-300 cursor-pointer py-4 rounded-lg px-4 border border-transparent",
+        active ? "bg-accent/[0.04] border-accent/10" : "hover:bg-muted/30"
+      )}
+    >
+      {/* Speaker */}
+      <div className="w-32 flex items-center gap-3 shrink-0 pt-1">
+        <Avatar className="size-6 ring-2 ring-background border border-border/20">
+          <AvatarFallback className={cn("text-[10px] text-white", speaker.avatarColor)}>
+            {speaker.label[0]}
+          </AvatarFallback>
+        </Avatar>
+        <span className="text-[13px] font-semibold text-foreground/70">{speaker.label}</span>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 space-y-1.5 min-w-0 border-l-[1.5px] border-border/30 pl-8 relative">
+        <span className="text-[10px] font-sans font-medium text-muted-foreground/40 block tracking-tight">{fmtTime(seg.start)}</span>
+        <p className="text-[15px] text-foreground leading-[1.6] font-medium tracking-tight whitespace-pre-wrap">{seg.text}</p>
+        <div className="flex items-center gap-2 flex-wrap pt-0.5">
+          {seg.emotion && (
+            <Badge variant="secondary" className="text-[10px] h-5 px-2 font-medium rounded-full">
+              {seg.emotion}
+            </Badge>
+          )}
+          {seg.face_emotion && (
+            <Badge variant="outline" className="text-[10px] h-5 px-2 font-medium rounded-full gap-1">
+              <VideoCamera size={9} weight="fill" className="text-pink-500" />
+              {seg.face_emotion}
+            </Badge>
+          )}
+        </div>
+        <span className="text-[10px] font-sans font-medium text-muted-foreground/40 block tracking-tight">{fmtTime(seg.end)}</span>
+      </div>
+    </div>
+  )
+}
+
+function MergeButton() {
+  return (
+    <div className="flex items-center gap-12 px-4 py-0.5 group/merge h-6">
+      <div className="w-32 flex justify-end pr-5 shrink-0">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button className="text-muted-foreground/20 hover:text-foreground transition-all duration-200 transform hover:scale-125">
+              <svg width="14" height="14" viewBox="0 0 256 256" fill="currentColor">
+                <path d="M205.66,117.66l-32,32a8,8,0,0,1-11.32-11.32L188.69,112l-26.35-26.34a8,8,0,0,1,11.32-11.32l32,32A8,8,0,0,1,205.66,117.66ZM81.66,138.34,55.31,112,81.66,85.66a8,8,0,0,0-11.32-11.32l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32Z" />
+              </svg>
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right" className="bg-black text-white border-black">Merge segments</TooltipContent>
+        </Tooltip>
+      </div>
+      <div className="flex-1 h-px bg-border/20" />
+    </div>
+  )
+}
+
+// --- RightPanel ---
+function RightPanel({
+  filename,
+  onToggle,
+}: {
+  activeSegment: Segment | null
+  audioUrl: string
+  filename: string
+  isPlaying: boolean
+  currentTime: number
+  duration: number
+  onToggle: () => void
+}) {
+  return (
+    <div className="flex flex-col h-full border-l border-border bg-background">
+      {/* Video Preview */}
+      <div className="aspect-video w-full bg-slate-950 flex items-center justify-center flex-shrink-0 relative group">
+        <NextImage src="/logo.svg" alt="Preview" width={48} height={48} className="opacity-10" />
+        <div className="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button variant="ghost" size="icon" className="text-white hover:bg-white/20" onClick={onToggle}>
+            <Play size={24} weight="fill" />
+          </Button>
+        </div>
+      </div>
+
+      <ScrollArea className="flex-1">
+        <div className="p-6 space-y-8">
+          {/* Global Properties */}
+          <div className="space-y-4">
+            <button className="flex items-center gap-2 text-[11px] font-bold text-muted-foreground uppercase tracking-widest hover:text-foreground transition-colors w-full text-left">
+              <span className="text-[8px]">▼</span> Global Properties
+            </button>
+            <div className="space-y-4 pt-2">
+              <div className="text-sm font-medium">{filename}</div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Language</span>
+                <span className="font-medium text-foreground">English</span>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Subtitles</span>
+                <Button variant="ghost" size="icon" className="h-4 w-4 text-muted-foreground">
+                  <DotsThreeVertical size={14} />
+                </Button>
+              </div>
+            </div>
+          </div>
+
+
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+// --- TimelineBar ---
+function TimelineBar({
+  isPlaying,
+  onToggle,
+  segments,
+  duration,
+  currentTime,
+  speakerMap,
+}: {
+  isPlaying: boolean
+  onToggle: () => void
+  segments: Segment[]
+  duration: number
+  currentTime: number
+  speakerMap: Record<string, SpeakerInfo>
+}) {
+  const speakers = Object.entries(speakerMap)
+
+  return (
+    <div className="border-t border-border bg-background flex-shrink-0">
+      <div className="flex overflow-hidden">
+        {/* Speakers Sidebar */}
+        <div className="w-48 flex-shrink-0 border-r border-border">
+          <div className="px-4 h-12 flex items-center justify-between border-b border-border/40">
+            <span className="text-[11px] font-bold uppercase tracking-widest text-muted-foreground">Speakers</span>
+            <Button variant="ghost" size="icon" className="size-5">
+              <Plus size={14} />
+            </Button>
+          </div>
+          <div>
+            {speakers.map(([id, info]) => (
+              <div key={id} className="h-11 px-3 flex items-center gap-2 group hover:bg-muted/30 transition-colors">
+                <DotsThreeVertical size={14} className="text-muted-foreground opacity-30 cursor-grab" />
+                <Avatar className="size-5">
+                  <AvatarFallback className={cn("text-[8px] text-white", info.avatarColor)}>
+                    {info.label[0]}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="text-xs font-medium truncate flex-1">{info.label}</span>
+                <Button variant="ghost" size="icon" className="size-5 opacity-0 group-hover:opacity-100">
+                  <DotsThreeVertical size={14} />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Tracks Area */}
+        <div className="flex-1 relative overflow-hidden">
+          {/* Time Marks */}
+          <div className="h-12 border-b border-border/40 flex items-center relative px-4">
+            <Badge variant="secondary" className="bg-black text-white text-[10px] h-5 px-1.5 rounded-[4px] absolute left-4 z-10">0.00</Badge>
+            {[5, 10, 15, 20].map(s => (
+              <div key={s} className="absolute text-[10px] text-muted-foreground/40 font-sans border-l border-border/40 h-2 top-1/2 -translate-y-1/2" style={{ left: `${(s / duration) * 100}%` }}>
+                <span className="ml-1 relative -top-3">0:{s.toString().padStart(2, '0')}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Track Grid */}
+          <div className="relative">
+            {speakers.map(([id, info]) => (
+              <div key={id} className="h-11 border-b border-border/20 relative">
+                {duration > 0 && segments.filter(s => s.speaker === id).map(seg => (
+                  <div
+                    key={seg.id}
+                    className={cn("absolute top-2 bottom-2 rounded-[6px] transition-opacity hover:opacity-80 cursor-alias", info.trackColor)}
+                    style={{
+                      left: `${(seg.start / duration) * 100}%`,
+                      width: `${Math.max(((seg.end - seg.start) / duration) * 100, 0.5)}%`,
+                    }}
+                  />
+                ))}
+              </div>
+            ))}
+
+            {/* Playhead */}
+            {duration > 0 && (
+              <div
+                className="absolute top-0 bottom-0 w-px bg-black z-20 pointer-events-none transition-all duration-75"
+                style={{
+                  left: (currentTime / duration) * 100 + "%"
+                }}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom Controls */}
+      <div className="flex items-center justify-between px-6 h-12 border-t border-border/40">
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <MagnifyingGlass size={14} className="text-muted-foreground" />
+            <Slider defaultValue={[40]} max={100} className="w-32" />
+            <MagnifyingGlass size={14} className="text-muted-foreground" />
+          </div>
+        </div>
+
+        <div className="flex items-center gap-6">
+          <span className="text-[13px] font-bold text-foreground">1.0x</span>
+          <button
+            onClick={onToggle}
+            className="size-8 rounded-full bg-black text-white flex items-center justify-center hover:scale-105 transition-transform"
+          >
+            {isPlaying ? <Pause size={16} weight="fill" /> : <Play size={16} weight="fill" className="ml-0.5" />}
+          </button>
+        </div>
+
+        <Button variant="ghost" size="sm" className="text-xs font-bold hover:bg-transparent">
+          Add segment
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// --- Studio Content ---
+function StudioContent() {
+  const searchParams = useSearchParams()
+  const sessionId = searchParams.get("s")
+  const router = useRouter()
+
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const [session, setSession] = useState(() => sessionId ? getSession(sessionId) : null)
+  const [activeId, setActiveId] = useState<number>(1)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [processError, setProcessError] = useState<string | null>(null)
+
+  // Sync session state with sessionId param
+  useEffect(() => {
+    if (sessionId) {
+      const s = getSession(sessionId)
+      setSession(s)
+      if (s?.data.segments && s.data.segments.length > 0) {
+        setActiveId(s.data.segments[0].id)
+      }
+    }
+  }, [sessionId])
+
+  // Automatic processing for pending sessions
+  useEffect(() => {
+    if (!session || isProcessing || processError) return
+
+    // If we have a file but no segments, it's a pending session
+    if (session.file && session.data.segments.length === 0) {
+      const process = async () => {
+        setIsProcessing(true)
+        setProcessError(null)
+        try {
+          const formData = new FormData()
+          formData.append("audio", session.file!, session.filename)
+
+          const res = await fetch(`${API_BASE}/api/transcribe-diarize`, {
+            method: "POST",
+            body: formData,
+          })
+
+          if (!res.ok) {
+            const errData = await res.json().catch(() => ({}))
+            throw new Error(errData.error ?? "Processing failed")
+          }
+
+          const data = await res.json() as DiarizeResult
+          updateSession(session.id, data)
+
+          // Re-fetch to update local state and trigger re-render
+          const updated = getSession(session.id)
+          setSession(updated)
+          if (updated?.data.segments && updated.data.segments.length > 0) {
+            setActiveId(updated.data.segments[0].id)
+          }
+        } catch (e) {
+          setProcessError(e instanceof Error ? e.message : "Request failed")
+        } finally {
+          setIsProcessing(false)
+        }
+      }
+      process()
+    }
+  }, [session, isProcessing, processError])
+
+  const segments = session?.data.segments ?? (session ? [] : MOCK_SEGMENTS)
+  const audioUrl = session?.audioUrl ?? ""
+  const filename = session?.filename ?? MOCK_FILENAME
+  const duration = session?.data.duration ?? MOCK_DURATION
+
+  const speakerMap = useMemo(() => buildSpeakerMap(segments), [segments])
+  const activeSegment = segments.find(s => s.id === activeId) ?? segments[0] ?? null
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
+    const onTime = () => setCurrentTime(audio.currentTime)
+    const onPlay = () => setIsPlaying(true)
+    const onPause = () => setIsPlaying(false)
+    const onLoadedMetadata = () => {
+      // If session duration is 0 (pending), update it from audio metadata
+      if (duration === 0) {
+        // We could update the store here, but let's just use it locally for now
+      }
+    }
+    audio.addEventListener("timeupdate", onTime)
+    audio.addEventListener("play", onPlay)
+    audio.addEventListener("pause", onPause)
+    audio.addEventListener("loadedmetadata", onLoadedMetadata)
+    return () => {
+      audio.removeEventListener("timeupdate", onTime)
+      audio.removeEventListener("play", onPlay)
+      audio.removeEventListener("pause", onPause)
+      audio.removeEventListener("loadedmetadata", onLoadedMetadata)
+    }
+  }, [audioUrl, duration])
+
+  const handleSegmentClick = (seg: Segment) => {
+    setActiveId(seg.id)
+    if (audioRef.current && audioUrl) {
+      audioRef.current.currentTime = seg.start
+    }
+  }
+
+  const togglePlay = () => {
+    const audio = audioRef.current
+    if (!audio || !audioUrl) return
+    if (isPlaying) audio.pause()
+    else audio.play()
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
+      {/* Hidden audio element */}
+      <audio ref={audioRef} src={audioUrl || undefined} preload="metadata" className="hidden" />
+
+      {/* Top Bar */}
+      <Navbar
+        breadcrumbs={[
+          { label: filename }
+        ]}
+        actions={
+          <div className="flex items-center gap-2">
+            {isProcessing && (
+              <Badge variant="secondary" className="bg-blue-500/10 text-blue-500 hover:bg-blue-500/10 border-blue-500/20 gap-2 font-medium px-3 h-8">
+                <div className="size-2 rounded-full bg-blue-500 animate-pulse" />
+                Analysing Speech...
+              </Badge>
+            )}
+
+            <div className="flex items-center gap-0.5 border border-border rounded-[12px] p-0.5 bg-muted/20 ml-2">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-background rounded-[8px]">
+                    <ArrowCounterClockwise size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Undo</TooltipContent>
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground hover:bg-background rounded-[8px]">
+                    <ArrowClockwise size={16} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Redo</TooltipContent>
+              </Tooltip>
+            </div>
+
+            <Separator orientation="vertical" className="h-4 mx-1" />
+
+            <Button className="gap-2 font-semibold h-8 text-xs px-4 rounded-[12px] bg-foreground text-background hover:bg-foreground/90 shadow-none border border-transparent">
+              <Export size={16} weight="bold" />
+              Export
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Body */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Left: Transcript */}
+        <div className="flex-1 overflow-hidden flex flex-col min-w-0 relative">
+          {isProcessing && segments.length === 0 && (
+            <div className="absolute inset-0 z-20 bg-background/80 backdrop-blur-sm flex flex-col items-center justify-center p-8 text-center animate-in fade-in duration-500">
+              <div className="size-16 mb-6 relative">
+                <div className="absolute inset-0 border-4 border-muted rounded-full" />
+                <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin" />
+                <Waveform size={24} className="absolute inset-0 m-auto text-primary animate-pulse" />
+              </div>
+              <h2 className="text-xl font-bold mb-2">Analysing Audio</h2>
+              <p className="text-muted-foreground text-sm max-w-xs mx-auto">
+                Voxtral is currently transcribing and identifying speakers. This should only take a moment...
+              </p>
+            </div>
+          )}
+
+          {processError && (
+            <div className="absolute inset-0 z-20 bg-background flex flex-col items-center justify-center p-8 text-center">
+              <div className="size-12 rounded-full bg-destructive/10 text-destructive flex items-center justify-center mb-4">
+                <Export size={24} className="rotate-45" /> {/* Use as X icon */}
+              </div>
+              <h2 className="text-xl font-bold mb-2">Processing Failed</h2>
+              <p className="text-muted-foreground text-sm max-w-sm mx-auto mb-6">
+                {processError}
+              </p>
+              <Button onClick={() => window.location.reload()} variant="outline">Try Again</Button>
+            </div>
+          )}
+
+          <ScrollArea className="flex-1">
+            <div className="max-w-none px-[200px] py-10">
+              {segments.length === 0 && !isProcessing && !processError && (
+                <div className="py-20 text-center text-muted-foreground">
+                  No segments found.
+                </div>
+              )}
+              {segments.map((seg, i) => (
+                <React.Fragment key={seg.id}>
+                  {i > 0 && segments[i - 1].speaker === seg.speaker && <MergeButton />}
+                  <SegmentRow
+                    seg={seg}
+                    active={seg.id === activeId}
+                    speaker={speakerMap[seg.speaker]}
+                    onClick={() => handleSegmentClick(seg)}
+                  />
+                </React.Fragment>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+
+        {/* Right: Properties panel */}
+        <div className="w-[320px] flex-shrink-0 overflow-hidden flex flex-col">
+          <RightPanel
+            activeSegment={activeSegment}
+            audioUrl={audioUrl}
+            filename={filename}
+            isPlaying={isPlaying}
+            currentTime={currentTime}
+            duration={duration}
+            onToggle={togglePlay}
+          />
+        </div>
+      </div>
+
+      {/* Bottom: Timeline */}
+      <TimelineBar
+        isPlaying={isPlaying}
+        onToggle={togglePlay}
+        segments={segments}
+        duration={duration}
+        currentTime={currentTime}
+        speakerMap={speakerMap}
+      />
+    </div>
+  )
+}
+
+// --- Page (wraps in Suspense for useSearchParams) ---
+export default function StudioPage() {
+  return (
+    <Suspense fallback={
+      <div className="h-screen flex items-center justify-center text-muted-foreground text-sm">
+        Loading…
+      </div>
+    }>
+      <StudioContent />
+    </Suspense>
+  )
+}

web/src/components/navbar.tsx

@@ -1,33 +1,96 @@
-"use client"
-
-import React from "react"
-import { Sparkle, Bell } from "@phosphor-icons/react"
-import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { Separator } from "@/components/ui/separator"
-import { Skeleton } from "@/components/ui/skeleton"
-
-export function Navbar() {
-  return (
-    <header className="h-12 border-b border-border bg-card flex items-center justify-between px-5 sticky top-0 z-50">
-      <div className="flex items-center gap-2 text-foreground">
-        <Skeleton className="h-5 w-5 rounded bg-foreground/20" />
-        <span className="text-sm font-bold tracking-tight">Ethos</span>
-      </div>
-      <div className="flex items-center gap-1">
-        <Button variant="ghost" size="sm" className="text-muted-foreground font-medium h-8 px-3">Feedback</Button>
-        <Button variant="ghost" size="sm" className="text-muted-foreground font-medium h-8 px-3">Docs</Button>
-        <Button variant="ghost" size="sm" className="text-muted-foreground font-medium h-8 px-3 gap-1">
-          <Sparkle size={14} />Ask
-        </Button>
-        <Separator orientation="vertical" className="h-4 mx-2" />
-        <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground">
-          <Bell size={16} />
-        </Button>
-        <Avatar className="h-7 w-7 cursor-pointer ml-1">
-          <AvatarFallback className="bg-secondary text-foreground text-[11px] font-bold">U</AvatarFallback>
-        </Avatar>
-      </div>
-    </header>
-  )
-}
+"use client"
+
+import React from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import {
+  ArrowLeft,
+  Plus,
+  Bell,
+  Microphone,
+  VideoCamera,
+} from "@phosphor-icons/react"
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { cn } from "@/lib/utils"
+
+interface NavbarProps {
+  children?: React.ReactNode
+  breadcrumbs?: { label: string; href?: string }[]
+  actions?: React.ReactNode
+}
+
+export function Navbar({ children, breadcrumbs, actions }: NavbarProps) {
+  const pathname = usePathname()
+
+  // Default breadcrumbs if none provided
+  const defaultBreadcrumbs = React.useMemo(() => {
+    if (breadcrumbs) return breadcrumbs
+
+    const parts = pathname.split("/").filter(Boolean)
+    if (parts.length === 0) return [{ label: "Create", href: "/" }]
+
+    return parts.map((part, i) => {
+      // Custom labels for known routes
+      let label = part.charAt(0).toUpperCase() + part.slice(1)
+      if (part === "studio") label = "Studio Session"
+      if (part === "files") label = "Files"
+
+      return {
+        label,
+        href: "/" + parts.slice(0, i + 1).join("/")
+      }
+    })
+  }, [pathname, breadcrumbs])
+
+  return (
+    <header className="h-12 border-b border-border bg-background flex items-center px-4 gap-4 flex-shrink-0 sticky top-0 z-50">
+      <div className="flex items-center gap-2">
+        <SidebarTrigger className="-ml-2" />
+        <Separator orientation="vertical" className="h-4 mx-1" />
+
+
+
+        <div className="flex items-center gap-2 text-xs font-semibold">
+          {defaultBreadcrumbs.map((crumb, i) => (
+            <React.Fragment key={crumb.label}>
+              {i > 0 && <span className="text-muted-foreground/30 font-normal">/</span>}
+              {crumb.href ? (
+                <Link
+                  href={crumb.href}
+                  className={cn(
+                    "transition-colors",
+                    i === defaultBreadcrumbs.length - 1 ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className="text-foreground">{crumb.label}</span>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1" />
+
+      <div className="flex items-center gap-2">
+        {actions ? actions : (
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground">
+              <Bell size={16} />
+            </Button>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}

web/src/components/sidebar.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import React, { useEffect, useState } from "react"
+import Link from "next/link"
+import { usePathname, useSearchParams } from "next/navigation"
+import {
+  Waveform,
+  Handshake,
+  Heart,
+  Plus,
+} from "@phosphor-icons/react"
+import Image from "next/image"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import {
+  listRecentSessions,
+  ensureStoreInitialized,
+  type RecentSession,
+} from "@/lib/session-store"
+
+const PRODUCTS_ITEMS = [
+  { title: "Sales", url: "/sales", icon: Handshake, disabled: true },
+  { title: "Companionship", url: "/companionship", icon: Heart, disabled: true },
+]
+
+function formatDuration(s: number) {
+  const m = Math.floor(s / 60)
+  const sec = Math.floor(s % 60)
+  return `${m}:${sec.toString().padStart(2, "0")}`
+}
+
+function stripExtension(name: string) {
+  return name.replace(/\.[^/.]+$/, "")
+}
+
+export function AppSidebar() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const currentSessionId = searchParams.get("s")
+  const [recent, setRecent] = useState<RecentSession[]>([])
+
+  // Load and refresh recent sessions whenever pathname changes
+  useEffect(() => {
+    ensureStoreInitialized()
+    setRecent(listRecentSessions())
+  }, [pathname])
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <div className="flex items-center gap-2 px-2 py-1">
+          <Image src="/logo.svg" alt="Ethos Studio" width={32} height={32} className="rounded-lg" />
+          <span className="text-sm flex items-center gap-1.5">
+            <span className="font-semibold">Ethos</span>
+            <span className="text-muted-foreground/40 font-light">|</span>
+            <span className="font-medium text-muted-foreground">Studio</span>
+          </span>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>
+        {/* Top-level nav */}
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton asChild isActive={pathname === "/"}>
+                  <Link href="/">
+                    <Plus />
+                    <span>Create</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {/* Recent Sessions */}
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            Recent
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {recent.length === 0 ? (
+                <li className="px-2 py-1.5 text-xs text-muted-foreground/60">
+                  No sessions yet
+                </li>
+              ) : (
+                recent.map((session) => {
+                  const href = `/studio?s=${session.id}`
+                  return (
+                    <SidebarMenuItem key={session.id}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={pathname === "/studio" && currentSessionId === session.id}
+                        className="h-auto py-1.5 items-start"
+                      >
+                        <Link href={href}>
+                          <Waveform className="mt-0.5 shrink-0" />
+                          <div className="flex flex-col min-w-0">
+                            <span className="truncate text-sm leading-snug">
+                              {stripExtension(session.filename)}
+                            </span>
+                            <span className="text-xs text-muted-foreground font-normal">
+                              {formatDuration(session.duration)} · {session.speakerCount} speaker{session.speakerCount !== 1 ? "s" : ""}
+                            </span>
+                          </div>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  )
+                })
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+
+        {/* Products */}
+        <SidebarGroup>
+          <SidebarGroupLabel>Products</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {PRODUCTS_ITEMS.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton
+                    asChild={!item.disabled}
+                    isActive={pathname === item.url}
+                    disabled={item.disabled}
+                    className={item.disabled ? "opacity-50 cursor-not-allowed" : ""}
+                  >
+                    {item.disabled ? (
+                      <div className="flex items-center gap-2">
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </div>
+                    ) : (
+                      <Link href={item.url}>
+                        <item.icon />
+                        <span>{item.title}</span>
+                      </Link>
+                    )}
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton disabled className="opacity-60 cursor-default">
+              <span className="flex items-center gap-2 w-full">
+                <span>Developer</span>
+                <span className="ml-auto text-[10px] font-medium px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-muted leading-none capitalize">
+                  Coming soon
+                </span>
+              </span>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

web/src/components/ui/avatar.tsx

@@ -1,112 +1,112 @@
-"use client"
-
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
-}) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn(
-        "aspect-square size-full rounded-full object-cover",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-}
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

web/src/components/ui/badge.tsx

@@ -1,49 +1,49 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

web/src/components/ui/button.tsx

@@ -1,65 +1,65 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        outline:
-          "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default:
-          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-9",
-        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-9",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

web/src/components/ui/card.tsx

@@ -1,100 +1,100 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
-  return (
-    <div
-      data-slot="card"
-      data-size={size}
-      className={cn(
-        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("text-base font-medium", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn(
-        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 group-data-[size=sm]/card:px-4", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

web/src/components/ui/collapsible.tsx

@@ -1,33 +1,33 @@
-"use client"
-
-import { Collapsible as CollapsiblePrimitive } from "radix-ui"
-
-function Collapsible({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
-
-function CollapsibleTrigger({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
-
-function CollapsibleContent({
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
-
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+"use client"
+
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

web/src/components/ui/dialog.tsx

@@ -1,165 +1,165 @@
-"use client"
-
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { XIcon } from "lucide-react"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close data-slot="dialog-close" asChild>
-            <Button
-              variant="ghost"
-              className="absolute top-4 right-4"
-              size="icon-sm"
-            >
-              <XIcon
-              />
-              <span className="sr-only">Close</span>
-            </Button>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({
-  className,
-  showCloseButton = false,
-  children,
-  ...props
-}: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close asChild>
-          <Button variant="outline">Close</Button>
-        </DialogPrimitive.Close>
-      )}
-    </div>
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-base leading-none font-medium", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

web/src/components/ui/dropdown-menu.tsx

@@ -1,269 +1,269 @@
-"use client"
-
-import * as React from "react"
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { CheckIcon, ChevronRightIcon } from "lucide-react"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  align = "start",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        align={align}
-        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[state=closed]:overflow-hidden", className )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-checkbox-item-indicator"
-      >
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon
-          />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span
-        className="pointer-events-none absolute right-2 flex items-center justify-center"
-        data-slot="dropdown-menu-radio-item-indicator"
-      >
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon
-          />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border/50 -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl p-1 shadow-2xl ring-1 duration-100", className )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}
+"use client"
+
+import * as React from "react"
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[state=closed]:overflow-hidden", className )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border/50 -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl p-1 shadow-2xl ring-1 duration-100", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

web/src/components/ui/hover-card.tsx

@@ -1,44 +1,44 @@
-"use client"
-
-import * as React from "react"
-import { HoverCard as HoverCardPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function HoverCard({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
-
-function HoverCardTrigger({
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
-}
-
-function HoverCardContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
-      <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-2xl p-4 text-sm shadow-2xl ring-1 outline-hidden duration-100",
-          className
-        )}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  )
-}
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+"use client"
+
+import * as React from "react"
+import { HoverCard as HoverCardPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function HoverCard({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
+}
+
+function HoverCardTrigger({
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+  return (
+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+  )
+}
+
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        data-slot="hover-card-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-2xl p-4 text-sm shadow-2xl ring-1 outline-hidden duration-100",
+          className
+        )}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  )
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

web/src/components/ui/input.tsx

@@ -1,19 +1,19 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(
-        "bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-4xl border px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-4xl border px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

web/src/components/ui/label.tsx

@@ -1,24 +1,24 @@
-"use client"
-
-import * as React from "react"
-import { Label as LabelPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

web/src/components/ui/progress.tsx

@@ -1,31 +1,31 @@
-"use client"
-
-import * as React from "react"
-import { Progress as ProgressPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Progress({
-  className,
-  value,
-  ...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
-    <ProgressPrimitive.Root
-      data-slot="progress"
-      className={cn(
-        "bg-muted relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl",
-        className
-      )}
-      {...props}
-    >
-      <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
-        className="bg-primary size-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-}
-
-export { Progress }
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-muted relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary size-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

web/src/components/ui/scroll-area.tsx

@@ -1,55 +1,55 @@
-"use client"
-
-import * as React from "react"
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      data-orientation={orientation}
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
-
-export { ScrollArea, ScrollBar }
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }

web/src/components/ui/select.tsx

@@ -1,195 +1,195 @@
-"use client"
-
-import * as React from "react"
-import { Select as SelectPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-4xl border px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "item-aligned",
-  align = "center",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        data-align-trigger={position === "item-aligned"}
-        className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl shadow-2xl ring-1 duration-100 data-[align-trigger=true]:animate-none", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
-        position={position}
-        align={align}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          data-position={position}
-          className={cn(
-            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
-            position === "popper" && ""
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-3 py-2.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="pointer-events-none" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn(
-        "bg-border/50 pointer-events-none -mx-1 my-1 h-px",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon
-      />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon
-      />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
+"use client"
+
+import * as React from "react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-4xl border px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === "item-aligned"}
+        className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl shadow-2xl ring-1 duration-100 data-[align-trigger=true]:animate-none", position ==="popper"&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
+            position === "popper" && ""
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-3 py-2.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        "bg-border/50 pointer-events-none -mx-1 my-1 h-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

web/src/components/ui/separator.tsx

@@ -1,28 +1,28 @@
-"use client"
-
-import * as React from "react"
-import { Separator as SeparatorPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative = true,
-  ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
-  return (
-    <SeparatorPrimitive.Root
-      data-slot="separator"
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

web/src/components/ui/sheet.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-4 right-4"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground text-base font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

web/src/components/ui/sidebar.tsx

@@ -0,0 +1,705 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn(
+        "flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-9 text-sm",
+        sm: "h-8 text-xs",
+        lg: "h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot.Root : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

web/src/components/ui/skeleton.tsx

@@ -1,13 +1,13 @@
-import { cn } from "@/lib/utils"
-
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-xl", className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-muted animate-pulse rounded-xl", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

web/src/components/ui/slider.tsx

@@ -1,59 +1,59 @@
-"use client"
-
-import * as React from "react"
-import { Slider as SliderPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  )
-
-  return (
-    <SliderPrimitive.Root
-      data-slot="slider"
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
-      className={cn(
-        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
-        className
-      )}
-      {...props}
-    >
-      <SliderPrimitive.Track
-        data-slot="slider-track"
-        className="bg-muted relative grow overflow-hidden rounded-4xl data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3"
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
-        />
-      </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-4xl border bg-white shadow-sm transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
-    </SliderPrimitive.Root>
-  )
-}
-
-export { Slider }
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="bg-muted relative grow overflow-hidden rounded-4xl data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3"
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-4xl border bg-white shadow-sm transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

web/src/components/ui/switch.tsx

@@ -1,33 +1,33 @@
-"use client"
-
-import * as React from "react"
-import { Switch as SwitchPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Switch({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SwitchPrimitive.Root
-      data-slot="switch"
-      data-size={size}
-      className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
-        className
-      )}
-      {...props}
-    >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
-      />
-    </SwitchPrimitive.Root>
-  )
-}
-
-export { Switch }
+"use client"
+
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

web/src/components/ui/table.tsx

@@ -1,116 +1,116 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Table({ className, ...props }: React.ComponentProps<"table">) {
-  return (
-    <div
-      data-slot="table-container"
-      className="relative w-full overflow-x-auto"
-    >
-      <table
-        data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
-        {...props}
-      />
-    </div>
-  )
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
-  return (
-    <thead
-      data-slot="table-header"
-      className={cn("[&_tr]:border-b", className)}
-      {...props}
-    />
-  )
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
-  return (
-    <tbody
-      data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
-      {...props}
-    />
-  )
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
-  return (
-    <tfoot
-      data-slot="table-footer"
-      className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
-  return (
-    <tr
-      data-slot="table-row"
-      className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
-  return (
-    <th
-      data-slot="table-head"
-      className={cn(
-        "text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
-  return (
-    <td
-      data-slot="table-cell"
-      className={cn(
-        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TableCaption({
-  className,
-  ...props
-}: React.ComponentProps<"caption">) {
-  return (
-    <caption
-      data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

web/src/components/ui/tabs.tsx

@@ -1,90 +1,90 @@
-"use client"
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Tabs as TabsPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function Tabs({
-  className,
-  orientation = "horizontal",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      data-orientation={orientation}
-      className={cn(
-        "group/tabs flex gap-2 data-horizontal:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const tabsListVariants = cva(
-  "rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
-  {
-    variants: {
-      variant: {
-        default: "bg-muted",
-        line: "gap-1 bg-transparent",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function TabsList({
-  className,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-  VariantProps<typeof tabsListVariants>) {
-  return (
-    <TabsPrimitive.List
-      data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function TabsTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
-  return (
-    <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
-      className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function TabsContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
-  return (
-    <TabsPrimitive.Content
-      data-slot="tabs-content"
-      className={cn("flex-1 text-sm outline-none", className)}
-      {...props}
-    />
-  )
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Tabs as TabsPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const tabsListVariants = cva(
+  "rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }

web/src/components/ui/tooltip.tsx

@@ -1,57 +1,57 @@
-"use client"
-
-import * as React from "react"
-import { Tooltip as TooltipPrimitive } from "radix-ui"
-
-import { cn } from "@/lib/utils"
-
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
-
-function Tooltip({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-}
-
-function TooltipTrigger({
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
-
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" />
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  )
-}
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

web/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

web/src/lib/session-store.ts

@@ -1,93 +1,257 @@
-/**
- * Client-side session cache for uploaded audio + diarization results.
- * Uses module-level Map for File/Blob URL (can't be serialized) and
- * sessionStorage for JSON data (survives Next.js client-side navigation).
- *
- * Only import in "use client" components — this module uses browser APIs.
- */
-
-export type Segment = {
-  id: number
-  speaker: string    // e.g. "SPEAKER_00"
-  start: number      // seconds
-  end: number        // seconds
-  text: string
-  emotion: string
-  valence: number
-  arousal: number
-  face_emotion?: string  // FER result (video only): Anger | Contempt | Disgust | Fear | Happy | Neutral | Sad | Surprise
-}
-
-export type DiarizeResult = {
-  segments: Segment[]
-  duration: number
-  text: string
-  filename: string
-  diarization_method?: string
-  has_video?: boolean    // true when FER was performed on video frames
-}
-
-type SessionEntry = {
-  data: DiarizeResult
-  audioUrl: string   // blob: URL — valid for this browser session
-  filename: string
-}
-
-// In-memory store (lives as long as the page/tab is open)
-const _store = new Map<string, SessionEntry>()
-
-function _sessionKey(id: string) {
-  return `ser-session:${id}`
-}
-
-/** Store a new session; returns the session ID. */
-export function createSession(file: File, data: DiarizeResult): string {
-  const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
-  const audioUrl = URL.createObjectURL(file)
-  _store.set(id, { data, audioUrl, filename: file.name })
-
-  // Persist JSON to sessionStorage for resilience across navigation
-  try {
-    sessionStorage.setItem(_sessionKey(id), JSON.stringify({ data, filename: file.name }))
-  } catch {
-    // sessionStorage quota exceeded — in-memory only
-  }
-
-  return id
-}
-
-/** Retrieve a session. Returns null if not found. */
-export function getSession(id: string): SessionEntry | null {
-  if (!id) return null
-
-  // 1. Try in-memory (audio URL still valid)
-  const entry = _store.get(id)
-  if (entry) return entry
-
-  // 2. Fall back to sessionStorage (no audio URL after page reload)
-  try {
-    const raw = sessionStorage.getItem(_sessionKey(id))
-    if (raw) {
-      const { data, filename } = JSON.parse(raw) as { data: DiarizeResult; filename: string }
-      return { data, audioUrl: "", filename }
-    }
-  } catch {
-    // ignore parse errors
-  }
-
-  return null
-}
-
-/** Release resources for a session. */
-export function clearSession(id: string) {
-  const entry = _store.get(id)
-  if (entry?.audioUrl) {
-    URL.revokeObjectURL(entry.audioUrl)
-  }
-  _store.delete(id)
-  try {
-    sessionStorage.removeItem(_sessionKey(id))
-  } catch {
-    // ignore
-  }
-}
+/**
+ * Client-side session cache for uploaded audio + diarization results.
+ * Uses module-level Map for File/Blob URL (can't be serialized) and
+ * sessionStorage for JSON data (survives Next.js client-side navigation).
+ * Also maintains a localStorage-backed recent sessions list.
+ *
+ * Only import in "use client" components — this module uses browser APIs.
+ */
+
+export type Segment = {
+  id: number
+  speaker: string    // e.g. "SPEAKER_00"
+  start: number      // seconds
+  end: number        // seconds
+  text: string
+  emotion: string
+  valence: number
+  arousal: number
+  face_emotion?: string  // MobileViT-XXS FER — present only for video inputs
+}
+
+export type DiarizeResult = {
+  segments: Segment[]
+  duration: number
+  text: string
+  filename: string
+  diarization_method?: string
+  has_video?: boolean    // true when FER ran on a video input
+}
+
+type SessionEntry = {
+  id: string
+  data: DiarizeResult
+  audioUrl: string   // blob: URL — valid for this browser session
+  filename: string
+  file?: File        // Original file (only in-memory)
+}
+
+// In-memory store (lives as long as the page/tab is open)
+const _store = new Map<string, SessionEntry>()
+
+function _sessionKey(id: string) {
+  return `ser-session:${id}`
+}
+
+// ─── Recent Sessions Registry ─────────────────────────────────────────────────
+
+export type RecentSession = {
+  id: string
+  filename: string
+  duration: number       // seconds
+  speakerCount: number
+  createdAt: number      // Date.now()
+}
+
+const RECENT_KEY = "ser-recent-sessions"
+const MAX_RECENT = 20
+
+export function listRecentSessions(): RecentSession[] {
+  try {
+    const raw = localStorage.getItem(RECENT_KEY)
+    return raw ? (JSON.parse(raw) as RecentSession[]) : []
+  } catch {
+    return []
+  }
+}
+
+function _pushRecentSession(entry: RecentSession) {
+  try {
+    const existing = listRecentSessions().filter((s) => s.id !== entry.id)
+    const updated = [entry, ...existing].slice(0, MAX_RECENT)
+    localStorage.setItem(RECENT_KEY, JSON.stringify(updated))
+  } catch {
+    // ignore quota errors
+  }
+}
+
+export function removeRecentSession(id: string) {
+  try {
+    const updated = listRecentSessions().filter((s) => s.id !== id)
+    localStorage.setItem(RECENT_KEY, JSON.stringify(updated))
+  } catch {
+    // ignore
+  }
+}
+
+// ─── Initialization & Demo Data ─────────────────────────────────────────────
+
+const INIT_KEY = "ser-app-initialized"
+
+const DEMO_DATA: DiarizeResult = {
+  filename: "Welcome Demo.mp4",
+  duration: 42.5,
+  text: "Welcome to Ethos Studio! This is a demo session to show you how emotional speech recognition works.",
+  segments: [
+    { id: 1, speaker: "SPEAKER_01", start: 0, end: 5.2, text: "Welcome to the future of emotional intelligence.", emotion: "Trust", valence: 0.8, arousal: 0.3 },
+    { id: 2, speaker: "SPEAKER_01", start: 6.5, end: 12.8, text: "With Voxtral, we can now transcribe and analyze the tone of every conversation.", emotion: "Inspiration", valence: 0.9, arousal: 0.6 },
+    { id: 3, speaker: "SPEAKER_02", start: 14.1, end: 18.5, text: "That sounds incredibly powerful for sales and companionship applications.", emotion: "Interest", valence: 0.6, arousal: 0.4 },
+    { id: 4, speaker: "SPEAKER_01", start: 20.2, end: 28.4, text: "Exactly. It's about understanding the 'how' behind the 'what'.", emotion: "Confidence", valence: 0.7, arousal: 0.2 },
+  ]
+}
+
+/** 
+ * Call this on app start. 
+ * 1. Discards localStorage if this is a fresh browser session (mimics server restart cleanup).
+ * 2. Prepopulates with demo if empty.
+ */
+export function ensureStoreInitialized() {
+  if (typeof window === "undefined") return
+
+  // 1. Detect fresh session
+  const isInitialized = sessionStorage.getItem(INIT_KEY)
+  if (!isInitialized) {
+    // Clear everything for a clean start
+    localStorage.removeItem(RECENT_KEY)
+
+    // Clear all session cache keys from sessionStorage (since localStorage doesn't store them)
+    // Actually we use _sessionKey(id) which is stored in sessionStorage
+    for (const key in sessionStorage) {
+      if (key.startsWith("ser-session:")) sessionStorage.removeItem(key)
+    }
+
+    sessionStorage.setItem(INIT_KEY, "true")
+  }
+
+  // 2. Prepopulate if empty
+  const current = listRecentSessions()
+  if (current.length === 0) {
+    const demoId = "welcome-demo"
+
+    // Store data in sessionStorage fallback so it works immediately
+    try {
+      sessionStorage.setItem(_sessionKey(demoId), JSON.stringify({
+        data: DEMO_DATA,
+        filename: DEMO_DATA.filename
+      }))
+    } catch { }
+
+    _pushRecentSession({
+      id: demoId,
+      filename: DEMO_DATA.filename,
+      duration: DEMO_DATA.duration,
+      speakerCount: 2,
+      createdAt: Date.now(),
+    })
+  }
+}
+
+// ─── Session Store API ────────────────────────────────────────────────────────
+
+/** Create an initial session with just the file. Returns ID. */
+export function createPendingSession(file: File): string {
+  const id = `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+  const audioUrl = URL.createObjectURL(file)
+
+  const emptyData: DiarizeResult = {
+    segments: [],
+    duration: 0,
+    text: "",
+    filename: file.name
+  }
+
+  _store.set(id, { id, data: emptyData, audioUrl, filename: file.name, file })
+
+  // Initial persist to sessionStorage
+  try {
+    sessionStorage.setItem(_sessionKey(id), JSON.stringify({ data: emptyData, filename: file.name }))
+  } catch { }
+
+  // Initial register in recents
+  _pushRecentSession({
+    id,
+    filename: file.name,
+    duration: 0,
+    createdAt: Date.now(),
+    speakerCount: 0,
+  })
+
+  return id
+}
+
+/** Update an existing session with results. */
+export function updateSession(id: string, data: DiarizeResult) {
+  const entry = _store.get(id)
+  if (!entry) return
+
+  const updatedEntry = { ...entry, data }
+  _store.set(id, updatedEntry)
+
+  // Persist to sessionStorage
+  try {
+    sessionStorage.setItem(_sessionKey(id), JSON.stringify({ data, filename: entry.filename }))
+  } catch { }
+
+  // Update recents
+  const speakers = new Set(data.segments.map((s) => s.speaker))
+  _pushRecentSession({
+    id,
+    filename: entry.filename,
+    duration: data.duration,
+    createdAt: Date.now(),
+    speakerCount: speakers.size,
+  })
+}
+
+/** Store a new session; returns the session ID. */
+export function createSession(file: File, data: DiarizeResult): string {
+  const id = createPendingSession(file)
+  updateSession(id, data)
+  return id
+}
+
+/** Retrieve a session. Returns null if not found. */
+export function getSession(id: string): SessionEntry | null {
+  if (!id) return null
+
+  // Special case: Built-in Welcome Demo
+  if (id === "welcome-demo") {
+    return {
+      id: "welcome-demo",
+      data: DEMO_DATA,
+      audioUrl: "https://www.w3schools.com/html/horse.mp3", // Built-in sample
+      filename: DEMO_DATA.filename,
+    }
+  }
+
+  // 1. Try in-memory (audio URL still valid)
+  const entry = _store.get(id)
+  if (entry) return entry
+
+  // 2. Fall back to sessionStorage (no audio URL after page reload)
+  try {
+    const raw = sessionStorage.getItem(_sessionKey(id))
+    if (raw) {
+      const { data, filename } = JSON.parse(raw) as { data: DiarizeResult; filename: string }
+      return { id, data, audioUrl: "", filename }
+    }
+  } catch {
+    // ignore parse errors
+  }
+
+  return null
+}
+
+/** Release resources for a session. */
+export function clearSession(id: string) {
+  const entry = _store.get(id)
+  if (entry?.audioUrl) {
+    URL.revokeObjectURL(entry.audioUrl)
+  }
+  _store.delete(id)
+  try {
+    sessionStorage.removeItem(_sessionKey(id))
+  } catch {
+    // ignore
+  }
+}