feat: pending identity sorting, face detail modal, video player fps, processor counts

2026-06-24 02:02:33 +08:00
parent 7855983dc1
commit f915aaf794
9 changed files with 1479 additions and 324 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -16,18 +16,19 @@ cargo tauri build    # Full native app build (outputs to src-tauri/target/releas
 ```

 ## Architecture
- **All Core API calls go through Rust Tauri commands** — frontend NEVER contacts `localhost:3002` directly.
- **Rust proxies to external API**: `CORE_API = http://localhost:3002` (hardcoded in `src-tauri/src/main.rs`). This service must be running for the app to function.
- **API key**: Hardcoded in `src-tauri/src/main.rs` only (`API_KEY` constant).
- **Rust entrypoint**: `src-tauri/src/main.rs` — 15 Tauri commands:
-  - `search_llm_smart`, `get_files`, `get_people`, `get_faces`, `get_traces` (data APIs)
-  - `get_thumbnail`, `get_identity_profile` (return base64 image strings)
-  - `get_video_stream` (returns `file://` URL to temp MP4)
-  - `update_identity_name`, `delete_identity` (identity management)
-  - `search_identities`, `get_face_candidates` (search)
-  - `merge_identities`, `bind_face`, `unbind_face` (identity ops)
+- **Dual-mode API**: Frontend uses `apiCall()` from `src/api/index.ts` which detects `window.__TAURI__` and dispatches to either Tauri IPC (`invoke`) or HTTP to proxy at `http://0.0.0.0:8888`.
+- **Rust Tauri commands**: `src-tauri/src/main.rs` — 22 Tauri commands:
+  - Core API: `search_llm_smart`, `search_agents`, `get_files`, `get_people`, `get_faces`, `get_traces`, `get_file_info`
+  - Media: `get_thumbnail`, `get_face_thumbnail`, `get_identity_profile`
+  - Identity: `update_identity_name`, `update_identity_status`, `update_identity_starred`, `delete_identity`, `search_identities`, `get_face_candidates`, `merge_identities`, `bind_face`, `unbind_face`
+  - File ops: `register_file`, `process_file`, `unregister_file`
+  - Local SQLite: `get_search_history`, `save_search_history`, `rename_search_history`, `pin_search_history`, `delete_search_history`, `get_bookmarks`, `save_bookmark`, `delete_bookmark`
+- **Rust HTTP proxy** (`src-tauri/src/proxy.rs`): Axum on port 8888. Forwards `/api/v1/*` to Core API (localhost:3002) with API key injection. Handles `/api/v1/search-history` and `/api/v1/bookmarks` locally via `db::` functions. Handles `/api/v1/identity/{uuid}/profile` (reads local filesystem) and `/api/v1/face-thumbnail` (downloads frame + crops bbox) locally — these mirror the Tauri IPC commands that can't be proxied to Core API.
+- **Per-user SQLite**: `src-tauri/src/db.rs` — Project-root `data/users/demo.sqlite` (outside `src-tauri/` to avoid dev watcher rebuilds). WAL mode enabled. Tables: `search_history`, `bookmarks`, `app_users`. `init_db()` called on app setup.
 - **Frontend routes**: `/search`, `/library`, `/people` (redirect `/` → `/search`)
- **Frontend entry**: `src/main.ts` → `src/App.vue` → `src/router/index.ts`
+- **Frontend entry**: `src/main.ts` → `App.vue` → `router/index.ts`
+- **Global directive**: `v-observe` registered in `main.ts` from `src/directives/vObserve.ts`
+- **Composables**: `src/composables/useSearchHistory.ts` — `useSearchHistory()` and `useBookmarks()` for SQLite-backed search history and bookmarks CRUD via `apiCall`.

 ## Key Details
 - **`withGlobalTauri: true`** in `tauri.conf.json` — `window.__TAURI__` is available in the webview.
@@ -35,4 +36,23 @@ cargo tauri build    # Full native app build (outputs to src-tauri/target/releas
 - **TypeScript is non-strict** (`strict: false` in `tsconfig.json`).
 - **CI/CD**: Shell scripts only (`ci-cd.sh`, `local-ci-cd.sh`, `setup-gitea-ci.sh`). No GitHub Actions.
 - **Full native build order**: `npm install` → `npm run build` → `cargo tauri build`
- **Rust deps**: sqlx (postgres), reqwest, tokio, tauri-plugin-shell, base64
+- **Rust deps**: sqlx 0.8, rusqlite 0.32 (bundled), reqwest, tokio, tauri-plugin-shell, base64, chrono, uuid
+- **Core API**: `http://localhost:3002`, API key hardcoded in Rust only.
+- **Proxy**: `http://0.0.0.0:8888` — forwards `/api/v1/*` to Core API with auto-injected key; handles `/api/v1/search-history` and `/api/v1/bookmarks` locally.
+
+## Patterns
+- **Search thumbnails**: Use `start_frame` for frame-accurate thumbnails. Cache key format: `${file_uuid}:${start_frame}`. Not a single `file_uuid` key because same file can appear in multiple search results at different time segments.
+- **Store thumbnail queue**: `src/store.ts` provides `loadThumbnail()`, `loadFaceThumb()`, `loadProfile()` with max 4 concurrent requests. Always use store functions for shared data across pages.
+- **Page perPage limit**: Core API hangs on `per_page >= 100`. Always use `perPage ≤ 20`. The Rust `get_people` command uses a special 2-page × 100 flow (separate from frontend).
+- **PersonDetailView**: Uses `ensurePeople()` from store instead of direct `get_people` call. Face thumbnails go through store's `loadFaceThumb()`. Faces/candidates use `perPage: 20`.
+- **v-observe directive**: Global directive (`v-observe`) registered in `main.ts`. Defined in `src/directives/vObserve.ts`. Uses `IntersectionObserver` with 200px rootMargin. Includes `requestAnimationFrame` fallback for elements already visible on mount.
+- **SearchView empty state**: When `messages.length === 0`, shows `.ms-hero` with "Momentry Studio" + "Turn Every Moment Into Intelligence" slogan. Chat area gets `.chat--empty` class (flex-column, justify-end) to position hero near the search bar. Once messages exist, hero disappears and `.ibar` stays fixed at bottom.
+- **No `console.log` in *.vue files**: All debug console.log statements have been removed. Use `console.error` only for actual errors.
+- **Search history & bookmarks**: Stored in per-user SQLite (`data/users/demo.sqlite`), not localStorage. History items have `id`, `query`, `title`, `chat_state` (JSON-serialized Vue messages), `mode`, `pinned`, timestamps. Max 30 items; pinned sorted first. Composable `useSearchHistory()` provides `loadHistory`, `saveToHistory`, `renameHistory`, `pinHistory`, `deleteHistory`, `restoreFromHistory`. Composable `useBookmarks()` provides `loadBookmarks`, `saveBookmark`, `deleteBookmark`.
+- **SearchView history panel**: Dropdown with ⋯ menu per item (Pin/Unpin, Rename, Delete). +New button clears chat. Click item → restores `chat_state` JSON or runs new search. Renames via modal dialog.
+- **SearchView bookmark panel**: Dropdown with items from SQLite. Click → runs search. Hover shows x button to delete.
+- **API call snake_case**: Frontend `apiCall()` sends `camelCase` args to Tauri IPC (auto-converted by Tauri) but `snake_case` in HTTP body. `buildHttpRequest()` converts arg names for HTTP mode (e.g., `chatState` → `chat_state`).
+- **HistoryItem ID format**: `h_{timestamp}_{random}` e.g. `h_1718000000_abc123`.
+- **SQLite WAL mode + path outside src-tauri**: Database at project-root `data/users/demo.sqlite` (not inside `src-tauri/`). WAL journal mode prevents `-journal` file creation that triggers `cargo tauri dev` watcher rebuilds. Default path `../data/users/demo.sqlite` resolved from `src-tauri/` cwd.
+- **Video streaming**: `get_video_stream` is NOT a Tauri command. Both Tauri and browser modes use the proxy URL directly (`http://localhost:8888/api/v1/file/{uuid}/video?...`). The `<video>` element streams from the proxy, never via IPC. Proxy streams `video/*` and `octet-stream` responses (doesn't buffer entire body).
+- **Face thumbnail & identity profile in browser mode**: `/api/v1/face-thumbnail` and `/api/v1/identity/{uuid}/profile` are handled locally by the proxy (same logic as Tauri IPC commands). Core API doesn't support bbox cropping for face thumbnails or local filesystem for profiles.
--- a/docs/CORE_API_REFERENCE.md
+++ b/docs/CORE_API_REFERENCE.md
@@ -301,6 +301,73 @@ id, face_id, file_uuid, frame_number, confidence, bbox, attributes

 ---

+## 10. Unregister API
+
+### POST /api/v1/unregister
+
+**Auth**: Required
+
+Delete a registered file from the system. Supports single file by UUID, or batch by directory + regex pattern.
+
+| Field | Type | Required | Default | Description |
+|-------|------|----------|---------|-------------|
+| `file_uuid` | string | * | — | Single file UUID to delete |
+| `file_path` | string | * | — | Directory path (for batch delete) |
+| `pattern` | string | * | — | Regex pattern (requires `file_path`) |
+| `delete_output_files` | boolean | No | `true` | Also delete processor output JSON files |
+
+**Response (200)**:
+```json
+{
+    "success": true,
+    "file_uuid": "8703db16...",
+    "message": "File ... unregistered successfully.",
+    "deleted_face_detections": 0,
+    "deleted_processor_results": 0,
+    "deleted_chunks": 0,
+    "deleted_qdrant_vectors": 1,
+    "deleted_redis_keys": 1,
+    "deleted_output_files": 10
+}
+```
+
+**Error**: `400` (missing params), `404` (UUID not found), `401` (bad API key)
+
+---
+
+## 11. Process API
+
+### POST /api/v1/file/{uuid}/process
+
+Trigger processing pipeline for a registered file. Runs asynchronously.
+
+| Field | Type | Required | Default | Description |
+|-------|------|----------|---------|-------------|
+| `processors` | string[] | No | all | Processors: `cut`, `asr`, `asrx`, `yolo`, `ocr`, `face`, `pose`, `visual_chunk`, `story`, `5w1h` |
+| `rules` | string[] | No | all | Rule names (currently unused) |
+
+**Response (200)**:
+```json
+{
+    "success": true,
+    "job_id": 42,
+    "file_uuid": "3a6c1865...",
+    "status": "processing",
+    "pids": [12345, 12346],
+    "message": "Processing triggered for video.mp4"
+}
+```
+
+### GET /api/v1/progress/{uuid}
+
+Real-time processing progress.
+
+### GET /api/v1/jobs
+
+List all processing jobs.
+
+---
+
 ## API Response Key 摘要

 | 端點 | Response Key | 備註 |
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -44,6 +44,9 @@ struct FileInfo {
    #[serde(rename = "isRegistered")]
    is_registered: bool,
    status: String,
+    registration_time: Option<String>,
+    #[serde(rename = "ingested")]
+    ingested: bool,
 }

 #[derive(Serialize)]
@@ -76,6 +79,7 @@ struct TraceInfo {
    first_sec: f64,
    last_sec: f64,
    avg_confidence: f64,
+    face_id: Option<String>,
 }

 #[derive(Serialize)]
@@ -207,6 +211,7 @@ async fn get_files(args: GetFilesArgs) -> Result<Vec<FileInfo>, String> {
            let is_reg = f["is_registered"].as_bool().unwrap_or(false);
            let file_uuid = f["file_uuid"].as_str()
                .unwrap_or_else(|| f["file_path"].as_str().unwrap_or("")).to_string();
+            let status = f["status"].as_str().unwrap_or("").to_string();
            Some(FileInfo {
                file_uuid,
                file_name: f["file_name"].as_str()?.to_string(),
@@ -214,7 +219,9 @@ async fn get_files(args: GetFilesArgs) -> Result<Vec<FileInfo>, String> {
                file_size: f["file_size"].as_i64().unwrap_or(0),
                modified_time: f["modified_time"].as_str().unwrap_or("").to_string(),
                is_registered: is_reg,
-                status: f["status"].as_str().unwrap_or("").to_string(),
+                registration_time: f["registration_time"].as_str().map(|s| s.to_string()),
+                ingested: status == "completed",
+                status,
            })
        })
        .collect();
@@ -276,6 +283,43 @@ async fn process_file(file_uuid: String, processors: Vec<String>) -> Result<Proc
    })
 }

+#[derive(Serialize)]
+struct IngestResult {
+    success: bool,
+    file_uuid: String,
+    message: String,
+}
+
+#[tauri::command(rename_all = "camelCase")]
+async fn ingest_file(file_uuid: String) -> Result<IngestResult, String> {
+    let client = get_client();
+    let url = format!("{}/api/v1/file/{}/checkin?api_key={}", CORE_API, file_uuid, API_KEY);
+    let resp = client.post(&url).send().await
+        .map_err(|e| format!("Ingest (checkin) request failed: {}", e))?;
+    let json: serde_json::Value = resp.json().await
+        .map_err(|e| format!("Ingest (checkin) parse failed: {}", e))?;
+    Ok(IngestResult {
+        success: json["success"].as_bool().unwrap_or(false),
+        file_uuid,
+        message: json["message"].as_str().unwrap_or("Checkin complete").to_string(),
+    })
+}
+
+#[tauri::command(rename_all = "camelCase")]
+async fn checkout_file(file_uuid: String) -> Result<IngestResult, String> {
+    let client = get_client();
+    let url = format!("{}/api/v1/file/{}/checkout?api_key={}", CORE_API, file_uuid, API_KEY);
+    let resp = client.post(&url).send().await
+        .map_err(|e| format!("Checkout request failed: {}", e))?;
+    let json: serde_json::Value = resp.json().await
+        .map_err(|e| format!("Checkout parse failed: {}", e))?;
+    Ok(IngestResult {
+        success: json["success"].as_bool().unwrap_or(false),
+        file_uuid,
+        message: json["message"].as_str().unwrap_or("Checkout complete").to_string(),
+    })
+}
+
 #[derive(Serialize)]
 struct UnregisterResult {
    success: bool,
@@ -404,77 +448,50 @@ async fn get_faces(uuid: String, per_page: usize) -> Result<Vec<FaceInfo>, Strin
    Ok(faces)
 }

+#[derive(Serialize)]
+struct TracesResponse {
+    total: i64,
+    traces: Vec<TraceInfo>,
+}
+
 #[tauri::command(rename_all = "camelCase")]
-async fn get_traces(uuid: String, per_page: usize) -> Result<Vec<TraceInfo>, String> {
-    let page_size = per_page.min(20);
-    let mut all_traces: Vec<TraceInfo> = vec![];
-    let mut page = 1u32;
-    let max_retries = 2;
+async fn get_traces(uuid: String, per_page: usize, page: Option<u32>) -> Result<TracesResponse, String> {
+    let page_size = per_page.min(100);
+    let page_num = page.unwrap_or(1);
    let t = std::time::Instant::now();
-    eprintln!("[get_traces] --> {}", uuid);
-    
-    for _page in 0..10 {
-        let url = format!("{}/api/v1/identity/{}/traces?api_key={}&page_size={}&page={}", CORE_API, uuid, API_KEY, page_size, page);
-        
-        let mut response: Option<reqwest::Response> = None;
-        for attempt in 0..=max_retries {
-            if attempt > 0 {
-                eprintln!("[get_traces] retry {} for page {}", attempt, page);
-                tokio::time::sleep(std::time::Duration::from_secs(2)).await;
-            }
-            match get_client().get(&url).send().await {
-                Ok(r) => { response = Some(r); break; }
-                Err(e) => {
-                    eprintln!("[get_traces] attempt {} failed on page {}: {}", attempt + 1, page, e);
-                }
-            }
-        }
-        
-        let resp = match response {
-            Some(r) => r,
-            None => {
-                eprintln!("[get_traces] all retries exhausted on page {} — returning {} traces so far", page, all_traces.len());
-                break;
-            }
-        };
-        
-        let json: serde_json::Value = match resp.json().await {
-            Ok(v) => v,
-            Err(e) => {
-                eprintln!("[get_traces] parse error on page {}: {} — returning {} traces so far", page, e, all_traces.len());
-                break;
-            }
-        };
-        
-        let traces: Vec<TraceInfo> = json["traces"]
-            .as_array()
-            .unwrap_or(&vec![])
-            .iter()
-            .filter_map(|t| {
-                Some(TraceInfo {
-                    trace_id: t["trace_id"].as_i64().unwrap_or(0) as i32,
-                    file_uuid: t["file_uuid"].as_str()?.to_string(),
-                    frame_count: t["frame_count"].as_i64().unwrap_or(0),
-                    first_frame: t["first_frame"].as_i64().unwrap_or(0),
-                    last_frame: t["last_frame"].as_i64().unwrap_or(0),
-                    first_sec: t["first_sec"].as_f64().unwrap_or(0.0),
-                    last_sec: t["last_sec"].as_f64().unwrap_or(0.0),
-                    avg_confidence: t["avg_confidence"].as_f64().unwrap_or(0.0),
-                })
+    eprintln!("[get_traces] --> {} page={} page_size={}", uuid, page_num, page_size);
+
+    let url = format!("{}/api/v1/identity/{}/traces?api_key={}&page_size={}&page={}", CORE_API, uuid, API_KEY, page_size, page_num);
+
+    let resp = get_client().get(&url).send().await
+        .map_err(|e| format!("Traces request failed: {}", e))?;
+
+    let json: serde_json::Value = resp.json().await
+        .map_err(|e| format!("Traces parse failed: {}", e))?;
+
+    let total = json["total"].as_i64().unwrap_or(0);
+
+    let traces: Vec<TraceInfo> = json["traces"]
+        .as_array()
+        .unwrap_or(&vec![])
+        .iter()
+        .filter_map(|t| {
+            Some(TraceInfo {
+                trace_id: t["trace_id"].as_i64().unwrap_or(0) as i32,
+                file_uuid: t["file_uuid"].as_str()?.to_string(),
+                frame_count: t["frame_count"].as_i64().unwrap_or(0),
+                first_frame: t["first_frame"].as_i64().unwrap_or(0),
+                last_frame: t["last_frame"].as_i64().unwrap_or(0),
+                first_sec: t["first_sec"].as_f64().unwrap_or(0.0),
+                last_sec: t["last_sec"].as_f64().unwrap_or(0.0),
+                avg_confidence: t["avg_confidence"].as_f64().unwrap_or(0.0),
+                face_id: t["face_id"].as_str().map(String::from),
            })
-            .collect();
-        
-        let count = traces.len();
-        all_traces.extend(traces);
-        
-        if count < page_size {
-            break;
-        }
-        page += 1;
-    }
-    
-    eprintln!("[get_traces] <-- {} {} traces {:?}", uuid, all_traces.len(), t.elapsed());
-    Ok(all_traces)
+        })
+        .collect();
+
+    eprintln!("[get_traces] <-- {} total={} {} traces {:?}", uuid, total, traces.len(), t.elapsed());
+    Ok(TracesResponse { total, traces })
 }

 #[tauri::command(rename_all = "camelCase")]
@@ -733,6 +750,57 @@ async fn delete_identity(uuid: String) -> Result<(), String> {
    Ok(())
 }

+#[derive(Serialize)]
+struct CreateIdentityFromFaceResult {
+    success: bool,
+    identity_uuid: String,
+    name: String,
+}
+
+#[tauri::command(rename_all = "camelCase")]
+async fn create_identity_from_face(name: String, _face_id: Option<String>, _face_row_id: Option<i64>, file_uuid: String) -> Result<CreateIdentityFromFaceResult, String> {
+    let client = get_client();
+    
+    // Use POST /api/v1/file/:file_uuid/pending-person to create pending identity
+    let url = format!("{}/api/v1/file/{}/pending-person?api_key={}", CORE_API, file_uuid, API_KEY);
+    let body = serde_json::json!({
+        "name": name
+    });
+    
+    let resp = client.post(&url)
+        .json(&body)
+        .send().await
+        .map_err(|e| format!("Create pending person request failed: {}", e))?;
+    
+    let status = resp.status();
+    let resp_json: serde_json::Value = resp.json().await
+        .map_err(|e| format!("Parse response failed: {}", e))?;
+    
+    eprintln!("[create_identity_from_face] status={} resp={}", status, resp_json);
+    
+    if !status.is_success() {
+        return Err(format!("Create pending person failed: {} - {}", status, resp_json["error"].as_str().unwrap_or("unknown error")));
+    }
+    
+    // identity_uuid is inside data object
+    let data_obj = resp_json.get("data").unwrap_or(&resp_json);
+    let new_uuid = data_obj.get("identity_uuid")
+        .and_then(|v| v.as_str())
+        .or_else(|| resp_json.get("identity_uuid").and_then(|v| v.as_str()))
+        .or_else(|| resp_json.get("uuid").and_then(|v| v.as_str()))
+        .unwrap_or("");
+    
+    if new_uuid.is_empty() {
+        return Err("Create pending person failed: no uuid returned".to_string());
+    }
+    
+    Ok(CreateIdentityFromFaceResult {
+        success: true,
+        identity_uuid: new_uuid.to_string(),
+        name,
+    })
+}
+
 #[tauri::command(rename_all = "camelCase")]
 async fn search_identities(query: String, limit: usize) -> Result<Vec<SearchIdentityResult>, String> {
    let url = format!("{}/api/v1/identities/search?api_key={}&q={}", CORE_API, API_KEY, query);
@@ -998,6 +1066,8 @@ fn main() {
            get_files,
            register_file,
            process_file,
+            ingest_file,
+            checkout_file,
            unregister_file,
            get_people,
            get_faces,
@@ -1012,6 +1082,7 @@ fn main() {
            update_identity,
            upload_profile_image,
            delete_identity,
+            create_identity_from_face,
            search_identities,
            get_face_candidates,
            merge_identities,
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -110,7 +110,9 @@ function buildHttpRequest(cmd: string, args: Record<string, any>): { url: string
      return { url: `/api/v1/identity/${a.uuid}/faces?page_size=${a.perPage || 100}`, method: 'GET' }
    }
    case 'get_traces': {
-      return { url: `/api/v1/identity/${a.uuid}/traces?page_size=${a.perPage || 50}`, method: 'GET' }
+      let url = `/api/v1/identity/${a.uuid}/traces?page_size=${a.perPage || 50}`
+      if (a.page) url += `&page=${a.page}`
+      return { url, method: 'GET' }
    }
    case 'get_face_candidates': {
      return { url: `/api/v1/faces/candidates?page=${a.page || 1}&page_size=${a.perPage || 100}`, method: 'GET' }
@@ -179,6 +181,11 @@ function buildHttpRequest(cmd: string, args: Record<string, any>): { url: string
    case 'delete_identity': {
      return { url: `/api/v1/identity/${a.uuid}`, method: 'DELETE' }
    }
+    case 'create_identity_from_face': {
+      const body: any = { name: a.name }
+      if (a.traceIds) body.trace_ids = a.traceIds
+      return { url: `/api/v1/file/${a.fileUuid}/pending-person`, method: 'POST', body }
+    }

    // --- Identity Operations ---
    case 'merge_identities': {
@@ -264,11 +271,23 @@ function buildHttpRequest(cmd: string, args: Record<string, any>): { url: string
      if (a.deleteOutputFiles != null) body.delete_output_files = a.deleteOutputFiles
      return { url: '/api/v1/unregister', method: 'POST', body }
    }
+    case 'ingest_file': {
+      return { url: `/api/v1/file/${a.fileUuid}/checkin`, method: 'POST' }
+    }
+    case 'checkout_file': {
+      return { url: `/api/v1/file/${a.fileUuid}/checkout`, method: 'POST' }
+    }

    // --- File Detail ---
    case 'get_file_info': {
      return { url: `/api/v1/file/${a.uuid}`, method: 'GET' }
    }
+    case 'get_processor_counts': {
+      return { url: `/api/v1/file/${a.uuid}/processor-counts`, method: 'GET' }
+    }
+    case 'get_progress': {
+      return { url: `/api/v1/progress/${a.fileUuid}`, method: 'POST', body: {} }
+    }

    // --- Search History ---
    case 'get_search_history': {
@@ -320,6 +339,8 @@ export function transformResponse(cmd: string, data: any): any {
        modified_time: f.modified_time || '',
        isRegistered: f.is_registered ?? false,
        status: f.status || '',
+        registrationTime: f.registration_time || null,
+        ingested: f.ingested ?? (f.status === 'completed'),
      }))
    }
    case 'get_people': {
@@ -345,17 +366,21 @@ export function transformResponse(cmd: string, data: any): any {
      }))
    }
    case 'get_traces': {
-      const traces = data.traces || data.data || data || []
-      return traces.map((t: any) => ({
-        trace_id: t.trace_id,
-        file_uuid: t.file_uuid || '',
-        frame_count: t.frame_count || 0,
-        first_frame: t.first_frame || 0,
-        last_frame: t.last_frame || 0,
-        first_sec: t.first_sec || 0,
-        last_sec: t.last_sec || 0,
-        avg_confidence: t.avg_confidence || 0,
-      }))
+      const traces = data.traces || data.data || []
+      return {
+        total: data.total || traces.length || 0,
+        traces: traces.map((t: any) => ({
+          trace_id: t.trace_id,
+          file_uuid: t.file_uuid || '',
+          frame_count: t.frame_count || 0,
+          first_frame: t.first_frame || 0,
+          last_frame: t.last_frame || 0,
+          first_sec: t.first_sec || 0,
+          last_sec: t.last_sec || 0,
+          avg_confidence: t.avg_confidence || 0,
+          face_id: t.face_id ?? null,
+        })),
+      }
    }
    case 'get_face_candidates': {
      const candidates = data.candidates || data.data || data || []
@@ -411,7 +436,9 @@ export function transformResponse(cmd: string, data: any): any {
        message: data.message ?? '',
      }
    }
-    case 'unregister_file': {
+    case 'unregister_file':
+    case 'ingest_file':
+    case 'checkout_file': {
      return {
        success: data.success ?? false,
        file_uuid: data.file_uuid ?? '',
@@ -440,6 +467,14 @@ export function transformResponse(cmd: string, data: any): any {
    case 'merge_redo':
    case 'merge_history':
      return data
+    case 'create_identity_from_face': {
+      const respData = data.data || data
+      return {
+        success: data.success ?? false,
+        identity_uuid: respData.identity_uuid ?? respData.uuid ?? '',
+        name: respData.name ?? '',
+      }
+    }
    default:
      return data
  }
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -7,6 +7,13 @@
        <button class="ms-modal-video-close" @click="close">&times;</button>
      </div>

+      <!-- Mode toggle (only show when not simple and has traces/segments) -->
+      <div v-if="!simple && (allTraces.length || mergedSegments.length)" class="ms-video-mode-toggle">
+        <button :class="{ active: playMode === 'trace' }" @click="switchMode('trace')">追蹤</button>
+        <button :class="{ active: playMode === 'segment' }" @click="switchMode('segment')">片段</button>
+        <button :class="{ active: playMode === 'continuous' }" @click="switchMode('continuous')">連續</button>
+      </div>
+
      <div v-if="videoError" class="ms-video-loading">
        <p style="color:#f44336">{{ videoError }}</p>
      </div>
@@ -15,18 +22,18 @@
        <p>Loading video...</p>
      </div>

-      <video v-if="videoSrc && !videoLoading" ref="videoEl" :src="videoSrc" class="video" controls autoplay playsinline @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate" @error="onVideoError"></video>
+      <video v-if="videoSrc && !videoLoading" ref="videoEl" :src="videoSrc" class="video" controls autoplay playsinline preload="auto" @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate" @error="onVideoError"></video>

-      <!-- Timeline bar (all raw traces) -->
-      <div class="ms-video-timeline-wrap" v-if="!simple && allTraces.length && !videoLoading">
+      <!-- Timeline bar -->
+      <div class="ms-video-timeline-wrap" v-if="!simple && timelineMarkers.length && !videoLoading">
        <div class="ms-video-tl-bar">
          <div
            v-for="(dot, i) in timelineMarkers"
            :key="i"
            class="ms-video-tl-dot"
-            :class="{ active: i === currentTraceIdx }"
+            :class="{ active: isMarkerActive(i) }"
            :style="{ left: dot.pct + '%', width: dot.w + '%' }"
-            @click="loadTrace(dot.idx)"
+            @click="onTimelineClick(dot)"
          >
            <span class="ms-video-tl-tip">{{ formatTime(dot.start) }}</span>
          </div>
@@ -38,10 +45,10 @@
      </div>

      <div class="ms-video-nav" v-if="!videoLoading">
-        <div v-if="!simple && allTraces.length" style="display:flex;align-items:center;gap:10px;flex:1;">
-          <button class="ms-fm-btn ms-video-nav-btn" @click="prevTrace" :disabled="currentTraceIdx <= 0">&larr; 上一個</button>
-          <span class="ms-video-seg-info2">{{ currentTraceIdx + 1 }} / {{ allTraces.length }}</span>
-          <button class="ms-fm-btn ms-video-nav-btn" @click="nextTrace" :disabled="currentTraceIdx >= allTraces.length - 1">下一個 &rarr;</button>
+        <div v-if="!simple && (allTraces.length || mergedSegments.length)" style="display:flex;align-items:center;gap:10px;flex:1;">
+          <button class="ms-fm-btn ms-video-nav-btn" @click="prevItem" :disabled="!canPrev">&larr; 上一個</button>
+          <span class="ms-video-seg-info2">{{ currentItemIdx + 1 }} / {{ totalItems }}</span>
+          <button class="ms-fm-btn ms-video-nav-btn" @click="nextItem" :disabled="!canNext">下一個 &rarr;</button>
        </div>
        <span v-else class="ms-video-seg-info">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
      </div>
@@ -50,7 +57,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
 import { apiCall } from '@/api'

 const props = withDefaults(defineProps<{
@@ -58,16 +65,20 @@ const props = withDefaults(defineProps<{
  startTime?: number
  endTime?: number
  allTraces?: any[]
+  mergedSegments?: any[]
  initialTraceIdx?: number
+  initialSegmentIdx?: number
  title?: string
  simple?: boolean
 }>(), {
  allTraces: () => [],
+  mergedSegments: () => [],
  initialTraceIdx: 0,
+  initialSegmentIdx: 0,
  simple: false,
 })

-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'trace-change', 'segment-change'])

 const videoEl = ref<HTMLVideoElement | null>(null)
 const visible = ref(true)
@@ -78,21 +89,62 @@ const videoSrc = ref('')
 const videoLoading = ref(true)
 const videoError = ref('')
 const currentTraceIdx = ref(props.initialTraceIdx ?? 0)
+const currentSegmentIdx = ref(props.initialSegmentIdx ?? 0)
 const curFileUuid = ref(props.fileUuid)

-// Timeline computation
-const tlStart = computed(() => {
+const playMode = ref<'trace' | 'segment' | 'continuous'>('trace')
+const pendingSeekTime = ref<number | null>(null)
+
+const continuousStart = computed(() => {
  if (!props.allTraces.length) return 0
  return props.allTraces[0].first_sec || props.allTraces[0].start_time || 0
 })
-const tlEnd = computed(() => {
+
+const continuousEnd = computed(() => {
  if (!props.allTraces.length) return 0
  const last = props.allTraces[props.allTraces.length - 1]
  return last.last_sec || last.end_time || 0
 })
+
+const continuousFileUuid = computed(() => {
+  if (!props.allTraces.length) return ''
+  return props.allTraces[0].file_uuid || ''
+})
+
+const tlStart = computed(() => {
+  if (playMode.value === 'segment' && props.mergedSegments.length) {
+    return props.mergedSegments[0].start || 0
+  }
+  if (!props.allTraces.length) return 0
+  return props.allTraces[0].first_sec || props.allTraces[0].start_time || 0
+})
+
+const tlEnd = computed(() => {
+  if (playMode.value === 'segment' && props.mergedSegments.length) {
+    const last = props.mergedSegments[props.mergedSegments.length - 1]
+    return last.end || 0
+  }
+  if (!props.allTraces.length) return 0
+  const last = props.allTraces[props.allTraces.length - 1]
+  return last.last_sec || last.end_time || 0
+})
+
 const tlRange = computed(() => Math.max(tlEnd.value - tlStart.value, 1))

 const timelineMarkers = computed(() => {
+  if (playMode.value === 'segment' && props.mergedSegments.length) {
+    return props.mergedSegments.map((s: any, i: number) => {
+      const st = s.start || 0
+      const en = s.end || 0
+      return {
+        idx: i,
+        start: st,
+        end: en,
+        pct: ((st - tlStart.value) / tlRange.value) * 100,
+        w: Math.max(1, ((en - st) / tlRange.value) * 100),
+      }
+    })
+  }
  return props.allTraces.map((t: any, i: number) => {
    const st = t.first_sec || t.start_time || 0
    const en = t.last_sec || t.end_time || 0
@@ -106,19 +158,171 @@ const timelineMarkers = computed(() => {
  })
 })

+const currentItemIdx = computed(() => {
+  if (playMode.value === 'segment') return currentSegmentIdx.value
+  return currentTraceIdx.value
+})
+
+const totalItems = computed(() => {
+  if (playMode.value === 'segment') return props.mergedSegments.length || 0
+  return props.allTraces.length || 0
+})
+
+const canPrev = computed(() => currentItemIdx.value > 0)
+const canNext = computed(() => currentItemIdx.value < totalItems.value - 1)
+
+function isMarkerActive(i: number): boolean {
+  if (playMode.value === 'segment') return i === currentSegmentIdx.value
+  return i === currentTraceIdx.value
+}
+
+function getTraceFps(t: any): number {
+  const frameDiff = (t.last_frame || 0) - (t.first_frame || 0)
+  const secDiff = (t.last_sec || 0) - (t.first_sec || 0)
+  if (secDiff <= 0) return 30
+  return frameDiff / secDiff
+}
+
+function findSegmentIdxForFrame(absFrame: number): number {
+  for (let i = 0; i < props.mergedSegments.length; i++) {
+    const s = props.mergedSegments[i]
+    const st = s.start_frame || 0
+    const en = s.end_frame || 0
+    if (absFrame >= st && absFrame <= en) {
+      return i
+    }
+  }
+  for (let i = 0; i < props.mergedSegments.length; i++) {
+    const s = props.mergedSegments[i]
+    if (absFrame < (s.start_frame || 0)) {
+      return Math.max(0, i - 1)
+    }
+  }
+  return Math.max(0, props.mergedSegments.length - 1)
+}
+
+function findTraceIdxForFrame(absFrame: number): number {
+  for (let i = 0; i < props.allTraces.length; i++) {
+    const t = props.allTraces[i]
+    const st = t.first_frame || 0
+    const en = t.last_frame || 0
+    if (absFrame >= st && absFrame <= en) {
+      return i
+    }
+  }
+  for (let i = 0; i < props.allTraces.length; i++) {
+    const t = props.allTraces[i]
+    if (absFrame < (t.first_frame || 0)) {
+      return Math.max(0, i - 1)
+    }
+  }
+  return props.allTraces.length - 1
+}
+
+async function switchMode(mode: 'trace' | 'segment' | 'continuous') {
+  if (mode === playMode.value) return
+  const prevMode = playMode.value
+  const prevTime = currentTime.value
+  const prevTraceIdx = currentTraceIdx.value
+  const prevSegmentIdx = currentSegmentIdx.value
+  
+  let absFrame = 0
+  let fps = 30
+  
+  if (prevMode === 'trace' && props.allTraces[prevTraceIdx]) {
+    const t = props.allTraces[prevTraceIdx]
+    fps = getTraceFps(t)
+    absFrame = (t.first_frame || 0) + Math.round(prevTime * fps)
+  } else if (prevMode === 'segment' && props.mergedSegments[prevSegmentIdx]) {
+    const s = props.mergedSegments[prevSegmentIdx]
+    const sFps = getTraceFps(props.allTraces[s._startIdx || 0])
+    fps = sFps
+    absFrame = (s.start_frame || 0) + Math.round(prevTime * fps)
+  } else if (prevMode === 'continuous') {
+    const firstTrace = props.allTraces[0]
+    fps = getTraceFps(firstTrace)
+    absFrame = (firstTrace.first_frame || 0) + Math.round(prevTime * fps)
+  }
+  
+  playMode.value = mode
+  
+  if (mode === 'continuous') {
+    const firstTrace = props.allTraces[0]
+    const lastTrace = props.allTraces[props.allTraces.length - 1]
+    const fps = getTraceFps(firstTrace)
+    const firstFrame = firstTrace?.first_frame || 0
+    const lastFrame = lastTrace?.last_frame || firstFrame + 1
+    
+    const targetIdx = findTraceIdxForFrame(absFrame)
+    currentTraceIdx.value = targetIdx
+    const targetTrace = props.allTraces[targetIdx]
+    const targetFrame = Math.min(absFrame, lastFrame)
+    
+    curFileUuid.value = continuousFileUuid.value
+    const prevVolume = videoEl.value?.volume ?? 1
+    videoLoading.value = true
+    videoError.value = ''
+    videoSrc.value = ''
+    pendingSeekTime.value = null
+    try {
+      const data = await apiCall('get_video_stream', {
+        uuid: continuousFileUuid.value,
+        startTime: null,
+        endTime: null,
+        startFrame: targetFrame,
+        endFrame: lastFrame,
+      })
+      if (typeof data === 'string') {
+        videoSrc.value = data
+      } else {
+        const blob = new Blob([new Uint8Array(data)], { type: 'video/mp4' })
+        videoSrc.value = URL.createObjectURL(blob)
+      }
+      await nextTick()
+    } catch (e: any) {
+      videoError.value = typeof e === 'string' ? e : (e?.message || 'Failed to load video')
+      return
+    } finally {
+      videoLoading.value = false
+      await nextTick()
+      const el = videoEl.value
+      if (el) {
+        el.volume = prevVolume
+        el.load()
+      }
+    }
+  } else if (mode === 'trace') {
+    const targetIdx = findTraceIdxForFrame(absFrame)
+    const targetTrace = props.allTraces[targetIdx]
+    fps = getTraceFps(targetTrace)
+    const relFrame = absFrame - (targetTrace?.first_frame || 0)
+    pendingSeekTime.value = Math.max(0, relFrame / fps)
+    await loadTrace(targetIdx)
+  } else if (mode === 'segment') {
+    const targetIdx = findSegmentIdxForFrame(absFrame)
+    const targetSeg = props.mergedSegments[targetIdx]
+    if (props.mergedSegments.length && targetSeg) {
+      fps = getTraceFps(props.allTraces[targetSeg._startIdx || 0])
+      const relFrame = absFrame - (targetSeg.start_frame || 0)
+      pendingSeekTime.value = Math.max(0, relFrame / fps)
+      await loadSegment(targetIdx)
+    }
+  }
+}
+
 async function loadTrace(idx: number) {
  const traces = props.allTraces
  if (idx < 0 || idx >= traces.length) return
  currentTraceIdx.value = idx
+  emit('trace-change', idx)
  const t = traces[idx]
  const fu = t.file_uuid || ''
  if (!fu || fu === 'undefined') return

-  const st = t.first_sec || t.start_time || 0
-  const en = Math.max(t.last_sec || t.end_time || 0, st + 0.1)
+  const stFrame = t.first_frame || 0
+  const enFrame = Math.max(t.last_frame || 0, stFrame + 1)

  curFileUuid.value = fu
-  // Preserve volume across reloads
  const prevVolume = videoEl.value?.volume ?? 1
  videoLoading.value = true
  videoError.value = ''
@@ -126,10 +330,10 @@ async function loadTrace(idx: number) {
  try {
    const data = await apiCall('get_video_stream', {
      uuid: fu,
-      startTime: st,
-      endTime: en,
-      startFrame: null,
-      endFrame: null,
+      startTime: null,
+      endTime: null,
+      startFrame: stFrame,
+      endFrame: enFrame,
    })
    if (typeof data === 'string') {
      videoSrc.value = data
@@ -152,6 +356,162 @@ async function loadTrace(idx: number) {
  }
 }

+async function loadSegment(idx: number) {
+  const segments = props.mergedSegments
+  if (idx < 0 || idx >= segments.length) return
+  currentSegmentIdx.value = idx
+  emit('segment-change', idx)
+  const s = segments[idx]
+  const fu = s.file_uuid || ''
+  if (!fu || fu === 'undefined') return
+
+  const stFrame = s.start_frame || 0
+  const enFrame = Math.max(s.end_frame || 0, stFrame + 1)
+
+  curFileUuid.value = fu
+  const prevVolume = videoEl.value?.volume ?? 1
+  videoLoading.value = true
+  videoError.value = ''
+  videoSrc.value = ''
+  try {
+    const data = await apiCall('get_video_stream', {
+      uuid: fu,
+      startTime: null,
+      endTime: null,
+      startFrame: stFrame,
+      endFrame: enFrame,
+    })
+    if (typeof data === 'string') {
+      videoSrc.value = data
+    } else {
+      const blob = new Blob([new Uint8Array(data)], { type: 'video/mp4' })
+      videoSrc.value = URL.createObjectURL(blob)
+    }
+    await nextTick()
+  } catch (e: any) {
+    videoError.value = typeof e === 'string' ? e : (e?.message || 'Failed to load video')
+    return
+  } finally {
+    videoLoading.value = false
+    await nextTick()
+    const el = videoEl.value
+    if (el) {
+      el.volume = prevVolume
+      el.load()
+    }
+  }
+}
+
+async function loadContinuous() {
+  const fu = continuousFileUuid.value
+  if (!fu || fu === 'undefined') return
+
+  const firstTrace = props.allTraces[0]
+  const lastTrace = props.allTraces[props.allTraces.length - 1]
+  const stFrame = firstTrace?.first_frame || 0
+  const enFrame = Math.max(lastTrace?.last_frame || 0, stFrame + 1)
+
+  curFileUuid.value = fu
+  const prevVolume = videoEl.value?.volume ?? 1
+  videoLoading.value = true
+  videoError.value = ''
+  videoSrc.value = ''
+  try {
+    const data = await apiCall('get_video_stream', {
+      uuid: fu,
+      startTime: null,
+      endTime: null,
+      startFrame: stFrame,
+      endFrame: enFrame,
+    })
+    if (typeof data === 'string') {
+      videoSrc.value = data
+    } else {
+      const blob = new Blob([new Uint8Array(data)], { type: 'video/mp4' })
+      videoSrc.value = URL.createObjectURL(blob)
+    }
+    await nextTick()
+  } catch (e: any) {
+    videoError.value = typeof e === 'string' ? e : (e?.message || 'Failed to load video')
+    return
+  } finally {
+    videoLoading.value = false
+    await nextTick()
+    const el = videoEl.value
+    if (el) {
+      el.volume = prevVolume
+      el.load()
+    }
+  }
+}
+
+function onTimelineClick(marker: any) {
+  if (playMode.value === 'continuous') {
+    if (!videoEl.value) return
+    const seekTime = marker.start - continuousStart.value
+    videoEl.value.currentTime = Math.max(0, seekTime)
+    currentTraceIdx.value = marker.idx
+  } else if (playMode.value === 'trace') {
+    loadTrace(marker.idx)
+  } else if (playMode.value === 'segment') {
+    loadSegment(marker.idx)
+  }
+}
+
+function prevItem() {
+  if (playMode.value === 'continuous') {
+    seekToPrevTrace()
+  } else if (playMode.value === 'trace') {
+    prevTrace()
+  } else if (playMode.value === 'segment') {
+    prevSegment()
+  }
+}
+
+function nextItem() {
+  if (playMode.value === 'continuous') {
+    seekToNextTrace()
+  } else if (playMode.value === 'trace') {
+    nextTrace()
+  } else if (playMode.value === 'segment') {
+    nextSegment()
+  }
+}
+
+function prevTrace() {
+  if (currentTraceIdx.value > 0) loadTrace(currentTraceIdx.value - 1)
+}
+
+function nextTrace() {
+  if (currentTraceIdx.value < props.allTraces.length - 1) loadTrace(currentTraceIdx.value + 1)
+}
+
+function prevSegment() {
+  if (currentSegmentIdx.value > 0) loadSegment(currentSegmentIdx.value - 1)
+}
+
+function nextSegment() {
+  if (currentSegmentIdx.value < props.mergedSegments.length - 1) loadSegment(currentSegmentIdx.value + 1)
+}
+
+function seekToPrevTrace() {
+  if (!videoEl.value || currentTraceIdx.value <= 0) return
+  currentTraceIdx.value--
+  const t = props.allTraces[currentTraceIdx.value]
+  if (!t) return
+  const seekTime = (t.first_sec || 0) - continuousStart.value
+  videoEl.value.currentTime = Math.max(0, seekTime)
+}
+
+function seekToNextTrace() {
+  if (!videoEl.value || currentTraceIdx.value >= props.allTraces.length - 1) return
+  currentTraceIdx.value++
+  const t = props.allTraces[currentTraceIdx.value]
+  if (!t) return
+  const seekTime = (t.first_sec || 0) - continuousStart.value
+  videoEl.value.currentTime = Math.max(0, seekTime)
+}
+
 function close() {
  visible.value = false
  emit('close')
@@ -160,13 +520,14 @@ function close() {
 function onLoaded() {
  const el = videoEl.value
  if (!el) return
-  const t = props.allTraces[currentTraceIdx.value]
-  if (t) {
-    const off = props.startTime ?? 0
-    el.currentTime = (t.first_sec || t.start_time || 0) - off
-  } else if (props.startTime) {
+  
+  if (pendingSeekTime.value !== null) {
+    el.currentTime = pendingSeekTime.value
+    pendingSeekTime.value = null
+  } else {
    el.currentTime = 0
  }
+  
  el.play().catch(() => {})
 }

@@ -174,6 +535,17 @@ function onTimeUpdate() {
  if (!videoEl.value) return
  currentTime.value = videoEl.value.currentTime
  duration.value = videoEl.value.duration || 0
+  
+  if (playMode.value === 'continuous') {
+    const absTime = currentTime.value + continuousStart.value
+    for (let i = props.allTraces.length - 1; i >= 0; i--) {
+      const t = props.allTraces[i]
+      if (absTime >= (t.first_sec || 0)) {
+        currentTraceIdx.value = i
+        break
+      }
+    }
+  }
 }

 function onVideoError() {
@@ -186,14 +558,6 @@ function onVideoError() {
  }
 }

-function prevTrace() {
-  if (currentTraceIdx.value > 0) loadTrace(currentTraceIdx.value - 1)
-}
-
-function nextTrace() {
-  if (currentTraceIdx.value < props.allTraces.length - 1) loadTrace(currentTraceIdx.value + 1)
-}
-
 function togglePlay() {
  if (videoEl.value) {
    if (videoEl.value.paused) { videoEl.value.play(); isPlaying.value = true }
@@ -225,30 +589,56 @@ onMounted(async () => {
    videoLoading.value = false
    return
  }
-  try {
-    const st = props.startTime ?? 0
-    let et = props.endTime ?? st + 1
-    if (et <= st || et - st < 1) et = st + 1
-    const data = await apiCall('get_video_stream', {
-      uuid: props.fileUuid,
-      startTime: st,
-      endTime: et,
-      startFrame: null,
-      endFrame: null,
-    })
-    if (typeof data === 'string') {
-      videoSrc.value = data
+  
+  if (props.allTraces.length || props.mergedSegments.length) {
+    if (playMode.value === 'continuous') {
+      await loadContinuous()
+    } else if (playMode.value === 'segment' && props.mergedSegments.length) {
+      await loadSegment(currentSegmentIdx.value)
    } else {
-      const blob = new Blob([new Uint8Array(data)], { type: 'video/mp4' })
-      videoSrc.value = URL.createObjectURL(blob)
+      await loadTrace(currentTraceIdx.value)
    }
-    await nextTick()
-  } catch (e: any) {
-    videoError.value = typeof e === 'string' ? e : (e?.message || 'Failed to load video')
-  } finally {
-    videoLoading.value = false
-    await nextTick()
-    videoEl.value?.load()
+    emit('trace-change', currentTraceIdx.value)
+  } else {
+    try {
+      const st = props.startTime ?? 0
+      let et = props.endTime ?? st + 1
+      if (et <= st || et - st < 1) et = st + 1
+      const data = await apiCall('get_video_stream', {
+        uuid: props.fileUuid,
+        startTime: st,
+        endTime: et,
+        startFrame: null,
+        endFrame: null,
+      })
+      if (typeof data === 'string') {
+        videoSrc.value = data
+      } else {
+        const blob = new Blob([new Uint8Array(data)], { type: 'video/mp4' })
+        videoSrc.value = URL.createObjectURL(blob)
+      }
+      await nextTick()
+    } catch (e: any) {
+      videoError.value = typeof e === 'string' ? e : (e?.message || 'Failed to load video')
+    } finally {
+      videoLoading.value = false
+      await nextTick()
+      videoEl.value?.load()
+    }
+  }
+})
+
+watch(() => props.initialTraceIdx, (newIdx) => {
+  if (newIdx === undefined || newIdx === null) return
+  if (playMode.value === 'trace' && newIdx !== currentTraceIdx.value) {
+    loadTrace(newIdx)
+  }
+})
+
+watch(() => props.initialSegmentIdx, (newIdx) => {
+  if (newIdx === undefined || newIdx === null) return
+  if (playMode.value === 'segment' && newIdx !== currentSegmentIdx.value) {
+    loadSegment(newIdx)
  }
 })

@@ -258,13 +648,17 @@ onUnmounted(() => {
 </script>

 <style scoped>
-.ms-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; display: grid; place-items: center; }
+.ms-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 999; display: flex; justify-content: center; align-items: flex-start; padding-top: 140px; }
 .ms-modal { background: #fff; border-radius: 20px; max-width: 380px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
 .ms-modal-video { max-width: 720px; width: 95%; padding: 20px 24px 24px; text-align: left; background: #1a1a1a; }
 .ms-modal-video-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
 .ms-modal-video-title { font-size: 14px; font-weight: 600; color: #e8eaed; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; }
 .ms-modal-video-close:hover { color: #fff; }
+.ms-video-mode-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
+.ms-video-mode-toggle button { padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: transparent; color: rgba(255,255,255,0.6); font-size: 12px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
+.ms-video-mode-toggle button:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
+.ms-video-mode-toggle button.active { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.4); }
 .video { max-width: 100%; max-height: 60vh; border-radius: 8px; display: block; width: 100%; }
 .ms-video-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; color: #5f6368; font-size: 13px; }
 .ms-video-loading-spinner { width: 18px; height: 18px; border: 2px solid #e8eaed; border-top-color: #1a56db; border-radius: 50%; animation: ms-spin .7s linear infinite; }
--- a/src/store.ts
+++ b/src/store.ts
@@ -15,6 +15,36 @@ export const thumbnailsCache = ref<Record<string, string>>({})
 export const profilesCache = ref<Record<string, string>>({})
 export const faceThumbsCache = ref<Record<string, string>>({})

+export interface ProcessorOutputInfo {
+  has_json: boolean
+  frame_count: number | null
+  segment_count: number | null
+  chunk_count: number | null
+  last_modified: string | null
+}
+
+export interface ProcessorProgress {
+  processor_type: string
+  status: 'pending' | 'running' | 'complete' | 'failed'
+  progress: number
+  current?: number
+  total?: number
+  eta_seconds?: number
+}
+
+export interface FileProgress {
+  file_uuid: string
+  overall_progress: number
+  processors: ProcessorProgress[]
+  cpu_percent?: number
+  gpu_percent?: number
+  memory_percent?: number
+}
+
+export const processorCountsCache = ref<Record<string, Record<string, ProcessorOutputInfo>>>({})
+export const fileProgressCache = ref<Record<string, FileProgress>>({})
+export const fileStatusCache = ref<Record<string, string>>({})
+
 const thumbQueue: (() => Promise<void>)[] = []
 let activeThumbLoads = 0
 const MAX_CONCURRENT = 16
@@ -26,6 +56,8 @@ const MAX_PROFILE_CONCURRENT = 4
 const loadingThumbs = new Set<string>()
 const loadingProfiles = new Set<string>()
 const loadingFaceThumbs = new Set<string>()
+const loadingProcessorCounts = new Set<string>()
+const pollingProgress = new Set<string>()

 function drainThumbQueue() {
  if (activeThumbLoads >= MAX_CONCURRENT || thumbQueue.length === 0) return
@@ -203,6 +235,111 @@ export function loadFaceThumb(key: string, uuid: string, frame: number, bbox?: a
  })
 }

+export async function loadProcessorCounts(fileUuid: string, force = false) {
+  if (!fileUuid) return
+  if (!force && processorCountsCache.value[fileUuid]) return
+  if (loadingProcessorCounts.has(fileUuid)) return
+  loadingProcessorCounts.add(fileUuid)
+  try {
+    const data: any = await apiCall('get_processor_counts', { uuid: fileUuid })
+    const counts: Record<string, ProcessorOutputInfo> = {}
+    for (const p of data.processors || []) {
+      counts[p.processor] = {
+        has_json: p.has_json ?? false,
+        frame_count: p.frame_count ?? null,
+        segment_count: p.segment_count ?? null,
+        chunk_count: p.chunk_count ?? null,
+        last_modified: p.last_modified ?? null,
+      }
+    }
+    processorCountsCache.value = { ...processorCountsCache.value, [fileUuid]: counts }
+  } catch (e) {
+    console.error('loadProcessorCounts failed:', fileUuid, e)
+  } finally {
+    loadingProcessorCounts.delete(fileUuid)
+  }
+}
+
+export function getProcessorCounts(fileUuid: string): Record<string, ProcessorOutputInfo> {
+  return processorCountsCache.value[fileUuid] || {}
+}
+
+export async function pollProgress(fileUuid: string) {
+  if (!fileUuid || pollingProgress.has(fileUuid)) return
+  pollingProgress.add(fileUuid)
+  try {
+    while (pollingProgress.has(fileUuid)) {
+      const data: any = await apiCall('get_progress', { fileUuid })
+      fileProgressCache.value[fileUuid] = {
+        file_uuid: data.file_uuid || fileUuid,
+        overall_progress: data.overall_progress || 0,
+        processors: (data.processors || []).map((p: any) => ({
+          processor_type: p.processor_type,
+          status: p.status,
+          progress: p.progress || 0,
+          current: p.current,
+          total: p.total,
+          eta_seconds: p.eta_seconds,
+        })),
+        cpu_percent: data.cpu_percent,
+        gpu_percent: data.gpu_percent,
+        memory_percent: data.memory_percent,
+      }
+      const allComplete = data.processors?.every((p: any) => p.status === 'complete' || p.status === 'failed')
+      if (allComplete || data.overall_progress >= 100) {
+        stopPolling(fileUuid)
+        fileStatusCache.value[fileUuid] = 'completed'
+        await loadProcessorCounts(fileUuid)
+        break
+      }
+      await new Promise(r => setTimeout(r, 2000))
+    }
+  } catch (e) {
+    console.error('pollProgress failed:', fileUuid, e)
+  } finally {
+    pollingProgress.delete(fileUuid)
+  }
+}
+
+export function stopPolling(fileUuid: string) {
+  pollingProgress.delete(fileUuid)
+}
+
+export function getProgress(fileUuid: string): FileProgress | null {
+  return fileProgressCache.value[fileUuid] || null
+}
+
+export function getFileStatus(fileUuid: string): string {
+  return fileStatusCache.value[fileUuid] || ''
+}
+
+export async function refreshFileStatus(fileUuid: string) {
+  try {
+    const data: any = await apiCall('get_progress', { fileUuid })
+    if (data.overall_progress >= 100 || data.processors?.every((p: any) => p.status === 'complete')) {
+      fileStatusCache.value[fileUuid] = 'completed'
+      await loadProcessorCounts(fileUuid)
+    } else if (data.processors?.some((p: any) => p.status === 'running')) {
+      fileStatusCache.value[fileUuid] = 'processing'
+      fileProgressCache.value[fileUuid] = {
+        file_uuid: fileUuid,
+        overall_progress: data.overall_progress || 0,
+        processors: data.processors || [],
+      }
+    }
+  } catch (e) {
+    console.error('refreshFileStatus failed:', fileUuid, e)
+  }
+}
+
+export async function refreshAllFilesStatus() {
+  for (const f of filesCache.value) {
+    if (f.isRegistered && f.file_uuid) {
+      await refreshFileStatus(f.file_uuid)
+    }
+  }
+}
+
 export function invalidateFiles() {
  filesLoaded.value = false
  filesCache.value = []
--- a/src/views/LibraryView.vue
+++ b/src/views/LibraryView.vue
@@ -4,6 +4,7 @@
      <div class="ms-fm-toolbar">
        <div class="ms-fm-toolbar-left">
          <button class="ms-fm-icon-btn" type="button" title="Refresh" @click="loadFiles">⟳</button>
+          <button class="ms-fm-icon-btn" type="button" title="Refresh Status" @click="refreshAllStatus">⟡</button>
          <label class="ms-fm-radio-label">
            <input type="radio" name="ms-display-filter" value="all" v-model="displayFilter"> All
          </label>
@@ -39,6 +40,8 @@
          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterRegistered"> 已註冊</label>
          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterPending"> 待處理</label>
          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterCompleted"> 已完成</label>
+          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterNotIngested"> 未入庫</label>
+          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterIngested"> 已入庫</label>
          <label class="ms-fm-radio-label"><input type="checkbox" v-model="onlyVideos"> 僅顯示影片</label>
          <label class="ms-fm-radio-label"><input type="checkbox" v-model="onlyPhotos"> 僅顯示照片</label>
        </div>
@@ -62,6 +65,13 @@
      </div>

      <div class="ms-fm-status">{{ statusText }}<span v-if="actionMsg" class="ms-fm-action-msg">{{ actionMsg }}</span></div>
+      <div class="ms-fm-axis-bar">
+        <span class="ms-fm-axis-item">📋 已註冊 <strong>{{ registeredCount }}</strong> · 未註冊 <strong>{{ unregisteredCount }}</strong></span>
+        <span class="ms-fm-axis-sep">|</span>
+        <span class="ms-fm-axis-item">⚙️ 待處理 <strong>{{ pendingCount }}</strong> · 處理中 <strong>{{ processingCount }}</strong> · 已處理 <strong>{{ completedCount }}</strong></span>
+        <span class="ms-fm-axis-sep">|</span>
+        <span class="ms-fm-axis-item">🗄️ 已入庫 <strong>{{ ingestedCount }}</strong> · 未入庫 <strong>{{ notIngestedCount }}</strong></span>
+      </div>

      <div class="ms-fm-grid">
        <div v-for="f in sortedFilteredFiles" :key="f.file_uuid" class="ms-fm-card" :class="{ 'is-completed': f.isRegistered, 'is-selected': selectedFiles.includes(f.file_uuid) }" @click="toggleSelect(f)" @contextmenu.prevent="openContextMenu($event, f)">
@@ -74,9 +84,15 @@
              <span class="ms-fm-doc-ext">{{ getFileExt(f.file_name) }}</span>
            </div>
            <button v-if="isVideo(f)" class="ms-fm-play-btn" @click.stop="playVideo(f)">▶</button>
-            <div class="ms-fm-check" v-if="f.isRegistered">✓</div>
-            <div class="ms-fm-status-badge" v-if="f.status === 'completed'" style="background:#1e8e3e;color:#fff;">完成</div>
-            <div class="ms-fm-status-badge" v-else-if="f.status === 'registered'" style="background:#f9ab00;color:#202124;">待處理</div>
+            <div class="ms-fm-badges">
+              <div class="ms-fm-badge-row" :class="f.isRegistered ? 'ms-badge-ok' : 'ms-badge-off'">📋 {{ f.isRegistered ? '已註冊' : '未註冊' }}</div>
+              <div class="ms-fm-badge-row" :class="statusBadgeClass(f)">{{ statusBadgeIcon(f) }} {{ statusBadgeLabel(f) }}</div>
+              <div class="ms-fm-badge-row" :class="ingestedBadgeClass(f)">{{ ingestedBadgeIcon(f) }} {{ ingestedBadgeLabel(f) }}</div>
+            </div>
+          </div>
+          <div v-if="getProgress(f.file_uuid)?.overall_progress < 100" class="ms-fm-progress">
+            <div class="ms-fm-progress-bar" :style="{ width: getProgress(f.file_uuid)?.overall_progress + '%' }"></div>
+            <div class="ms-fm-progress-text">{{ getProgress(f.file_uuid)?.overall_progress || 0 }}%</div>
          </div>
          <div class="ms-fm-meta">
            <div class="ms-fm-name">{{ f.file_name }}</div>
@@ -98,18 +114,22 @@
      <button v-if="!ctxMenu.file?.isRegistered" class="ms-ctx-item" @click="ctxRegister(ctxMenu.file)">📥 註冊此檔案</button>
      <button v-if="ctxMenu.file?.isRegistered && ctxMenu.file?.status !== 'completed'" class="ms-ctx-item" @click="ctxProcess(ctxMenu.file)">⚙️ 處理此檔案</button>
      <button v-if="ctxMenu.file?.isRegistered && ctxMenu.file?.status === 'completed'" class="ms-ctx-item" @click="ctxProcess(ctxMenu.file)">⚙️ 重新處理</button>
+      <button v-if="ctxMenu.file?.isRegistered && !ctxMenu.file?.ingested" class="ms-ctx-item" @click="ctxIngest(ctxMenu.file)">📦 觸發入庫</button>
+      <button v-if="ctxMenu.file?.isRegistered && ctxMenu.file?.ingested" class="ms-ctx-item" @click="ctxCheckout(ctxMenu.file)">📤 出庫</button>
      <button v-if="ctxMenu.file?.isRegistered" class="ms-ctx-item ms-ctx-danger" @click="ctxUnregister(ctxMenu.file)">🗑️ 移除註冊</button>
      <button v-if="isVideo(ctxMenu.file) && ctxMenu.file?.isRegistered" class="ms-ctx-item" @click="playVideo(ctxMenu.file); closeContextMenu()">▶ 播放影片</button>
      <template v-if="ctxMenu.file?.isRegistered">
        <hr class="ms-ctx-divider">
        <div class="ms-ctx-procs">
          <div class="ms-ctx-procs-title">處理器選擇</div>
-          <label class="ms-fm-check-label"><input type="checkbox" v-model="procAsr"> ASR</label>
-          <label class="ms-fm-check-label"><input type="checkbox" v-model="procYolo"> YOLO</label>
-          <label class="ms-fm-check-label"><input type="checkbox" v-model="procFace"> Face</label>
-          <label class="ms-fm-check-label"><input type="checkbox" v-model="procOcr"> OCR</label>
-          <label class="ms-fm-check-label"><input type="checkbox" v-model="procPose"> Pose</label>
-          <label class="ms-fm-check-label"><input type="checkbox" v-model="procCut"> CUT</label>
+          <label class="ms-fm-check-label" :class="procStatusClass('asr')"><input type="checkbox" v-model="procAsr"> ASR <span class="ms-proc-count">{{ procCountLabel('asr', 'segment') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('asrx')"><input type="checkbox" v-model="procAsrx"> ASRX <span class="ms-proc-count">{{ procCountLabel('asrx', 'segment') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('yolo')"><input type="checkbox" v-model="procYolo"> YOLO <span class="ms-proc-count">{{ procCountLabel('yolo', 'frame') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('face')"><input type="checkbox" v-model="procFace"> Face <span class="ms-proc-count">{{ procCountLabel('face', 'frame') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('ocr')"><input type="checkbox" v-model="procOcr"> OCR <span class="ms-proc-count">{{ procCountLabel('ocr', 'frame') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('pose')"><input type="checkbox" v-model="procPose"> Pose <span class="ms-proc-count">{{ procCountLabel('pose', 'frame') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('appearance')"><input type="checkbox" v-model="procAppearance"> Appearance <span class="ms-proc-count">{{ procCountLabel('appearance', 'frame') }}</span></label>
+          <label class="ms-fm-check-label" :class="procStatusClass('cut')"><input type="checkbox" v-model="procCut"> CUT <span class="ms-proc-count">{{ procCountLabel('cut', 'frame') }}</span></label>
        </div>
      </template>
    </div>
@@ -121,7 +141,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { apiCall } from '@/api'
-import { ensureFiles, filesCache, filesLoaded, thumbnailsCache, loadThumbnail, invalidateFiles } from '@/store'
+import { ensureFiles, filesCache, filesLoaded, thumbnailsCache, loadThumbnail, invalidateFiles, processorCountsCache, loadProcessorCounts, getProcessorCounts, ProcessorOutputInfo, pollProgress, stopPolling, getProgress, getFileStatus, refreshFileStatus, refreshAllFilesStatus, fileProgressCache, fileStatusCache } from '@/store'
 import VideoPlayer from '../components/VideoPlayer.vue'

 const files = computed(() => filesCache.value)
@@ -142,6 +162,8 @@ const filterUnregistered = ref(false)
 const filterRegistered = ref(true)
 const filterPending = ref(false)
 const filterCompleted = ref(false)
+const filterNotIngested = ref(false)
+const filterIngested = ref(false)
 const onlyVideos = ref(false)
 const onlyPhotos = ref(false)
 const sizeMin = ref<number | null>(null)
@@ -166,8 +188,10 @@ const sortedFilteredFiles = computed(() => {
  // Checkbox filters
  if (filterUnregistered.value && !filterRegistered.value) result = result.filter((f: any) => !f.isRegistered)
  else if (filterRegistered.value && !filterUnregistered.value) result = result.filter((f: any) => f.isRegistered)
-  if (filterPending.value) result = result.filter((f: any) => f.status === 'registered')
+  if (filterPending.value) result = result.filter((f: any) => f.status === 'registered' || f.status === 'pending')
  if (filterCompleted.value) result = result.filter((f: any) => f.status === 'completed')
+  if (filterNotIngested.value && !filterIngested.value) result = result.filter((f: any) => f.isRegistered && !f.ingested)
+  else if (filterIngested.value && !filterNotIngested.value) result = result.filter((f: any) => f.ingested)

  if (onlyVideos.value) result = result.filter(isVideo)
  if (onlyPhotos.value) result = result.filter(isPhoto)
@@ -203,6 +227,14 @@ const sortedFilteredFiles = computed(() => {
  return result
 })

+const registeredCount = computed(() => files.value.filter((f: any) => f.isRegistered).length)
+const unregisteredCount = computed(() => files.value.filter((f: any) => !f.isRegistered).length)
+const pendingCount = computed(() => files.value.filter((f: any) => f.status === 'pending' || f.status === 'registered').length)
+const processingCount = computed(() => files.value.filter((f: any) => f.status === 'processing').length)
+const completedCount = computed(() => files.value.filter((f: any) => f.status === 'completed').length)
+const ingestedCount = computed(() => files.value.filter((f: any) => f.ingested).length)
+const notIngestedCount = computed(() => files.value.filter((f: any) => f.isRegistered && !f.ingested).length)
+
 onMounted(() => { loadFiles(); document.addEventListener('click', docClickClose) })
 onUnmounted(() => { document.removeEventListener('click', docClickClose) })

@@ -215,10 +247,33 @@ async function loadFiles() {
  statusText.value = 'Loading...'
  invalidateFiles()
  await ensureFiles()
-  statusText.value = `${files.value.length} files`
+  statusText.value = `${files.value.length} 個檔案`
  for (const f of files.value.slice(0, 6)) {
    if ((isPhoto(f) || isVideo(f)) && f.file_uuid) loadThumbnail(f.file_uuid)
  }
+  const registeredFiles = files.value.filter((f: any) => f.isRegistered && f.file_uuid && f.status !== 'completed')
+  for (const f of registeredFiles) {
+    try {
+      const progress: any = await apiCall('get_progress', { fileUuid: f.file_uuid })
+      if (progress && progress.overall_progress < 100 && progress.processors?.some((p: any) => p.status === 'running')) {
+        f.status = 'processing'
+        fileProgressCache.value[f.file_uuid] = {
+          file_uuid: f.file_uuid,
+          overall_progress: progress.overall_progress,
+          processors: progress.processors,
+        }
+        pollProgress(f.file_uuid)
+      }
+    } catch (e) {
+      console.error('check progress failed:', f.file_uuid, e)
+    }
+  }
+}
+
+async function refreshAllStatus() {
+  statusText.value = 'Refreshing status...'
+  await refreshAllFilesStatus()
+  statusText.value = `${files.value.length} 個檔案`
 }

 function isVideo(f: any) {
@@ -265,13 +320,17 @@ function playVideo(f: any) {

 const registering = ref(false)
 const processing = ref(false)
+const ingesting = ref(false)
+const checkouting = ref(false)
 const unregistering = ref(false)
 const actionMsg = ref('')
 const procAsr = ref(true)
+const procAsrx = ref(true)
 const procYolo = ref(true)
 const procFace = ref(true)
-const procOcr = ref(false)
-const procPose = ref(false)
+const procOcr = ref(true)
+const procPose = ref(true)
+const procAppearance = ref(true)
 const procCut = ref(true)

 const ctxMenu = ref<{ show: boolean; x: number; y: number; file: any }>({ show: false, x: 0, y: 0, file: null })
@@ -279,24 +338,90 @@ const ctxMenu = ref<{ show: boolean; x: number; y: number; file: any }>({ show:
 function selectedProcessors(): string[] {
  const procs: string[] = []
  if (procAsr.value) procs.push('asr')
+  if (procAsrx.value) procs.push('asrx')
  if (procYolo.value) procs.push('yolo')
  if (procFace.value) procs.push('face')
  if (procOcr.value) procs.push('ocr')
  if (procPose.value) procs.push('pose')
+  if (procAppearance.value) procs.push('appearance')
  if (procCut.value) procs.push('cut')
  return procs
 }

+function procStatusClass(proc: string): string {
+  const fileUuid = ctxMenu.value.file?.file_uuid
+  if (!fileUuid) return ''
+  const info = getProcessorCounts(fileUuid)[proc]
+  if (info?.has_json) return 'ms-proc-done'
+  return ''
+}
+
+function procCountLabel(proc: string, type: 'frame' | 'segment' | 'chunk'): string {
+  const fileUuid = ctxMenu.value.file?.file_uuid
+  if (!fileUuid) return ''
+  const info = getProcessorCounts(fileUuid)[proc]
+  if (!info?.has_json) return ''
+  if (type === 'frame' && info.frame_count != null) return `(${info.frame_count})`
+  if (type === 'segment' && info.segment_count != null) return `(${info.segment_count})`
+  if (type === 'chunk' && info.chunk_count != null) return `(${info.chunk_count})`
+  return '(✓)'
+}
+
 function statusLabel(f: any): string {
  if (!f) return ''
  if (f.status === 'completed') return '已完成'
-  if (f.status === 'registered') return '已註冊・待處理'
  if (f.status === 'processing') return '處理中'
+  if (f.status === 'failed') return '處理失敗'
+  if (f.status === 'pending') return '待處理'
+  if (f.status === 'registered') return '待處理'
  if (f.isRegistered) return '已註冊'
  return '未註冊'
 }

-function openContextMenu(e: MouseEvent, f: any) {
+function statusBadgeClass(f: any): string {
+  if (f.status === 'processing') return 'ms-badge-proc'
+  if (f.status === 'completed') return 'ms-badge-done'
+  if (f.status === 'failed') return 'ms-badge-fail'
+  if (f.status === 'pending' || f.status === 'registered') return 'ms-badge-warn'
+  return 'ms-badge-off'
+}
+
+function statusBadgeIcon(f: any): string {
+  if (f.status === 'processing') return '⏳'
+  if (f.status === 'completed') return '✅'
+  if (f.status === 'failed') return '❌'
+  if (f.status === 'pending' || f.status === 'registered') return '⏸️'
+  return '⏺️'
+}
+
+function statusBadgeLabel(f: any): string {
+  if (!f) return ''
+  if (f.status === 'completed') return '已處理'
+  if (f.status === 'processing') return '處理中'
+  if (f.status === 'failed') return '處理失敗'
+  if (f.status === 'pending' || f.status === 'registered') return '待處理'
+  return '—'
+}
+
+function ingestedBadgeClass(f: any): string {
+  if (f.ingested) return 'ms-badge-done'
+  if (f.isRegistered) return 'ms-badge-warn'
+  return 'ms-badge-off'
+}
+
+function ingestedBadgeIcon(f: any): string {
+  if (f.ingested) return '🗄️'
+  if (f.isRegistered) return '📦'
+  return '📦'
+}
+
+function ingestedBadgeLabel(f: any): string {
+  if (f.ingested) return '已入庫'
+  if (f.isRegistered) return '未入庫'
+  return '—'
+}
+
+async function openContextMenu(e: MouseEvent, f: any) {
  e.preventDefault()
  e.stopPropagation()
  ctxMenu.value = {
@@ -305,6 +430,9 @@ function openContextMenu(e: MouseEvent, f: any) {
    y: Math.min(e.clientY, window.innerHeight - 320),
    file: f
  }
+  if (f.isRegistered && f.file_uuid) {
+    await loadProcessorCounts(f.file_uuid, true)
+  }
 }

 function closeContextMenu() {
@@ -354,6 +482,9 @@ async function ctxProcess(f: any) {
    const result: any = await apiCall('process_file', { fileUuid: f.file_uuid, processors: procs })
    if (result.success) {
      actionMsg.value = `處理已觸發：${f.file_name}`
+      f.status = 'processing'
+      fileStatusCache.value[f.file_uuid] = 'processing'
+      pollProgress(f.file_uuid)
    } else {
      actionMsg.value = `處理失敗：${result.message}`
    }
@@ -362,8 +493,6 @@ async function ctxProcess(f: any) {
    console.error('[process]', e)
  }
  processing.value = false
-  await loadFiles()
-  setTimeout(() => { actionMsg.value = '' }, 8000)
 }

 async function ctxUnregister(f: any) {
@@ -388,12 +517,58 @@ async function ctxUnregister(f: any) {
  setTimeout(() => { actionMsg.value = '' }, 8000)
 }

+async function ctxIngest(f: any) {
+  closeContextMenu()
+  if (ingesting.value) return
+  if (!f.isRegistered) { actionMsg.value = '檔案尚未註冊'; return }
+  ingesting.value = true
+  actionMsg.value = '入庫中...'
+  try {
+    const result: any = await apiCall('ingest_file', { fileUuid: f.file_uuid })
+    if (result.success) {
+      actionMsg.value = `入庫成功：${f.file_name}`
+    } else {
+      actionMsg.value = `入庫失敗：${result.message}`
+    }
+  } catch (e: any) {
+    actionMsg.value = `入庫錯誤：${e}`
+    console.error('[ingest]', e)
+  }
+  ingesting.value = false
+  await loadFiles()
+  setTimeout(() => { actionMsg.value = '' }, 8000)
+}
+
+async function ctxCheckout(f: any) {
+  closeContextMenu()
+  if (checkouting.value) return
+  if (!f.isRegistered) { actionMsg.value = '檔案尚未註冊'; return }
+  checkouting.value = true
+  actionMsg.value = '出庫中...'
+  try {
+    const result: any = await apiCall('checkout_file', { fileUuid: f.file_uuid })
+    if (result.success) {
+      actionMsg.value = `出庫成功：${f.file_name}`
+    } else {
+      actionMsg.value = `出庫失敗：${result.message}`
+    }
+  } catch (e: any) {
+    actionMsg.value = `出庫錯誤：${e}`
+    console.error('[checkout]', e)
+  }
+  checkouting.value = false
+  await loadFiles()
+  setTimeout(() => { actionMsg.value = '' }, 8000)
+}
+
 function resetFilters() {
  sortBy.value = 'time_desc'
  filterUnregistered.value = false
  filterRegistered.value = false
  filterPending.value = false
  filterCompleted.value = false
+  filterNotIngested.value = false
+  filterIngested.value = false
  onlyVideos.value = false
  onlyPhotos.value = false
  sizeMin.value = null
@@ -439,6 +614,12 @@ function resetFilters() {
 .ms-ctx-danger:hover { background: #fce8e6 !important; }
 .ms-ctx-procs { padding: 6px 10px 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; }
 .ms-ctx-procs-title { width: 100%; font-size: 11px; color: #7a7f87; font-weight: 600; margin-bottom: 2px; }
+.ms-proc-done { color: #059669; }
+.ms-proc-done .ms-proc-count { color: #059669; font-weight: 600; }
+.ms-proc-count { margin-left: 4px; font-size: 11px; color: #8a919c; }
+.ms-fm-progress { position: relative; height: 20px; background: #e8eaed; border-radius: 4px; margin-top: 4px; overflow: hidden; }
+.ms-fm-progress-bar { height: 100%; background: linear-gradient(90deg, #1a73e8, #4285f4); border-radius: 4px; transition: width 0.3s; }
+.ms-fm-progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; font-weight: 600; color: #202124; }
 .ms-fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
 .ms-fm-card { border-radius: 14px; cursor: pointer; position: relative; }
 .ms-fm-thumb-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #eef2f7; aspect-ratio: 4 / 3; border: 1px solid #e6ebf1; box-shadow: 0 0 0 2px #d9dde3 inset; }
@@ -457,4 +638,20 @@ function resetFilters() {
 .ms-fm-name { font-size: 12px; color: #42474f; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 .ms-fm-play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,.58); color: #fff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 8; }
 .ms-fm-edit-input { width: 100%; height: 32px; border: 1px solid #e1e5ea; border-radius: 10px; padding: 0 9px; font-size: 12px; color: #42474f; background: #fff; outline: none; font-family: inherit; }
+
+/* Three-axis badges */
+.ms-fm-badges { position: absolute; bottom: 4px; right: 4px; display: flex; flex-direction: column; gap: 2px; z-index: 9; }
+.ms-fm-badge-row { font-size: 9px; line-height: 1.2; padding: 1px 5px; border-radius: 3px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; }
+.ms-badge-ok { background: #1a73e8; color: #fff; }
+.ms-badge-off { background: rgba(0,0,0,.48); color: #ccc; }
+.ms-badge-proc { background: #1a73e8; color: #fff; animation: badge-pulse 1.2s ease-in-out infinite; }
+.ms-badge-done { background: #1e8e3e; color: #fff; }
+.ms-badge-warn { background: #f9ab00; color: #202124; }
+.ms-badge-fail { background: #d93025; color: #fff; }
+@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
+
+/* Three-axis status bar */
+.ms-fm-axis-bar { font-size: 12px; color: #5f6368; margin: 2px 0 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.ms-fm-axis-item strong { color: #202124; }
+.ms-fm-axis-sep { color: #dadce0; }
 </style>
--- a/src/views/PeopleView.vue
+++ b/src/views/PeopleView.vue
@@ -191,6 +191,7 @@
    <div v-if="ctxMenu.show" class="ms-ctx-menu" :style="{ left: ctxMenu.x + 'px', top: ctxMenu.y + 'px', display: 'block' }">
      <button class="ms-ctx-item" @click="ctxAction('star')">{{ ctxMenu.person?.starred ? '☆ 取消重要人物' : '★ 標為重要人物' }}</button>
      <hr class="ms-ctx-menu-divider">
+      <button class="ms-ctx-item" @click="ctxAction('detail')">📋 詳情</button>
      <button class="ms-ctx-item" @click="ctxAction('confirm')" v-if="ctxMenu.person?.status !== 'confirmed'">✓ 確認人物</button>
      <button class="ms-ctx-item" @click="ctxAction('pending')" v-if="ctxMenu.person?.status !== 'pending'">待定</button>
      <button class="ms-ctx-item" @click="ctxAction('rename')">✎ 編輯名稱</button>
@@ -214,6 +215,7 @@

    <!-- Face candidate context menu -->
    <div v-if="faceCtxMenu.show" class="ms-ctx-menu" :style="{ left: faceCtxMenu.x + 'px', top: faceCtxMenu.y + 'px', display: 'block' }">
+      <button class="ms-ctx-item" @click="faceCtxAction('detail')">📋 詳情</button>
      <button class="ms-ctx-item" @click="faceCtxAction('assign')">⇄ 指派給現有人物</button>
      <button class="ms-ctx-item ms-ctx-danger" @click="faceCtxAction('skip')">✕ 略過此人臉</button>
    </div>
@@ -256,6 +258,62 @@
      </div>
    </div>

+    <!-- Face detail modal -->
+    <div v-if="faceDetailModal.show" class="ms-modal-overlay show" @click.self="faceDetailModal.show = false">
+      <div class="ms-modal ms-modal-face-detail">
+        <button class="ms-fm-icon-btn close-btn" @click="faceDetailModal.show = false">×</button>
+        <div class="ms-face-detail-header">
+          <div class="ms-face-detail-thumb">
+            <img v-if="candidateThumbs[faceDetailModal.candidate?.id]" :src="candidateThumbs[faceDetailModal.candidate?.id]" alt="">
+            <div v-else class="face-placeholder">{{ Math.round(faceDetailModal.candidate?.confidence * 100 || 0) }}%</div>
+          </div>
+          <div class="ms-face-detail-info">
+            <div class="ms-face-detail-title">待定人臉詳情</div>
+            <div class="ms-face-detail-row">
+              <span class="ms-face-detail-label">檔案：</span>
+              <span class="ms-face-detail-value">{{ faceDetailModal.candidate?.file_uuid?.slice(0, 12) }}...</span>
+            </div>
+            <div class="ms-face-detail-row">
+              <span class="ms-face-detail-label">帧號：</span>
+              <span class="ms-face-detail-value">#{{ faceDetailModal.candidate?.frame_number }}</span>
+            </div>
+            <div class="ms-face-detail-row">
+              <span class="ms-face-detail-label">置信度：</span>
+              <span class="ms-face-detail-value">{{ Math.round(faceDetailModal.candidate?.confidence * 100) }}%</span>
+            </div>
+            <div class="ms-face-detail-row">
+              <span class="ms-face-detail-label">Face ID：</span>
+              <span class="ms-face-detail-value">{{ faceDetailModal.candidate?.face_id || faceDetailModal.candidate?.id }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="ms-face-detail-video">
+          <button class="ms-fm-btn ms-fm-btn-primary" @click="playFaceDetailVideo" :disabled="!faceDetailModal.candidate?.file_uuid">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="margin-right:6px;">
+              <polygon points="5 3 19 12 5 21 5 3" fill="currentColor"></polygon>
+            </svg>
+            播放影片片段
+          </button>
+        </div>
+        <hr class="ms-face-detail-divider">
+        <div class="ms-face-detail-new-identity">
+          <div class="ms-face-detail-new-title">新增為新人物</div>
+          <div class="ms-face-detail-new-input-row">
+            <input v-model="faceDetailModal.newIdentityName" class="ms-ppl-edit-input" placeholder="輸入人物名稱...">
+            <button class="ms-fm-btn ms-fm-btn-primary" @click="createNewIdentityFromFace" :disabled="!faceDetailModal.newIdentityName.trim()">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="margin-right:4px;">
+                <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
+              </svg>
+              新增
+            </button>
+          </div>
+        </div>
+        <div class="ms-face-detail-footer">
+          <button class="ms-fm-btn" @click="faceDetailModal.show = false">關閉</button>
+        </div>
+      </div>
+    </div>
+
    <VideoPlayer v-if="playing" simple :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :title="currentVideo.title" @close="playing = false" />
  </div>
 </template>
@@ -286,11 +344,13 @@ const mergeTarget = ref('')
 const candidates = ref<any[]>([])
 const candidateThumbs = faceThumbsCache
 const faceCandidates = faceCandidatesCache
+const traceCounts = ref<Record<string, number>>({})
 const ctxMenu = ref({ show: false, x: 0, y: 0, person: null as any })
 const faceCtxMenu = ref({ show: false, x: 0, y: 0, candidate: null as any })
 const assignModal = ref({ show: false, candidate: null as any })
 const assignSearchQuery = ref('')
 const assignSelected = ref<any>(null)
+const faceDetailModal = ref({ show: false, candidate: null as any, newIdentityName: '' })

 // Section visibility toggles
 const showPending = ref(true)
@@ -360,7 +420,13 @@ const pendingPeople = computed(() => {
  let base = people.value.filter((p: any) => p.status === 'pending')
  if (starFilter.value) base = base.filter((p: any) => p.starred)
  if (pendingSearch.value) base = base.filter((p: any) => p.name.toLowerCase().includes(pendingSearch.value.toLowerCase()))
-  return sortPeople(base, pendingSort.value)
+  // Sort by trace count (descending) - more traces = more suggestions
+  const sorted = [...base].sort((a: any, b: any) => {
+    const aCount = traceCounts.value[a.identity_uuid] || 0
+    const bCount = traceCounts.value[b.identity_uuid] || 0
+    return bCount - aCount
+  })
+  return sorted
 })

 const skippedPeople = computed(() => {
@@ -378,16 +444,28 @@ const assignSearchResults = computed(() => {
 })

 async function refresh() {
-  ensurePeople().then(() => {
-    for (const p of people.value.slice(0, 30)) {
-      if (p.identity_uuid) loadProfile(p.identity_uuid)
+  await ensurePeople()
+  for (const p of people.value.slice(0, 30)) {
+    if (p.identity_uuid) loadProfile(p.identity_uuid)
+  }
+  await ensureFaceCandidates()
+  for (const c of faceCandidates.value.slice(0, 20)) {
+    if (c.file_uuid) loadFaceThumb(String(c.id), c.file_uuid, c.frame_number || 0, c.bbox)
+  }
+  // Load trace counts for pending identities
+  const pending = people.value.filter((p: any) => p.status === 'pending')
+  const counts: Record<string, number> = {}
+  for (const p of pending) {
+    if (p.identity_uuid) {
+      try {
+        const traces: any = await apiCall('get_traces', { uuid: p.identity_uuid, perPage: 1 })
+        counts[p.identity_uuid] = traces?.total || 0
+      } catch (e) {
+        counts[p.identity_uuid] = 0
+      }
    }
-  })
-  ensureFaceCandidates().then(() => {
-    for (const c of faceCandidates.value.slice(0, 20)) {
-      if (c.file_uuid) loadFaceThumb(String(c.id), c.file_uuid, c.frame_number || 0, c.bbox)
-    }
-  })
+  }
+  traceCounts.value = counts
 }

 onMounted(async () => {
@@ -561,6 +639,8 @@ async function ctxAction(action: string, extra?: any) {
      if (idx >= 0) people.value[idx].status = 'pending'
      refreshUndoCounts(uuid)
    }).catch(e => console.error('Pending failed:', e))
+  } else if (action === 'detail') {
+    router.push(`/people/${uuid}`)
  } else if (action === 'rename' || action === 'merge') {
    selectPerson(p)
  } else if (action === 'undo') {
@@ -601,13 +681,79 @@ function faceCtxAction(action: string) {
  const c = faceCtxMenu.value.candidate
  if (!c) return
  faceCtxMenu.value.show = false
-  if (action === 'assign') {
+  if (action === 'detail') {
+    faceDetailModal.value = { show: true, candidate: c, newIdentityName: '' }
+    loadCandidateThumb(c)
+  } else if (action === 'assign') {
    openAssignModal(c)
  } else if (action === 'skip') {
    faceCandidates.value = faceCandidates.value.filter((fc: any) => fc.id !== c.id)
  }
 }

+async function playFaceDetailVideo() {
+  const c = faceDetailModal.value.candidate
+  if (!c || !c.file_uuid) return
+  const frame = c.frame_number || 0
+  try {
+    const fileInfo: any = await apiCall('get_file_info', { uuid: c.file_uuid })
+    const fps = fileInfo?.fps || 30
+    const frameTime = frame / fps
+    const startTime = Math.max(0, frameTime - 5)
+    const endTime = frameTime + 5
+    currentVideo.value = {
+      fileUuid: c.file_uuid,
+      startTime,
+      endTime,
+      title: `Face #${frame} (${Math.round(frameTime)}s)`
+    }
+    playing.value = true
+  } catch (e) {
+    console.error('Failed to get file info:', e)
+    const frameTime = frame / 30
+    currentVideo.value = {
+      fileUuid: c.file_uuid,
+      startTime: Math.max(0, frameTime - 5),
+      endTime: frameTime + 5,
+      title: `Face #${frame}`
+    }
+    playing.value = true
+  }
+}
+
+async function createNewIdentityFromFace() {
+  const c = faceDetailModal.value.candidate
+  const name = faceDetailModal.value.newIdentityName.trim()
+  console.log('[createNewIdentityFromFace] candidate:', c, 'name:', name)
+  if (!c || !name) {
+    console.log('[createNewIdentityFromFace] missing candidate or name')
+    return
+  }
+  try {
+    console.log('[createNewIdentityFromFace] calling API with fileUuid:', c.file_uuid)
+    const result: any = await apiCall('create_identity_from_face', {
+      name,
+      fileUuid: c.file_uuid
+    })
+    console.log('[createNewIdentityFromFace] result:', result)
+    if (result?.identity_uuid) {
+      faceDetailModal.value.show = false
+      faceCandidates.value = faceCandidates.value.filter((fc: any) => fc.id !== c.id)
+      invalidatePeople()
+      await ensurePeople()
+      // Remove hyphens from uuid for consistent format
+      const cleanUuid = result.identity_uuid.replace(/-/g, '')
+      router.push(`/people/${cleanUuid}`)
+    } else {
+      console.log('[createNewIdentityFromFace] no identity_uuid in result')
+      alert('新增人物失敗：API 未返回 identity_uuid')
+    }
+  } catch (e) {
+    console.error('[createNewIdentityFromFace] error:', e)
+    alert('新增人物失敗：' + String(e))
+  }
+}
+
 function openAssignModal(c: any) {
  assignModal.value = { show: true, candidate: c }
  assignSearchQuery.value = ''
@@ -750,4 +896,22 @@ h1 { margin: 0; }
 .ms-fm-btn-primary { background: #202124; color: #fff; border-color: #202124; }
 .ms-fm-btn-primary:hover { background: #3c4043; }
 .ms-fm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Face detail modal */
+.ms-modal-face-detail { max-width: 420px; width: 92%; padding: 24px 28px; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.2); position: relative; }
+.ms-face-detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
+.ms-face-detail-thumb { width: 100px; height: 100px; border-radius: 14px; background: #e8eaed; flex-shrink: 0; overflow: hidden; }
+.ms-face-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.ms-face-detail-info { flex: 1; min-width: 0; }
+.ms-face-detail-title { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 16px; font-weight: 600; color: #202124; margin: 0 0 12px; }
+.ms-face-detail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.ms-face-detail-label { font-size: 12px; color: #5f6368; min-width: 60px; }
+.ms-face-detail-value { font-size: 12px; color: #202124; }
+.ms-face-detail-video { margin-bottom: 16px; }
+.ms-face-detail-divider { height: 1px; background: #e8eaed; margin: 16px 0; }
+.ms-face-detail-new-identity { margin-top: 16px; }
+.ms-face-detail-new-title { font-size: 14px; font-weight: 500; color: #202124; margin-bottom: 12px; }
+.ms-face-detail-new-input-row { display: flex; gap: 8px; }
+.ms-face-detail-new-input-row .ms-ppl-edit-input { flex: 1; }
+.ms-face-detail-footer { display: flex; justify-content: flex-end; margin-top: 20px; }
 </style>
--- a/src/views/PersonDetailView.vue
+++ b/src/views/PersonDetailView.vue
@@ -103,57 +103,69 @@
        </div>
      </div>

+      <!-- Trace strip (face_traces from get_traces) -->
      <div class="ms-ppl-strip-wrap" :class="{ 'ms-ppl-edit-mode': isEditing }">
        <button class="ms-ppl-strip-add-btn" @click="showCandidates = true" title="加入相同人物">＋</button>
+        <button class="ms-ppl-strip-arrow" :disabled="faceStripPage === 1" @click="prevFacePage">‹</button>
        <div class="ms-ppl-face-strip">
-          <div v-if="loadingFaces" style="padding:10px;color:#999;font-size:12px;">Loading faces...</div>
-          <div v-else-if="faces.length === 0" style="padding:10px;color:#999;font-size:12px;">No faces found</div>
-          <div v-for="f in faces.slice(0, showAllFaces ? faces.length : 30)" :key="f.id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: selectedFace?.id === f.id }" @click="selectFace(f)" @contextmenu.prevent="showFaceCtxMenu($event, f)">
+          <div v-if="loadingTraces" style="padding:10px;color:#999;font-size:12px;">Loading traces...</div>
+          <div v-else-if="allTraces.length === 0" style="padding:10px;color:#999;font-size:12px;">No traces found</div>
+          <div v-for="(t, i) in paginatedTraces" :key="t.trace_id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: selectedTrace?.trace_id === t.trace_id }" @click="selectTrace(t)" @contextmenu.prevent="showTraceCtxMenu($event, t)">
            <div class="ms-ppl-strip-face-img">
-              <img v-if="faceThumbs[f.id]" :src="faceThumbs[f.id]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
-              <div v-else style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#6366f1;font-size:14px;font-weight:600;border-radius:8px;">{{ Math.round(f.confidence * 100) }}%</div>
+              <img v-if="traceThumbs[thumbKey(t.file_uuid, t.first_frame)]" :src="traceThumbs[thumbKey(t.file_uuid, t.first_frame)]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;border-radius:8px;">
+              <div v-else style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#eef2ff;color:#6366f1;font-size:10px;font-weight:600;border-radius:8px;">T{{ t.trace_id }}</div>
            </div>
-            <button v-if="isEditing" class="ms-ppl-strip-remove-btn" @click="unbindFace(f)">×</button>
+            <div class="ms-ppl-strip-trace-label">T{{ t.trace_id }} {{ t.face_id ? 'F' + t.face_id.slice(-4) : '' }}</div>
+            <button v-if="isEditing" class="ms-ppl-strip-remove-btn" @click="unbindFace(t)">×</button>
          </div>
        </div>
-        <button v-if="faces.length > 30" class="ms-ppl-strip-arrow" @click="showAllFaces = !showAllFaces">›</button>
+        <button class="ms-ppl-strip-arrow" :disabled="faceStripPage >= faceStripTotalPages" @click="nextFacePage">›</button>
+        <span v-if="faceStripTotalPages > 1" class="ms-ppl-strip-page">{{ faceStripPage }}/{{ faceStripTotalPages }}</span>
      </div>

-      <!-- Face detail card -->
-      <div v-if="selectedFace" class="ms-ppl-face-card-detail">
-        <button class="ms-ppl-face-card-close" @click="selectedFace = null">×</button>
+      <!-- Trace detail card -->
+      <div v-if="selectedTrace" class="ms-ppl-face-card-detail">
+        <button class="ms-ppl-face-card-close" @click="selectedTrace = null">×</button>
        <div class="ms-ppl-face-card-img-wrap">
-          <img v-if="faceThumbs[selectedFace.id]" :src="faceThumbs[selectedFace.id]" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:12px;">
+          <img v-if="traceThumbs[thumbKey(selectedTrace.file_uuid, selectedTrace.first_frame)]" :src="traceThumbs[thumbKey(selectedTrace.file_uuid, selectedTrace.first_frame)]" alt="" style="width:100%;height:100%;object-fit:cover;border-radius:12px;">
          <div v-else class="face-placeholder">?</div>
        </div>
        <div class="ms-ppl-face-card-info">
-          <div class="ms-ppl-face-card-file">{{ (selectedFace.file_uuid || '').slice(0, 12) }}...</div>
-          <div class="ms-ppl-face-card-frame">Frame #{{ selectedFace.frame_number }}</div>
-          <div v-if="selectedFace.confidence" class="ms-ppl-face-card-conf">Confidence: {{ (selectedFace.confidence * 100).toFixed(1) }}%</div>
+          <div class="ms-ppl-face-card-file">trace_id: {{ selectedTrace.trace_id }}</div>
+          <div class="ms-ppl-face-card-frame">face_id: {{ selectedTrace.face_id || '—' }}</div>
+          <div class="ms-ppl-face-card-time">
+            {{ (selectedTrace.first_sec || 0).toFixed(1) }}s ~ {{ (selectedTrace.last_sec || 0).toFixed(1) }}s
+            <span class="ms-ppl-face-card-dur">({{ traceDuration(selectedTrace).toFixed(1) }}s)</span>
+          </div>
+          <div class="ms-ppl-face-card-fps" v-if="traceFps(selectedTrace)">
+            {{ traceFps(selectedTrace) }} fps · {{ selectedTrace.last_frame - selectedTrace.first_frame }} frames
+          </div>
+          <div class="ms-ppl-face-card-conf">#{{ selectedTrace.first_frame }}–#{{ selectedTrace.last_frame }} · {{ selectedTrace.file_uuid?.slice(0, 8) }}...</div>
          <div class="ms-ppl-face-card-actions">
-            <button class="ms-fm-btn" @click="playFaceTrace(selectedFace)">▶ 播放片段</button>
-            <button v-if="isEditing" class="ms-fm-btn ms-fm-btn-danger" @click="unbindFace(selectedFace); selectedFace = null">✕ 解綁</button>
+            <button class="ms-fm-btn" @click="playTrace(selectedTrace)">▶ 播放</button>
+            <button v-if="isEditing && selectedTrace.face_id" class="ms-fm-btn ms-fm-btn-danger" @click="unbindFace(selectedTrace); selectedTrace = null">✕ 解綁</button>
          </div>
        </div>
      </div>

-      <!-- Segment card -->
-      <div v-if="mergedSegments.length" class="ms-ppl-media-item segment-card" @click="playMerged(mergedSegments[0])">
+      <!-- Single segment card (entry point to player with all traces) -->
+      <div v-if="loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">Loading segments...</div>
+      <div v-else-if="loadingMoreTraces" class="ms-ppl-media-label" style="margin-bottom:20px;color:#9aa0a6;">Loading more segments...</div>
+      <div v-if="allSegCard" class="ms-ppl-media-item segment-card" @click="playAllSegments">
        <div class="ms-ppl-media-thumb">
-          <img v-if="thumbs[mergedSegments[0].thumbKey]" :src="thumbs[mergedSegments[0].thumbKey]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
+          <img v-if="thumbs[allSegCard.thumbKey]" :src="thumbs[allSegCard.thumbKey]" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;">
          <div class="ms-thumb-play-circle">
            <svg width="20" height="20" viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" fill="white"/></svg>
          </div>
-          <span class="ms-ppl-media-dur">{{ (mergedSegments[0].end - mergedSegments[0].start).toFixed(1) }}s</span>
-          <span v-if="mergedSegments[0].avg_confidence" class="ms-ppl-media-badge-conf">{{ (mergedSegments[0].avg_confidence * 100).toFixed(0) }}%</span>
+          <span class="ms-ppl-media-dur">{{ allSegCard.duration.toFixed(1) }}s</span>
+          <span v-if="allSegCard.avg_confidence" class="ms-ppl-media-badge-conf">{{ (allSegCard.avg_confidence * 100).toFixed(0) }}%</span>
        </div>
        <div class="ms-ppl-media-info">
-          <div class="ms-ppl-media-title">{{ mergedSegments[0].count > 1 ? 'Merged ' + mergedSegments[0].count + ' segments' : 'Segment' }} · {{ mergedSegments[0].file_uuid.slice(0,8) }}...</div>
-          <div class="ms-ppl-media-sub">#{{ mergedSegments[0].start_frame }} — #{{ mergedSegments[0].end_frame }} · {{ formatTime(mergedSegments[0].start) }}</div>
+          <div class="ms-ppl-media-title">{{ allSegCard.count }} 個片段 · {{ allTraces.length }} 個追蹤</div>
+          <div class="ms-ppl-media-sub">所有片段 · {{ formatTime(allSegCard.start) }}</div>
        </div>
      </div>
-      <div v-if="loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">Loading segments...</div>
-      <div v-else-if="!mergedSegments.length" class="ms-ppl-media-label" style="margin-bottom:20px;">No trace segments available for this person</div>
+      <div v-else-if="!loadingTraces" class="ms-ppl-media-label" style="margin-bottom:20px;">No trace segments available for this person</div>

      <!-- Tabs -->
      <div v-show="activeTab === 'actions'">
@@ -234,21 +246,21 @@
      </div>
    </div>

-    <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :all-traces="allTraces" :initial-trace-idx="currentVideo.traceIdx" :title="currentVideo.title" @close="playing = false" />
+    <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-time="currentVideo.startTime" :end-time="currentVideo.endTime" :all-traces="allTraces" :merged-segments="mergedSegments" :initial-trace-idx="currentVideo.traceIdx" :title="currentVideo.title" @close="playing = false" />

-    <!-- Face strip context menu -->
-    <div v-if="faceCtxMenu.show" class="ms-ctx-menu" :style="{ left: faceCtxMenu.x + 'px', top: faceCtxMenu.y + 'px', display: 'block' }" @click.stop @mousedown.stop @pointerdown.stop>
-      <button class="ms-ctx-item ms-ctx-danger" @click="faceCtxAction('unbind')">不是此人物</button>
+    <!-- Trace strip context menu -->
+    <div v-if="traceCtxMenu.show" class="ms-ctx-menu" :style="{ left: traceCtxMenu.x + 'px', top: traceCtxMenu.y + 'px', display: 'block' }" @click.stop @mousedown.stop @pointerdown.stop>
+      <button class="ms-ctx-item ms-ctx-danger" @click="traceCtxAction('unbind')">不是此人物</button>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { apiCall } from '@/api'
 import { isTauri } from '@/api/config'
-import { ensurePeople, peopleCache, peopleLoaded, profilesCache, loadProfile as storeLoadProfile, faceThumbsCache, loadFaceThumb as storeLoadFaceThumb, thumbnailsCache, invalidatePeople, invalidateProfile } from '@/store'
+import { ensurePeople, peopleCache, peopleLoaded, profilesCache, loadProfile as storeLoadProfile, faceThumbsCache, loadFaceThumb as storeLoadFaceThumb, thumbnailsCache, loadThumbnail, invalidatePeople, invalidateProfile } from '@/store'
 import VideoPlayer from '@/components/VideoPlayer.vue'

 const route = useRoute()
@@ -256,13 +268,11 @@ const router = useRouter()

 const person = ref<any>(null)
 const loading = ref(true)
-const loadingFaces = ref(true)
 const loadingTraces = ref(true)
 const profile = ref('')
 const profileUuid = ref('')
 const peopleCount = ref(0)
 const allPeople = ref<any[]>([])
-const faces = ref<any[]>([])
 const allTraces = ref<any[]>([])
 const mergedSegments = ref<any[]>([])
 const playing = ref(false)
@@ -272,9 +282,28 @@ const showMerge = ref(false)
 const mergeSearchQuery = ref('')
 const mergeSearchResults = ref<any[]>([])
 const candidates = ref<any[]>([])
-const showAllFaces = ref(false)
 const thumbs = thumbnailsCache
+const traceThumbs = thumbnailsCache
 const faceThumbs = faceThumbsCache
+
+const allSegCard = computed(() => {
+  const m = mergedSegments.value
+  if (!m.length) return null
+  const segs = [...m].sort((a, b) => a.start - b.start)
+  const first = segs[0]
+  const last = segs[segs.length - 1]
+  const firstTrace = allTraces.value[first._startIdx]
+  return {
+    thumbKey: first.thumbKey,
+    start: first.start,
+    end: last.end,
+    duration: last.end - first.start,
+    count: m.length,
+    avg_confidence: m.reduce((s, x) => s + (x.avg_confidence || 0), 0) / m.length,
+    firstTraceIdx: first._startIdx,
+  }
+})
+
 const isEditing = ref(false)
 const editName = ref('')
 const editRole = ref('')
@@ -286,9 +315,19 @@ const aliasName = ref('')
 const saving = ref(false)
 const avatarUploading = ref(false)
 const activeTab = ref<'faces' | 'actions'>('faces')
-const faceCtxMenu = ref({ show: false, x: 0, y: 0, face: null as any })
-const selectedFace = ref<any>(null)
+const traceCtxMenu = ref({ show: false, x: 0, y: 0, trace: null as any })
+const selectedTrace = ref<any>(null)
 const fileInput = ref<HTMLInputElement | null>(null)
+const loadingMoreTraces = ref(false)
+const faceStripPage = ref(1)
+const faceStripPerPage = 20
+const paginatedTraces = computed(() => {
+  const start = (faceStripPage.value - 1) * faceStripPerPage
+  return allTraces.value.slice(start, start + faceStripPerPage)
+})
+const faceStripTotalPages = computed(() => Math.ceil(allTraces.value.length / faceStripPerPage))
+function prevFacePage() { if (faceStripPage.value > 1) faceStripPage.value-- }
+function nextFacePage() { if (faceStripPage.value < faceStripTotalPages.value) faceStripPage.value++ }

 onMounted(async () => {
  const uuid = route.params.uuid as string
@@ -300,7 +339,6 @@ onMounted(async () => {
    if (found) {
      person.value = { ...found, status: found.status || 'confirmed' }
      loadProfile(uuid)
-      loadFaces(uuid)
      loadMedia(uuid)
    }
  } catch (e) {
@@ -309,11 +347,11 @@ onMounted(async () => {
    loading.value = false
  }
  loadCandidates()
-  document.addEventListener('click', closeFaceCtxMenu)
+  document.addEventListener('click', closeTraceCtxMenu)
 })

 onUnmounted(() => {
-  document.removeEventListener('click', closeFaceCtxMenu)
+  document.removeEventListener('click', closeTraceCtxMenu)
 })

 function loadProfile(uuid: string) {
@@ -333,133 +371,130 @@ function thumbKey(uuid: string, frame: number): string {
  return `${uuid}:${frame}`
 }

-async function loadFaces(uuid: string) {
-  loadingFaces.value = true
-  try {
-    const result: any = await apiCall('get_faces', { uuid, perPage: 20 })
-    const items = Array.isArray(result) ? result : []
-    faces.value = items
-    items.forEach((f: any) => {
-    const fu = f.file_uuid || f.fileUuid || ''
-    const fn = f.frame_number ?? f.frameNumber ?? 0
-    const fid = f.id
-    const bbox = f.bbox
-    storeLoadFaceThumb(fid, fu, fn, bbox)
-  })
-  } catch (e) { console.error('Failed to load faces:', e) }
-  finally { loadingFaces.value = false }
+function selectTrace(t: any) {
+  selectedTrace.value = t
+  // Load thumbnail for this trace
+  loadThumb(t.file_uuid, t.first_frame || 0)
 }

-function selectFace(f: any) {
-  selectedFace.value = f
-}
-
-function playFaceTrace(f: any) {
-  const fu = f.file_uuid || f.fileUuid || ''
-  const frame = f.frame_number ?? f.frameNumber ?? 0
-  const trace = allTraces.value.find((t: any) => t.file_uuid === fu && frame >= (t.first_frame || t.start_frame || 0) && frame <= (t.last_frame || t.end_frame || 0))
-  if (trace) {
-    currentVideo.value = {
-      fileUuid: fu,
-      startTime: trace.first_sec || trace.start_time || 0,
-      endTime: trace.last_sec || trace.end_time || 0,
-      traceIdx: allTraces.value.indexOf(trace),
-      title: `${person.value?.name} · Face #${frame}`,
-    }
-  } else {
-    currentVideo.value = {
-      fileUuid: fu,
-      startTime: Math.max(0, (frame / 30) - 5),
-      endTime: (frame / 30) + 5,
-      traceIdx: 0,
-      title: `${person.value?.name} · Face #${frame}`,
-    }
+function playTrace(t: any) {
+  if (!t) return
+  const idx = allTraces.value.indexOf(t)
+  if (idx < 0) return
+  currentVideo.value = {
+    fileUuid: t.file_uuid || '',
+    startTime: t.first_sec || t.start_time || 0,
+    endTime: t.last_sec || t.end_time || 0,
+    traceIdx: idx,
+    title: `${person.value?.name} · T${t.trace_id}`,
  }
  playing.value = true
 }

-function showFaceCtxMenu(e: MouseEvent, f: any) {
+function showTraceCtxMenu(e: MouseEvent, t: any) {
  e.preventDefault()
  e.stopPropagation()
-  faceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, face: { ...f } }
+  traceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, trace: { ...t } }
 }

-function closeFaceCtxMenu(e?: MouseEvent) {
-  faceCtxMenu.value.show = false
+function closeTraceCtxMenu(e?: MouseEvent) {
+  traceCtxMenu.value.show = false
 }

-function faceCtxAction(action: string) {
-  const f = faceCtxMenu.value.face
-  faceCtxMenu.value = { show: false, x: 0, y: 0, face: null }
-  if (!f) {
-    console.error('faceCtxAction: no face data')
+function traceCtxAction(action: string) {
+  const t = traceCtxMenu.value.trace
+  traceCtxMenu.value = { show: false, x: 0, y: 0, trace: null }
+  if (!t) {
+    console.error('traceCtxAction: no trace data')
    return
  }
  if (!person.value) {
-    console.error('faceCtxAction: no person data')
+    console.error('traceCtxAction: no person data')
    return
  }
  if (action === 'unbind') {
-    unbindFace(f)
+    unbindFace(t)
  }
 }

 async function loadMedia(uuid: string) {
  loadingTraces.value = true
  try {
-    const result: any = await apiCall('get_traces', { uuid, perPage: 50 })
-    const rawItems = Array.isArray(result) ? result : []
-    if (!rawItems.length) { mergedSegments.value = []; return }
-
-    rawItems.sort((a: any, b: any) => (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0))
-    allTraces.value = rawItems
-
-    const merged: any[] = []
-    let cur: any = null
-    rawItems.forEach((item: any, idx: number) => {
-      const st = item.first_sec || item.start_time || 0
-      const en = item.last_sec || item.end_time || 0
-      const fu = item.file_uuid || ''
-      if (cur && fu === cur.file_uuid && (st - cur.end) < 30) {
-        cur.end = Math.max(cur.end, en)
-        cur.end_frame = Math.max(cur.end_frame, item.last_frame || 0)
-        cur.count++
-        cur._endIdx = idx
-        cur.total_confidence += item.avg_confidence || 0
-      } else {
-        if (cur) merged.push(cur)
-        cur = {
-          file_uuid: fu,
-          start_frame: item.first_frame || 0,
-          end_frame: item.last_frame || 0,
-          start: st,
-          end: en,
-          count: 1,
-          total_confidence: item.avg_confidence || 0,
-          _startIdx: idx,
-          _endIdx: idx,
-          thumbKey: thumbKey(fu, item.first_frame || 0),
-        }
-      }
-    })
-    if (cur) merged.push(cur)
-
-    merged.forEach((m: any) => {
-      m.avg_confidence = m.count > 1 ? m.total_confidence / m.count : m.total_confidence
-      delete m.total_confidence
-    })
-    mergedSegments.value = merged.slice(0, 1)
-    merged.forEach((m: any) => loadThumb(m.file_uuid, m.start_frame))
+    // Load all traces with pagination
+    const allItems: any[] = []
+    for (let page = 1; ; page++) {
+      const result: any = await apiCall('get_traces', { uuid, perPage: 100, page })
+      const items = result?.traces || []
+      if (!items.length) break
+      allItems.push(...items)
+    }
+    processTraces(allItems)
  } catch (e) { console.error('Failed to load media:', e) }
-  finally { loadingTraces.value = false }
+  finally { loadingTraces.value = false; loadingMoreTraces.value = false }
+}
+
+function processTraces(newData: any, append = false) {
+  const items = Array.isArray(newData) ? newData : []
+  if (!items.length) return
+
+  if (!append) {
+    allTraces.value = items.sort((a: any, b: any) => (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0))
+  } else {
+    loadingMoreTraces.value = true
+    const existingIds = new Set(allTraces.value.map((t: any) => t.trace_id))
+    const fresh = items.filter((t: any) => !existingIds.has(t.trace_id))
+    if (!fresh.length) return
+    allTraces.value = [...allTraces.value, ...fresh].sort((a: any, b: any) =>
+      (a.first_sec || a.start_time || 0) - (b.first_sec || b.start_time || 0)
+    )
+  }
+
+  // Recompute merged segments
+  const merged: any[] = []
+  let cur: any = null
+  allTraces.value.forEach((item: any, idx: number) => {
+    const st = item.first_sec || item.start_time || 0
+    const en = item.last_sec || item.end_time || 0
+    const fu = item.file_uuid || ''
+    if (cur && fu === cur.file_uuid && (st - cur.end) < 30) {
+      cur.end = Math.max(cur.end, en)
+      cur.end_frame = Math.max(cur.end_frame, item.last_frame || 0)
+      cur.count++
+      cur._endIdx = idx
+      cur.total_confidence += item.avg_confidence || 0
+    } else {
+      if (cur) merged.push(cur)
+      cur = {
+        file_uuid: fu,
+        start_frame: item.first_frame || 0,
+        end_frame: item.last_frame || 0,
+        start: st,
+        end: en,
+        count: 1,
+        total_confidence: item.avg_confidence || 0,
+        _startIdx: idx,
+        _endIdx: idx,
+        thumbKey: thumbKey(fu, item.first_frame || 0),
+      }
+    }
+  })
+  if (cur) merged.push(cur)
+
+  merged.forEach((m: any) => {
+    m.avg_confidence = m.count > 1 ? m.total_confidence / m.count : m.total_confidence
+    delete m.total_confidence
+  })
+  mergedSegments.value = merged
+  if (append) loadingMoreTraces.value = false
+
+  // Load thumbnails for visible segments
+  merged.slice(0, 6).forEach((m: any) => loadThumb(m.file_uuid, m.start_frame))
 }

 function loadThumb(uuid: string, frame: number) {
  const key = thumbKey(uuid, frame)
  if (thumbnailsCache.value[key]) return
-  apiCall('get_thumbnail', { uuid, frame }).then((url: any) => {
-    if (url) thumbnailsCache.value[key] = url
-  }).catch(() => {})
+  loadThumbnail(uuid, frame)
 }

 async function loadCandidates() {
@@ -593,19 +628,22 @@ function triggerAvatarUpload() {
  fileInput.value?.click()
 }

-async function unbindFace(f: any) {
+async function unbindFace(t: any) {
  if (!person.value) return
  const uuid = person.value.identity_uuid
-  if (!confirm('解綁此人臉？')) return
+  const fid = t.face_id || t.faceId || null
+  if (!fid) { alert('此 trace 沒有 face_id，無法解綁'); return }
+  if (!confirm(`解綁 trace T${t.trace_id}（face_id: ${fid}）？`)) return
  try {
    await apiCall('unbind_face', {
      uuid,
-      faceId: f.face_id || f.faceId || null,
-      faceRowId: f.id || null,
-      fileUuid: f.file_uuid || f.fileUuid || '',
-      frameNumber: f.frame_number ?? f.frameNumber ?? null,
+      faceId: fid,
+      faceRowId: null,
+      fileUuid: t.file_uuid || t.fileUuid || '',
+      frameNumber: null,
    })
-    await loadFaces(uuid)
+    // Refresh traces
+    await loadMedia(uuid)
    invalidatePeople()
    await ensurePeople()
    allPeople.value = peopleCache.value
@@ -628,6 +666,20 @@ async function updateStatus(status: string) {
  } catch (e) { console.error('Failed to update status:', e) }
 }

+function playAllSegments() {
+  const card = allSegCard.value
+  if (!card || !allTraces.value.length) return
+  const t = allTraces.value[0]
+  currentVideo.value = {
+    fileUuid: t.file_uuid || '',
+    startTime: t.first_sec || t.start_time || 0,
+    endTime: t.last_sec || t.end_time || 0,
+    traceIdx: 0,
+    title: `${person.value?.name} · ${card.count} 個片段`,
+  }
+  playing.value = true
+}
+
 function playMerged(m: any) {
  const t = allTraces.value[m._startIdx]
  if (!t) return
@@ -646,6 +698,19 @@ function formatTime(sec: number): string {
  return `${m}:${s.toString().padStart(2, '0')}`
 }

+function traceDuration(t: any): number {
+  if (!t) return 0
+  return (t.last_sec || 0) - (t.first_sec || 0)
+}
+
+function traceFps(t: any): number | null {
+  if (!t) return null
+  const frameDiff = (t.last_frame || 0) - (t.first_frame || 0)
+  const secDiff = traceDuration(t)
+  if (secDiff <= 0) return null
+  return Math.round(frameDiff / secDiff)
+}
+
 async function refreshPerson() {
  invalidatePeople()
  await ensurePeople()
@@ -745,10 +810,15 @@ let mergeSearchTimer: any
 .ms-ppl-face-card-info { flex: 1; min-width: 0; }
 .ms-ppl-face-card-file { font-size: 13px; color: #5f6368; font-family: monospace; }
 .ms-ppl-face-card-frame { font-size: 13px; color: #3c4043; margin-top: 2px; }
+.ms-ppl-face-card-time { font-size: 13px; color: #3c4043; margin-top: 4px; }
+.ms-ppl-face-card-dur { color: #9aa0a6; margin-left: 4px; }
+.ms-ppl-face-card-fps { font-size: 12px; color: #5f6368; margin-top: 2px; }
 .ms-ppl-face-card-conf { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
 .ms-ppl-face-card-actions { display: flex; gap: 8px; margin-top: 10px; }
 .ms-ppl-strip-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; font-size: 18px; display: grid; place-items: center; cursor: pointer; color: #5f6368; outline: none; flex-shrink: 0; transition: background .15s; }
-.ms-ppl-strip-arrow:hover { background: #f3f4f6; color: #202124; }
+.ms-ppl-strip-arrow:hover:not(:disabled) { background: #f3f4f6; color: #202124; }
+.ms-ppl-strip-arrow:disabled { opacity: 0.35; cursor: default; }
+.ms-ppl-strip-page { font-size: 11px; color: #9aa0a6; min-width: 32px; text-align: center; flex-shrink: 0; }
 .ms-ppl-media-label { font-size: 13px; color: #5f6368; margin-bottom: 16px; }
 .ms-ppl-media-item { cursor: pointer; border-radius: 12px; overflow: visible; background: #f0f0f0; transition: transform .15s, box-shadow .15s; border: 1px solid #eee; }
 .ms-ppl-media-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }