From f3d75ebce86de39099d1fd3dd2adf7e02878814b Mon Sep 17 00:00:00 2001
From: Momentry Studio <admin@momentry.local>
Date: Thu, 1 Oct 2026 00:42:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Library=20=E6=89=B9=E9=87=8F=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=20+=20PeopleView=20=E4=BF=AE=E5=A4=8D=20+=20=E5=9B=BD?=
 =?UTF-8?q?=E9=99=85=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Library:
- 添加 checkbox 和鼠标框选功能
- Unregistered 卡片添加快速注册按钮
- 状态标签移至左下方，人脸图标移至左侧中间
- Deep Scan 改为 unregister -> register -> process
- 完整国际化（日语、繁体中文、英语）

PeopleView:
- 修复卡片不显示问题（使用 get_file_traces API）
- 移除对 identity_id 字段的依赖

其他:
- 添加日语语言包
- 添加 useDragSelect composable
- 新增文档：Face Bbox Null Bug Report
---
 AGENTS.md                          |   48 +-
 src-tauri/Cargo.lock               |   46 +-
 src-tauri/Cargo.toml               |    3 +
 src-tauri/src/bin/proxy.rs         |   34 +
 src-tauri/src/db.rs                |   80 +
 src-tauri/src/main.rs              |  117 +-
 src-tauri/src/proxy.rs             |  492 +++++-
 src-tauri/src/validate.rs          |  447 ++++++
 src/App.vue                        |  123 +-
 src/api/index.ts                   |  189 ++-
 src/api/types.ts                   |   33 +
 src/assets/momentry-base.css       |   12 +-
 src/assets/momentry-full.css       |    9 +-
 src/assets/wordpress-exact.css     |   13 +-
 src/components/BuildVersion.vue    |   54 +-
 src/components/FaceFilterPanel.vue |  164 +-
 src/components/VideoPlayer.vue     |  640 ++++++--
 src/composables/useDragSelect.ts   |  149 ++
 src/composables/useFaceFilter.ts   |  115 +-
 src/composables/useUndoRedo.ts     |    6 +-
 src/locales/en.json                |  193 ++-
 src/locales/index.ts               |    4 +-
 src/locales/ja.json                |  448 ++++++
 src/locales/zh-TW.json             |  205 ++-
 src/store.ts                       |  242 ++-
 src/stores/autoScan.ts             |   28 +
 src/stores/themeStore.ts           |   32 +
 src/utils/asrStatus.ts             |    8 +-
 src/utils/faceLandmarkScoring.ts   |  122 ++
 src/views/AdminView.vue            |  966 +++++++++++-
 src/views/ClientView.vue           |   72 +-
 src/views/LibraryView.vue          |  827 ++++++++--
 src/views/PeopleView.vue           | 2353 ++++++++++++++++++++++++----
 src/views/PersonDetailView.vue     |   34 +-
 src/views/SearchView.vue           |  707 ++++++++-
 35 files changed, 8054 insertions(+), 961 deletions(-)
 create mode 100644 src-tauri/src/validate.rs
 create mode 100644 src/composables/useDragSelect.ts
 create mode 100644 src/locales/ja.json
 create mode 100644 src/stores/autoScan.ts
 create mode 100644 src/stores/themeStore.ts
 create mode 100644 src/utils/faceLandmarkScoring.ts

diff --git a/AGENTS.md b/AGENTS.md
index 053cde5..50c9f9e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -10,6 +10,11 @@ Examples:
 - ✅ `/Users/accusys/momentry_studio/src-tauri/src/db.rs`
 - ❌ `src-tauri/src/db.rs`
 
+## Workflow
+
+**Before starting any task, always create a `todowrite` with all steps listed.**
+Mark items `in_progress` while working and `completed` when done.
+
 ## Stack
 - **Frontend**: Vue 3 + TypeScript + Vite (port 5173)
 - **Desktop**: Tauri 2 (Rust backend in `src-tauri/`)
@@ -25,17 +30,31 @@ npm run tauri        # Alias for `cargo tauri`
 cargo tauri dev      # Full Tauri desktop dev (builds frontend + opens native window)
 cargo tauri build    # Full native app build (outputs to src-tauri/target/release/bundle/)
 ```
-- **Browser dev flow**: `npm run dev` → kills old proxy on 8888 → starts `momentry-proxy` → sleeps 2s → starts Vite. Vite proxy forwards `/api/v1/*` to Rust proxy at `localhost:8888`. Rust proxy handles face-crop, cluster-results, identity-matches, search-history, bookmarks, profile images locally; proxies rest to Core API at `localhost:3002`.
+- **Browser dev flow**: `npm run dev` → kills old proxy on 8888 → starts `momentry-proxy` → sleeps 2s → starts Vite. Vite proxy forwards `/api/v1/*` to Rust proxy at `localhost:8888` and `/api/v2/*` directly to MarkBase at `localhost:11438`. Rust proxy handles face-crop, cluster-results, identity-matches, search-history, bookmarks, profile images locally; proxies rest to Core API at `localhost:3002`.
+
+## Two-API Architecture (不可混淆)
+**Two independent backend APIs. `/api/v1/*` → Momentry Core API ONLY; `/api/v2/*` → MarkBase Core API ONLY. Never cross.**
+
+| API | Port | Namespace | Owner | Auth |
+|---|---|---|---|---|
+| **Momentry Core API** | `:3002` | `/api/v1/*` only (files, search, identities, faces, traces, agents, video-marks…) | `/Users/accusys/momentry_core` | `api_key` injected by Studio proxy |
+| **MarkBase Core API** | `:11438` | `/api/v2/*` only (admin, myfiles, service, auth, config, tree, products…) | `/Users/accusys/markbase/markbase-core` | Bearer token (`/api/v2/admin/login`) |
+
+**Routing rules** (`/Users/accusys/momentry_studio/src-tauri/src/proxy.rs`):
+- Studio proxy `:8888` is a v1/v2 gateway: `fallback_handler` routes `/api/v2/*` → `proxy_to(MARKBASE_API, inject_api_key=false)` and any other `/api/*` → `proxy_to(CORE_API, inject_api_key=true)`. MarkBase does NOT get `api_key` injected.
+- Vite dev proxy (`/Users/accusys/momentry_studio/vite.config.ts`): `/api/v1` → `localhost:8888`, `/api/v2` → `localhost:11438`.
+- **Admin data (`get_system_stats`/`list_admin_users`/`list_shares`) always comes from MarkBase `/api/v2/admin/*` in ALL modes** — these are forced to `httpCall()` in `src/api/index.ts` (no Tauri commands exist for them).
+- `ClientView` (`/Users/accusys/momentry_studio/src/views/ClientView.vue`) talks to MarkBase directly via `MARKBASE_URL + '/api/v2'` (bypasses Studio proxy). `start_service`/`stop_service` use `detectBaseUrl()` → MarkBase directly.
 
 ## Architecture
 - **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:
+- **Rust Tauri commands**: `src-tauri/src/main.rs` — 19 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.
+- **Rust HTTP proxy** (`src-tauri/src/proxy.rs`): Axum on port 8888. Routes `/api/v2/*` to MarkBase API (localhost:11438) and `/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` → `App.vue` → `router/index.ts`
@@ -50,7 +69,7 @@ cargo tauri build    # Full native app build (outputs to src-tauri/target/releas
 - **Full native build order**: `npm install` → `npm run build` → `cargo tauri build`
 - **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.
+- **Proxy**: `http://0.0.0.0:8888` — v1/v2 gateway: `/api/v2/*` → MarkBase (11438, no key), `/api/v1/*` → 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.
@@ -60,6 +79,8 @@ cargo tauri build    # Full native app build (outputs to src-tauri/target/releas
 - **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.
+- **No dev residue allowed (`以後不再有 dev 殘留`)**: Never commit or leave scratch/dev files in the repo — this includes tracked backup snapshots (`*.bak`, `*.bak3`, `*.base`, `*.clean`, `*.work`, `*.backup_*`), standalone dev-only binaries/scripts (e.g. `gen_password.rs`), and unused dead code. Keep backups out of git (personal temp or gitignored); delete them when done. New dev features must not introduce `console.log` (even temporary — use `console.error` or remove before commit).
+- **Face settings owned by Core**: `src/api/index.ts` `register_file`/`process_file` and the Rust commands in `/Users/accusys/momentry_studio/src-tauri/src/main.rs` must NOT send or read `face_settings`/`FACE_MIN_*` env vars. Core API owns the face-detection defaults server-side (see Core guide `docs_v1.0/M4_workspace/2026-08-08_face_settings_studio_guide.md`).
 - **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.
@@ -67,4 +88,21 @@ cargo tauri build    # Full native app build (outputs to src-tauri/target/releas
 - **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.
\ No newline at end of file
+- **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.
+- **Advanced Mode (🔒/🔓)**: Store at `/Users/accusys/momentry_studio/src/stores/advancedMode.ts`. Toggle button (🔒 closed / 🔓 open) in LibraryView toolbar persists to localStorage key `momentry_advanced_mode`. Controls visibility of advanced features:
+  - `LibraryView.vue:180` — Processor QC button `v-if="isAdvanced"`
+  - `VideoPlayer.vue:88,129,169,198` — Mark timelines, controls, panel, frame seek `v-if="isAdvanced"`
+  - `PeopleView.vue:19` — Data QC button `v-if="selectedFileUuid && isAdvanced"`
+  - `BuildVersion.vue:2` — Build version badge `v-if="isAdvanced"`
+  - Import: `import { useAdvancedMode } from '@/stores/advancedMode'`
+  - Usage: `const { isAdvanced } = useAdvancedMode()`
+- **File Status (Core API 單一來源)**: 6 個狀態 values 由 Core API 回傳，前端只負責顯示不過濾：
+  - `registered` → 📋 已註冊（剛註冊）
+  - `scanning` → 🔍 掃描中（處理中，顯示 progress bar）
+  - `keyword_ready` → 🔎 關鍵字可用（sentence chunks 完成）
+  - `semantic_ready` → 🧠 語意可用（embedded chunks 完成）
+  - `face_mgmt_ready` → 🎭 臉部管理可用（trace_profiles + tkg_nodes 完成）
+  - `agent_ready` → 🤖 Agent 可用（tkg_edges 完成，終端狀態）
+  - 前端不做任何本地 status promotion（已移除 `pollProgress`、`loadPipelineStats`、`refreshFileStatus` 中的 `f.status =` 賦值）
+  - 唯一寫入點：`syncFileStatus()` 將 Core API 回傳值寫入 `fileStatusCache` + `f.status`
+  - 顯示函數：`LibraryView.vue` line 1274 (`statusFromDB`), 1283 (`statusBadgeClass`), 1291 (`statusBadgeIcon`), 1299 (`statusBadgeLabel`)
\ No newline at end of file
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 56db9b9..d61c20f 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -3590,9 +3590,9 @@ dependencies = [
 
 [[package]]
 name = "libc"
-version = "0.2.186"
+version = "0.2.189"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68ab91017fe16c622486840e4c83c9a37afeff978bd239b5293d61ece587de66"
+checksum = "3eaf3ede3fee6db1a4c2ee091bf8a8b4dccdc6d17f656fb07896ee72867612f2"
 
 [[package]]
 name = "libdbus-sys"
@@ -3731,6 +3731,18 @@ dependencies = [
  "twox-hash",
 ]
 
+[[package]]
+name = "macmon"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5df04a421e292536cc4dde4c1b0d783084d7aed8e7151aacc9aadee629473556"
+dependencies = [
+ "core-foundation 0.10.1",
+ "libc",
+ "serde",
+ "serde_json",
+]
+
 [[package]]
 name = "markbase-core"
 version = "0.2.0"
@@ -3964,6 +3976,7 @@ dependencies = [
  "image",
  "kamadak-exif",
  "lru 0.12.5",
+ "macmon",
  "markbase-core",
  "rand 0.8.6",
  "reqwest 0.11.27",
@@ -6142,9 +6155,9 @@ dependencies = [
 
 [[package]]
 name = "serde"
-version = "1.0.228"
+version = "1.0.229"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+checksum = "4148590afebada386688f18773da617792bf2ef03ffc1e4cbd2b1d45b023e0ba"
 dependencies = [
  "serde_core",
  "serde_derive",
@@ -6174,22 +6187,22 @@ dependencies = [
 
 [[package]]
 name = "serde_core"
-version = "1.0.228"
+version = "1.0.229"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
+checksum = "67dca2c9c51e58a4791a4b1ed58308b39c64224d349a935ab5039aa360942a48"
 dependencies = [
  "serde_derive",
 ]
 
 [[package]]
 name = "serde_derive"
-version = "1.0.228"
+version = "1.0.229"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
+checksum = "e7a5d71263a5a7d47b41f6b3f06ba276f10cc18b0931f1799f710578e2309348"
 dependencies = [
  "proc-macro2",
  "quote",
- "syn 2.0.117",
+ "syn 3.0.4",
 ]
 
 [[package]]
@@ -6205,9 +6218,9 @@ dependencies = [
 
 [[package]]
 name = "serde_json"
-version = "1.0.150"
+version = "1.0.151"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8014e44b4736ed0538adeecded0fce2a272f22dc9578a7eb6b2d9993c74cfb9"
+checksum = "c841b55ecdae098c80dcae9cf767f6f8a0c2cdb3416bbef72181df4d0fe73f14"
 dependencies = [
  "itoa",
  "memchr",
@@ -7041,6 +7054,17 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "syn"
+version = "3.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6275cddf4610d1775e6d1fe9469b2e77d0f39fd98fb7450901b821e0c53649f"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
 [[package]]
 name = "sync_wrapper"
 version = "0.1.2"
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 8a3f453..e706830 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -41,6 +41,9 @@ rand = "0.8"
 # MarkBase Core for Admin/Client GUI
 markbase-core = { path = "../../markbase/markbase-core" }
 
+[target.'cfg(target_arch = "aarch64")'.dependencies]
+macmon = { version = "0.8", default-features = false }
+
 [build-dependencies]
 tauri-build = { version = "2", features = [] }
 
diff --git a/src-tauri/src/bin/proxy.rs b/src-tauri/src/bin/proxy.rs
index d9100cc..bb1151d 100644
--- a/src-tauri/src/bin/proxy.rs
+++ b/src-tauri/src/bin/proxy.rs
@@ -4,6 +4,40 @@ mod proxy;
 #[path = "../db.rs"]
 mod db;
 
+#[path = "../validate.rs"]
+mod validate;
+
+#[derive(serde::Serialize, serde::Deserialize)]
+pub struct SystemStatsResponse {
+    pub cpu_used_percent: f64,
+    pub memory_used_percent: f64,
+    pub memory_available_mb: u64,
+    pub memory_total_mb: u64,
+    pub swap_used_percent: f64,
+    pub swap_available_mb: u64,
+    pub swap_total_mb: u64,
+    pub gpu_available: bool,
+    pub gpu_utilization: Option<f64>,
+    pub gpu_memory_used_pct: Option<f64>,
+    pub ane_available: bool,
+    pub ane_utilization: Option<f64>,
+    pub source: String,
+    pub chip_name: Option<String>,
+    pub cpu_power: Option<f64>,
+    pub gpu_power: Option<f64>,
+    pub ane_power: Option<f64>,
+    pub sys_power: Option<f64>,
+    pub ram_power: Option<f64>,
+    pub cpu_temp: Option<f64>,
+    pub gpu_temp: Option<f64>,
+    pub ecpu_freq_mhz: Option<u32>,
+    pub pcpu_freq_mhz: Option<u32>,
+    pub gpu_freq_mhz: Option<u32>,
+    pub ecpu_cores: Option<u8>,
+    pub pcpu_cores: Option<u8>,
+    pub gpu_cores: Option<u8>,
+}
+
 #[tokio::main]
 async fn main() {
     let _ = db::init_db();
diff --git a/src-tauri/src/db.rs b/src-tauri/src/db.rs
index 287d96c..d746f9f 100644
--- a/src-tauri/src/db.rs
+++ b/src-tauri/src/db.rs
@@ -24,6 +24,16 @@ CREATE TABLE IF NOT EXISTS bookmarks (
     created_at TEXT DEFAULT (datetime('now'))
 );
 
+CREATE TABLE IF NOT EXISTS video_marks (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    file_uuid TEXT NOT NULL,
+    tag TEXT NOT NULL,
+    start_frame INTEGER NOT NULL,
+    end_frame INTEGER,
+    note TEXT,
+    created_at TEXT DEFAULT (datetime('now'))
+);
+
 CREATE TABLE IF NOT EXISTS app_users (
     id TEXT PRIMARY KEY,
     username TEXT NOT NULL UNIQUE,
@@ -36,6 +46,7 @@ CREATE TABLE IF NOT EXISTS app_users (
 
 CREATE INDEX IF NOT EXISTS idx_search_history_sort ON search_history(pinned DESC, updated_at DESC);
 CREATE INDEX IF NOT EXISTS idx_bookmarks_created ON bookmarks(created_at DESC);
+CREATE INDEX IF NOT EXISTS idx_video_marks_file ON video_marks(file_uuid);
 ";
 
 static DB_CONN: Mutex<Option<Connection>> = Mutex::new(None);
@@ -281,6 +292,75 @@ pub fn delete_bookmark(id: i64) -> Result<(), String> {
     Ok(())
 }
 
+#[derive(Debug, Serialize, Deserialize, Clone)]
+pub struct VideoMark {
+    pub id: i64,
+    pub file_uuid: String,
+    pub tag: String,
+    pub start_frame: i64,
+    pub end_frame: Option<i64>,
+    pub note: Option<String>,
+    pub created_at: Option<String>,
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub fn get_video_marks(file_uuid: String) -> Result<Vec<VideoMark>, String> {
+    let conn = get_conn()?;
+    let mut stmt = conn
+        .prepare("SELECT id, file_uuid, tag, start_frame, end_frame, note, created_at FROM video_marks WHERE file_uuid = ?1 ORDER BY start_frame ASC")
+        .map_err(|e| format!("Prepare error: {}", e))?;
+    let items = stmt
+        .query_map([file_uuid], |row| {
+            Ok(VideoMark {
+                id: row.get(0)?,
+                file_uuid: row.get(1)?,
+                tag: row.get(2)?,
+                start_frame: row.get(3)?,
+                end_frame: row.get(4)?,
+                note: row.get(5)?,
+                created_at: row.get(6)?,
+            })
+        })
+        .map_err(|e| format!("Query error: {}", e))?
+        .filter_map(|r| r.ok())
+        .collect();
+    Ok(items)
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub fn save_video_mark(
+    file_uuid: String,
+    tag: String,
+    start_frame: i64,
+    end_frame: Option<i64>,
+    note: Option<String>,
+) -> Result<VideoMark, String> {
+    let conn = get_conn()?;
+    conn.execute(
+        "INSERT INTO video_marks (file_uuid, tag, start_frame, end_frame, note) VALUES (?1, ?2, ?3, ?4, ?5)",
+        rusqlite::params![file_uuid, tag, start_frame, end_frame, note],
+    )
+    .map_err(|e| format!("Insert error: {}", e))?;
+    let id = conn.last_insert_rowid();
+    Ok(VideoMark {
+        id,
+        file_uuid,
+        tag,
+        start_frame,
+        end_frame,
+        note,
+        created_at: None,
+    })
+}
+
+#[tauri::command(rename_all = "camelCase")]
+pub fn delete_video_mark(id: i64) -> Result<(), String> {
+    let conn = get_conn()?;
+    conn.execute("DELETE FROM video_marks WHERE id = ?1", [id])
+        .map_err(|e| format!("Delete error: {}", e))?;
+    Ok(())
+}
+
 pub fn verify_user(username: &str, password: &str) -> Result<Option<User>, String> {
     let conn = get_conn()?;
     let mut stmt = conn
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index cb3d9fa..a6d77ff 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -4,6 +4,7 @@ use dirs;
 use markbase_core::vfs::VfsBackend;
 mod proxy;
 mod db;
+mod validate;
 
 use serde::Serialize;
 use base64::{Engine as _, engine::general_purpose::STANDARD};
@@ -12,7 +13,6 @@ use std::sync::{Arc, Mutex};
 use std::num::NonZeroUsize;
 use lru::LruCache;
 use image::GenericImageView;
-use image::DynamicImage;
 use tokio::sync::Semaphore;
 
 static THUMB_CACHE: Mutex<Option<LruCache<String, String>>> = Mutex::new(None);
@@ -242,7 +242,7 @@ async fn get_files(args: GetFilesArgs) -> Result<Vec<FileInfo>, String> {
                 modified_time: f["modified_time"].as_str().unwrap_or("").to_string(),
                 is_registered: is_reg,
                 registration_time: f["registration_time"].as_str().map(|s| s.to_string()),
-                ingested: status == "completed",
+                ingested: matches!(status.as_str(), "completed" | "keyword_ready" | "semantic_ready" | "face_mgmt_ready" | "agent_ready"),
                 status,
             })
         })
@@ -999,14 +999,17 @@ struct CreateIdentityFromFaceResult {
 }
 
 #[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> {
+async fn create_identity_from_face(name: String, _face_id: Option<String>, _face_row_id: Option<i64>, file_uuid: String, trace_ids: Option<Vec<i64>>) -> 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!({
+    let mut body = serde_json::json!({
         "name": name
     });
+    if let Some(tids) = &trace_ids {
+        body["trace_ids"] = serde_json::json!(tids);
+    }
     
     let resp = client.post(&url)
         .json(&body)
@@ -1293,6 +1296,16 @@ async fn merge_history(source_uuid: Option<String>, target_uuid: Option<String>,
 
 #[tauri::command(rename_all = "camelCase")]
 async fn stop_service(name: String) -> Result<String, String> {
+    if name == "Worker" || name == "worker" {
+        // Worker has no port — stop via pidfile / pkill
+        let output = std::process::Command::new("sh")
+            .arg("-c")
+            .arg("sleep 0.5; WPID=$(cat /Users/accusys/momentry_core/logs/worker_3002.pid 2>/dev/null); if [ -n \"$WPID\" ]; then pkill -P $WPID 2>/dev/null; kill -9 $WPID 2>/dev/null; fi; pkill -9 -f 'target/release/momentry worker' 2>/dev/null; rm -f /Users/accusys/momentry_core/logs/worker_3002.pid; echo 'stopped'")
+            .output()
+            .map_err(|e| format!("Failed to stop worker: {}", e))?;
+        let stdout = String::from_utf8_lossy(&output.stdout).to_string();
+        return Ok(stdout.trim().to_string());
+    }
     let port = match name.as_str() {
         "Core API" | "core" => 3002,
         "MarkBase" | "markbase" => 11438,
@@ -1313,9 +1326,31 @@ async fn stop_service(name: String) -> Result<String, String> {
 
 #[tauri::command(rename_all = "camelCase")]
 async fn start_service(name: String) -> Result<String, String> {
+    if name == "Worker" || name == "worker" {
+        // Worker has no port — verify via pidfile instead of lsof
+        let output = std::process::Command::new("sh")
+            .arg("-c")
+            .arg("cd /Users/accusys/momentry_core && nohup bash run-worker-3002.sh > /tmp/momentry_worker.log 2>&1 &")
+            .output()
+            .map_err(|e| format!("Failed to start worker: {}", e))?;
+        if !output.status.success() {
+            let stderr = String::from_utf8_lossy(&output.stderr);
+            return Err(format!("Worker start failed: {}", stderr));
+        }
+        tokio::time::sleep(std::time::Duration::from_secs(3)).await;
+        let check = std::process::Command::new("sh")
+            .arg("-c")
+            .arg("WPID=$(cat /Users/accusys/momentry_core/logs/worker_3002.pid 2>/dev/null); [ -n \"$WPID\" ] && kill -0 $WPID 2>/dev/null && echo alive")
+            .output()
+            .map_err(|e| format!("Worker check failed: {}", e))?;
+        if String::from_utf8_lossy(&check.stdout).contains("alive") {
+            return Ok("started".to_string());
+        }
+        return Err("Worker failed to start".to_string());
+    }
     let cmd = match name.as_str() {
         "MarkBase" | "markbase" => {
-            "cd /Users/accusys/markbase && nohup cargo run --bin markbase-core -- web-start --port 11438 > /tmp/markbase_web.log 2>&1 &"
+            "mkdir -p /Users/accusys/markbase/data && cd /Users/accusys/markbase && nohup ./target/release/markbase-core web-start --port 11438 > /tmp/markbase_web.log 2>&1 &"
         }
         "Core API" | "core" => {
             "cd /Users/accusys/momentry_core && nohup bash run-server-3002.sh > /tmp/momentry_start.log 2>&1 &"
@@ -1405,48 +1440,6 @@ async fn get_current_user(username: String) -> Result<Option<db::User>, String>
     db::get_user_by_username(&username)
 }
 
-#[tauri::command(rename_all = "camelCase")]
-async fn list_admin_users() -> Result<serde_json::Value, String> {
-    let home = dirs::home_dir().unwrap_or_else(|| std::path::PathBuf::from("/Users/accusys"));
-    let db_path = home.join("momentry/data/auth.sqlite");
-    
-    let conn = rusqlite::Connection::open(&db_path)
-        .map_err(|e| format!("Failed to open database: {}", e))?;
-    
-    let mut stmt = conn.prepare("SELECT username, home_dir, status FROM sftpgo_users")
-        .map_err(|e| format!("Failed to prepare query: {}", e))?;
-    
-    let users = stmt.query_map([], |row| {
-        Ok(serde_json::json!({
-            "username": row.get::<_, String>(0)?,
-            "homeDir": row.get::<_, String>(1)?,
-            "status": row.get::<_, i32>(2)?
-        }))
-    }).map_err(|e| format!("Failed to query: {}", e))?;
-    
-    let result: Vec<serde_json::Value> = users.filter_map(|u| u.ok()).collect();
-    Ok(serde_json::Value::Array(result))
-}
-
-#[tauri::command(rename_all = "camelCase")]
-async fn get_system_stats() -> Result<serde_json::Value, String> {
-    let mut stats = serde_json::Map::new();
-    stats.insert("cpu".to_string(), serde_json::Value::Number(25.into()));
-    stats.insert("memory".to_string(), serde_json::Value::Number(60.into()));
-    stats.insert("disk".to_string(), serde_json::Value::Number(45.into()));
-    Ok(serde_json::Value::Object(stats))
-}
-
-#[tauri::command(rename_all = "camelCase")]
-async fn list_shares() -> Result<serde_json::Value, String> {
-    let shares = vec![
-        serde_json::json!({"name": "MarkBase Web", "port": 11438, "status": "running", "protocol": "HTTP/WebDAV", "url": "http://localhost:11438"}),
-        serde_json::json!({"name": "SFTP", "port": 2024, "status": "running", "protocol": "SSH/SFTP"}),
-        serde_json::json!({"name": "SMB", "port": 4445, "status": "running", "protocol": "SMB"}),
-    ];
-    Ok(serde_json::Value::Array(shares))
-}
-
 // === Client Commands ===
 
 #[tauri::command(rename_all = "camelCase")]
@@ -1509,6 +1502,29 @@ fn main() {
         rt.block_on(proxy::start_proxy_server());
     });
 
+    fn ensure_markbase_running() {
+        let check = std::process::Command::new("sh")
+            .arg("-c")
+            .arg("lsof -ti :11438")
+            .output();
+        
+        if let Ok(output) = check {
+            if output.stdout.is_empty() {
+                let cmd = "mkdir -p /Users/accusys/markbase/data && \
+                    cd /Users/accusys/markbase && \
+                    nohup ./target/release/markbase-core web-start --port 11438 \
+                    > /tmp/markbase_web.log 2>&1 &";
+                let _ = std::process::Command::new("sh")
+                    .arg("-c")
+                    .arg(cmd)
+                    .spawn();
+                eprintln!("[startup] MarkBase started on port 11438");
+            } else {
+                eprintln!("[startup] MarkBase already running on port 11438");
+            }
+        }
+    }
+
     tauri::Builder::default()
         .plugin(tauri_plugin_shell::init())
         .setup(|app| {
@@ -1517,6 +1533,7 @@ fn main() {
             if let Err(e) = db::init_db() {
                 eprintln!("Failed to init database: {}", e);
             }
+            ensure_markbase_running();
             Ok(())
         })
 .invoke_handler(tauri::generate_handler![
@@ -1568,11 +1585,11 @@ fn main() {
             db::get_bookmarks,
             db::save_bookmark,
             db::delete_bookmark,
+            db::get_video_marks,
+            db::save_video_mark,
+            db::delete_video_mark,
             login_user,
             get_current_user,
-            list_admin_users,
-            get_system_stats,
-            list_shares,
             list_client_files,
             mkdir_client,
             rm_client,
diff --git a/src-tauri/src/proxy.rs b/src-tauri/src/proxy.rs
index 5005866..43a13e3 100644
--- a/src-tauri/src/proxy.rs
+++ b/src-tauri/src/proxy.rs
@@ -1,22 +1,25 @@
 use axum::{
     body::Body,
-    extract::State,
+    extract::{State, Query},
     http::{HeaderValue, StatusCode},
     response::{IntoResponse, Response},
     Router,
 };
 use tower_http::cors::{Any, CorsLayer};
 use crate::db;
+
+#[path = "validate.rs"]
+mod validate;
 use base64::{Engine as _, engine::general_purpose::STANDARD};
 use image::GenericImageView;
-use image::DynamicImage;
 use std::collections::HashMap;
 use std::sync::{Arc, Mutex};
 use std::num::NonZeroUsize;
 use lru::LruCache;
 use tokio::sync::Semaphore;
 
-const CORE_API: &str = "http://localhost:3002";
+const CORE_API: &str = "http://127.0.0.1:3002";
+const MARKBASE_API: &str = "http://127.0.0.1:11438";
 const API_KEY: &str = "muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69";
 const DIST_DIR: &str = "../dist";
 const PROFILE_DIRS: [&str; 4] = [
@@ -28,7 +31,6 @@ const PROFILE_DIRS: [&str; 4] = [
 
 static FACE_THUMB_CACHE: Mutex<Option<LruCache<String, String>>> = Mutex::new(None);
 static PROFILE_PROXY_CACHE: Mutex<Option<LruCache<String, String>>> = Mutex::new(None);
-static RAW_DIM_PROXY_CACHE: Mutex<Option<HashMap<String, (u32, u32)>>> = Mutex::new(None);
 static THUMB_SEM_MAP_PROXY: Mutex<Option<HashMap<String, Arc<Semaphore>>>> = Mutex::new(None);
 
 fn acquire_thumb_semaphore(uuid: &str) -> Arc<Semaphore> {
@@ -84,11 +86,16 @@ pub async fn start_proxy_server() {
         .route("/api/v1/face-thumbnail", axum::routing::get(get_face_thumbnail_handler))
         .route("/api/v1/media/frame", axum::routing::get(get_frame_handler))
         .route("/api/v1/identity-matches", axum::routing::get(get_identity_matches_handler))
+        .route("/api/v1/trace-profile-file", axum::routing::get(get_trace_profile_file_handler))
         .route("/api/v1/cluster-results", axum::routing::get(get_cluster_results_handler))
         .route("/api/v1/processor-json", axum::routing::get(get_processor_json_handler))
         .route("/api/v1/file/thumbnail", axum::routing::get(get_file_thumbnail_by_path_handler))
         .route("/api/v1/file/:file_uuid/pose", axum::routing::get(get_pose_handler))
         .route("/api/v1/file/:file_uuid/appearance", axum::routing::get(get_appearance_handler))
+        .route("/api/v1/admin/config", axum::routing::get(get_admin_config_handler))
+        .route("/api/v1/admin/config", axum::routing::post(save_admin_config_handler))
+        .route("/api/v1/system-stats", axum::routing::get(get_system_stats_handler))
+        .route("/api/v1/system-stats/validate", axum::routing::get(validate_system_stats_handler))
         .fallback(fallback_handler)
         .layer(cors)
         .with_state(state);
@@ -206,7 +213,7 @@ async fn fallback_handler(State(state): State<ProxyState>, req: axum::extract::R
         if let Some(rest) = path.strip_prefix("/api/v1/identity/") {
             if rest.ends_with("/profile-image") {
                 let uuid = rest.trim_end_matches("/profile-image").to_string();
-                let response = proxy_api(state, req).await;
+                let response = proxy_to(state, req, CORE_API, true).await;
                 // Invalidate profile cache on successful upload
                 let status = response.status();
                 if status == StatusCode::OK || status == StatusCode::CREATED {
@@ -220,12 +227,14 @@ async fn fallback_handler(State(state): State<ProxyState>, req: axum::extract::R
     }
 
     // Handle search-history CRUD locally
-    if path.starts_with("/api/v1/search-history") || path.starts_with("/api/v1/bookmarks") {
+    if path.starts_with("/api/v1/search-history") || path.starts_with("/api/v1/bookmarks") || path.starts_with("/api/v1/video-marks") || path.starts_with("/api/v1/video-mark/") {
         return handle_local_api(req).await;
     }
 
-    if path.starts_with("/api/") {
-        return proxy_api(state, req).await;
+    if path.starts_with("/api/v2/") {
+        return proxy_to(state, req, MARKBASE_API, false).await;
+    } else if path.starts_with("/api/") {
+        return proxy_to(state, req, CORE_API, true).await;
     } else if state.serve_static {
         return serve_spa(&path).await;
     } else {
@@ -235,6 +244,7 @@ async fn fallback_handler(State(state): State<ProxyState>, req: axum::extract::R
 
 async fn handle_local_api(req: axum::extract::Request) -> Response {
     let path = req.uri().path().to_string();
+    let query_str = req.uri().query().unwrap_or("").to_string();
     let method = req.method().clone();
     let body_bytes = axum::body::to_bytes(req.into_body(), 10 * 1024 * 1024).await.unwrap_or_default();
 
@@ -271,26 +281,46 @@ async fn handle_local_api(req: axum::extract::Request) -> Response {
         return save_bookmark_handler_inner(body_bytes);
     }
 
+    // Video marks (local SQLite)
+    if method == axum::http::Method::GET && path == "/api/v1/video-marks" {
+        return get_video_marks_handler_inner(&query_str);
+    }
+    if method == axum::http::Method::POST && path == "/api/v1/video-marks" {
+        return save_video_mark_handler_inner(body_bytes);
+    }
+    if method == axum::http::Method::DELETE {
+        if let Some(id_str) = path.strip_prefix("/api/v1/video-mark/") {
+            if let Ok(id) = id_str.parse::<i64>() {
+                return delete_video_mark_handler_inner(id);
+            }
+        }
+    }
+
     (StatusCode::NOT_FOUND, "Not found").into_response()
 }
 
-async fn proxy_api(state: ProxyState, req: axum::extract::Request) -> Response {
+async fn proxy_to(state: ProxyState, req: axum::extract::Request, base: &str, inject_api_key: bool) -> Response {
     let path = req.uri().path().to_string();
     let method = req.method().clone();
     let headers = req.headers().clone();
     let start = std::time::Instant::now();
 
     let query_str = req.uri().query().unwrap_or("").to_string();
-    let mut url = format!("{}{}?api_key={}", CORE_API, path, API_KEY);
+    let mut url = if inject_api_key {
+        format!("{}{}?api_key={}", base, path, API_KEY)
+    } else {
+        format!("{}{}", base, path)
+    };
     for pair in query_str.split('&') {
-        if pair.is_empty() || pair.starts_with("api_key=") {
+        if pair.is_empty() || (inject_api_key && pair.starts_with("api_key=")) {
             continue;
         }
         url.push_str(&format!("&{}", pair));
     }
 
+    let target = if base == CORE_API { "core api" } else { "markbase" };
     let range_hdr = headers.get("range").and_then(|v| v.to_str().ok()).unwrap_or("-");
-    eprintln!("[proxy] --> {} {} (core api) range={}", method, path, range_hdr);
+    eprintln!("[proxy] --> {} {} ({}) range={}", method, path, target, range_hdr);
 
     let reqwest_method = match method.as_str() {
         "POST" => reqwest::Method::POST,
@@ -537,6 +567,45 @@ fn delete_bookmark_handler_inner(id: i64) -> Response {
     }
 }
 
+fn get_video_marks_handler_inner(query_str: &str) -> Response {
+    let file_uuid = query_str
+        .split('&')
+        .find_map(|pair| {
+            let mut it = pair.splitn(2, '=');
+            let k = it.next().unwrap_or("");
+            let v = it.next().unwrap_or("");
+            if k == "file_uuid" { Some(v.to_string()) } else { None }
+        })
+        .unwrap_or_default();
+    match db::get_video_marks(file_uuid) {
+        Ok(items) => axum::Json(items).into_response(),
+        Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e).into_response(),
+    }
+}
+
+fn save_video_mark_handler_inner(body: axum::body::Bytes) -> Response {
+    let req: serde_json::Value = match serde_json::from_slice(&body) {
+        Ok(v) => v,
+        Err(e) => return (StatusCode::BAD_REQUEST, format!("Invalid JSON: {}", e)).into_response(),
+    };
+    let file_uuid = req.get("file_uuid").and_then(|v| v.as_str()).unwrap_or("").to_string();
+    let tag = req.get("tag").and_then(|v| v.as_str()).unwrap_or("default").to_string();
+    let start_frame = req.get("start_frame").and_then(|v| v.as_i64()).unwrap_or(0);
+    let end_frame = req.get("end_frame").and_then(|v| v.as_i64());
+    let note = req.get("note").and_then(|v| v.as_str()).map(|s| s.to_string());
+    match db::save_video_mark(file_uuid, tag, start_frame, end_frame, note) {
+        Ok(item) => axum::Json(item).into_response(),
+        Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e).into_response(),
+    }
+}
+
+fn delete_video_mark_handler_inner(id: i64) -> Response {
+    match db::delete_video_mark(id) {
+        Ok(()) => axum::Json(serde_json::json!({"success": true})).into_response(),
+        Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, e).into_response(),
+    }
+}
+
 async fn get_identity_profile_handler_inner(uuid: String) -> Response {
     let start = std::time::Instant::now();
     let no_dash = uuid.replace('-', "");
@@ -579,33 +648,6 @@ async fn get_identity_profile_handler_inner(uuid: String) -> Response {
     }
 }
 
-/// Read EXIF orientation and physically rotate pixels, stripping orientation tag.
-/// Fetch raw video dimensions from Core API with in-memory cache.
-async fn fetch_raw_dimensions(uuid: &str) -> Option<(u32, u32)> {
-    {
-        let cache = RAW_DIM_PROXY_CACHE.lock().unwrap();
-        if let Some(cache) = cache.as_ref() {
-            if let Some(dims) = cache.get(uuid) {
-                return Some(*dims);
-            }
-        }
-    }
-    let url = format!("{}/api/v1/file/{}?api_key={}", CORE_API, uuid, API_KEY);
-    let result = reqwest::get(&url).await.ok()?
-        .json::<serde_json::Value>().await.ok()?;
-    let w = result["width"].as_u64().unwrap_or(0) as u32;
-    let h = result["height"].as_u64().unwrap_or(0) as u32;
-    if w == 0 || h == 0 {
-        return None;
-    }
-    {
-        let mut cache = RAW_DIM_PROXY_CACHE.lock().unwrap();
-        let cache = cache.get_or_insert_with(HashMap::new);
-        cache.insert(uuid.to_string(), (w, h));
-    }
-    Some((w, h))
-}
-
 
 
 async fn get_face_thumbnail_handler(State(state): State<ProxyState>, axum::extract::Query(params): axum::extract::Query<std::collections::HashMap<String, String>>) -> Response {
@@ -729,6 +771,46 @@ async fn get_identity_matches_handler(axum::extract::Query(params): axum::extrac
     }
 }
 
+async fn get_trace_profile_file_handler(axum::extract::Query(params): axum::extract::Query<std::collections::HashMap<String, String>>) -> Response {
+    let file_uuid = match params.get("file_uuid") {
+        Some(v) => v.clone(),
+        None => return (StatusCode::BAD_REQUEST, "Missing file_uuid").into_response(),
+    };
+    let trace_id = match params.get("trace_id") {
+        Some(v) => v.clone(),
+        None => return (StatusCode::BAD_REQUEST, "Missing trace_id").into_response(),
+    };
+    let output_bases = [
+        "/Users/accusys/momentry/output",
+        "/Users/accusys/momentry/output_dev",
+        "/Volumes/external/momentry/output",
+        "/Volumes/external/momentry/output_dev",
+    ];
+    let mut profile_path = None;
+    for base in &output_bases {
+        let path = format!("{}/{}/trace_{}/trace_profile.json", base, file_uuid, trace_id);
+        if std::path::Path::new(&path).exists() {
+            profile_path = Some(path);
+            break;
+        }
+    }
+    match profile_path {
+        Some(path) => match std::fs::read_to_string(&path) {
+            Ok(content) => {
+                let parsed: serde_json::Value = match serde_json::from_str(&content) {
+                    Ok(v) => v,
+                    Err(e) => {
+                        return (StatusCode::INTERNAL_SERVER_ERROR, format!("Parse failed: {}", e)).into_response();
+                    }
+                };
+                axum::Json(parsed).into_response()
+            }
+            Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Read failed: {}", e)).into_response(),
+        },
+        None => (StatusCode::NOT_FOUND, "Trace profile file not found").into_response(),
+    }
+}
+
 async fn get_cluster_results_handler(axum::extract::Query(params): axum::extract::Query<std::collections::HashMap<String, String>>) -> Response {
     let file_hash = match params.get("file_hash") {
         Some(v) => v.clone(),
@@ -736,29 +818,46 @@ async fn get_cluster_results_handler(axum::extract::Query(params): axum::extract
     };
 
     let client = reqwest::Client::new();
-    let url = format!("{}/api/v1/file/{}/face-groups", CORE_API, file_hash);
-    let resp = match client
-        .get(&url)
-        .header("X-API-Key", API_KEY)
-        .send()
-        .await
-    {
+    // Try new cluster-results endpoint first, fallback to face-groups
+    let url = format!("{}/api/v1/cluster-results?file_hash={}", CORE_API, file_hash);
+    let resp = client.get(&url).header("X-API-Key", API_KEY).send().await;
+
+    match resp {
+        Ok(r) => {
+            let status = r.status();
+            let b = r.text().await.unwrap_or_default();
+            // Check if response has data
+            if status.is_success() {
+                if let Ok(v) = serde_json::from_str::<serde_json::Value>(&b) {
+                    let fg = v.get("face_groups").and_then(|x| x.as_array()).map(|x| x.len()).unwrap_or(0);
+                    if fg > 0 {
+                        return ([(axum::http::header::CONTENT_TYPE, "application/json")], b).into_response();
+                    }
+                }
+            }
+        }
+        Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Request failed: {}", e)).into_response(),
+    };
+
+    // Fallback to face-groups
+    let fg_url = format!("{}/api/v1/file/{}/face-groups", CORE_API, file_hash);
+    let fg_resp = match client.get(&fg_url).header("X-API-Key", API_KEY).send().await {
         Ok(r) => r,
         Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Face groups request failed: {}", e)).into_response(),
     };
 
-    let status = resp.status();
-    let body = match resp.text().await {
+    let fg_status = fg_resp.status();
+    let fg_body = match fg_resp.text().await {
         Ok(b) => b,
         Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("Body read failed: {}", e)).into_response(),
     };
 
-    let axum_status = axum::http::StatusCode::from_u16(status.as_u16()).unwrap_or(StatusCode::INTERNAL_SERVER_ERROR);
+    let axum_status = axum::http::StatusCode::from_u16(fg_status.as_u16()).unwrap_or(StatusCode::INTERNAL_SERVER_ERROR);
     if !axum_status.is_success() {
-        return (axum_status, body).into_response();
+        return (axum_status, fg_body).into_response();
     }
 
-    let result: serde_json::Value = match serde_json::from_str(&body) {
+    let result: serde_json::Value = match serde_json::from_str(&fg_body) {
         Ok(v) => v,
         Err(e) => return (StatusCode::INTERNAL_SERVER_ERROR, format!("JSON parse failed: {}", e)).into_response(),
     };
@@ -907,12 +1006,11 @@ async fn get_frame_handler(State(state): State<ProxyState>, axum::extract::Query
             Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Read failed: {}", e)).into_response(),
         }
     } else {
-        let fps = file_info["fps"].as_f64().unwrap_or(24.0);
-        let time_sec = frame as f64 / fps;
+        // Use select filter for exact frame extraction instead of -ss seeking
         let output = tokio::process::Command::new("ffmpeg")
             .args([
-                "-ss", &time_sec.to_string(),
                 "-i", &file_path,
+                "-vf", &format!("select=eq(n\\,{frame})"),
                 "-vframes", "1",
                 "-q:v", "2",
                 "-f", "mjpeg",
@@ -1015,4 +1113,288 @@ async fn get_appearance_handler(
     };
 
     (status, body).into_response()
-}
\ No newline at end of file
+}
+const ADMIN_CONFIG_PATH: &str = "/Users/accusys/momentry/config/admin_config.json";
+
+async fn get_admin_config_handler() -> Response {
+    match std::fs::read_to_string(ADMIN_CONFIG_PATH) {
+        Ok(content) => {
+            match serde_json::from_str::<serde_json::Value>(&content) {
+                Ok(v) => axum::Json(v).into_response(),
+                Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Parse failed: {}", e)).into_response(),
+            }
+        }
+        Err(e) => (StatusCode::NOT_FOUND, format!("Config file not found: {}", e)).into_response(),
+    }
+}
+
+async fn save_admin_config_handler(axum::extract::Json(payload): axum::extract::Json<serde_json::Value>) -> Response {
+    match serde_json::to_string_pretty(&payload) {
+        Ok(formatted) => {
+            match std::fs::write(ADMIN_CONFIG_PATH, formatted) {
+                Ok(()) => axum::Json(serde_json::json!({"success": true, "message": "Config saved"})).into_response(),
+                Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Write failed: {}", e)).into_response(),
+            }
+        }
+        Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Format failed: {}", e)).into_response(),
+    }
+}
+
+#[cfg(target_arch = "aarch64")]
+mod macmon_sampler {
+    use macmon::Sampler;
+    
+    pub struct MacmonData {
+        pub cpu_power: f32,
+        pub gpu_power: f32,
+        pub ane_power: f32,
+        pub sys_power: f32,
+        pub ram_power: f32,
+        pub cpu_temp: f32,
+        pub gpu_temp: f32,
+        pub ecpu_freq_mhz: u32,
+        pub pcpu_freq_mhz: u32,
+        pub gpu_freq_mhz: u32,
+        pub cpu_scaled_ratio: f32,
+        pub gpu_scaled_ratio: f32,
+        pub chip_name: String,
+        pub ecpu_cores: u8,
+        pub pcpu_cores: u8,
+        pub gpu_cores: u8,
+        pub ram_total: u64,
+        pub ram_usage: u64,
+        pub swap_total: u64,
+        pub swap_used: u64,
+    }
+    
+    fn get_swap_info() -> (u64, u64) {
+        use std::process::Command;
+        let output = match Command::new("sysctl")
+            .args(["-n", "vm.swapusage"])
+            .output()
+        {
+            Ok(o) => o,
+            Err(_) => return (0, 0),
+        };
+        
+        let s = String::from_utf8_lossy(&output.stdout);
+        let parts: Vec<&str> = s.split_whitespace().collect();
+        
+        let total_mb = parts.get(2)
+            .and_then(|v| v.trim_end_matches('M').parse::<f64>().ok())
+            .unwrap_or(0.0) as u64;
+        let used_mb = parts.get(5)
+            .and_then(|v| v.trim_end_matches('M').parse::<f64>().ok())
+            .unwrap_or(0.0) as u64;
+        (total_mb, used_mb)
+    }
+    
+    pub fn get_metrics() -> Option<MacmonData> {
+        let mut sampler = Sampler::new().ok()?;
+        let metrics = sampler.get_metrics(100).ok()?;
+        let soc = sampler.get_soc_info();
+        let (swap_total, swap_used) = get_swap_info();
+        
+        Some(MacmonData {
+            cpu_power: metrics.cpu_power,
+            gpu_power: metrics.gpu_power,
+            ane_power: metrics.ane_power,
+            sys_power: metrics.sys_power,
+            ram_power: metrics.ram_power,
+            cpu_temp: metrics.temp.cpu_temp_avg,
+            gpu_temp: metrics.temp.gpu_temp_avg,
+            ecpu_freq_mhz: metrics.ecpu_freq_mhz,
+            pcpu_freq_mhz: metrics.pcpu_freq_mhz,
+            gpu_freq_mhz: metrics.gpu_freq_mhz,
+            cpu_scaled_ratio: metrics.cpu_scaled_ratio,
+            gpu_scaled_ratio: metrics.gpu_scaled_ratio,
+            chip_name: soc.chip_name.clone(),
+            ecpu_cores: soc.ecpu_cores,
+            pcpu_cores: soc.pcpu_cores,
+            gpu_cores: soc.gpu_cores,
+            ram_total: metrics.memory.ram_total,
+            ram_usage: metrics.memory.ram_usage,
+            swap_total,
+            swap_used,
+        })
+    }
+}
+
+#[cfg(not(target_arch = "aarch64"))]
+mod macmon_sampler {
+    pub struct MacmonData;
+    pub fn get_metrics() -> Option<MacmonData> { None }
+}
+
+pub use super::SystemStatsResponse;
+
+async fn get_system_stats_handler() -> Response {
+    // 1. Try macmon first (Apple Silicon only)
+    if let Some(m) = macmon_sampler::get_metrics() {
+        let ram_total_mb = m.ram_total / 1024 / 1024;
+        let ram_usage_mb = m.ram_usage / 1024 / 1024;
+        let ram_available_mb = ram_total_mb.saturating_sub(ram_usage_mb);
+        let memory_used_percent = if ram_total_mb > 0 {
+            (ram_usage_mb as f64 / ram_total_mb as f64) * 100.0
+        } else {
+            0.0
+        };
+        
+        let swap_total_mb = m.swap_total;
+        let swap_used_mb = m.swap_used;
+        let swap_available_mb = swap_total_mb.saturating_sub(swap_used_mb);
+        let swap_used_percent = if swap_total_mb > 0 {
+            (swap_used_mb as f64 / swap_total_mb as f64) * 100.0
+        } else {
+            0.0
+        };
+        
+        let stats = SystemStatsResponse {
+            cpu_used_percent: m.cpu_scaled_ratio as f64 * 100.0,
+            memory_used_percent,
+            memory_available_mb: ram_available_mb,
+            memory_total_mb: ram_total_mb,
+            swap_used_percent,
+            swap_available_mb,
+            swap_total_mb,
+            gpu_available: true,
+            gpu_utilization: Some(m.gpu_scaled_ratio as f64 * 100.0),
+            gpu_memory_used_pct: None,
+            ane_available: m.ane_power > 0.0,
+            ane_utilization: None,
+            source: "macmon".to_string(),
+            chip_name: Some(m.chip_name),
+            cpu_power: Some(m.cpu_power as f64),
+            gpu_power: Some(m.gpu_power as f64),
+            ane_power: Some(m.ane_power as f64),
+            sys_power: Some(m.sys_power as f64),
+            ram_power: Some(m.ram_power as f64),
+            cpu_temp: Some(m.cpu_temp as f64),
+            gpu_temp: Some(m.gpu_temp as f64),
+            ecpu_freq_mhz: Some(m.ecpu_freq_mhz),
+            pcpu_freq_mhz: Some(m.pcpu_freq_mhz),
+            gpu_freq_mhz: Some(m.gpu_freq_mhz),
+            ecpu_cores: Some(m.ecpu_cores),
+            pcpu_cores: Some(m.pcpu_cores),
+            gpu_cores: Some(m.gpu_cores),
+        };
+        return axum::Json(stats).into_response();
+    }
+    
+    // 2. Fallback: Use Core API
+    let client = reqwest::Client::new();
+    let url = format!("{}/health/detailed", CORE_API);
+    
+    match client.get(&url).header("api_key", API_KEY).send().await {
+        Ok(resp) => {
+            match resp.json::<serde_json::Value>().await {
+                Ok(data) => {
+                    if let Some(resources) = data.get("resources") {
+                        let stats = SystemStatsResponse {
+                            cpu_used_percent: resources.get("cpu_used_percent").and_then(|v| v.as_f64()).unwrap_or(0.0),
+                            memory_used_percent: resources.get("memory_used_percent").and_then(|v| v.as_f64()).unwrap_or(0.0),
+                            memory_available_mb: resources.get("memory_available_mb").and_then(|v| v.as_u64()).unwrap_or(0),
+                            memory_total_mb: resources.get("memory_total_mb").and_then(|v| v.as_u64()).unwrap_or(0),
+                            swap_used_percent: 0.0,
+                            swap_available_mb: 0,
+                            swap_total_mb: 0,
+                            gpu_available: resources.get("gpu_available").and_then(|v| v.as_bool()).unwrap_or(false),
+                            gpu_utilization: resources.get("gpu_utilization").and_then(|v| v.as_f64()),
+                            gpu_memory_used_pct: resources.get("gpu_memory_used_pct").and_then(|v| v.as_f64()),
+                            ane_available: resources.get("ane_available").and_then(|v| v.as_bool()).unwrap_or(false),
+                            ane_utilization: resources.get("ane_utilization").and_then(|v| v.as_f64()),
+                            source: "fallback".to_string(),
+                            chip_name: None,
+                            cpu_power: None,
+                            gpu_power: None,
+                            ane_power: None,
+                            sys_power: None,
+                            ram_power: None,
+                            cpu_temp: None,
+                            gpu_temp: None,
+                            ecpu_freq_mhz: None,
+                            pcpu_freq_mhz: None,
+                            gpu_freq_mhz: None,
+                            ecpu_cores: None,
+                            pcpu_cores: None,
+                            gpu_cores: None,
+                        };
+                        axum::Json(stats).into_response()
+                    } else {
+                        (StatusCode::INTERNAL_SERVER_ERROR, "No resources in response").into_response()
+                    }
+                }
+                Err(e) => (StatusCode::INTERNAL_SERVER_ERROR, format!("Parse failed: {}", e)).into_response(),
+            }
+        }
+        Err(e) => (StatusCode::BAD_GATEWAY, format!("Core API error: {}", e)).into_response(),
+    }
+}
+
+async fn validate_system_stats_handler(
+    Query(params): Query<std::collections::HashMap<String, String>>,
+) -> Response {
+    // Parse layer parameter
+    let layers: Vec<u32> = params
+        .get("layers")
+        .map(|s| s.split(',').filter_map(|n| n.trim().parse().ok()).collect())
+        .unwrap_or_else(|| vec![1, 2, 4]);
+    
+    // Get current macmon stats
+    let stats = if let Some(m) = macmon_sampler::get_metrics() {
+        let ram_total_mb = m.ram_total / 1024 / 1024;
+        let ram_usage_mb = m.ram_usage / 1024 / 1024;
+        let ram_available_mb = ram_total_mb.saturating_sub(ram_usage_mb);
+        let memory_used_percent = if ram_total_mb > 0 {
+            (ram_usage_mb as f64 / ram_total_mb as f64) * 100.0
+        } else {
+            0.0
+        };
+        
+        let swap_total_mb = m.swap_total;
+        let swap_used_mb = m.swap_used;
+        let swap_available_mb = swap_total_mb.saturating_sub(swap_used_mb);
+        let swap_used_percent = if swap_total_mb > 0 {
+            (swap_used_mb as f64 / swap_total_mb as f64) * 100.0
+        } else {
+            0.0
+        };
+        
+        SystemStatsResponse {
+            cpu_used_percent: m.cpu_scaled_ratio as f64 * 100.0,
+            memory_used_percent,
+            memory_available_mb: ram_available_mb,
+            memory_total_mb: ram_total_mb,
+            swap_used_percent,
+            swap_available_mb,
+            swap_total_mb,
+            gpu_available: true,
+            gpu_utilization: Some(m.gpu_scaled_ratio as f64 * 100.0),
+            gpu_memory_used_pct: None,
+            ane_available: m.ane_power > 0.0,
+            ane_utilization: None,
+            source: "macmon".to_string(),
+            chip_name: Some(m.chip_name),
+            cpu_power: Some(m.cpu_power as f64),
+            gpu_power: Some(m.gpu_power as f64),
+            ane_power: Some(m.ane_power as f64),
+            sys_power: Some(m.sys_power as f64),
+            ram_power: Some(m.ram_power as f64),
+            cpu_temp: Some(m.cpu_temp as f64),
+            gpu_temp: Some(m.gpu_temp as f64),
+            ecpu_freq_mhz: Some(m.ecpu_freq_mhz),
+            pcpu_freq_mhz: Some(m.pcpu_freq_mhz),
+            gpu_freq_mhz: Some(m.gpu_freq_mhz),
+            ecpu_cores: Some(m.ecpu_cores),
+            pcpu_cores: Some(m.pcpu_cores),
+            gpu_cores: Some(m.gpu_cores),
+        }
+    } else {
+        return (StatusCode::INTERNAL_SERVER_ERROR, "macmon not available").into_response();
+    };
+    
+    // Run validation
+    let result = super::validate::run_validation(&layers, &stats);
+    
+    axum::Json(result).into_response()
+}
diff --git a/src-tauri/src/validate.rs b/src-tauri/src/validate.rs
new file mode 100644
index 0000000..8e58227
--- /dev/null
+++ b/src-tauri/src/validate.rs
@@ -0,0 +1,447 @@
+use serde::{Deserialize, Serialize};
+use std::fs::{self, OpenOptions};
+use std::io::Write;
+use std::path::Path;
+use std::process::Command;
+use std::time::{SystemTime, UNIX_EPOCH};
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub enum ValidationStatus {
+    Pass,
+    Warn,
+    Fail,
+    Unverified,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct MetricValidation {
+    pub macmon_value: f64,
+    pub reference_value: f64,
+    pub diff_pct: f64,
+    pub status: ValidationStatus,
+    pub tolerance: f64,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct LayerValidation {
+    pub name: String,
+    pub requires_sudo: bool,
+    pub metrics: std::collections::HashMap<String, MetricValidation>,
+    pub summary: ValidationSummary,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ValidationSummary {
+    pub total: u32,
+    pub passed: u32,
+    pub failed: u32,
+    pub unverified: u32,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct ValidationResult {
+    pub timestamp: String,
+    pub layers: std::collections::HashMap<String, Option<LayerValidation>>,
+    pub overall_summary: ValidationSummary,
+}
+
+impl ValidationStatus {
+    fn from_diff(diff_pct: f64, tolerance: f64) -> Self {
+        if diff_pct <= tolerance {
+            ValidationStatus::Pass
+        } else if diff_pct <= tolerance * 2.0 {
+            ValidationStatus::Warn
+        } else {
+            ValidationStatus::Fail
+        }
+    }
+}
+
+fn get_timestamp() -> String {
+    let now = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .unwrap()
+        .as_secs();
+    let dt = chrono::DateTime::from_timestamp(now as i64, 0).unwrap();
+    dt.format("%Y-%m-%dT%H:%M:%SZ").to_string()
+}
+
+fn write_log(message: &str) {
+    let log_dir = std::env::var("MOMENTRY_DATA_DIR")
+        .unwrap_or_else(|_| ".".to_string());
+    let log_path = Path::new(&log_dir).join("logs").join("validation.log");
+    
+    if let Some(parent) = log_path.parent() {
+        let _ = fs::create_dir_all(parent);
+    }
+    
+    let timestamp = get_timestamp();
+    let log_line = format!("{} {}\n", timestamp, message);
+    
+    if let Ok(mut file) = OpenOptions::new()
+        .create(true)
+        .append(true)
+        .open(&log_path)
+    {
+        let _ = file.write_all(log_line.as_bytes());
+    }
+}
+
+// ==================== Layer 1: Activity Monitor Validation ====================
+
+// CPU formula decision (2026-08-31):
+// - macmon uses `cpu_scaled_ratio` (frequency-weighted: E-core work counts less due to lower freq)
+// - `top` uses simple user+sys ratio (no frequency weighting)
+// - These are intentionally different formulas; macmon's approach is more accurate for "actual work done"
+// - Therefore, CPU validation is marked as Unverified (different formula, not comparable)
+pub fn validate_cpu_usage_scaled_ratio() -> Option<MetricValidation> {
+    write_log("[INFO] Layer 1: CPU uses cpu_scaled_ratio (frequency-weighted) - not comparable to top");
+    
+    let macmon_value = 0.0; // Will be filled by caller
+    
+    write_log(&format!(
+        "[INFO] Layer 1 CPU: macmon cpu_scaled_ratio={:.1}% (frequency-weighted formula)",
+        macmon_value
+    ));
+    
+    Some(MetricValidation {
+        macmon_value,
+        reference_value: 0.0,
+        diff_pct: 0.0,
+        status: ValidationStatus::Unverified,
+        tolerance: 0.0,
+    })
+}
+
+// Memory formula decision (2026-08-31):
+// - macmon uses its own memory calculation (ram_usage from crate)
+// - Activity Monitor uses: wired + active + inactive + speculative - purgeable
+// - These formulas are intentionally different; macmon's approach is chosen as the baseline
+// - Therefore, Memory Used validation is marked as Unverified (different formula, not comparable)
+pub fn validate_memory_used_macmon_formula() -> Option<MetricValidation> {
+    write_log("[INFO] Layer 1: Memory uses macmon formula - not comparable to Activity Monitor");
+    
+    let macmon_value = 0.0; // Will be filled by caller
+    
+    write_log(&format!(
+        "[INFO] Layer 1 Memory Used: macmon={:.1}% (macmon formula)",
+        macmon_value
+    ));
+    
+    Some(MetricValidation {
+        macmon_value,
+        reference_value: 0.0,
+        diff_pct: 0.0,
+        status: ValidationStatus::Unverified,
+        tolerance: 0.0,
+    })
+}
+
+pub fn validate_swap_via_sysctl() -> Option<MetricValidation> {
+    write_log("[INFO] Layer 1: Validating Swap via sysctl");
+    
+    let output = Command::new("sysctl")
+        .args(["-n", "vm.swapusage"])
+        .output()
+        .ok()?;
+    
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    
+    // Parse: total = 9216.00M  used = 8420.00M  free = 796.00M  (encrypted)
+    let parts: Vec<&str> = stdout.split_whitespace().collect();
+    
+    let total_mb: f64 = parts.get(2)
+        .and_then(|v| v.trim_end_matches('M').parse().ok())
+        .unwrap_or(0.0);
+    let used_mb: f64 = parts.get(5)
+        .and_then(|v| v.trim_end_matches('M').parse().ok())
+        .unwrap_or(0.0);
+    
+    let used_pct = if total_mb > 0.0 {
+        (used_mb / total_mb) * 100.0
+    } else {
+        0.0
+    };
+    
+    let macmon_value = 0.0; // Will be filled by caller
+    let tolerance = 1.0;
+    let diff_pct = (macmon_value - used_pct).abs();
+    
+    write_log(&format!(
+        "[INFO] Layer 1 Swap: macmon={:.1}%, sysctl={:.1}%, diff={:.2}%",
+        macmon_value, used_pct, diff_pct
+    ));
+    
+    Some(MetricValidation {
+        macmon_value,
+        reference_value: used_pct,
+        diff_pct,
+        status: ValidationStatus::from_diff(diff_pct, tolerance),
+        tolerance,
+    })
+}
+
+pub fn validate_memory_total_via_sysctl() -> Option<MetricValidation> {
+    write_log("[INFO] Layer 1: Validating Memory Total via sysctl");
+    
+    let output = Command::new("sysctl")
+        .args(["-n", "hw.memsize"])
+        .output()
+        .ok()?;
+    
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    let total_bytes: u64 = stdout.trim().parse().ok()?;
+    let total_mb = total_bytes as f64 / (1024.0 * 1024.0);
+    
+    let macmon_value = 0.0; // Will be filled by caller
+    let tolerance = 0.0; // Exact match expected
+    let diff_pct = (macmon_value - total_mb).abs();
+    
+    write_log(&format!(
+        "[INFO] Layer 1 Memory Total: macmon={:.0}MB, sysctl={:.0}MB, diff={:.0}MB",
+        macmon_value, total_mb, diff_pct
+    ));
+    
+    Some(MetricValidation {
+        macmon_value,
+        reference_value: total_mb,
+        diff_pct,
+        status: ValidationStatus::from_diff(diff_pct, 0.1), // Very small tolerance
+        tolerance: 0.1,
+    })
+}
+
+// ==================== Layer 2: System API Validation ====================
+
+pub fn validate_cpu_temp_via_ioreg() -> Option<MetricValidation> {
+    write_log("[INFO] Layer 2: Validating CPU Temp via ioreg");
+    
+    let output = Command::new("ioreg")
+        .args(["-r", "-n", "AppleSMC"])
+        .output()
+        .ok()?;
+    
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    
+    // Look for temperature values
+    let temp = stdout
+        .lines()
+        .find(|line| line.contains("temperature") || line.contains("TC0P") || line.contains("TC0H"))
+        .and_then(|line| {
+            // Extract numeric value
+            let num_str: String = line
+                .chars()
+                .filter(|c| c.is_numeric() || *c == '.' || *c == '-')
+                .collect();
+            num_str.parse::<f64>().ok()
+        })
+        .unwrap_or(0.0);
+    
+    let macmon_value = 0.0; // Will be filled by caller
+    let tolerance = 1.0;
+    let diff_pct = (macmon_value - temp).abs();
+    
+    write_log(&format!(
+        "[INFO] Layer 2 CPU Temp: macmon={:.1}°C, ioreg={:.1}°C, diff={:.1}°C",
+        macmon_value, temp, diff_pct
+    ));
+    
+    Some(MetricValidation {
+        macmon_value,
+        reference_value: temp,
+        diff_pct,
+        status: ValidationStatus::from_diff(diff_pct, tolerance),
+        tolerance,
+    })
+}
+
+pub fn validate_thermal_state_via_pmset() -> Option<MetricValidation> {
+    write_log("[INFO] Layer 2: Validating Thermal State via pmset");
+    
+    let output = Command::new("pmset")
+        .args(["-g", "therm"])
+        .output()
+        .ok()?;
+    
+    let stdout = String::from_utf8_lossy(&output.stdout);
+    
+    // Parse thermal state
+    let state = if stdout.contains("CPU Power Load") {
+        "Nominal"
+    } else if stdout.contains("Warning") {
+        "Warning"
+    } else {
+        "Nominal"
+    };
+    
+    // For thermal state, we just log the result (it's a string comparison)
+    write_log(&format!("[INFO] Layer 2 Thermal State: {}", state));
+    
+    None // Return None for string-based metrics
+}
+
+// ==================== Main Validation Function ====================
+
+pub fn run_validation(layers: &[u32], macmon_stats: &super::SystemStatsResponse) -> ValidationResult {
+    write_log(&format!("[INFO] Validation started: layers={:?}", layers));
+    
+    let mut result = ValidationResult {
+        timestamp: get_timestamp(),
+        layers: std::collections::HashMap::new(),
+        overall_summary: ValidationSummary {
+            total: 0,
+            passed: 0,
+            failed: 0,
+            unverified: 0,
+        },
+    };
+    
+    // Layer 1: Activity Monitor
+    if layers.contains(&1) {
+        let mut layer1 = LayerValidation {
+            name: "Activity Monitor".to_string(),
+            requires_sudo: false,
+            metrics: std::collections::HashMap::new(),
+            summary: ValidationSummary {
+                total: 0,
+                passed: 0,
+                failed: 0,
+                unverified: 0,
+            },
+        };
+        
+        // CPU - Unverified (different formula)
+        if let Some(mut val) = validate_cpu_usage_scaled_ratio() {
+            val.macmon_value = macmon_stats.cpu_used_percent;
+            layer1.metrics.insert("cpu_usage".to_string(), val);
+        }
+        
+        // Memory Used - Unverified (different formula)
+        if let Some(mut val) = validate_memory_used_macmon_formula() {
+            val.macmon_value = macmon_stats.memory_used_percent;
+            layer1.metrics.insert("memory_used_percent".to_string(), val);
+        }
+        
+        // Memory Total
+        if let Some(mut val) = validate_memory_total_via_sysctl() {
+            val.macmon_value = macmon_stats.memory_total_mb as f64;
+            val.diff_pct = (val.macmon_value - val.reference_value).abs();
+            val.status = ValidationStatus::from_diff(val.diff_pct, val.tolerance);
+            layer1.metrics.insert("memory_total_mb".to_string(), val);
+        }
+        
+        // Swap
+        if macmon_stats.swap_total_mb > 0 {
+            if let Some(mut val) = validate_swap_via_sysctl() {
+                val.macmon_value = macmon_stats.swap_used_percent;
+                val.diff_pct = (val.macmon_value - val.reference_value).abs();
+                val.status = ValidationStatus::from_diff(val.diff_pct, val.tolerance);
+                layer1.metrics.insert("swap_used_percent".to_string(), val);
+            }
+        }
+        
+        // Calculate summary
+        for (_, metric) in &layer1.metrics {
+            layer1.summary.total += 1;
+            result.overall_summary.total += 1;
+            match metric.status {
+                ValidationStatus::Pass => {
+                    layer1.summary.passed += 1;
+                    result.overall_summary.passed += 1;
+                }
+                ValidationStatus::Warn | ValidationStatus::Fail => {
+                    layer1.summary.failed += 1;
+                    result.overall_summary.failed += 1;
+                }
+                ValidationStatus::Unverified => {
+                    layer1.summary.unverified += 1;
+                    result.overall_summary.unverified += 1;
+                }
+            }
+        }
+        
+        result.layers.insert("layer1".to_string(), Some(layer1));
+    }
+    
+    // Layer 2: System API
+    if layers.contains(&2) {
+        let mut layer2 = LayerValidation {
+            name: "System API".to_string(),
+            requires_sudo: false,
+            metrics: std::collections::HashMap::new(),
+            summary: ValidationSummary {
+                total: 0,
+                passed: 0,
+                failed: 0,
+                unverified: 0,
+            },
+        };
+        
+        // CPU Temp
+        if let Some(temp) = macmon_stats.cpu_temp {
+            if let Some(mut val) = validate_cpu_temp_via_ioreg() {
+                val.macmon_value = temp;
+                val.diff_pct = (val.macmon_value - val.reference_value).abs();
+                val.status = ValidationStatus::from_diff(val.diff_pct, val.tolerance);
+                layer2.metrics.insert("cpu_temp".to_string(), val);
+            }
+        }
+        
+        // Calculate summary
+        for (_, metric) in &layer2.metrics {
+            layer2.summary.total += 1;
+            result.overall_summary.total += 1;
+            match metric.status {
+                ValidationStatus::Pass => {
+                    layer2.summary.passed += 1;
+                    result.overall_summary.passed += 1;
+                }
+                ValidationStatus::Warn | ValidationStatus::Fail => {
+                    layer2.summary.failed += 1;
+                    result.overall_summary.failed += 1;
+                }
+                ValidationStatus::Unverified => {
+                    layer2.summary.unverified += 1;
+                    result.overall_summary.unverified += 1;
+                }
+            }
+        }
+        
+        result.layers.insert("layer2".to_string(), Some(layer2));
+    }
+    
+    // Layer 3: Requires sudo (not implemented in this phase)
+    if layers.contains(&3) {
+        result.layers.insert("layer3".to_string(), None);
+        write_log("[INFO] Layer 3 validation not implemented yet");
+    }
+    
+    // Layer 4: Unverified
+    if layers.contains(&4) {
+        let layer4 = LayerValidation {
+            name: "Unverified".to_string(),
+            requires_sudo: false,
+            metrics: std::collections::HashMap::new(),
+            summary: ValidationSummary {
+                total: 3,
+                passed: 0,
+                failed: 0,
+                unverified: 3,
+            },
+        };
+        
+        result.layers.insert("layer4".to_string(), Some(layer4));
+        result.overall_summary.total += 3;
+        result.overall_summary.unverified += 3;
+    }
+    
+    write_log(&format!(
+        "[INFO] Validation completed: {}/{} passed, {} failed, {} unverified",
+        result.overall_summary.passed,
+        result.overall_summary.total,
+        result.overall_summary.failed,
+        result.overall_summary.unverified
+    ));
+    
+    result
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index cb90a47..b49fa3a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,9 +6,14 @@ import BuildVersion from './components/BuildVersion.vue'
 import { loadUserBehavior } from '@/stores/agentStore'
 import { useI18n } from 'vue-i18n'
 import { changeLanguage, getCurrentLanguage } from './locales'
+import { useAdvancedMode } from '@/stores/advancedMode'
+import { useTheme } from '@/stores/themeStore'
 
 const { t } = useI18n()
 const router = useRouter()
+const { isAdvanced, toggleAdvanced } = useAdvancedMode()
+const { theme, toggleTheme } = useTheme()
+
 const appZoom = ref(100)
 const loggedInUser = ref(localStorage.getItem('username') || '')
 const currentLanguage = ref(getCurrentLanguage())
@@ -16,10 +21,25 @@ const currentLanguage = ref(getCurrentLanguage())
 const sidebarWidth = ref(240)
 const isDragging = ref(false)
 const sidebarCollapsed = ref(true)
+const isMobile = ref(window.innerWidth < 768)
+const mobileOpen = ref(false)
 
 function toggleSidebar() {
-  sidebarCollapsed.value = !sidebarCollapsed.value
-  localStorage.setItem('sidebar_collapsed', String(sidebarCollapsed.value))
+  if (isMobile.value) {
+    mobileOpen.value = !mobileOpen.value
+  } else {
+    sidebarCollapsed.value = !sidebarCollapsed.value
+    localStorage.setItem('sidebar_collapsed', String(sidebarCollapsed.value))
+  }
+}
+
+function closeMobileDrawer() {
+  mobileOpen.value = false
+}
+
+function handleResize() {
+  isMobile.value = window.innerWidth < 768
+  if (!isMobile.value) mobileOpen.value = false
 }
 
 function refreshUser() {
@@ -28,6 +48,7 @@ function refreshUser() {
 }
 
 function handleLogout() {
+  if (!confirm('Are you sure you want to logout?')) return
   localStorage.removeItem('token')
   localStorage.removeItem('username')
   localStorage.removeItem('expires_at')
@@ -81,6 +102,7 @@ onMounted(() => {
   document.addEventListener('keydown', handleKeydown)
   document.addEventListener('mousemove', handleDrag)
   document.addEventListener('mouseup', stopDrag)
+  window.addEventListener('resize', handleResize)
   
   refreshUser()
   loadUserBehavior()
@@ -93,18 +115,21 @@ onMounted(() => {
 
 watch(() => router.currentRoute.value.path, () => {
   refreshUser()
+  closeMobileDrawer()
 })
 
 onUnmounted(() => {
   document.removeEventListener('keydown', handleKeydown)
   document.removeEventListener('mousemove', handleDrag)
   document.removeEventListener('mouseup', stopDrag)
+  window.removeEventListener('resize', handleResize)
 })
 </script>
 <template>
   <BuildVersion />
-  <div id="app" class="ms-app" :data-current-login="'guest'">
-    <aside class="ms-side" :class="{ collapsed: sidebarCollapsed }" :style="{ width: sidebarCollapsed ? '62px' : sidebarWidth + 'px', minWidth: sidebarCollapsed ? '62px' : sidebarWidth + 'px' }">
+  <div id="app" class="ms-app" :class="{ 'ms-app-mobile': isMobile }" :data-current-login="'guest'">
+    <div v-if="isMobile && mobileOpen" class="ms-overlay" @click="closeMobileDrawer"></div>
+    <aside class="ms-side" :class="{ collapsed: !isMobile && sidebarCollapsed, 'mobile-open': isMobile && mobileOpen }" :style="isMobile ? {} : { width: sidebarCollapsed ? '62px' : sidebarWidth + 'px', minWidth: sidebarCollapsed ? '62px' : sidebarWidth + 'px' }">
       <div class="gs-sidebar-toggle" @click="toggleSidebar">
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
           :style="{ transform: sidebarCollapsed ? 'rotate(0deg)' : 'rotate(180deg)' }">
@@ -129,14 +154,6 @@ onUnmounted(() => {
           </svg>
           <span class="gs-nav-label">{{ t('nav.library') }}</span>
         </router-link>
-        <router-link to="/face" class="gs-nav-item" active-class="active">
-          <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <rect x="3" y="3" width="18" height="18" rx="2"/>
-            <circle cx="12" cy="10" r="4"/>
-            <path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/>
-          </svg>
-          <span class="gs-nav-label">Face</span>
-        </router-link>
         <router-link to="/admin" class="gs-nav-item" active-class="active">
           <svg class="gs-nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <circle cx="12" cy="12" r="3"/>
@@ -153,12 +170,18 @@ onUnmounted(() => {
       </nav>
     <div class="gs-divider" :class="{ 'gs-hidden': sidebarCollapsed }"></div>
       <div class="gs-footer" :class="{ 'gs-hidden': sidebarCollapsed }">
-        <div class="gs-lang-switcher">
+        <div class="gs-controls">
           <select v-model="currentLanguage" @change="onChangeLanguage" class="gs-lang-select">
-            <option value="en">English</option>
-            <option value="zh-TW">繁體中文</option>
-            <option value="auto">Auto Detect</option>
+            <option value="en">{{ $t('language.en') }}</option>
+            <option value="zh-TW">{{ $t('language.zh-TW') }}</option>
+            <option value="ja">{{ $t('language.ja') }}</option>
+            <option value="auto">{{ $t('language.auto') }}</option>
           </select>
+          <button class="gs-control-btn" :class="{ 'gs-control-active': isAdvanced }" :title="isAdvanced ? 'Advanced Mode: ON' : 'Advanced Mode: OFF'" @click="toggleAdvanced">
+            <svg v-if="isAdvanced" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 7.9-2"/></svg>
+            <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
+          </button>
+          <button class="gs-control-btn" :title="theme === 'dark' ? 'Switch to Light' : 'Switch to Dark'" @click="toggleTheme">{{ theme === 'dark' ? '☀️' : '🌙' }}</button>
         </div>
         <div class="gs-account-row">
           <template v-if="loggedInUser">
@@ -181,8 +204,40 @@ onUnmounted(() => {
     </aside>
     <div class="ms-divider" :class="{ 'ms-divider-hidden': sidebarCollapsed }" @mousedown="startDrag"></div>
 <main class="ms-main">
+      <div v-if="isMobile" class="ms-mobile-header">
+        <button class="ms-mobile-hamburger" @click="toggleSidebar" aria-label="Menu">
+          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+        </button>
+        <span class="ms-mobile-title">Momentry Studio</span>
+      </div>
       <router-view />
     </main>
+    <nav v-if="isMobile" class="ms-bottom-nav">
+      <router-link to="/search" class="ms-bottom-nav-item" active-class="active" @click="closeMobileDrawer">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
+        <span>Search</span>
+      </router-link>
+      <router-link to="/library" class="ms-bottom-nav-item" active-class="active" @click="closeMobileDrawer">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        <span>Library</span>
+      </router-link>
+      <router-link to="/admin" class="ms-bottom-nav-item" active-class="active" @click="closeMobileDrawer">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+        <span>Admin</span>
+      </router-link>
+      <router-link to="/client" class="ms-bottom-nav-item" active-class="active" @click="closeMobileDrawer">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
+        <span>Client</span>
+      </router-link>
+      <router-link v-if="!loggedInUser" to="/login" class="ms-bottom-nav-item" active-class="active" @click="closeMobileDrawer">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+        <span>Login</span>
+      </router-link>
+      <button v-else class="ms-bottom-nav-item ms-bottom-nav-btn-logout" @click="handleLogout">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+        <span>Logout</span>
+      </button>
+    </nav>
     <AgentTip v-if="loggedInUser" />
   </div>
 </template>
@@ -223,6 +278,10 @@ html, body { height: 100%; margin: 0; }
 .gs-nav-icon { width: 22px; height: 22px; flex-shrink: 0; }
 .gs-divider { height: 1px; background: var(--border-light); margin: 14px 8px; flex-shrink: 0; }
 .gs-footer { margin-top: auto; padding: 10px 8px; border-radius: 12px; background: var(--hover-background); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
+.gs-controls { display: flex; align-items: center; gap: 6px; }
+.gs-control-btn { width: 28px; height: 28px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--card-background); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; color: #888; flex-shrink: 0; filter: grayscale(1); }
+.gs-control-btn:hover { background: var(--border-light); border-color: var(--text-secondary); filter: grayscale(0); }
+.gs-control-active { color: var(--primary-color); border-color: var(--primary-color); background: var(--primary-color-light, rgba(66,133,244,0.1)); filter: grayscale(0); }
 .gs-lang-switcher { width: 100%; }
 .gs-lang-select { width: 100%; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--card-background); font-size: 12px; font-family: inherit; color: var(--text-secondary); cursor: pointer; outline: none; }
 .gs-lang-select:focus { border-color: var(--text-primary); }
@@ -234,4 +293,36 @@ html, body { height: 100%; margin: 0; }
 .gs-login-link:hover { color: var(--text-primary); }
 .ms-main { flex: 1; min-width: 0; background: var(--card-background) !important; border-radius: 18px; padding: 36px 42px; overflow-y: auto; overflow-x: hidden; height: 100%; }
 .ms-content { max-width: 1200px; }
+
+/* Mobile overlay */
+.ms-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
+
+/* Mobile header */
+.ms-mobile-header { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
+.ms-mobile-hamburger { background: none; border: none; cursor: pointer; color: var(--text-primary); padding: 4px; }
+.ms-mobile-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
+
+/* Bottom nav */
+.ms-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998;
+  background: var(--card-background); border-top: 1px solid var(--border-light);
+  justify-content: space-around; padding: 6px 0 env(safe-area-inset-bottom, 6px) 0;
+  box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
+.ms-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px;
+  text-decoration: none; color: var(--text-secondary); font-size: 10px; padding: 2px 8px; }
+.ms-bottom-nav-item.active { color: var(--primary-color); }
+.ms-bottom-nav-item svg { width: 20px; height: 20px; }
+.ms-bottom-nav-btn-logout { background: none; border: none; cursor: pointer; }
+
+@media (max-width: 767px) {
+  .ms-app { padding: 0; max-width: 100%; height: 100dvh; }
+  .ms-app.ms-app-mobile { padding: 0; }
+  .ms-side { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1000;
+    transform: translateX(-100%); transition: transform 0.25s ease;
+    width: 260px !important; min-width: 260px !important; border-radius: 0 18px 18px 0; }
+  .ms-side.mobile-open { transform: translateX(0); }
+  .ms-side .gs-sidebar-toggle { display: none; }
+  .ms-divider { display: none; }
+  .ms-main { padding: 12px 12px 60px; border-radius: 0; height: 100dvh; }
+  .gs-footer-compact { display: none !important; }
+}
 </style>
diff --git a/src/api/index.ts b/src/api/index.ts
index 46d8bb8..e7f2407 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -11,6 +11,21 @@ function detectBaseUrl(): string {
   return localStorage.getItem('markbase_url') || 'http://localhost:11438'
 }
 
+// Poll command status until completed or failed
+export async function pollCommandStatus(commandId: string, intervalMs: number = 2000, maxAttempts: number = 150): Promise<any> {
+  for (let attempt = 0; attempt < maxAttempts; attempt++) {
+    const status = await apiCall('get_command_status', { commandId })
+    if (status?.status === 'completed') {
+      return status
+    }
+    if (status?.status === 'failed') {
+      throw new Error(status.last_error || 'Command failed')
+    }
+    await new Promise(resolve => setTimeout(resolve, intervalMs))
+  }
+  throw new Error('Command polling timeout')
+}
+
 // API proxy: Tauri IPC or HTTP fetch
 export async function apiCall(cmd: string, args: Record<string, any>): Promise<any> {
   if (cmd === 'get_video_stream') {
@@ -71,6 +86,31 @@ export async function apiCall(cmd: string, args: Record<string, any>): Promise<a
     const data = await httpCall(cmd, args)
     return transformResponse(cmd, data)
   }
+  // get_trace_profile / get_trace_profile_file 也沒有 Tauri command
+  if (cmd === 'get_trace_profile' || cmd === 'get_trace_profile_file') {
+    const data = await httpCall(cmd, args)
+    return transformResponse(cmd, data)
+  }
+  // get_file_traces 也沒有 Tauri command
+  if (cmd === 'get_file_traces') {
+    const data = await httpCall(cmd, args)
+    return transformResponse(cmd, data, args)
+  }
+  // search_file_faces 也沒有 Tauri command
+  if (cmd === 'search_file_faces') {
+    const data = await httpCall(cmd, args)
+    return transformResponse(cmd, data, args)
+  }
+  // get_face_landmarks 也沒有 Tauri command
+  if (cmd === 'get_face_landmarks') {
+    const data = await httpCall(cmd, args)
+    return transformResponse(cmd, data, args)
+  }
+  // Admin data comes from MarkBase API (/api/v2/admin/*) in all modes — no Tauri command
+  if (cmd === 'get_system_stats' || cmd === 'list_admin_users' || cmd === 'list_shares' || cmd === 'validate_system_stats') {
+    const data = await httpCall(cmd, args)
+    return transformResponse(cmd, data)
+  }
   if (isTauri) {
     try {
       const data = await invoke(cmd, args)
@@ -282,6 +322,9 @@ case 'search_keyword': {
     case 'get_file_thumbnail_by_path': {
       return { url: `/api/v1/file/thumbnail?path=${encodeURIComponent(a.path)}&frame=${a.frame || 30}`, method: 'GET' }
     }
+    case 'regenerate_trace_thumbnail': {
+      return { url: `/api/v1/file/${a.fileUuid}/trace/${a.traceId}/regenerate-thumbnail`, method: 'POST' }
+    }
 
     // --- Video API ---
     case 'get_video_stream': {
@@ -340,6 +383,20 @@ case 'search_keyword': {
     case 'list_traces': {
       return { url: `/api/v1/file/${a.file_uuid}/traces`, method: 'POST' }
     }
+    case 'get_file_traces': {
+      const fu = a.fileUuid ?? a.file_uuid
+      return { url: `/api/v1/file/${fu}/traces`, method: 'POST', body: { page: a.page || 1, page_size: a.page_size || 3000, limit: a.limit || 3000 } }
+    }
+    case 'search_file_faces': {
+      const fu = a.fileUuid ?? a.file_uuid
+      const params = new URLSearchParams()
+      if (a.q) params.set('q', a.q)
+      params.set('page', String(a.page || 1))
+      params.set('page_size', String(a.perPage || 20))
+      if (a.binding) params.set('binding', a.binding)
+      if (a.minConfidence != null) params.set('min_confidence', String(a.minConfidence))
+      return { url: `/api/v1/file/${fu}/faces/search?${params.toString()}`, method: 'GET' }
+    }
     case 'get_trace_profile': {
       const params = new URLSearchParams()
       const fu = a.file_uuid ?? a.fileUuid
@@ -348,6 +405,14 @@ case 'search_keyword': {
       if (tid != null) params.set('trace_id', String(tid))
       return { url: `/api/v1/trace-profile?${params.toString()}`, method: 'GET' }
     }
+    case 'get_trace_profile_file': {
+      const params = new URLSearchParams()
+      const fu = a.file_uuid ?? a.fileUuid
+      const tid = a.trace_id ?? a.traceId
+      if (fu) params.set('file_uuid', fu)
+      if (tid != null) params.set('trace_id', String(tid))
+      return { url: `/api/v1/trace-profile-file?${params.toString()}`, method: 'GET' }
+    }
     case 'update_trace_profile': {
       const body = a.body ?? {
         file_uuid: a.file_uuid ?? a.fileUuid,
@@ -357,7 +422,12 @@ case 'search_keyword': {
       return { url: '/api/v1/trace-profile', method: 'PUT', body }
     }
     case 'delete_trace': {
-      const body: any = { hard_delete: a.hard_delete ?? true }
+      const body: any = { mode: a.mode ?? 'ungroup' }
+      if (a.mode === 'delete') {
+        if (a.hard_delete !== undefined) body.hard_delete = a.hard_delete
+      } else {
+        body.hard_delete = a.hard_delete ?? true
+      }
       return { url: `/api/v1/file/${a.file_uuid}/trace/${a.trace_id}`, method: 'DELETE', body }
     }
     case 'restore_trace': {
@@ -460,6 +530,9 @@ case 'search_keyword': {
     case 'register_file': {
       return { url: '/api/v1/files/register', method: 'POST', body: { file_path: a.filePath } }
     }
+    case 'get_command_status': {
+      return { url: `/api/v1/command/${a.commandId}`, method: 'GET' }
+    }
     case 'process_file': {
       return { url: `/api/v1/file/${a.fileUuid}/process`, method: 'POST', body: { processors: a.processors } }
     }
@@ -467,10 +540,10 @@ case 'search_keyword': {
       return { url: `/api/v1/identity-matches?file_hash=${a.fileHash}`, method: 'GET' }
     }
     case 'run_cluster_agent': {
-      return { url: `/api/v1/file/${a.fileUuid}/cluster-agent`, method: 'POST', body: { confirm: true } }
+      return { url: `/api/v1/file/${a.fileUuid}/cluster-agent`, method: 'POST', body: { confirm: true }, timeout: 600000 }
     }
     case 'get_cluster_results': {
-      return { url: `/api/v1/cluster-results?file_hash=${a.fileHash}`, method: 'GET' }
+      return { url: `/api/v1/cluster-results?file_hash=${a.fileHash}&include_trace_ids=false`, method: 'GET' }
     }
     case 'get_similar_face_groups': {
       const params = new URLSearchParams()
@@ -486,7 +559,9 @@ case 'search_keyword': {
       return { url: `/api/v1/file-profile?file_uuid=${a.fileUuid}`, method: 'GET' }
     }
     case 'update_file_profile': {
-      return { url: '/api/v1/file-profile', method: 'PUT', body: { file_uuid: a.fileUuid, file_path: a.filePath, file_name: a.fileName } }
+      const body: any = { file_uuid: a.fileUuid, file_path: a.filePath, file_name: a.fileName }
+      if (a.faceFilter != null) body.face_filter = a.faceFilter
+      return { url: '/api/v1/file-profile', method: 'PUT', body }
     }
     case 'get_processor_json': {
       return { url: `/api/v1/processor-json?file_hash=${a.fileHash}&processor=${a.processor}`, method: 'GET' }
@@ -555,6 +630,17 @@ case 'search_keyword': {
       return { url: `/api/v1/bookmarks/${a.id}`, method: 'DELETE' }
     }
 
+    // --- Video Marks ---
+    case 'get_video_marks': {
+      return { url: `/api/v1/video-marks?file_uuid=${encodeURIComponent(a.fileUuid)}`, method: 'GET' }
+    }
+    case 'save_video_mark': {
+      return { url: '/api/v1/video-marks', method: 'POST', body: { file_uuid: a.fileUuid, tag: a.tag, start_frame: a.startFrame, end_frame: a.endFrame, note: a.note } }
+    }
+    case 'delete_video_mark': {
+      return { url: `/api/v1/video-mark/${a.id}`, method: 'DELETE' }
+    }
+
     // --- Service Management ---
     case 'stop_service': {
       const mbUrl = detectBaseUrl()
@@ -568,6 +654,11 @@ case 'search_keyword': {
     // --- Admin Panel ---
     case 'get_system_stats':
       return { url: '/api/v2/admin/system-stats', method: 'GET' }
+    case 'validate_system_stats': {
+      let url = '/api/v1/system-stats/validate'
+      if (a.layers) url += `?layers=${a.layers}`
+      return { url, method: 'GET' }
+    }
     case 'list_admin_users':
       return { url: '/api/v2/admin/users', method: 'GET' }
     case 'list_shares':
@@ -590,6 +681,14 @@ case 'search_keyword': {
       if (a.bboxH != null) url += `&bbox_h=${a.bboxH}`
       return { url, method: 'GET' }
     }
+    case 'get_face_landmarks': {
+      let url = `/api/v1/file/${a.fileUuid}/face-landmarks?frame=${a.frame}`
+      if (a.bboxX != null) url += `&bbox_x=${a.bboxX}`
+      if (a.bboxY != null) url += `&bbox_y=${a.bboxY}`
+      if (a.bboxW != null) url += `&bbox_w=${a.bboxW}`
+      if (a.bboxH != null) url += `&bbox_h=${a.bboxH}`
+      return { url, method: 'GET' }
+    }
 
     case 'sync_file_status': {
       return { url: `/api/v1/file/${a.fileUuid}/sync-status`, method: 'POST' }
@@ -602,7 +701,7 @@ case 'search_keyword': {
 
 // Transform HTTP response to match Tauri invoke format
 // Some endpoints need data reshaping to match what the Rust commands return
-export function transformResponse(cmd: string, data: any): any {
+export function transformResponse(cmd: string, data: any, args?: Record<string, any>): any {
   switch (cmd) {
     case 'get_files': {
       const files = data.files || data.data || data || []
@@ -614,6 +713,7 @@ export function transformResponse(cmd: string, data: any): any {
         modified_time: f.modified_time || '',
         isRegistered: f.isRegistered ?? f.is_registered ?? false,
         status: f.status || '',
+        status_updated_at: f.status_updated_at || null,
         registrationTime: f.registration_time || null,
         ingested: f.ingested ?? ['completed','keyword_ready','semantic_ready','face_mgmt_ready','agent_ready'].includes(f.status),
       }))
@@ -674,7 +774,7 @@ export function transformResponse(cmd: string, data: any): any {
         bbox: c.bbox ? { x: c.bbox.x, y: c.bbox.y, width: c.bbox.width, height: c.bbox.height } : null,
       }))
     }
-case 'get_unassigned_traces': {
+ case 'get_unassigned_traces': {
       const traces = data.traces || data.data || []
       return {
         total: data.total || traces.length || 0,
@@ -688,6 +788,10 @@ case 'get_unassigned_traces': {
           best_face_frame: t.best_face_frame || 1,
           best_face_confidence: t.best_face_confidence || 1,
           best_face_bbox: t.best_face_bbox ? { x: t.best_face_bbox.x, y: t.best_face_bbox.y, width: t.best_face_bbox.width, height: t.best_face_bbox.height } : null,
+          best_face_capture_quality: t.best_capture_quality ?? null,
+          best_face_eye_ratio: t.best_face_eye_ratio ?? null,
+          best_face_nose_ratio: t.best_face_nose_ratio ?? null,
+          best_face_pose_score: t.best_face_pose_score ?? null,
         })),
       }
     }
@@ -700,6 +804,52 @@ case 'get_unassigned_traces': {
         })),
       }
     }
+    case 'get_file_traces': {
+      const traces = data.traces || data.data || []
+      const fu = args?.fileUuid ?? args?.file_uuid ?? ''
+      return {
+        total: data.total_traces || traces.length || 0,
+        traces: traces.map((t: any) => ({
+          trace_id: t.trace_id,
+          file_uuid: t.file_uuid || fu,
+          face_count: t.face_count || 0,
+          frame_count: t.face_count || 0,
+          start_frame: t.start_frame || 0,
+          end_frame: t.end_frame || 1,
+          start_time: t.start_time || 0,
+          end_time: t.end_time || 0,
+          duration_sec: t.duration_sec || 0,
+          avg_confidence: t.avg_confidence || 0,
+          best_face_id: t.best_face_id ?? null,
+          best_face_frame: t.best_face_frame || 0,
+          best_face_confidence: t.best_face_confidence || 0,
+          best_face_bbox: t.best_face_bbox || null,
+          best_face_capture_quality: t.best_face_capture_quality ?? null,
+          avg_capture_quality: t.avg_capture_quality ?? null,
+          thumbnail_url: t.thumbnail_url || '',
+        })),
+      }
+    }
+    case 'search_file_faces': {
+      const items = data.data || data.traces || []
+      const fu = args?.fileUuid ?? args?.file_uuid ?? ''
+      return {
+        total: data.total || items.length || 0,
+        page: data.page || 1,
+        page_size: data.page_size || 20,
+        traces: items.map((t: any) => ({
+          trace_id: t.trace_id ?? 0,
+          file_uuid: t.file_uuid || fu,
+          name: t.name ?? null,
+          start_frame: t.start_frame || 0,
+          end_frame: t.end_frame || 1,
+          frame_count: t.frame_count || 0,
+          avg_confidence: t.avg_confidence || 0,
+          best_face_bbox: t.best_face_bbox ?? null,
+          thumbnail_url: t.thumbnail_url || '',
+        })),
+      }
+    }
     case 'search_llm_smart': {
       const results = data.results || data.data || data || []
       return results.map((r: any) => {
@@ -789,11 +939,16 @@ case 'get_unassigned_traces': {
     case 'register_file': {
       return {
         success: data.success ?? false,
+        command_id: data.command_id ?? '',
+        status: data.status ?? '',
         file_uuid: data.file_uuid ?? '',
         file_name: data.file_name ?? '',
         message: data.message ?? '',
       }
     }
+    case 'get_command_status': {
+      return data || null
+    }
     case 'process_file': {
       return {
         success: data.success ?? false,
@@ -817,6 +972,7 @@ case 'get_unassigned_traces': {
       return data || null
     }
     case 'get_trace_profile': { return data || null }
+    case 'get_trace_profile_file': { return data || null }
     case 'update_trace_profile': { return data || { success: true } }
     case 'update_trace_profile_group': { return data || { success: true } }
     case 'get_file_profile': { return data || null }
@@ -839,7 +995,14 @@ case 'get_unassigned_traces': {
         message: data.message ?? '',
       }
     }
-    case 'unregister_file':
+    case 'unregister_file': {
+      return {
+        success: data.success ?? false,
+        command_id: data.command_id ?? '',
+        file_uuid: data.file_uuid ?? '',
+        message: data.message ?? '',
+      }
+    }
     case 'ingest_file':
     case 'checkout_file': {
       return {
@@ -885,7 +1048,19 @@ case 'get_unassigned_traces': {
     }
     case 'get_pose':
     case 'get_appearance':
+    case 'get_face_landmarks':
       return data
+    case 'get_system_stats':
+    case 'list_shares':
+      return data
+    case 'list_admin_users': {
+      const users = data.users || data.data || data || []
+      return users.map((u: any) => ({
+        username: u.username || '',
+        homeDir: u.home_dir ?? u.homeDir ?? '',
+        status: u.status ?? 1,
+      }))
+    }
     default:
       return data
   }
diff --git a/src/api/types.ts b/src/api/types.ts
index c1be3b7..784a7c7 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -23,4 +23,37 @@ export interface AppearanceResponse {
   frame: number
   dominant_colors: DominantColor[]
   hsv_histogram?: number[][][]
+}
+
+export interface FaceBBox {
+  x: number
+  y: number
+  width: number
+  height: number
+  confidence: number
+}
+
+export interface FaceLandmarksResponse {
+  frame: number
+  x: number
+  y: number
+  width: number
+  height: number
+  confidence: number
+  pose_angle?: {
+    angle?: string
+    yaw?: number
+    pitch?: number
+    roll?: number
+  } | null
+  landmarks: {
+    left_eye?: number[][]
+    right_eye?: number[][]
+    nose?: number[][]
+  } | null
+  lips?: {
+    outer_lips?: number[][]
+    inner_lips?: number[][]
+  } | null
+  faces?: FaceBBox[]
 }
\ No newline at end of file
diff --git a/src/assets/momentry-base.css b/src/assets/momentry-base.css
index 6c9f72f..1b3c3bc 100644
--- a/src/assets/momentry-base.css
+++ b/src/assets/momentry-base.css
@@ -12,14 +12,14 @@ html, body {
     --success-color: #22c55e;
     --warning-color: #f59e0b;
     --error-color: #ef4444;
-    --background-color: #f8fafc;
-    --card-background: rgba(255, 255, 255, 0.88);
+    --background-color: #e8eaed;
+    --card-background: rgba(255, 255, 255, 0.92);
     --text-primary: #1e293b;
     --text-secondary: #64748b;
-    --border-color: rgba(0, 0, 0, 0.08);
-    --border-light: rgba(0, 0, 0, 0.05);
-    --border-dark: rgba(0, 0, 0, 0.12);
-    --hover-background: rgba(0, 0, 0, 0.04);
+    --border-color: rgba(0, 0, 0, 0.12);
+    --border-light: rgba(0, 0, 0, 0.08);
+    --border-dark: rgba(0, 0, 0, 0.16);
+    --hover-background: rgba(0, 0, 0, 0.06);
     --input-background: rgba(255, 255, 255, 0.95);
     --input-border: rgba(0, 0, 0, 0.1);
     --danger-color: #d93025;
diff --git a/src/assets/momentry-full.css b/src/assets/momentry-full.css
index d89c5aa..bc01634 100644
--- a/src/assets/momentry-full.css
+++ b/src/assets/momentry-full.css
@@ -929,7 +929,7 @@ padding:0 14px 0 32px !important;  margin:2px 0 !important;
 .ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
 .ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }
 .ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }
-.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }
+.ms-ppl-face-strip { display: flex; gap: 10px; padding-bottom: 4px; scrollbar-width: thin; flex: 1; min-width: 0; overflow-x: auto; }
 .ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }
 .ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }
 .ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -984,7 +984,12 @@ padding:0 14px 0 32px !important;  margin:2px 0 !important;
 .ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }
 
 .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; justify-content: space-between; margin-bottom: 16px; }
+.ms-modal-video-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+.ms-video-header-row { display: flex; align-items: center; justify-content: space-between; }
+.ms-video-file-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-video-frame-info { font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
+.ms-video-title-row { gap: 10px; }
+.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-title { font-size: 14px; font-weight: 600; color: #e8eaed; }
 .ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }
 .ms-modal-video-close:hover { color: #fff; }
diff --git a/src/assets/wordpress-exact.css b/src/assets/wordpress-exact.css
index b398c4f..6bb4db9 100644
--- a/src/assets/wordpress-exact.css
+++ b/src/assets/wordpress-exact.css
@@ -925,7 +925,11 @@ padding:0 14px 0 32px !important;  margin:2px 0 !important;
 .ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
 .ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed #bdc1c6; background: #fff; font-size: 20px; color: #bdc1c6; display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }
 .ms-ppl-strip-add-btn:hover { border-color: #202124; color: #202124; }
-.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }
+.ms-ppl-face-strip { display: flex; gap: 10px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #b8bec6 transparent; flex: 1; min-width: 0; overflow-x: auto; }
+.ms-ppl-face-strip::-webkit-scrollbar { height: 8px; }
+.ms-ppl-face-strip::-webkit-scrollbar-track { background: transparent; }
+.ms-ppl-face-strip::-webkit-scrollbar-thumb { background: #b8bec6; border-radius: 999px; }
+.ms-ppl-face-strip::-webkit-scrollbar-thumb:hover { background: #8a919b; }
 .ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }
 .ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: #e8eaed; overflow: hidden; transition: border-color .15s; position: relative; }
 .ms-ppl-strip-face-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@@ -980,7 +984,12 @@ padding:0 14px 0 32px !important;  margin:2px 0 !important;
 .ms-merge-footer { display: flex; justify-content: flex-end; gap: 10px; }
 
 .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; justify-content: space-between; margin-bottom: 16px; }
+.ms-modal-video-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+.ms-video-header-row { display: flex; align-items: center; justify-content: space-between; }
+.ms-video-file-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-video-frame-info { font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
+.ms-video-title-row { gap: 10px; }
+.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-title { font-size: 14px; font-weight: 600; color: #e8eaed; }
 .ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; }
 .ms-modal-video-close:hover { color: #fff; }
diff --git a/src/components/BuildVersion.vue b/src/components/BuildVersion.vue
index fb4b904..0802651 100644
--- a/src/components/BuildVersion.vue
+++ b/src/components/BuildVersion.vue
@@ -1,9 +1,55 @@
 <template>
-  <div class="build-version">{{ version }}</div>
+  <div v-if="isAdvanced" class="build-version" @click="copyInfo" :title="tooltip">{{ displayText }}</div>
 </template>
 
 <script setup lang="ts">
-const version = __BUILD_VERSION__
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAdvancedMode } from '@/stores/advancedMode'
+import pkg from '../../package.json'
+
+const router = useRouter()
+const { isAdvanced } = useAdvancedMode()
+const build = __BUILD_VERSION__
+const shortDate = build.slice(0, 8)
+const appVersion = pkg.version
+
+const pageName = computed(() => {
+  const name = router.currentRoute.value.name
+  return typeof name === 'string' ? name : router.currentRoute.value.path
+})
+
+const displayText = computed(() => `v${appVersion}-${shortDate} | ${pageName.value}`)
+
+const tooltip = computed(() =>
+  `App: ${appVersion}\nBuild: ${build}\nPage: ${pageName.value}`
+)
+
+function copyInfo() {
+  const lines = [
+    '=== MOMENTRY STUDIO ===',
+    `App Version: ${appVersion}`,
+    `Build: ${build}`,
+    `Page: ${pageName.value}`,
+    `Route: ${router.currentRoute.value.path}`,
+    `Timestamp: ${new Date().toISOString()}`
+  ]
+  const text = lines.join('\n')
+  const ta = document.createElement('textarea')
+  ta.value = text
+  ta.style.position = 'fixed'
+  ta.style.left = '0'
+  ta.style.top = '0'
+  ta.style.width = '0'
+  ta.style.height = '0'
+  ta.style.opacity = '0'
+  document.body.appendChild(ta)
+  ta.focus()
+  ta.setSelectionRange(0, text.length)
+  const ok = document.execCommand('copy')
+  document.body.removeChild(ta)
+  if (!ok) window.prompt('Copy (Ctrl+C, Enter):', text)
+}
 </script>
 
 <style scoped>
@@ -14,9 +60,11 @@ const version = __BUILD_VERSION__
   font-size: 10px;
   color: var(--text-secondary, #9aa0a6);
   background: var(--bg-secondary, rgba(0,0,0,0.1));
-  padding: 2px 6px;
+  padding: 2px 8px;
   border-radius: 3px;
   z-index: 9999;
   font-family: monospace;
+  cursor: pointer;
+  white-space: nowrap;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/FaceFilterPanel.vue b/src/components/FaceFilterPanel.vue
index 0eeb235..0bc7331 100644
--- a/src/components/FaceFilterPanel.vue
+++ b/src/components/FaceFilterPanel.vue
@@ -101,6 +101,79 @@
         </select>
       </div>
       
+      <div class="filter-section">
+        <div class="section-title">Single Frame FS Settings</div>
+        
+        <div class="filter-row checkbox-row">
+          <label class="checkbox-label">
+            <input 
+              type="checkbox" 
+              v-model="singleFrameSettings.single_frame_trace_vlm_enabled"
+              @change="markModified"
+            />
+            VLM Processing
+          </label>
+          <div class="hint">Enable VLM for single-frame traces</div>
+        </div>
+        
+        <div class="filter-row checkbox-row">
+          <label class="checkbox-label">
+            <input 
+              type="checkbox" 
+              v-model="singleFrameSettings.single_frame_trace_group_enabled"
+              @change="markModified"
+            />
+            Face Groups
+          </label>
+          <div class="hint">Include single-frame traces in groups</div>
+        </div>
+        
+        <div class="filter-row checkbox-row">
+          <label class="checkbox-label">
+            <input 
+              type="checkbox" 
+              v-model="singleFrameSettings.single_frame_trace_unassigned_enabled"
+              @change="markModified"
+            />
+            Unassigned List
+          </label>
+          <div class="hint">Show single-frame traces in unassigned</div>
+        </div>
+        
+        <div class="filter-row checkbox-row">
+          <label class="checkbox-label">
+            <input 
+              type="checkbox" 
+              v-model="singleFrameSettings.single_trace_group_filter_enabled"
+              @change="markModified"
+            />
+            Single Trace Groups
+          </label>
+          <div class="hint">Filter auto-generated Person_N groups</div>
+        </div>
+        
+        <div class="section-actions">
+          <button 
+            class="action-btn action-btn-primary"
+            @click="applySingleFrameSettings"
+            :disabled="!singleFrameSettingsModified || singleFrameSettingsLoading"
+          >
+            {{ singleFrameSettingsLoading ? 'Applying...' : 'Apply Settings' }}
+          </button>
+          <button 
+            class="action-btn"
+            @click="handleResetSingleFrame"
+            :disabled="singleFrameSettingsLoading"
+          >
+            Reset to Default
+          </button>
+        </div>
+        
+        <div v-if="singleFrameSettingsError" class="error-message">
+          ❌ {{ singleFrameSettingsError }}
+        </div>
+      </div>
+      
       <!-- Action Buttons -->
       <div class="filter-actions">
         <button 
@@ -150,13 +223,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useFaceFilter, type QuickFilterRules } from '../composables/useFaceFilter';
 
 const props = defineProps<{
   fileUuid: string;
 }>();
 
+const emit = defineEmits<{
+  (e: 'settings-updated'): void;
+}>();
+
 const {
   mode,
   rules,
@@ -168,7 +245,15 @@ const {
   setMode,
   updateRules,
   applyBackendFilter,
-  resetToDefault
+  resetToDefault,
+  singleFrameSettings,
+  singleFrameSettingsLoading,
+  singleFrameSettingsError,
+  singleFrameSettingsModified,
+  loadSingleFrameSettings,
+  saveSingleFrameSettings,
+  resetSingleFrameSettings,
+  markSingleFrameSettingsModified
 } = useFaceFilter();
 
 const showPanel = ref(false);
@@ -190,6 +275,34 @@ function handleReset() {
   resetToDefault();
 }
 
+function markModified() {
+  markSingleFrameSettingsModified();
+}
+
+async function applySingleFrameSettings() {
+  if (!props.fileUuid) return;
+  const success = await saveSingleFrameSettings(props.fileUuid);
+  if (success) {
+    emit('settings-updated');
+  }
+}
+
+function handleResetSingleFrame() {
+  resetSingleFrameSettings();
+}
+
+watch(() => props.fileUuid, (newUuid) => {
+  if (newUuid && showPanel.value) {
+    loadSingleFrameSettings(newUuid);
+  }
+}, { immediate: true });
+
+watch(showPanel, (show) => {
+  if (show && props.fileUuid) {
+    loadSingleFrameSettings(props.fileUuid);
+  }
+});
+
 // Expose for parent
 defineExpose({
   showPanel,
@@ -403,4 +516,51 @@ defineExpose({
 .stat-item span {
   font-weight: 600;
 }
+
+.filter-section {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-color, #ddd);
+}
+
+.section-title {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--text-primary, #333);
+}
+
+.checkbox-row {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  margin-bottom: 12px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.hint {
+  font-size: 12px;
+  color: #999;
+  margin-left: 24px;
+}
+
+.section-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 12px;
+}
 </style>
diff --git a/src/components/VideoPlayer.vue b/src/components/VideoPlayer.vue
index dc59d39..a5a823b 100644
--- a/src/components/VideoPlayer.vue
+++ b/src/components/VideoPlayer.vue
@@ -1,10 +1,15 @@
 <template>
   <div v-if="visible" class="ms-modal-overlay show" :style="{ zIndex: zIndexValue }" @click.self="close">
-    <div class="ms-modal ms-modal-video">
+    <div class="ms-modal ms-modal-video" :class="{ 'ms-video-ui-idle': uiIdle }" @mouseenter="showUi" @mousemove="showUi" @mouseleave="hideUi">
       <div class="ms-modal-video-header">
-        <h3 class="ms-modal-video-title">{{ title }}</h3>
-        <span class="ms-video-seg-info">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
-        <button class="ms-modal-video-close" @click="close">&times;</button>
+        <div class="ms-video-header-row">
+          <h3 v-if="actualFileName" class="ms-video-file-name">{{ actualFileName }}</h3>
+          <button class="ms-modal-video-close" @click="close">&times;</button>
+        </div>
+        <div class="ms-video-header-row ms-video-title-row">
+          <span class="ms-modal-video-title">{{ title }}</span>
+          <span class="ms-video-frame-info">F{{ frameOffset }}<template v-if="keyFrameNum != null">-<span class="ms-video-keyframe" title="Seek to key face frame" @click="seekToKeyFrame">[F{{ keyFrameNum }}]</span></template>-F{{ frameOffset + totalFrames }} ({{ formatTime(currentTime) }} / {{ formatTime(duration) }})</span>
+        </div>
       </div>
 
       <!-- Mode toggle (only show when not simple and has traces/segments) -->
@@ -14,62 +19,67 @@
         <button :class="{ active: playMode === 'continuous' }" @click="switchMode('continuous')">{{ t('person.mode_continuous', 'Continuous') }}</button>
       </div>
 
-      <div v-if="videoError" class="ms-video-loading">
-        <p style="color:#f44336">{{ videoError }}</p>
-      </div>
-      <div v-else-if="videoLoading" class="ms-video-loading">
-        <div class="ms-video-loading-spinner"></div>
-        <p>Loading video...</p>
-      </div>
-
-      <video v-if="videoSrc && !videoLoading" ref="videoEl" :src="videoSrc" class="video" controls autoplay playsinline preload="auto" @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate" @error="onVideoError"></video>
-
-      <!-- OCR bbox overlay -->
-      <div v-if="currentOcrMarks.length" class="ms-video-ocr-overlay">
-        <div 
-          v-for="mark in currentOcrMarks"
-          :key="mark.id"
-          class="ms-ocr-bbox"
-          :style="{
-            left: (mark.metadata?.bbox?.x || 0) + 'px',
-            top: (mark.metadata?.bbox?.y || 0) + 'px',
-            width: (mark.metadata?.bbox?.width || 100) + 'px',
-            height: (mark.metadata?.bbox?.height || 40) + 'px'
-          }"
-        >
-          <span class="ms-ocr-text">{{ mark.note }}</span>
+      <div class="ms-video-container" @mousedown="onVideoMouseDown" @mouseup="onVideoMouseUp" @mouseleave="onVideoMouseLeave">
+        <div v-if="videoError" class="ms-video-loading">
+          <p style="color:#f44336">{{ videoError }}</p>
         </div>
-      </div>
-
-      <!-- Face bbox overlay -->
-      <div v-if="currentFaceMarks.length" class="ms-video-face-overlay">
-        <div 
-          v-for="mark in currentFaceMarks"
-          :key="mark.id"
-          class="ms-face-bbox"
-          :style="{
-            left: (mark.metadata?.bbox?.x || 0) + 'px',
-            top: (mark.metadata?.bbox?.y || 0) + 'px',
-            width: (mark.metadata?.bbox?.width || 100) + 'px',
-            height: (mark.metadata?.bbox?.height || 100) + 'px'
-          }"
-        >
-          <span class="ms-face-label">{{ mark.note }}</span>
+        <div v-else-if="videoLoading" class="ms-video-loading">
+          <div class="ms-video-loading-spinner"></div>
+          <p>Loading video...</p>
         </div>
-      </div>
 
-      <!-- Pose indicator -->
-      <div v-if="currentPoseMarks.length" class="ms-video-pose-overlay">
-        <div class="ms-pose-indicator">
-          <span class="ms-pose-icon">🏃</span>
-          <span class="ms-pose-text">Pose detected</span>
+        <video v-if="videoSrc && !videoLoading" ref="videoEl" :src="videoSrc" class="video" controls autoplay playsinline preload="auto" @loadedmetadata="onLoaded" @timeupdate="onTimeUpdate" @error="onVideoError" @play="onPlay" @pause="onPause"></video>
+
+        <!-- OCR bbox overlay -->
+        <div v-if="currentOcrMarks.length" class="ms-video-ocr-overlay">
+          <div 
+            v-for="mark in currentOcrMarks"
+            :key="mark.id"
+            class="ms-ocr-bbox"
+            :style="{
+              left: (mark.metadata?.bbox?.x || 0) + 'px',
+              top: (mark.metadata?.bbox?.y || 0) + 'px',
+              width: (mark.metadata?.bbox?.width || 100) + 'px',
+              height: (mark.metadata?.bbox?.height || 40) + 'px'
+            }"
+          >
+            <span class="ms-ocr-text">{{ mark.note }}</span>
+          </div>
         </div>
-      </div>
 
-      <!-- ASRX subtitle bar -->
-      <div v-if="currentAsrxMark" class="ms-video-subtitle-bar">
-        <div class="ms-subtitle-text">{{ currentAsrxMark.note }}</div>
-        <div class="ms-subtitle-meta">F{{ currentAsrxMark.startFrame }}-F{{ currentAsrxMark.endFrame }}</div>
+        <!-- Face bbox overlay -->
+        <div v-if="currentFaceMarks.length" class="ms-video-face-overlay">
+          <div 
+            v-for="mark in currentFaceMarks"
+            :key="mark.id"
+            class="ms-face-bbox"
+            :style="{
+              left: (mark.metadata?.bbox?.x || 0) + 'px',
+              top: (mark.metadata?.bbox?.y || 0) + 'px',
+              width: (mark.metadata?.bbox?.width || 100) + 'px',
+              height: (mark.metadata?.bbox?.height || 100) + 'px'
+            }"
+          >
+            <span class="ms-face-label">{{ mark.note }}</span>
+          </div>
+        </div>
+
+        <!-- Pose indicator -->
+        <div v-if="currentPoseMarks.length" class="ms-video-pose-overlay">
+          <div class="ms-pose-indicator">
+            <span class="ms-pose-icon">🏃</span>
+            <span class="ms-pose-text">Pose detected</span>
+          </div>
+        </div>
+
+        <!-- ASRX subtitle bar -->
+        <div v-if="currentAsrxMark" class="ms-video-subtitle-bar">
+          <div class="ms-subtitle-text">{{ currentAsrxMark.note }}</div>
+          <div class="ms-subtitle-meta">F{{ asrxStartFrame(currentAsrxMark) }}-F{{ asrxEndFrame(currentAsrxMark) }}</div>
+        </div>
+
+        <!-- Fast-forward indicator -->
+        <div v-if="isFastForward" class="ms-video-fast-forward-indicator">2x</div>
       </div>
 
       <!-- Main Timeline bar -->
@@ -79,7 +89,7 @@
           <div class="ms-video-tl-position" :style="{ left: (currentTime / duration * 100) + '%' }"></div>
         </div>
         <div class="ms-video-tl-labels">
-          <span>0:00</span>
+          <span>F{{ currentFrame }}</span>
           <span>{{ formatTime(duration) }}</span>
         </div>
       </div>
@@ -88,35 +98,38 @@
       <div class="ms-video-mark-timelines" v-if="isAdvanced && !videoLoading && visibleTags.length">
         <div v-for="tag in visibleTags" :key="tag" class="ms-video-mark-tl-row">
           <span class="ms-video-mark-tl-label">{{ tag }}</span>
-          <div class="ms-video-mark-tl-bar">
+          <div class="ms-video-mark-tl-bar" @click="onMarkBarClick">
             <div
               v-for="mark in marksByTag(tag)"
               :key="mark.id"
               class="ms-video-mark-tl-mark"
               :class="{ 'ms-mark-active': isMarkActive(mark) }"
               :style="getMarkStyle(mark)"
-              @click="goToMark(mark)"
+              @click.stop="goToMark(mark)"
               :title="`#${mark.id} ${mark.note || ''}`"
             ></div>
+            <div v-if="playheadPct !== null" class="ms-video-tl-position" :style="{ left: playheadPct + '%' }">
+              <span class="ms-video-tl-pos-tip">{{ formatTime(absSec) }}</span>
+            </div>
           </div>
         </div>
       </div>
 
       <!-- Original segment timeline (keep for traces/segments mode) -->
       <div class="ms-video-timeline-wrap" v-if="!simple && timelineMarkers.length && !videoLoading">
-        <div class="ms-video-tl-bar">
+        <div class="ms-video-tl-bar" @click="onPointBarClick">
           <div
             v-for="(dot, i) in timelineMarkers"
             :key="i"
             class="ms-video-tl-dot"
             :class="{ active: isMarkerActive(i) }"
             :style="{ left: dot.pct + '%', width: dot.w + '%' }"
-            @click="onTimelineClick(dot)"
+            @click.stop="onTimelineClick(dot)"
           >
             <span class="ms-video-tl-tip">{{ formatTime(dot.start) }}</span>
           </div>
-          <div v-if="positionPct !== null" class="ms-video-tl-position" :style="{ left: positionPct + '%' }">
-            <span class="ms-video-tl-pos-tip">{{ formatTime(currentTime) }}</span>
+          <div v-if="playheadPct !== null" class="ms-video-tl-position" :style="{ left: playheadPct + '%' }">
+            <span class="ms-video-tl-pos-tip">{{ formatTime(absSec) }}</span>
           </div>
         </div>
         <div class="ms-video-tl-labels">
@@ -136,19 +149,19 @@
         <!-- Processor toggles -->
         <div class="ms-proc-toggles">
           <label class="ms-proc-toggle">
-            <input type="checkbox" v-model="showAsrxInPlayer" @change="toggleProcessorMarks('asrx')">
+            <input type="checkbox" v-model="showAsrxInPlayer">
             <span class="ms-proc-toggle-label" style="color: #34a853;">ASRX</span>
           </label>
           <label class="ms-proc-toggle">
-            <input type="checkbox" v-model="showOcrInPlayer" @change="toggleProcessorMarks('ocr')">
+            <input type="checkbox" v-model="showOcrInPlayer">
             <span class="ms-proc-toggle-label" style="color: #fbbc04;">OCR</span>
           </label>
           <label class="ms-proc-toggle">
-            <input type="checkbox" v-model="showFaceInPlayer" @change="toggleProcessorMarks('face')">
+            <input type="checkbox" v-model="showFaceInPlayer">
             <span class="ms-proc-toggle-label" style="color: #4285f4;">Face</span>
           </label>
           <label class="ms-proc-toggle">
-            <input type="checkbox" v-model="showPoseInPlayer" @change="toggleProcessorMarks('pose')">
+            <input type="checkbox" v-model="showPoseInPlayer">
             <span class="ms-proc-toggle-label" style="color: #9c27b0;">Pose</span>
           </label>
         </div>
@@ -203,9 +216,9 @@
         </div>
         
         <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>
+          <button class="ms-fm-btn ms-video-nav-btn" @click="prevItem" :disabled="!canPrev">&larr; {{ $t('video.prev') }}</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>
+          <button class="ms-fm-btn ms-video-nav-btn" @click="nextItem" :disabled="!canNext">{{ $t('video.next') }} &rarr;</button>
         </div>
         <span v-else class="ms-video-seg-info">F{{ currentFrame }} / F{{ totalFrames }} <span class="ms-video-time-aux">({{ formatTime(currentTime) }} / {{ formatTime(duration) }})</span></span>
       </div>
@@ -219,10 +232,17 @@ import { apiCall } from '@/api'
 import { useI18n } from 'vue-i18n'
 import { getNextZIndex } from '@/composables/useZIndex'
 import { useAdvancedMode } from '@/stores/advancedMode'
+import { filesCache } from '@/store'
 
 const { t } = useI18n()
 const { isAdvanced } = useAdvancedMode()
 
+const actualFileName = computed(() => {
+  const clean = props.fileUuid?.replace(/-/g, '')
+  const f = filesCache.value.find((f: any) => f.file_uuid?.replace(/-/g, '') === clean)
+  return f?.file_name || ''
+})
+
 const zIndexValue = ref(getNextZIndex())
 
 const props = withDefaults(defineProps<{
@@ -233,6 +253,7 @@ const props = withDefaults(defineProps<{
   mergedSegments?: any[]
   initialTraceIdx?: number
   initialSegmentIdx?: number
+  keyFrame?: number
   title?: string
   simple?: boolean
   useOriginal?: boolean
@@ -247,6 +268,7 @@ const props = withDefaults(defineProps<{
   mergedSegments: () => [],
   initialTraceIdx: 0,
   initialSegmentIdx: 0,
+  keyFrame: null,
   simple: false,
   useOriginal: false,
   showAsrx: false,
@@ -270,15 +292,74 @@ const currentSegmentIdx = ref(props.initialSegmentIdx ?? 0)
 const curFileUuid = ref(props.fileUuid)
 const videoFps = ref(30)
 const seekFrame = ref<number | null>(null)
+const frameOffset = ref(0)
 
-const currentFrame = computed(() => Math.round(currentTime.value * videoFps.value))
+// Long-press fast-forward
+const longPressTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const isFastForward = ref(false)
+const FAST_FORWARD_SPEED = 2.0
+const LONG_PRESS_DELAY = 300
+
+// Auto-hide controls when idle or mouse leaves the player window
+const uiIdle = ref(false)
+const UI_IDLE_DELAY = 2500
+let uiIdleTimer: number | null = null
+
+function showUi() {
+  uiIdle.value = false
+  if (uiIdleTimer) clearTimeout(uiIdleTimer)
+  uiIdleTimer = window.setTimeout(() => {
+    if (!userInteracting.value) uiIdle.value = true
+    uiIdleTimer = null
+  }, UI_IDLE_DELAY)
+}
+
+function hideUi() {
+  if (uiIdleTimer) { clearTimeout(uiIdleTimer); uiIdleTimer = null }
+  if (!userInteracting.value) uiIdle.value = true
+}
+
+function onVideoMouseDown(e: MouseEvent) {
+  if (e.button !== 0) return
+  if (!videoEl.value || videoEl.value.paused) return
+  
+  longPressTimer.value = setTimeout(() => {
+    if (videoEl.value && !videoEl.value.paused) {
+      videoEl.value.playbackRate = FAST_FORWARD_SPEED
+      isFastForward.value = true
+    }
+  }, LONG_PRESS_DELAY)
+}
+
+function onVideoMouseUp() {
+  if (longPressTimer.value) {
+    clearTimeout(longPressTimer.value)
+    longPressTimer.value = null
+  }
+  if (isFastForward.value && videoEl.value) {
+    videoEl.value.playbackRate = 1.0
+    isFastForward.value = false
+  }
+}
+
+function onVideoMouseLeave() {
+  onVideoMouseUp()
+}
+
+const userInteracting = computed(() =>
+  showMarksPanel.value || markingStart.value !== null || showAddMarkForm.value)
+
+const currentFrame = computed(() => Math.round(currentTime.value * videoFps.value) + frameOffset.value)
 const totalFrames = computed(() => Math.round(duration.value * videoFps.value))
 
 // Mark system
 interface Mark {
   id: number
+  dbId?: number
   startFrame: number
   endFrame?: number
+  startSec?: number
+  endSec?: number
   tag: string
   note?: string
   source?: 'user' | 'face' | 'ocr' | 'asrx' | 'pose' | 'auto'
@@ -321,7 +402,7 @@ function loadTracesAsMarks() {
 
 // Load ASRX/OCR/Face/Pose data as marks
 async function loadProcessorMarks() {
-  if (!props.fileUuid || props.simple) return
+  if (!props.fileUuid) return
   
   try {
     // Load ASRX
@@ -329,16 +410,18 @@ async function loadProcessorMarks() {
       const asrxData: any = await apiCall('get_processor_json', { fileHash: props.fileUuid, processor: 'asrx' })
       if (asrxData && asrxData.segments) {
         for (const seg of asrxData.segments) {
-          const speaker = seg.speaker || 'Speaker'
+          const speaker = seg.speaker_id || seg.speaker || 'Speaker'
           const text = seg.text || ''
           marks.value.push({
             id: nextMarkId++,
-            startFrame: seg.start_frame || 0,
-            endFrame: seg.end_frame,
+            startFrame: seg.start_frame ?? 0,
+            endFrame: seg.end_frame ?? undefined,
+            startSec: seg.start_time,
+            endSec: seg.end_time,
             tag: 'asrx',
             note: `${speaker}: ${text}`,
             source: 'asrx',
-            metadata: { speaker: seg.speaker }
+            metadata: { speaker: seg.speaker_id || seg.speaker }
           })
         }
       }
@@ -368,16 +451,21 @@ async function loadProcessorMarks() {
         for (const frame of faceData.frames) {
           const faces = frame.faces || []
           for (const face of faces) {
+            const bbox = face.bbox
+            if (!bbox?.width) continue
+            const name = face.identity_name || face.person_name || (face.face_id != null ? `Face #${face.face_id}` : null)
+            if (!name) continue
             marks.value.push({
               id: nextMarkId++,
               startFrame: frame.frame,
+              endFrame: undefined,
               tag: 'face',
-              note: face.identity_name || face.person_name || `Face #${face.face_id}`,
+              note: name,
               source: 'face',
-              metadata: { 
-                bbox: face.bbox,
+              metadata: {
+                bbox,
                 face_id: face.face_id,
-                confidence: face.confidence 
+                confidence: face.confidence
               }
             })
           }
@@ -426,18 +514,30 @@ const filteredMarks = computed(() => {
 })
 
 function marksByTag(tag: string): Mark[] {
-  return marks.value.filter(m => m.tag === tag)
+  return marks.value.filter(m => m.tag === tag && getMarkStyle(m) !== null)
 }
 
 const currentAsrxMark = computed(() => {
   const frame = currentFrame.value
-  return marks.value.find(m => 
-    m.tag === 'asrx' && 
-    m.startFrame <= frame && 
-    (m.endFrame || m.startFrame) >= frame
+  const sec = absSec.value
+  return marks.value.find(m =>
+    m.tag === 'asrx' &&
+    (m.startSec != null
+      ? sec >= m.startSec && (m.endSec ?? m.startSec) >= sec
+      : m.startFrame <= frame && (m.endFrame || m.startFrame) >= frame)
   )
 })
 
+function asrxStartFrame(mark: Mark): number {
+  if (mark.startSec != null) return Math.round(mark.startSec * (videoFps.value || 30))
+  return mark.startFrame
+}
+
+function asrxEndFrame(mark: Mark): number {
+  if (mark.endSec != null) return Math.round(mark.endSec * (videoFps.value || 30))
+  return mark.endFrame ?? mark.startFrame
+}
+
 const currentOcrMarks = computed(() => {
   const frame = currentFrame.value
   return marks.value.filter(m => 
@@ -447,8 +547,8 @@ const currentOcrMarks = computed(() => {
 
 const currentFaceMarks = computed(() => {
   const frame = currentFrame.value
-  return marks.value.filter(m => 
-    m.tag === 'face' && m.startFrame === frame
+  return marks.value.filter(m =>
+    m.tag === 'face' && m.startFrame === frame && m.metadata?.bbox?.width
   )
 })
 
@@ -459,10 +559,6 @@ const currentPoseMarks = computed(() => {
   )
 })
 
-function toggleProcessorMarks(tag: string) {
-  // Marks will be filtered by the computed properties based on toggle state
-}
-
 const visibleTags = computed(() => {
   const tags = new Set<string>()
   for (const mark of marks.value) {
@@ -470,11 +566,7 @@ const visibleTags = computed(() => {
     if (mark.tag === 'ocr' && !showOcrInPlayer.value) continue
     if (mark.tag === 'face' && !showFaceInPlayer.value) continue
     if (mark.tag === 'pose' && !showPoseInPlayer.value) continue
-    if (mark.tag === 'user') tags.add(mark.tag)
-    else if (mark.tag === 'asrx') tags.add(mark.tag)
-    else if (mark.tag === 'ocr') tags.add(mark.tag)
-    else if (mark.tag === 'face') tags.add(mark.tag)
-    else if (mark.tag === 'pose') tags.add(mark.tag)
+    tags.add(mark.tag)
   }
   return Array.from(tags)
 })
@@ -498,15 +590,30 @@ function saveMark() {
   const tag = newMarkTag.value.trim() || 'default'
   const start = markingStart.value
   const end = currentFrame.value > start ? currentFrame.value : undefined
-  
-  marks.value.push({
+  const note = newMarkNote.value.trim() || undefined
+
+  const mark: Mark = {
     id: nextMarkId++,
     startFrame: start,
     endFrame: end,
     tag,
-    note: newMarkNote.value.trim() || undefined
+    note,
+    source: 'user'
+  }
+  marks.value.push(mark)
+
+  apiCall('save_video_mark', {
+    fileUuid: props.fileUuid,
+    tag,
+    startFrame: start,
+    endFrame: end,
+    note
+  }).then((saved: any) => {
+    if (saved?.id) mark.dbId = saved.id
+  }).catch(err => {
+    console.error('[VideoPlayer] save_video_mark failed:', err)
   })
-  
+
   // Reset
   markingStart.value = null
   newMarkTag.value = ''
@@ -515,16 +622,57 @@ function saveMark() {
 }
 
 function deleteMark(id: number) {
+  const mark = marks.value.find(m => m.id === id)
   marks.value = marks.value.filter(m => m.id !== id)
+  if (mark?.dbId) {
+    apiCall('delete_video_mark', { id: mark.dbId }).catch(err => {
+      console.error('[VideoPlayer] delete_video_mark failed:', err)
+    })
+  }
+}
+
+async function loadUserMarks() {
+  if (!props.fileUuid) return
+  try {
+    const saved: any = await apiCall('get_video_marks', { fileUuid: props.fileUuid })
+    if (!Array.isArray(saved)) return
+    for (const item of saved) {
+      if (marks.value.some(m => m.dbId === item.id)) continue
+      marks.value.push({
+        id: nextMarkId++,
+        dbId: item.id,
+        startFrame: item.start_frame,
+        endFrame: item.end_frame ?? undefined,
+        tag: item.tag,
+        note: item.note ?? undefined,
+        source: 'user'
+      })
+    }
+  } catch (err) {
+    console.error('[VideoPlayer] get_video_marks failed:', err)
+  }
 }
 
 function goToMark(mark: Mark) {
-  if (!videoEl.value) return
-  videoEl.value.currentTime = mark.startFrame / videoFps.value
+  if (playMode.value === 'trace' && props.allTraces.length) {
+    const idx = findTraceIdxForFrame(mark.startFrame)
+    loadTrace(idx)
+  } else if (playMode.value === 'segment' && props.mergedSegments.length) {
+    const idx = findSegmentIdxForFrame(mark.startFrame)
+    loadSegment(idx)
+  } else if (videoEl.value) {
+    const fps = videoFps.value || 30
+    const startFrame = mark.startSec != null ? Math.round(mark.startSec * fps) : mark.startFrame
+    videoEl.value.currentTime = Math.max(0, Math.min(duration.value, (startFrame - frameOffset.value) / fps))
+  }
 }
 
 function isMarkActive(mark: Mark): boolean {
   const f = currentFrame.value
+  const s = absSec.value
+  if (mark.startSec != null) {
+    return s >= mark.startSec && (mark.endSec ?? mark.startSec) >= s
+  }
   if (mark.endFrame) {
     return f >= mark.startFrame && f <= mark.endFrame
   }
@@ -532,13 +680,17 @@ function isMarkActive(mark: Mark): boolean {
 }
 
 function getMarkStyle(mark: Mark): any {
-  const startPct = (mark.startFrame / totalFrames.value) * 100
-  const endPct = mark.endFrame ? (mark.endFrame / totalFrames.value) * 100 : startPct
-  const width = Math.max(0.5, endPct - startPct)
+  const fps = videoFps.value || 30
+  const startSec = mark.startSec ?? mark.startFrame / fps
+  const endSec = mark.endSec ?? (mark.endFrame ? mark.endFrame / fps : startSec)
+  const startPct = ((startSec - tlStart.value) / tlRange.value) * 100
+  const endPct = ((endSec - tlStart.value) / tlRange.value) * 100
+  if (endPct < 0 || startPct > 100) return null
+  const s = Math.max(0, startPct)
+  const e = Math.min(100, endPct)
   return {
-    left: startPct + '%',
-    width: width + '%',
-    background: getTagColor(mark.tag)
+    left: s + '%',
+    width: Math.max(0.5, e - s) + '%',
   }
 }
 
@@ -550,7 +702,6 @@ function onMainTimelineClick(e: MouseEvent) {
 }
 
 const playMode = ref<'trace' | 'segment' | 'continuous'>('trace')
-const pendingSeekTime = ref<number | null>(null)
 
 const continuousStart = computed(() => {
   if (!props.allTraces.length) return 0
@@ -604,14 +755,11 @@ const continuousEndSec = computed(() => {
   return last.last_sec || last.end_time || 0
 })
 
-const positionPct = computed(() => {
+const absSec = computed(() => currentFrame.value / (videoFps.value || 30))
+
+const playheadPct = computed(() => {
   if (!videoEl.value || duration.value === 0) return null
-  
-  const start = continuousStartSec.value
-  const end = continuousEndSec.value
-  const range = end - start || 1
-  
-  const pct = ((currentTime.value - start) / range) * 100
+  const pct = ((absSec.value - tlStart.value) / tlRange.value) * 100
   return Math.max(0, Math.min(100, pct))
 })
 
@@ -656,6 +804,15 @@ const totalItems = computed(() => {
 const canPrev = computed(() => currentItemIdx.value > 0)
 const canNext = computed(() => currentItemIdx.value < totalItems.value - 1)
 
+const keyFrameNum = computed(() => {
+  if (videoLoading.value) return null
+  if (props.allTraces.length) {
+    const t = currentKeyFrameTrace()
+    if (t) return t.best_face_frame ?? t.first_frame ?? t.start_frame ?? null
+  }
+  return props.keyFrame ?? null
+})
+
 function isMarkerActive(i: number): boolean {
   if (playMode.value === 'segment') return i === currentSegmentIdx.value
   return i === currentTraceIdx.value
@@ -663,8 +820,12 @@ function isMarkerActive(i: number): boolean {
 
 function getTraceFps(t: any): number {
   if (!t) return 30
-  const frameDiff = (t.last_frame || 0) - (t.first_frame || 0)
-  const secDiff = (t.last_sec || 0) - (t.first_sec || 0)
+  const lf = t.last_frame !== undefined && t.last_frame !== null ? t.last_frame : 0
+  const ff = t.first_frame !== undefined && t.first_frame !== null ? t.first_frame : 0
+  const ls = t.last_sec !== undefined && t.last_sec !== null ? t.last_sec : 0
+  const fs = t.first_sec !== undefined && t.first_sec !== null ? t.first_sec : 0
+  const frameDiff = lf - ff
+  const secDiff = ls - fs
   if (secDiff <= 0 || frameDiff <= 0) return 30
   return frameDiff / secDiff
 }
@@ -725,8 +886,8 @@ async function switchMode(mode: 'trace' | 'segment' | 'continuous') {
     fps = sFps
     absFrame = (s.start_frame || 0) + Math.round(prevTime * fps)
   } else if (prevMode === 'continuous') {
-    fps = continuousFps.value
-    absFrame = Math.round(prevTime * fps)
+    fps = videoFps.value
+    absFrame = Math.round(prevTime * videoFps.value) + frameOffset.value
   }
   
   playMode.value = mode
@@ -740,9 +901,9 @@ async function switchMode(mode: 'trace' | 'segment' | 'continuous') {
     
     const targetIdx = findTraceIdxForFrame(absFrame)
     currentTraceIdx.value = targetIdx
-    const targetTrace = props.allTraces[targetIdx]
     
-    pendingSeekTime.value = targetTrace?.first_sec || targetTrace?.start_time || 0
+    seekFrame.value = 0
+    frameOffset.value = absFrame
     
     curFileUuid.value = continuousFileUuid.value
     const prevVolume = videoEl.value?.volume ?? 1
@@ -779,14 +940,11 @@ async function switchMode(mode: 'trace' | 'segment' | 'continuous') {
     }
   } else if (mode === 'trace') {
     const targetIdx = findTraceIdxForFrame(absFrame)
-    const targetTrace = props.allTraces[targetIdx]
-    pendingSeekTime.value = targetTrace?.first_sec || targetTrace?.start_time || 0
     await loadTrace(targetIdx)
   } else if (mode === 'segment') {
     const targetIdx = findSegmentIdxForFrame(absFrame)
     const targetSeg = props.mergedSegments[targetIdx]
     if (props.mergedSegments.length && targetSeg) {
-      pendingSeekTime.value = targetSeg.start || 0
       await loadSegment(targetIdx)
     }
   }
@@ -804,7 +962,8 @@ async function loadTrace(idx: number) {
   const stFrame = t.first_frame || 0
   const enFrame = Math.max(t.last_frame || 0, stFrame + 1)
 
-  pendingSeekTime.value = t.first_sec || t.start_time || 0
+  seekFrame.value = 0
+  frameOffset.value = stFrame
 
   curFileUuid.value = fu
   const prevVolume = videoEl.value?.volume ?? 1
@@ -853,7 +1012,8 @@ async function loadSegment(idx: number) {
   const stFrame = s.start_frame || 0
   const enFrame = Math.max(s.end_frame || 0, stFrame + 1)
 
-  pendingSeekTime.value = s.start || 0
+  seekFrame.value = 0
+  frameOffset.value = stFrame
 
   curFileUuid.value = fu
   const prevVolume = videoEl.value?.volume ?? 1
@@ -899,7 +1059,8 @@ async function loadContinuous() {
   const stFrame = firstTrace?.first_frame || 0
   const enFrame = Math.max(lastTrace?.last_frame || 0, stFrame + 1)
 
-  pendingSeekTime.value = continuousStartSec.value
+  seekFrame.value = 0
+  frameOffset.value = stFrame
 
   curFileUuid.value = fu
   const prevVolume = videoEl.value?.volume ?? 1
@@ -939,7 +1100,7 @@ async function loadContinuous() {
 function onTimelineClick(marker: any) {
   if (playMode.value === 'continuous') {
     if (!videoEl.value) return
-    videoEl.value.currentTime = marker.start
+    videoEl.value.currentTime = marker.start - continuousStartSec.value
     currentTraceIdx.value = marker.idx
   } else if (playMode.value === 'trace') {
     loadTrace(marker.idx)
@@ -948,6 +1109,97 @@ function onTimelineClick(marker: any) {
   }
 }
 
+function seekFromAbsSec(absSecValue: number) {
+  const absFrame = Math.round(absSecValue * (videoFps.value || 30))
+  if (playMode.value === 'trace') {
+    loadTrace(findTraceIdxForFrame(absFrame))
+  } else if (playMode.value === 'segment') {
+    loadSegment(findSegmentIdxForFrame(absFrame))
+  } else if (videoEl.value) {
+    videoEl.value.currentTime = Math.max(0, Math.min(duration.value, (absFrame - frameOffset.value) / (videoFps.value || 30)))
+  }
+}
+
+function currentKeyFrameTrace(): any {
+  if (playMode.value === 'segment') {
+    const idx = findTraceIdxForFrame(currentFrame.value)
+    const t = props.allTraces[idx]
+    return t || null
+  }
+  return props.allTraces[currentTraceIdx.value] || null
+}
+
+function seekToKeyFrame() {
+  const el = videoEl.value
+  if (!el) return
+  let keyFrame: number | null = null
+  if (props.allTraces.length) {
+    const t = currentKeyFrameTrace()
+    keyFrame = t ? (t.best_face_frame ?? t.first_frame ?? t.start_frame ?? null) : null
+  } else {
+    keyFrame = props.keyFrame ?? null
+  }
+  if (keyFrame == null) return
+  reloadFromFrame(keyFrame)
+}
+
+async function reloadFromFrame(targetFrame: number) {
+  const fu = curFileUuid.value || props.fileUuid
+  if (!fu || fu === 'undefined') return
+  const clipStart = frameOffset.value
+  const clipEnd = Math.max(clipStart + Math.round(duration.value * videoFps.value), targetFrame + 1)
+  const enFrame = Math.max(clipEnd, targetFrame + 1)
+
+  seekFrame.value = 0
+  frameOffset.value = targetFrame
+
+  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: targetFrame,
+      endFrame: enFrame,
+      original: props.useOriginal,
+    })
+    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 onPointBarClick(e: MouseEvent) {
+  const bar = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const pct = Math.max(0, Math.min(100, ((e.clientX - bar.left) / bar.width) * 100))
+  seekFromAbsSec(tlStart.value + (pct / 100) * tlRange.value)
+}
+
+function onMarkBarClick(e: MouseEvent) {
+  const bar = (e.currentTarget as HTMLElement).getBoundingClientRect()
+  const pct = Math.max(0, Math.min(100, ((e.clientX - bar.left) / bar.width) * 100))
+  seekFromAbsSec(tlStart.value + (pct / 100) * tlRange.value)
+}
+
 function prevItem() {
   if (playMode.value === 'continuous') {
     seekToPrevTrace()
@@ -989,7 +1241,7 @@ function seekToPrevTrace() {
   currentTraceIdx.value--
   const t = props.allTraces[currentTraceIdx.value]
   if (!t) return
-  videoEl.value.currentTime = t.first_sec || t.start_time || 0
+  videoEl.value.currentTime = Math.max(0, (t.first_sec || t.start_time || 0) - continuousStartSec.value)
 }
 
 function seekToNextTrace() {
@@ -997,7 +1249,7 @@ function seekToNextTrace() {
   currentTraceIdx.value++
   const t = props.allTraces[currentTraceIdx.value]
   if (!t) return
-  videoEl.value.currentTime = t.first_sec || t.start_time || 0
+  videoEl.value.currentTime = Math.max(0, (t.first_sec || t.start_time || 0) - continuousStartSec.value)
 }
 
 function close() {
@@ -1007,27 +1259,55 @@ function close() {
 
 function goToFrame() {
   if (!videoEl.value || seekFrame.value === null) return
-  const targetTime = seekFrame.value / videoFps.value
-  videoEl.value.currentTime = Math.min(Math.max(0, targetTime), duration.value)
-  seekFrame.value = null
+  const targetSec = (seekFrame.value - frameOffset.value) / videoFps.value
+  videoEl.value.currentTime = Math.max(0, Math.min(targetSec, duration.value))
 }
 
-function onLoaded() {
+function resolveKnownFps(): number {
+  let t = props.allTraces[currentTraceIdx.value]
+  if (!t && playMode.value === 'segment') {
+    const s = props.mergedSegments[currentSegmentIdx.value]
+    t = props.allTraces[s?._startIdx]
+  }
+  if (!t) t = props.allTraces[0]
+  const tf = getTraceFps(t)
+  return tf >= 1 ? tf : 0
+}
+
+async function onLoaded() {
   const el = videoEl.value
   if (!el) return
   
-  // Try to detect fps from video
-  // @ts-ignore - webkitVideoDecodedByteCount etc. are non-standard
-  if (el.getVideoPlaybackQuality) {
-    const quality = el.getVideoPlaybackQuality()
-    if (quality.totalVideoFrames > 0 && el.duration > 0) {
-      videoFps.value = Math.round(quality.totalVideoFrames / el.duration)
+  // Use the trace-derived fps when available (accurate source fps from trace
+  // frame/sec data). Fall back to the file's known fps via get_file_info,
+  // and only last-resort to clip-based detection, since
+  // getVideoPlaybackQuality().totalVideoFrames reflects frames decoded so far
+  // and yields an inaccurate fps for seek math.
+  const knownFps = resolveKnownFps()
+  if (knownFps >= 1) {
+    videoFps.value = knownFps
+  } else {
+    let fileFps = 0
+    const fu = curFileUuid.value || props.fileUuid
+    if (fu && fu !== 'undefined') {
+      try {
+        const info: any = await apiCall('get_file_info', { uuid: fu })
+        fileFps = Number(info?.fps)
+      } catch { /* fall back below */ }
+    }
+    if (fileFps >= 1) {
+      videoFps.value = fileFps
+    } else if (el.getVideoPlaybackQuality) {
+      // @ts-ignore - webkitVideoDecodedByteCount etc. are non-standard
+      const quality = el.getVideoPlaybackQuality()
+      if (quality.totalVideoFrames > 0 && el.duration > 0) {
+        videoFps.value = Math.round(quality.totalVideoFrames / el.duration)
+      }
     }
   }
   
-  if (pendingSeekTime.value !== null) {
-    el.currentTime = pendingSeekTime.value
-    pendingSeekTime.value = null
+  if (seekFrame.value !== null) {
+    el.currentTime = seekFrame.value / videoFps.value
   } else {
     el.currentTime = 0
   }
@@ -1068,6 +1348,21 @@ function togglePlay() {
   }
 }
 
+function onPlay() {
+  isPlaying.value = true
+  showUi()
+}
+
+function onPause() {
+  isPlaying.value = false
+  uiIdle.value = false
+  if (uiIdleTimer) { clearTimeout(uiIdleTimer); uiIdleTimer = null }
+  uiIdleTimer = window.setTimeout(() => {
+    if (!userInteracting.value) uiIdle.value = true
+    uiIdleTimer = null
+  }, UI_IDLE_DELAY)
+}
+
 function formatTime(sec: number): string {
   if (!sec || isNaN(sec)) return '0:00'
   const m = Math.floor(sec / 60)
@@ -1086,6 +1381,7 @@ function onKeydown(e: KeyboardEvent) {
 }
 
 onMounted(async () => {
+  seekFrame.value = 0
   document.addEventListener('keydown', onKeydown)
   if (!props.fileUuid || props.fileUuid === 'undefined') {
     videoError.value = 'No file associated with this result'
@@ -1099,6 +1395,9 @@ onMounted(async () => {
   // Load ASRX/OCR marks
   loadProcessorMarks()
   
+  // Load user marks from SQLite
+  loadUserMarks()
+  
   if (props.allTraces.length || props.mergedSegments.length) {
     if (playMode.value === 'continuous') {
       await loadContinuous()
@@ -1109,6 +1408,8 @@ onMounted(async () => {
     }
     emit('trace-change', currentTraceIdx.value)
   } else {
+    seekFrame.value = 0
+    frameOffset.value = props.startFrame
     try {
       if (props.startFrame == null || props.endFrame == null) {
         videoError.value = 'ERROR: startFrame and endFrame are required'
@@ -1163,12 +1464,13 @@ watch(() => props.initialSegmentIdx, (newIdx) => {
 })
 
 onUnmounted(() => {
+  if (uiIdleTimer) { clearTimeout(uiIdleTimer); uiIdleTimer = null }
   document.removeEventListener('keydown', onKeydown)
 })
 </script>
 
 <style scoped>
-.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-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: 40px; }
 .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; 
@@ -1177,8 +1479,22 @@ onUnmounted(() => {
   text-align: left; 
   background: #1a1a1a; 
   position: relative; 
+  max-height: min(90vh, calc(100vh - 160px));
+  overflow-y: auto;
 }
 
+/* Auto-hide controls when idle / mouse leaves the player window */
+.ms-video-ui-idle { cursor: none; }
+.ms-video-ui-idle .ms-video-mode-toggle,
+.ms-video-ui-idle .ms-video-title-row,
+.ms-video-ui-idle .ms-video-timeline-wrap,
+.ms-video-ui-idle .ms-video-mark-timelines,
+.ms-video-ui-idle .ms-video-mark-controls,
+.ms-video-ui-idle .ms-video-marks-panel,
+.ms-video-ui-idle .ms-video-nav { opacity: 0; pointer-events: none; transition: opacity .25s; }
+.ms-video-ui-idle .video::-webkit-media-controls-enclosure,
+.ms-video-ui-idle .video::-webkit-media-controls { visibility: hidden; pointer-events: none; }
+
 .ms-modal-video-advanced { 
   max-width: min(95vw, 1200px); 
   max-height: 90vh;
@@ -1194,6 +1510,11 @@ onUnmounted(() => {
   .ms-modal-video-advanced { max-width: 98%; }
   .video { max-height: 50vh; }
   .ms-proc-toggles { flex-wrap: wrap; gap: 8px; }
+  .ms-video-controls { flex-wrap: wrap; gap: 4px; }
+  .ms-video-controls button, .ms-video-controls select { font-size: 11px; padding: 2px 6px; }
+  .ms-video-frame-seek { flex-wrap: wrap; gap: 4px; }
+  .ms-video-frame-seek input { width: 60px; }
+  .ms-video-marks-panel { position: fixed; bottom: 0; left: 0; right: 0; top: auto; max-height: 40vh; border-radius: 12px 12px 0 0; }
 }
 
 @media (min-width: 769px) and (max-width: 1024px) {
@@ -1208,22 +1529,30 @@ onUnmounted(() => {
 
 @media (min-width: 1441px) {
   .ms-modal-video-advanced { max-width: 1200px; }
-  .ms-modal-video-advanced .video { max-height: 75vh; }
+  .ms-modal-video-advanced .video { max-height: 70vh; }
 }
 
 /* Ultra-wide screens (21:9) */
 @media (min-aspect-ratio: 21/9) {
-  .ms-modal-video-advanced .video { max-height: 60vh; }
+  .ms-modal-video-advanced .video { max-height: 55vh; }
 }
-.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-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
+.ms-video-header-row { display: flex; align-items: center; justify-content: space-between; }
+.ms-video-file-name { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-video-frame-info { font-size: 12px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
+.ms-video-keyframe { color: #ff9800; font-weight: 600; cursor: pointer; }
+.ms-video-keyframe:hover { text-decoration: underline; }
+.ms-video-title-row { gap: 10px; }
+.ms-modal-video-close { border: none; background: transparent; font-size: 18px; color: #9aa0a6; cursor: pointer; padding: 0; line-height: 1; flex-shrink: 0; margin-left: auto; }
 .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%; }
+.video { max-width: 100%; max-height: 50vh; border-radius: 8px; display: block; width: 100%; }
+
+.ms-video-container { position: relative; width: 100%; user-select: none; }
+.ms-video-fast-forward-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.7); color: #fff; padding: 12px 24px; border-radius: 8px; font-size: 32px; font-weight: bold; pointer-events: none; z-index: 100; }
 
 .ms-video-ocr-overlay {
   position: absolute;
@@ -1335,14 +1664,15 @@ onUnmounted(() => {
 .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; }
 @keyframes ms-spin { to { transform: rotate(360deg); } }
 .ms-video-timeline-wrap { padding: 14px 0 6px; }
-.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; }
+.ms-video-tl-bar { position: relative; width: 100%; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 8px; overflow: visible; cursor: pointer; }
 .ms-video-tl-dot { position: absolute; top: 50%; transform: translate(0, -50%); height: 8px; border-radius: 4px; background: #9aa0a6; cursor: pointer; transition: height .12s, background .12s; z-index: 2; }
 .ms-video-tl-dot:hover { height: 12px; background: #fff; }
-.ms-video-tl-dot.active { background: #fff; box-shadow: 0 0 0 2.5px rgba(255,255,255,0.35); }
+.ms-video-tl-dot.active { background: #4285f4; box-shadow: 0 0 0 2.5px rgba(66,133,244,0.35); }
 .ms-video-tl-labels { display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.45); }
 .ms-video-tl-tip { display: none; position: absolute; bottom: 16px; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }
 .ms-video-tl-dot:hover .ms-video-tl-tip { display: block; }
 .ms-video-tl-position { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 16px; background: #1a56db; border-radius: 1px; z-index: 3; pointer-events: none; }
+.ms-video-tl-position::after { content: ''; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: #1a56db; border-radius: 50%; }
 .ms-video-tl-pos-tip { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1a56db; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 10; }
 .ms-video-tl-position:hover .ms-video-tl-pos-tip { display: block; }
 .ms-video-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 10px; flex-wrap: wrap; }
@@ -1399,20 +1729,20 @@ onUnmounted(() => {
 /* Main Timeline */
 .ms-video-tl-main { cursor: pointer; position: relative; height: 8px; background: rgba(255,255,255,0.15); border-radius: 4px; }
 .ms-video-tl-progress { position: absolute; left: 0; top: 0; height: 100%; background: #4285f4; border-radius: 4px; transition: width 0.1s; }
-.ms-video-tl-main .ms-video-tl-position { width: 12px; height: 12px; background: #fff; border: 2px solid #4285f4; border-radius: 50%; top: 50%; transform: translate(-50%, -50%); }
 
 /* Mark Timelines */
 .ms-video-mark-timelines { margin-top: 8px; }
 .ms-video-mark-tl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
 .ms-video-mark-tl-label { font-size: 10px; color: var(--text-secondary, #9aa0a6); min-width: 50px; text-align: right; }
-.ms-video-mark-tl-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; position: relative; }
+.ms-video-mark-tl-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; position: relative; cursor: pointer; }
+.ms-video-mark-tl-bar .ms-video-tl-position { height: 6px; }
 .ms-video-mark-tl-mark { position: absolute; top: 0; height: 100%; border-radius: 3px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s, transform 0.2s; }
 .ms-video-mark-tl-mark[data-tag="face"] { background: #4285f4; }
 .ms-video-mark-tl-mark[data-tag="asrx"] { background: #34a853; }
 .ms-video-mark-tl-mark[data-tag="ocr"] { background: #fbbc04; }
 .ms-video-mark-tl-mark[data-tag="pose"] { background: #9c27b0; }
-.ms-video-mark-tl-mark:hover { opacity: 1; transform: scaleY(1.3); }
-.ms-video-mark-tl-mark.ms-mark-active { opacity: 1; box-shadow: 0 0 6px currentColor; }
+.ms-video-mark-tl-mark:hover { opacity: 1; transform: scaleY(1.6); }
+.ms-video-mark-tl-mark.ms-mark-active { opacity: 1; box-shadow: 0 0 6px currentColor; transform: scaleY(1.6); }
 
 /* Mark Controls */
 .ms-video-mark-controls {
diff --git a/src/composables/useDragSelect.ts b/src/composables/useDragSelect.ts
new file mode 100644
index 0000000..4c3bd8f
--- /dev/null
+++ b/src/composables/useDragSelect.ts
@@ -0,0 +1,149 @@
+import { ref, type Ref } from 'vue'
+
+export interface DragSelectBox {
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+export interface DragSelectOptions {
+  getSelected: () => string[]
+  setSelected: (keys: string[]) => void
+  keyOf?: (el: HTMLElement) => string
+  onBox?: (box: DragSelectBox | null) => void
+}
+
+const DRAG_THRESHOLD = 4
+
+function overlaps(ax1: number, ay1: number, ax2: number, ay2: number, bx1: number, by1: number, bx2: number, by2: number) {
+  return ax1 < bx2 && ax2 > bx1 && ay1 < by2 && ay2 > by1
+}
+
+export function useDragSelect(containerRef: Ref<HTMLElement | null>, opts: DragSelectOptions) {
+  const box = ref<DragSelectBox | null>(null)
+
+  function setBox(b: DragSelectBox | null) {
+    box.value = b
+    opts.onBox?.(b)
+  }
+
+  let startX = 0
+  let startY = 0
+  let curX = 0
+  let curY = 0
+  let moved = false
+  let lastWasDrag = false
+
+  function onMousedown(e: MouseEvent) {
+    if (e.button !== 0) return
+    if (e.ctrlKey || e.metaKey || e.shiftKey) return
+    const target = e.target as HTMLElement
+    if (target.closest('button, a, input, textarea, select, .ms-ppl-card-checkbox, .ms-fm-play-btn')) return
+
+    startX = curX = e.clientX
+    startY = curY = e.clientY
+    moved = false
+    lastWasDrag = false
+    setBox({ x1: startX, y1: startY, x2: startX, y2: startY })
+
+    window.addEventListener('mousemove', onMousemove)
+    window.addEventListener('mouseup', onMouseup)
+  }
+
+  function onMousemove(e: MouseEvent) {
+    curX = e.clientX
+    curY = e.clientY
+    if (!moved && Math.abs(curX - startX) < DRAG_THRESHOLD && Math.abs(curY - startY) < DRAG_THRESHOLD) {
+      setBox({ x1: startX, y1: startY, x2: startX, y2: startY })
+      return
+    }
+    if (!moved) {
+      moved = true
+      document.body.style.userSelect = 'none'
+    }
+    setBox({
+      x1: Math.min(startX, curX),
+      y1: Math.min(startY, curY),
+      x2: Math.max(startX, curX),
+      y2: Math.max(startY, curY),
+    })
+  }
+
+  function onMouseup(e: MouseEvent) {
+    window.removeEventListener('mousemove', onMousemove)
+    window.removeEventListener('mouseup', onMouseup)
+
+    if (!moved) {
+      setBox(null)
+      return
+    }
+    lastWasDrag = true
+    const rect = box.value
+    setBox(null)
+    if (document.body.style.userSelect === 'none') {
+      document.body.style.userSelect = ''
+    }
+
+    const container = containerRef.value
+    if (!container || !rect) {
+      return
+    }
+
+    const bx1 = rect.x1
+    const by1 = rect.y1
+    const bx2 = rect.x2
+    const by2 = rect.y2
+
+    const keyOf = opts.keyOf ?? ((el: HTMLElement) => el.dataset.dragKey || '')
+    const intersecting = new Set<string>()
+
+    const cards = container.querySelectorAll<HTMLElement>('[data-drag-key]')
+    cards.forEach((card) => {
+      const r = card.getBoundingClientRect()
+      if (overlaps(r.left, r.top, r.right, r.bottom, bx1, by1, bx2, by2)) {
+        const key = keyOf(card)
+        if (key) intersecting.add(key)
+      }
+    })
+
+    const prev = opts.getSelected()
+    if (e.shiftKey) {
+      const next = new Set(prev)
+      intersecting.forEach((k) => next.add(k))
+      opts.setSelected(Array.from(next))
+    } else if (e.ctrlKey || e.metaKey) {
+      const next = new Set(prev)
+      intersecting.forEach((k) => {
+        if (next.has(k)) next.delete(k)
+        else next.add(k)
+      })
+      opts.setSelected(Array.from(next))
+    } else {
+      opts.setSelected(Array.from(intersecting))
+    }
+  }
+
+  function onClickCapture(e: MouseEvent) {
+    if (lastWasDrag) {
+      e.preventDefault()
+      e.stopPropagation()
+      lastWasDrag = false
+    }
+  }
+
+  return {
+    box,
+    onMousedown,
+    onClickCapture,
+  }
+}
+
+export function dragSelectRectStyle(b: DragSelectBox) {
+  return {
+    left: b.x1 + 'px',
+    top: b.y1 + 'px',
+    width: Math.max(0, b.x2 - b.x1) + 'px',
+    height: Math.max(0, b.y2 - b.y1) + 'px',
+  }
+}
diff --git a/src/composables/useFaceFilter.ts b/src/composables/useFaceFilter.ts
index f7ee012..4f98855 100644
--- a/src/composables/useFaceFilter.ts
+++ b/src/composables/useFaceFilter.ts
@@ -86,6 +86,26 @@ export interface FilterStats {
   };
 }
 
+export interface SingleFrameFSSettings {
+  single_frame_trace_vlm_enabled: boolean;
+  single_frame_trace_group_enabled: boolean;
+  single_frame_trace_unassigned_enabled: boolean;
+  single_trace_group_filter_enabled: boolean;
+}
+
+export interface FileProfileResponse {
+  file_uuid: string;
+  file_name: string;
+  file_path: string;
+  status: string;
+  duration: number;
+  width: number;
+  height: number;
+  fps: number;
+  total_frames: number;
+  face_filter: SingleFrameFSSettings;
+}
+
 // Default rules
 const defaultRules: QuickFilterRules = {
   min_confidence: 0.5,
@@ -105,13 +125,13 @@ async function fetchFaces(fileUuid: string, params?: { page?: number; page_size?
   if (params?.page_size) queryParams.set('page_size', params.page_size.toString());
   if (params?.source) queryParams.set('source', params.source);
   
-  const response = await fetch(`${apiBase}/file/${fileUuid}/faces?${queryParams}`);
+  const response = await fetch(`${apiBase}/file/${fileUuid}/face-filter/faces?${queryParams}`);
   if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
   return response.json();
 }
 
 async function applyFilter(fileUuid: string, rules?: any) {
-  const response = await fetch(`${apiBase}/file/${fileUuid}/faces/filter`, {
+  const response = await fetch(`${apiBase}/file/${fileUuid}/face-filter/apply`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ rules: rules || null })
@@ -121,17 +141,32 @@ async function applyFilter(fileUuid: string, rules?: any) {
 }
 
 async function getFilterStats(fileUuid: string) {
-  const response = await fetch(`${apiBase}/file/${fileUuid}/filter-stats`);
+  const response = await fetch(`${apiBase}/file/${fileUuid}/face-filter/stats`);
   if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
   return response.json();
 }
 
 async function getFaceReport(fileUuid: string, faceId: string) {
-  const response = await fetch(`${apiBase}/file/${fileUuid}/face/${faceId}/filter-report`);
+  const response = await fetch(`${apiBase}/file/${fileUuid}/face-filter/${faceId}/report`);
   if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
   return response.json();
 }
 
+async function getFileProfile(fileUuid: string): Promise<FileProfileResponse> {
+  const response = await fetch(`${apiBase}/file-profile?file_uuid=${fileUuid}`);
+  if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  return response.json();
+}
+
+async function updateFileProfile(fileUuid: string, faceFilter: Partial<SingleFrameFSSettings>): Promise<boolean> {
+  const response = await fetch(`${apiBase}/file-profile`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ file_uuid: fileUuid, face_filter: faceFilter })
+  });
+  return response.ok;
+}
+
 // Quick filter function (client-side)
 function quickFilter(faces: FaceMetadata[], rules: QuickFilterRules): FaceMetadata[] {
   return faces.filter(face => {
@@ -189,6 +224,16 @@ export function useFaceFilter() {
   const loading = ref(false);
   const error = ref<string | null>(null);
   
+  const singleFrameSettings = ref<SingleFrameFSSettings>({
+    single_frame_trace_vlm_enabled: true,
+    single_frame_trace_group_enabled: true,
+    single_frame_trace_unassigned_enabled: true,
+    single_trace_group_filter_enabled: true,
+  });
+  const singleFrameSettingsLoading = ref(false);
+  const singleFrameSettingsError = ref<string | null>(null);
+  const singleFrameSettingsModified = ref(false);
+  
   // Computed stats
   const stats = computed(() => ({
     total: allFaces.value.length,
@@ -356,6 +401,60 @@ export function useFaceFilter() {
     savePreferences();
   }
   
+  async function loadSingleFrameSettings(fileUuid: string) {
+    singleFrameSettingsLoading.value = true;
+    singleFrameSettingsError.value = null;
+    
+    try {
+      const profile = await getFileProfile(fileUuid);
+      singleFrameSettings.value = {
+        single_frame_trace_vlm_enabled: profile.face_filter.single_frame_trace_vlm_enabled ?? true,
+        single_frame_trace_group_enabled: profile.face_filter.single_frame_trace_group_enabled ?? true,
+        single_frame_trace_unassigned_enabled: profile.face_filter.single_frame_trace_unassigned_enabled ?? true,
+        single_trace_group_filter_enabled: profile.face_filter.single_trace_group_filter_enabled ?? true,
+      };
+      singleFrameSettingsModified.value = false;
+    } catch (err: any) {
+      singleFrameSettingsError.value = err.message || 'Failed to load settings';
+      console.error('Failed to load single frame settings:', err);
+    } finally {
+      singleFrameSettingsLoading.value = false;
+    }
+  }
+  
+  async function saveSingleFrameSettings(fileUuid: string): Promise<boolean> {
+    singleFrameSettingsLoading.value = true;
+    singleFrameSettingsError.value = null;
+    
+    try {
+      const success = await updateFileProfile(fileUuid, singleFrameSettings.value);
+      if (success) {
+        singleFrameSettingsModified.value = false;
+      }
+      return success;
+    } catch (err: any) {
+      singleFrameSettingsError.value = err.message || 'Failed to save settings';
+      console.error('Failed to save single frame settings:', err);
+      return false;
+    } finally {
+      singleFrameSettingsLoading.value = false;
+    }
+  }
+  
+  function resetSingleFrameSettings() {
+    singleFrameSettings.value = {
+      single_frame_trace_vlm_enabled: true,
+      single_frame_trace_group_enabled: true,
+      single_frame_trace_unassigned_enabled: true,
+      single_trace_group_filter_enabled: true,
+    };
+    singleFrameSettingsModified.value = true;
+  }
+  
+  function markSingleFrameSettingsModified() {
+    singleFrameSettingsModified.value = true;
+  }
+  
   return {
     // State
     mode,
@@ -367,6 +466,10 @@ export function useFaceFilter() {
     loading,
     error,
     stats,
+    singleFrameSettings,
+    singleFrameSettingsLoading,
+    singleFrameSettingsError,
+    singleFrameSettingsModified,
     
     // Actions
     initialize,
@@ -377,6 +480,10 @@ export function useFaceFilter() {
     refreshStats,
     resetToDefault,
     applyLocalFilter,
+    loadSingleFrameSettings,
+    saveSingleFrameSettings,
+    resetSingleFrameSettings,
+    markSingleFrameSettingsModified,
     
     // API helpers (exposed for direct use)
     fetchFaces,
diff --git a/src/composables/useUndoRedo.ts b/src/composables/useUndoRedo.ts
index 6089bf0..773ce72 100644
--- a/src/composables/useUndoRedo.ts
+++ b/src/composables/useUndoRedo.ts
@@ -1,4 +1,5 @@
 import { reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { apiCall } from '@/api'
 import { invalidatePeople, ensurePeople } from '@/store'
 
@@ -29,6 +30,7 @@ interface ActionHistoryItem {
 }
 
 export function useUndoRedo() {
+  const { t } = useI18n()
   const counts = reactive<Record<string, HistoryCounts>>({})
   const mergeHistory = reactive<MergeHistoryItem[]>([])
   const recentActions = reactive<ActionHistoryItem[]>([])
@@ -82,7 +84,7 @@ export function useUndoRedo() {
       const patchItems = patchHist?.history || patchHist?.records || []
       for (const r of Array.isArray(patchItems) ? patchItems : []) {
         const op = r.operation ?? r.op ?? ''
-        const label = op === 'delete' ? '刪除人物' : op === 'update' ? '更新人物' : op
+        const label = op === 'delete' ? t('people.action.delete_person') : op === 'update' ? t('people.action.update_person') : op
         actions.push({
           type: op === 'delete' ? 'delete' : 'patch',
           label,
@@ -95,7 +97,7 @@ export function useUndoRedo() {
       const bindItems = bindHist?.history || bindHist?.records || []
       for (const r of Array.isArray(bindItems) ? bindItems : []) {
         const op = r.operation ?? r.op ?? ''
-        const label = op === 'bind' ? '綁定面部' : op === 'unbind' ? '解綁面部' : op === 'bind_trace' ? '綁定軌跡' : op
+        const label = op === 'bind' ? t('people.action.bind_face') : op === 'unbind' ? t('people.action.unbind_face') : op === 'bind_trace' ? t('people.action.bind_trace') : op
         actions.push({
           type: 'bind',
           label,
diff --git a/src/locales/en.json b/src/locales/en.json
index 2e1ca69..c6da929 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -44,13 +44,19 @@
       "min_minutes": "Min Minutes",
       "max_minutes": "Max Minutes"
     },
-"status": {
+    "status": {
       "files": "{count} files",
       "registered": "Registered",
       "unregistered": "Unregistered",
       "pending": "Pending",
       "processing": "Processing",
-      "completed": "Completed"
+      "completed": "Completed",
+      "scanning": "Scanning",
+      "ready": "Ready",
+      "keyword_ready": "Keyword Ready",
+      "semantic_ready": "Semantic Ready",
+      "face_mgmt_ready": "Face Mgmt Ready",
+      "agent_ready": "Agent Ready"
     },
     "thumbnail": {
       "register_to_preview": "Register to see preview"
@@ -59,7 +65,6 @@
       "register_file": "Register File",
       "process_file": "Process File",
       "reprocess": "Reprocess",
-      "run_identity_agent": "Run Identity Agent",
       "unregister": "Unregister",
       "play_video": "Play Video",
       "processor_selection": "Processor Selection",
@@ -67,7 +72,9 @@
       "missing_file_path": "Missing file path",
       "file_not_registered": "File not registered",
       "select_processor": "Please select at least one processor",
-      "file_must_be_completed": "File must be completed first"
+      "file_must_be_completed": "File must be completed first",
+      "face_deduplication": "Face Deduplication",
+      "qc_check": "QC Check"
     },
     "pipeline": {
       "processors": "Processors",
@@ -91,17 +98,57 @@
       "processing_started": "Processing started: {name}",
       "processing_failed": "Processing failed: {message}",
       "processing_error": "Processing error: {error}",
-      "identity_agent_started": "Identity Agent started: {name}",
-      "identity_agent_failed": "Identity Agent failed: {message}",
-      "identity_agent_error": "Identity Agent error: {error}",
       "removing": "Removing...",
       "removed": "Removed: {name}",
       "removal_failed": "Removal failed: {message}",
       "removal_error": "Removal error: {error}",
       "clear_filters": "Clear Filters"
     },
+    "qc": {
+      "audio_info": "Audio Info",
+      "audio_track": "Audio Track",
+      "has_audio": "✓ Has Audio",
+      "no_audio": "✗ No Audio",
+      "speech": "Speech",
+      "has_speech": "✓ Has Speech",
+      "no_speech": "🔇 No Speech",
+      "language": "Language",
+      "sample_rate": "Sample Rate",
+      "uuid_label": "UUID:",
+      "track_processor_output": "Phase 1: Processor Output",
+      "track_ingestion": "Phase 2: Data Ingestion",
+      "track_status_change": "Final: Status Change",
+      "output_ingestion_done": "📥 Output + Ingestion Complete",
+      "items": "{count} items"
+    },
     "refresh": "Refresh",
-    "refresh_status": "Refresh Status"
+    "refresh_status": "Refresh Status",
+    "confirm": {
+      "title_register": "📥 Register",
+      "title_process": "🔍 Deep Scan",
+      "title_rescan": "🔄 Re-scan",
+      "message_register": "File will be registered and processed with default settings.",
+      "message_register_no_scan": "Register only, no automatic scan.",
+      "message_process": "Processing will run on the selected processors using default settings.",
+      "message_rescan": "This will unregister → register → deep scan the file using selected processors.",
+      "cancel": "Cancel",
+      "proceed": "Proceed",
+      "rerun_processor": "Re-run {processor} for this file?",
+      "run_processor": "Run {processor} on {filename}?",
+      "unregister_title": "Unregister",
+      "unregister_message": "Unregister \"{filename}\"?\n\nThis will remove the file and its output data."
+    },
+    "processor": {
+      "started": "{processor} started",
+      "failed": "Failed: {message}",
+      "error": "Error: {message}",
+      "no_file": "Error: No file selected",
+      "vlm_failed": "Failed to trigger VLM summary: {message}",
+      "pipeline_qc": "Pipeline QC"
+    },
+    "settings": {
+      "auto_scan": "Auto deep scan after registration"
+    }
   },
   "people": {
     "toolbar": {
@@ -119,7 +166,8 @@
       "pending_people": "People",
       "skipped_people": "Skipped People",
       "pending_faces": "Faces",
-      "face_group": "Face Group"
+      "face_group": "Face Group",
+      "unassigned": "Unassigned"
     },
     "sort": {
       "title": "Sort By",
@@ -230,6 +278,13 @@
       "create_identity_failed": "Failed to create person: API did not return identity_uuid",
       "create_identity_error": "Failed to create person: {error}",
       "assign_failed": "Assignment failed: {error}"
+    },
+    "action": {
+      "delete_person": "Delete Person",
+      "update_person": "Update Person",
+      "bind_face": "Bind Face",
+      "unbind_face": "Unbind Face",
+      "bind_trace": "Bind Trace"
     }
   },
   "agent": {
@@ -269,5 +324,125 @@
     "people": "People",
     "admin": "Admin",
     "client": "Client"
+  },
+  "time": {
+    "just_now": "Just now",
+    "minutes_ago": "{count} min ago",
+    "hours_ago": "{count} hr ago"
+  },
+  "video": {
+    "prev": "Previous",
+    "next": "Next",
+    "key_frame": "Key Frame"
+  },
+  "language": {
+    "en": "English",
+    "zh-TW": "Traditional Chinese",
+    "zh-CN": "Simplified Chinese",
+    "ja": "Japanese",
+    "ko": "Korean",
+    "auto": "Auto Detect"
+  },
+  "client": {
+    "title": "File Manager",
+    "search": {
+      "placeholder": "Search files..."
+    },
+    "table": {
+      "name": "Name",
+      "size": "Size",
+      "type": "Type",
+      "modified": "Modified"
+    },
+    "button": {
+      "upload": "Upload",
+      "newFolder": "New Folder",
+      "refresh": "Refresh",
+      "create": "Create",
+      "cancel": "Cancel",
+      "delete": "Delete",
+      "rename": "Rename",
+      "move": "Move",
+      "preview": "Preview",
+      "download": "Download"
+    },
+    "dialog": {
+      "createFolder": "Create New Folder",
+      "folderName": "Folder name",
+      "deleteTitle": "Delete \"{name}\"",
+      "deleteMessage": "Are you sure you want to delete this {type}? This action cannot be undone.",
+      "renameTitle": "Rename \"{name}\"",
+      "newName": "New name",
+      "previewTitle": "File Preview: {name}",
+      "uploadTitle": "Upload File{s}",
+      "moveTitle": "Move {type} \"{name}\"",
+      "selectFiles": "Select files"
+    },
+    "type": {
+      "file": "file",
+      "folder": "folder",
+      "files": "files"
+    },
+    "status": {
+      "uploading": "Uploading...",
+      "success": "Success",
+      "error": "Error"
+    }
+  },
+  "admin": {
+    "title": "Admin Panel",
+    "tab": {
+      "dashboard": "Dashboard",
+      "users": "Users",
+      "shares": "Shares",
+      "config": "Config",
+      "settings": "Settings"
+    },
+    "section": {
+      "systemResources": "System Resources",
+      "validation": "Validation",
+      "configuration": "Admin Configuration",
+      "vlmPrompts": "VLM Prompts",
+      "languagePacks": "Language Packs",
+      "llmConfig": "LLM Configuration",
+      "processorConfig": "Processor Configuration",
+      "filterConfig": "Filter Configuration",
+      "searchConfig": "Search Configuration",
+      "systemConfig": "System Configuration",
+      "uploadPath": "Upload Path",
+      "serviceUrls": "Service URLs"
+    },
+    "resource": {
+      "cpu": "CPU",
+      "memory": "Memory",
+      "swap": "Swap",
+      "gpu": "GPU",
+      "gpuFreq": "GPU Freq",
+      "systemPower": "System Power"
+    },
+    "table": {
+      "username": "Username",
+      "homeDir": "Home Dir",
+      "status": "Status",
+      "name": "Name",
+      "port": "Port",
+      "filter": "Filter",
+      "parameters": "Parameters"
+    },
+    "config": {
+      "systemPrompt": "System Prompt",
+      "prompt": "Prompt",
+      "userPrompt": "User Prompt",
+      "maxTokens": "Max Tokens",
+      "url": "URL",
+      "model": "Model",
+      "availableLanguages": "Available Languages",
+      "importLanguagePack": "Import Language Pack",
+      "tools": "Tools"
+    },
+    "stat": {
+      "users": "Users",
+      "shares": "Shares"
+    }
   }
 }
\ No newline at end of file
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 9f6a6ca..f3158f9 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -1,12 +1,14 @@
 import { createI18n } from 'vue-i18n'
 import en from './en.json'
 import zhTW from './zh-TW.json'
+import ja from './ja.json'
 
 export type MessageSchema = typeof en
 
 const supportedLanguages = {
   'en': en,
   'zh-TW': zhTW,
+  'ja': ja,
 }
 
 function detectInitialLanguage(): string {
@@ -49,7 +51,7 @@ function detectOSLanguage(): string {
   return 'en'
 }
 
-const i18n = createI18n<[MessageSchema], 'en' | 'zh-TW'>({
+const i18n = createI18n<[MessageSchema], 'en' | 'zh-TW' | 'ja'>({
   legacy: false,
   locale: detectInitialLanguage(),
   fallbackLocale: 'en',
diff --git a/src/locales/ja.json b/src/locales/ja.json
new file mode 100644
index 0000000..fb152fb
--- /dev/null
+++ b/src/locales/ja.json
@@ -0,0 +1,448 @@
+{
+  "common": {
+    "loading": "読み込み中...",
+    "error": "エラー",
+    "success": "成功",
+    "cancel": "キャンセル",
+    "confirm": "確認",
+    "delete": "削除",
+    "save": "保存",
+    "edit": "編集",
+    "search": "検索",
+    "back": "戻る",
+    "close": "閉じる",
+    "play": "再生",
+    "logout": "ログアウト",
+    "login": "ログイン"
+  },
+  "library": {
+    "sort": {
+      "title": "並べ替え",
+      "time_desc": "時間（新しい順）",
+      "time_asc": "時間（古い順）",
+      "size_desc": "サイズ（大きい順）",
+      "size_asc": "サイズ（小さい順）",
+      "name_asc": "名前（A-Z）",
+      "name_desc": "名前（Z-A）"
+    },
+    "filter": {
+      "title": "フィルター",
+      "unregistered": "未登録",
+      "registered": "登録済み",
+      "pending": "保留中",
+      "completed": "完了",
+      "videos_only": "動画のみ",
+      "photos_only": "写真のみ"
+    },
+    "size": {
+      "title": "サイズ",
+      "min_mb": "最小 MB",
+      "max_mb": "最大 MB"
+    },
+    "duration": {
+      "title": "動画の長さ",
+      "min_minutes": "最小 分",
+      "max_minutes": "最大 分"
+    },
+    "status": {
+      "files": "{count} ファイル",
+      "registered": "登録済み",
+      "unregistered": "未登録",
+      "pending": "保留中",
+      "processing": "処理中",
+      "completed": "完了",
+      "scanning": "スキャン中",
+      "ready": "準備完了",
+      "keyword_ready": "キーワード準備完了",
+      "semantic_ready": "意味検索準備完了",
+      "face_mgmt_ready": "顔管理準備完了",
+      "agent_ready": "エージェント準備完了"
+    },
+    "thumbnail": {
+      "register_to_preview": "プレビューを表示するには登録してください"
+    },
+"context": {
+      "register_file": "ファイルを登録",
+      "process_file": "ファイルを処理",
+      "reprocess": "再処理",
+      "unregister": "登録解除",
+      "play_video": "ビデオを再生",
+      "processor_selection": "プロセッサー選択",
+      "overall_progress": "全体の進捗",
+      "missing_file_path": "ファイルパスがありません",
+      "file_not_registered": "ファイルが登録されていません",
+      "select_processor": "少なくとも1つのプロセッサーを選択してください",
+      "file_must_be_completed": "ファイルが完了している必要があります",
+      "face_deduplication": "顔の重複排除",
+      "qc_check": "品質チェック"
+    },
+    "pipeline": {
+      "processors": "プロセッサー",
+      "rule1_ingestion": "Rule1 取り込み",
+      "face_tracing": "顔追跡",
+      "tkg_nodes": "TKG ノード",
+      "tkg_edges": "TKG エッジ",
+      "rule2_ingestion": "Rule2 取り込み"
+    },
+    "phase": {
+      "processor_output": "Rule1: プロセッサー出力",
+      "postgresql_ingestion": "Rule1: PostgreSQL 取り込み",
+      "qdrant_ingestion": "Rule1: Qdrant 取り込み"
+    },
+    "action": {
+      "registering": "登録中...",
+      "registered": "登録済み: {name}",
+      "registration_failed": "登録失敗: {message}",
+      "registration_error": "登録エラー: {error}",
+      "processing": "処理中...",
+      "processing_started": "処理開始: {name}",
+      "processing_failed": "処理失敗: {message}",
+      "processing_error": "処理エラー: {error}",
+      "removing": "削除中...",
+      "removed": "削除済み: {name}",
+      "removal_failed": "削除失敗: {message}",
+      "removal_error": "削除エラー: {error}",
+      "clear_filters": "フィルターをクリア"
+    },
+    "qc": {
+      "audio_info": "オーディオ情報",
+      "audio_track": "オーディオトラック",
+      "has_audio": "✓ オーディオあり",
+      "no_audio": "✗ オーディオなし",
+      "speech": "音声",
+      "has_speech": "✓ 音声あり",
+      "no_speech": "🔇 音声なし",
+      "language": "言語",
+      "sample_rate": "サンプリングレート",
+      "uuid_label": "UUID:",
+      "track_processor_output": "フェーズ1: プロセッサー出力",
+      "track_ingestion": "フェーズ2: データ取り込み",
+      "track_status_change": "最終: ステータス変更",
+      "output_ingestion_done": "📥 出力 + 取り込み完了",
+      "items": "{count} アイテム"
+    },
+    "refresh": "更新",
+    "refresh_status": "ステータスを更新",
+    "confirm": {
+      "title_register": "📥 登録",
+      "title_process": "🔍 詳細スキャン",
+      "title_rescan": "🔄 再スキャン",
+      "message_register": "ファイルがデフォルト設定で登録・処理されます。",
+      "message_register_no_scan": "登録のみ、自動スキャンなし。",
+      "message_process": "選択したプロセッサーでデフォルト設定を使用して処理します。",
+      "message_rescan": "登録解除 → 登録 → ディープスキャンを実行します（選択したプロセッサを使用）。",
+      "cancel": "キャンセル",
+      "proceed": "続行",
+      "rerun_processor": "{processor} を再実行しますか？",
+      "run_processor": "{filename} で {processor} を実行しますか？",
+      "unregister_title": "登録解除",
+      "unregister_message": "「{filename}」を登録解除しますか？\n\nファイルとその出力データが削除されます。"
+    },
+    "processor": {
+      "started": "{processor} が開始されました",
+      "failed": "失敗：{message}",
+      "error": "エラー：{message}",
+      "no_file": "エラー：ファイルが選択されていません",
+      "vlm_failed": "VLM サマリーの開始に失敗：{message}",
+      "pipeline_qc": "パイプライン品質チェック"
+    },
+    "settings": {
+      "auto_scan": "登録後に自動的に詳細スキャン"
+    }
+  },
+  "people": {
+    "toolbar": {
+      "all_files": "全ファイル",
+      "view_all_people": "全人物を表示",
+      "view_starred_people": "スター付き人物を表示",
+      "refresh": "更新",
+      "pending_people": "人物",
+      "skipped_people": "スキップされた人物",
+      "pending_faces": "顔",
+      "face_group": "顔グループ"
+    },
+    "section": {
+      "known_people": "既知の人物",
+      "pending_people": "人物",
+      "skipped_people": "スキップされた人物",
+      "pending_faces": "顔",
+      "face_group": "顔グループ",
+      "unassigned": "未割り当て"
+    },
+    "sort": {
+      "title": "並べ替え",
+      "recent": "最近表示",
+      "file_name": "ファイル名",
+      "name_az": "名前（A-Z）",
+      "name_za": "名前（Z-A）",
+      "time_desc": "時間（新しい順）",
+      "time_asc": "時間（古い順）"
+    },
+    "search": {
+      "known_people": "既知の人物を検索",
+      "pending_people": "保留中の人物を検索",
+      "person_name": "人物名を検索..."
+    },
+    "action_history": {
+      "title": "操作履歴 · {name}",
+      "undo_all": "すべて元に戻す",
+      "redo_all": "すべてやり直し",
+      "delete_person": "この人物を削除",
+      "no_history": "操作履歴なし"
+    },
+    "expand": {
+      "collapse": "折りたたむ",
+      "expand": "展開",
+      "view_faces": "顔を表示",
+      "appears_in": "登場:",
+      "faces": "{count} 顔",
+      "set_as_profile": "プロフィールに設定",
+      "no_face_data": "顔データなし"
+    },
+    "context": {
+      "star_person": "★ 重要としてマーク",
+      "unstar_person": "☆ 重要マークを削除",
+      "details": "📋 詳細",
+      "confirm_person": "✓ 人物を確認",
+      "pending": "保留中",
+      "edit_name": "✎ 名前を編集",
+      "merge_person": "⇄ 既にこの人物が存在",
+      "skip_person": "✕ この人物をスキップ",
+      "undo": "↩ 元に戻す",
+      "redo": "↪ やり直し",
+      "delete_person": "🗑 この人物を削除"
+    },
+    "face_context": {
+      "details": "📋 詳細",
+      "assign_existing": "⇄ 既存の人物に割り当て",
+      "skip_face": "✕ この顔をスキップ"
+    },
+    "assign": {
+      "title": "既存の人物に割り当て",
+      "search_placeholder": "人物名を検索...",
+      "no_results": "一致する人物が見つかりません",
+      "confirm_assign": "割り当てを確認"
+    },
+    "face_detail": {
+      "title": "保留中の顔の詳細",
+      "file": "ファイル:",
+      "trace_id": "トレースID:",
+      "frame_number": "フレーム番号:",
+      "confidence": "信頼度:",
+      "face_id": "顔ID:",
+      "play_segment": "動画セグメントを再生",
+      "new_identity": "新しい人物として作成",
+      "enter_name": "人物名を入力...",
+      "add": "追加",
+      "close": "閉じる"
+    },
+    "detail": {
+      "back": "戻る",
+      "edit": "編集",
+      "role": "役割",
+      "description": "説明",
+      "enter_name": "名前を入力",
+      "enter_alias": "エイリアスを入力してEnter",
+      "add_alias": "＋ エイリアス",
+      "collapse": "折りたたむ",
+      "role_name": "役割名",
+      "custom_description": "カスタム説明",
+      "saving": "保存中...",
+      "save_changes": "✓ 変更を保存",
+      "cancel": "キャンセル",
+      "add_same_person": "同じ人物を追加",
+      "play": "▶ 再生",
+      "unbind": "✕ バインド解除",
+      "segments": "{count} セグメント",
+      "traces": "{count} トレース",
+      "all_segments": "全セグメント",
+      "mode_trace": "トレース",
+      "mode_segment": "セグメント",
+      "mode_continuous": "連続",
+      "status": "ステータス:",
+      "confirm": "✓ 確認",
+      "skip": "スキップ",
+      "bind_face": "+ 顔をバインド",
+      "merge_other": "⇄ 他の人物にマージ",
+      "delete_person": "この人物を削除",
+      "bind_face_title": "顔をバインド",
+      "merge_title": "⇄ 他の人物にマージ",
+      "unbind_trace": "トレース T{trace_id} のバインドを解除（顔ID: {face_id}）？",
+      "no_face_id": "このトレースには顔IDがありません。バインド解除できません",
+      "unbind_failed": "バインド解除失敗: {error}",
+      "merge_confirm": "「{source}」を「{target}」にマージしますか？",
+      "not_this_person": "この人物ではない",
+      "delete_confirm": "「{name}」を削除しますか？",
+      "delete_confirm_message": "「{name}」を削除しますか？この操作は元に戻せません。",
+      "delete_failed": "削除失敗: {error}",
+      "create_identity_failed": "人物の作成に失敗: APIがidentity_uuidを返しませんでした",
+      "create_identity_error": "人物の作成に失敗: {error}",
+      "assign_failed": "割り当て失敗: {error}"
+    },
+    "action": {
+      "delete_person": "人物を削除",
+      "update_person": "人物を更新",
+      "bind_face": "顔をバインド",
+      "unbind_face": "顔のバインド解除",
+      "bind_trace": "トレースをバインド"
+    }
+  },
+  "agent": {
+    "welcome": {
+      "title": "👋 Momentry Studioへようこそ",
+      "intro": "システムをより効果的に活用できるようサポートします。主な機能を紹介します：",
+      "smart_search": {
+        "title": "スマート検索",
+        "desc": "キーワード、意味、人物検索モード"
+      },
+      "people_management": {
+        "title": "人物管理",
+        "desc": "動画内の人物を識別し、人物データベースを構築"
+      },
+      "file_management": {
+        "title": "ファイル管理",
+        "desc": "動画・写真ファイルの管理と処理"
+      },
+      "got_it": "了解しました、使用開始"
+    }
+  },
+  "login": {
+    "title": "Momentry Studio",
+    "subtitle": "続行するにはログインしてください",
+    "username": "ユーザー名",
+    "password": "パスワード",
+    "username_placeholder": "ユーザー名を入力",
+    "password_placeholder": "パスワードを入力",
+    "login_button": "ログイン",
+    "logging_in": "ログイン中...",
+    "login_success": "ログイン成功！",
+    "default_credentials": "デフォルト認証情報: demo / demo123"
+  },
+  "nav": {
+    "search": "検索",
+    "library": "ライブラリ",
+    "people": "人物",
+    "admin": "管理",
+    "client": "クライアント"
+  },
+  "time": {
+    "just_now": "たった今",
+    "minutes_ago": "{count} 分前",
+    "hours_ago": "{count} 時間前"
+  },
+  "video": {
+    "prev": "前へ",
+    "next": "次へ",
+    "key_frame": "キーフレーム"
+  },
+  "language": {
+    "en": "英語",
+    "zh-TW": "繁体字中国語",
+    "zh-CN": "簡体字中国語",
+    "ja": "日本語",
+    "ko": "韓国語",
+    "auto": "自動検出"
+  },
+  "client": {
+    "title": "ファイルマネージャー",
+    "search": {
+      "placeholder": "ファイルを検索..."
+    },
+    "table": {
+      "name": "名前",
+      "size": "サイズ",
+      "type": "タイプ",
+      "modified": "更新日時"
+    },
+    "button": {
+      "upload": "アップロード",
+      "newFolder": "新しいフォルダ",
+      "refresh": "更新",
+      "create": "作成",
+      "cancel": "キャンセル",
+      "delete": "削除",
+      "rename": "名前変更",
+      "move": "移動",
+      "preview": "プレビュー",
+      "download": "ダウンロード"
+    },
+    "dialog": {
+      "createFolder": "新しいフォルダを作成",
+      "folderName": "フォルダ名",
+      "deleteTitle": "「{name}」を削除",
+      "deleteMessage": "この{type}を削除してもよろしいですか？この操作は取り消せません。",
+      "renameTitle": "「{name}」の名前を変更",
+      "newName": "新しい名前",
+      "previewTitle": "ファイルプレビュー：{name}",
+      "uploadTitle": "ファイルをアップロード{s}",
+      "moveTitle": "{type}「{name}」を移動",
+      "selectFiles": "ファイルを選択"
+    },
+    "type": {
+      "file": "ファイル",
+      "folder": "フォルダ",
+      "files": "ファイル"
+    },
+    "status": {
+      "uploading": "アップロード中...",
+      "success": "成功",
+      "error": "エラー"
+    }
+  },
+  "admin": {
+    "title": "管理パネル",
+    "tab": {
+      "dashboard": "ダッシュボード",
+      "users": "ユーザー",
+      "shares": "共有",
+      "config": "設定",
+      "settings": "設定"
+    },
+    "section": {
+      "systemResources": "システムリソース",
+      "validation": "検証",
+      "configuration": "管理設定",
+      "vlmPrompts": "VLM プロンプト",
+      "languagePacks": "言語パック",
+      "llmConfig": "LLM 設定",
+      "processorConfig": "プロセッサ設定",
+      "filterConfig": "フィルタ設定",
+      "searchConfig": "検索設定",
+      "systemConfig": "システム設定",
+      "uploadPath": "アップロードパス",
+      "serviceUrls": "サービス URL"
+    },
+    "resource": {
+      "cpu": "CPU",
+      "memory": "メモリ",
+      "swap": "スワップ",
+      "gpu": "GPU",
+      "gpuFreq": "GPU 周波数",
+      "systemPower": "システム電力"
+    },
+    "table": {
+      "username": "ユーザー名",
+      "homeDir": "ホームディレクトリ",
+      "status": "ステータス",
+      "name": "名前",
+      "port": "ポート",
+      "filter": "フィルタ",
+      "parameters": "パラメータ"
+    },
+    "config": {
+      "systemPrompt": "システムプロンプト",
+      "prompt": "プロンプト",
+      "userPrompt": "ユーザープロンプト",
+      "maxTokens": "最大トークン数",
+      "url": "URL",
+      "model": "モデル",
+      "availableLanguages": "利用可能な言語",
+      "importLanguagePack": "言語パックをインポート",
+      "tools": "ツール"
+    },
+    "stat": {
+      "users": "ユーザー",
+      "shares": "共有"
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/locales/zh-TW.json b/src/locales/zh-TW.json
index dfbf6d5..841b7e8 100644
--- a/src/locales/zh-TW.json
+++ b/src/locales/zh-TW.json
@@ -44,30 +44,37 @@
       "min_minutes": "最小分鐘",
       "max_minutes": "最大分鐘"
     },
-"status": {
+    "status": {
       "files": "{count} 個檔案",
       "registered": "已註冊",
       "unregistered": "未註冊",
       "pending": "等待中",
       "processing": "處理中",
-      "completed": "已完成"
+      "completed": "已完成",
+      "scanning": "掃描中",
+      "ready": "就緒",
+      "keyword_ready": "關鍵字可用",
+      "semantic_ready": "語意可用",
+      "face_mgmt_ready": "臉部管理可用",
+      "agent_ready": "Agent 可用"
     },
     "thumbnail": {
       "register_to_preview": "註冊以預覽"
     },
-    "context": {
-      "register_file": "註冊此檔案",
-      "process_file": "處理此檔案",
+"context": {
+      "register_file": "註冊檔案",
+      "process_file": "處理檔案",
       "reprocess": "重新處理",
-      "run_identity_agent": "執行 Identity Agent",
-      "unregister": "移除註冊",
+      "unregister": "取消註冊",
       "play_video": "播放影片",
       "processor_selection": "處理器選擇",
       "overall_progress": "整體進度",
       "missing_file_path": "缺少檔案路徑",
-      "file_not_registered": "檔案尚未註冊",
-      "select_processor": "請至少選擇一個處理器",
-      "file_must_be_completed": "檔案需先完成處理"
+      "file_not_registered": "檔案未註冊",
+      "select_processor": "請選擇至少一個處理器",
+      "file_must_be_completed": "檔案必須先完成處理",
+      "face_deduplication": "人臉去重",
+      "qc_check": "品質檢查"
     },
     "pipeline": {
       "processors": "處理器",
@@ -91,17 +98,57 @@
       "processing_started": "處理已觸發：{name}",
       "processing_failed": "處理失敗：{message}",
       "processing_error": "處理錯誤：{error}",
-      "identity_agent_started": "Identity Agent 已啟動：{name}",
-      "identity_agent_failed": "Identity Agent 失敗：{message}",
-      "identity_agent_error": "Identity Agent 錯誤：{error}",
       "removing": "移除中...",
       "removed": "移除成功：{name}",
       "removal_failed": "移除失敗：{message}",
       "removal_error": "移除錯誤：{error}",
       "clear_filters": "清除篩選"
     },
+    "qc": {
+      "audio_info": "音軌資訊",
+      "audio_track": "音軌",
+      "has_audio": "✓ 有音軌",
+      "no_audio": "✗ 無音軌",
+      "speech": "語音",
+      "has_speech": "✓ 有語音",
+      "no_speech": "🔇 無語音",
+      "language": "語言",
+      "sample_rate": "取樣率",
+      "uuid_label": "UUID：",
+      "track_processor_output": "路徑一：處理器輸出",
+      "track_ingestion": "路徑二：資料入庫",
+      "track_status_change": "終點：狀態改變",
+      "output_ingestion_done": "📥 輸出 + 入庫 完成",
+      "items": "{count} 筆"
+    },
     "refresh": "重新整理",
-    "refresh_status": "重新整理狀態"
+    "refresh_status": "重新整理狀態",
+    "confirm": {
+      "title_register": "📥 註冊",
+      "title_process": "🔍 深度掃描",
+      "title_rescan": "🔄 重新掃描",
+      "message_register": "檔案將以預設設定註冊並處理。",
+      "message_register_no_scan": "僅註冊，不自動掃描。",
+      "message_process": "將使用預設設定對選定的處理器執行處理。",
+      "message_rescan": "將執行取消註冊 → 註冊 → 深度掃描（使用選擇的處理器）。",
+      "cancel": "取消",
+      "proceed": "開始",
+      "rerun_processor": "重新執行 {processor}？",
+      "run_processor": "在 {filename} 上執行 {processor}？",
+      "unregister_title": "取消註冊",
+      "unregister_message": "取消註冊「{filename}」？\n\n這將移除檔案及其輸出資料。"
+    },
+    "processor": {
+      "started": "{processor} 已開始",
+      "failed": "失敗：{message}",
+      "error": "錯誤：{message}",
+      "no_file": "錯誤：未選擇檔案",
+      "vlm_failed": "無法觸發 VLM 摘要：{message}",
+      "pipeline_qc": "管道品質檢查"
+    },
+    "settings": {
+      "auto_scan": "註冊後自動深度掃描"
+    }
   },
   "people": {
     "toolbar": {
@@ -119,7 +166,8 @@
       "pending_people": "人物",
       "skipped_people": "已略過",
       "pending_faces": "人臉",
-      "face_group": "人臉群組"
+      "face_group": "人臉群組",
+      "unassigned": "未分組"
     },
     "sort": {
       "title": "排序方式",
@@ -230,6 +278,13 @@
       "create_identity_failed": "新增人物失敗：API 未返回 identity_uuid",
       "create_identity_error": "新增人物失敗：{error}",
       "assign_failed": "指派失敗：{error}"
+    },
+    "action": {
+      "delete_person": "刪除人物",
+      "update_person": "更新人物",
+      "bind_face": "綁定面部",
+      "unbind_face": "解綁面部",
+      "bind_trace": "綁定軌跡"
     }
   },
   "agent": {
@@ -269,5 +324,125 @@
     "people": "People",
     "admin": "Admin",
     "client": "Client"
+  },
+  "time": {
+    "just_now": "剛剛",
+    "minutes_ago": "{count} 分鐘前",
+    "hours_ago": "{count} 小時前"
+  },
+  "video": {
+    "prev": "上一個",
+    "next": "下一個",
+    "key_frame": "定位關鍵影格"
+  },
+  "language": {
+    "en": "English",
+    "zh-TW": "繁體中文",
+    "zh-CN": "简体中文",
+    "ja": "日本語",
+    "ko": "한국어",
+    "auto": "自動偵測"
+  },
+  "client": {
+    "title": "檔案管理器",
+    "search": {
+      "placeholder": "搜尋檔案..."
+    },
+    "table": {
+      "name": "名稱",
+      "size": "大小",
+      "type": "類型",
+      "modified": "修改時間"
+    },
+    "button": {
+      "upload": "上傳",
+      "newFolder": "新建資料夾",
+      "refresh": "刷新",
+      "create": "創建",
+      "cancel": "取消",
+      "delete": "刪除",
+      "rename": "重命名",
+      "move": "移動",
+      "preview": "預覽",
+      "download": "下載"
+    },
+    "dialog": {
+      "createFolder": "創建新資料夾",
+      "folderName": "資料夾名稱",
+      "deleteTitle": "刪除「{name}」",
+      "deleteMessage": "確定要刪除此{type}嗎？此操作無法撤銷。",
+      "renameTitle": "重命名「{name}」",
+      "newName": "新名稱",
+      "previewTitle": "檔案預覽：{name}",
+      "uploadTitle": "上傳檔案{s}",
+      "moveTitle": "移動{type}「{name}」",
+      "selectFiles": "選擇檔案"
+    },
+    "type": {
+      "file": "檔案",
+      "folder": "資料夾",
+      "files": "個檔案"
+    },
+    "status": {
+      "uploading": "上傳中...",
+      "success": "成功",
+      "error": "錯誤"
+    }
+  },
+  "admin": {
+    "title": "管理面板",
+    "tab": {
+      "dashboard": "儀表板",
+      "users": "用戶",
+      "shares": "共享",
+      "config": "配置",
+      "settings": "設定"
+    },
+    "section": {
+      "systemResources": "系統資源",
+      "validation": "驗證",
+      "configuration": "管理配置",
+      "vlmPrompts": "VLM 提示詞",
+      "languagePacks": "語言包",
+      "llmConfig": "LLM 配置",
+      "processorConfig": "處理器配置",
+      "filterConfig": "過濾器配置",
+      "searchConfig": "搜索配置",
+      "systemConfig": "系統配置",
+      "uploadPath": "上傳路徑",
+      "serviceUrls": "服務 URL"
+    },
+    "resource": {
+      "cpu": "CPU",
+      "memory": "記憶體",
+      "swap": "交換空間",
+      "gpu": "GPU",
+      "gpuFreq": "GPU 頻率",
+      "systemPower": "系統功耗"
+    },
+    "table": {
+      "username": "用戶名",
+      "homeDir": "主目錄",
+      "status": "狀態",
+      "name": "名稱",
+      "port": "端口",
+      "filter": "過濾器",
+      "parameters": "參數"
+    },
+    "config": {
+      "systemPrompt": "系統提示詞",
+      "prompt": "提示詞",
+      "userPrompt": "用戶提示詞",
+      "maxTokens": "最大 Token 數",
+      "url": "URL",
+      "model": "模型",
+      "availableLanguages": "可用語言",
+      "importLanguagePack": "導入語言包",
+      "tools": "工具"
+    },
+    "stat": {
+      "users": "用戶",
+      "shares": "共享"
+    }
   }
 }
\ No newline at end of file
diff --git a/src/store.ts b/src/store.ts
index 45a248d..89f89e5 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -1,7 +1,7 @@
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
 import { apiCall } from '@/api'
-import { isTauri } from './api/config'
-import type { PoseResponse, AppearanceResponse } from '@/api/types'
+import { isTauri, getApiBase } from './api/config'
+import type { PoseResponse, AppearanceResponse, FaceLandmarksResponse } from '@/api/types'
 
 export const filesCache = ref<any[]>([])
 export const filesLoaded = ref(false)
@@ -16,13 +16,37 @@ export const unassignedTracesCache = ref<any[]>([])
 export const unassignedTracesLoaded = ref(false)
 export const unassignedTracesTotal = ref(0)
 export const unassignedTracesPage = ref(1)
+export const faceCountsCache = ref<Record<string, number>>({})
 const UNASSIGNED_PER_PAGE = 20
 
+export async function loadFaceCount(fileUuid: string) {
+  if (faceCountsCache.value[fileUuid] !== undefined) return
+  try {
+    const result = await apiCall('get_file_traces', { fileUuid, page: 1, page_size: 1, limit: 1 })
+    faceCountsCache.value[fileUuid] = result.total || 0
+  } catch (e) {
+    console.error('loadFaceCount error:', e)
+  }
+}
+
 export const thumbnailsCache = ref<Record<string, string>>({})
 export const profilesCache = ref<Record<string, string>>({})
 export const faceThumbsCache = ref<Record<string, string>>({})
 export const poseCache = ref<Record<string, PoseResponse>>({})
 export const appearanceCache = ref<Record<string, AppearanceResponse>>({})
+export const faceLandmarksCache = ref<Record<string, FaceLandmarksResponse>>({})
+
+let thumbCacheBust = 0
+export function bumpThumbCacheBust() {
+  thumbCacheBust += 1
+}
+export function clearFaceThumbs() {
+  for (const k of Object.keys(faceThumbsCache.value)) {
+    const v = faceThumbsCache.value[k]
+    if (v && v.startsWith('blob:')) URL.revokeObjectURL(v)
+  }
+  faceThumbsCache.value = {}
+}
 
 export interface ProcessorOutputInfo {
   has_json: boolean
@@ -63,6 +87,36 @@ export interface PipelineStats {
   stages: PipelineStage[]
 }
 
+export interface SystemStats {
+  cpu_used_percent: number
+  memory_used_percent: number
+  memory_available_mb: number
+  memory_total_mb: number
+  swap_used_percent: number
+  swap_available_mb: number
+  swap_total_mb: number
+  gpu_available: boolean
+  gpu_utilization: number | null
+  gpu_memory_used_pct: number | null
+  ane_available: boolean
+  ane_utilization: number | null
+  source: string
+  chip_name?: string
+  cpu_power?: number
+  gpu_power?: number
+  ane_power?: number
+  sys_power?: number
+  ram_power?: number
+  cpu_temp?: number
+  gpu_temp?: number
+  ecpu_freq_mhz?: number
+  pcpu_freq_mhz?: number
+  gpu_freq_mhz?: number
+  ecpu_cores?: number
+  pcpu_cores?: number
+  gpu_cores?: number
+}
+
 // File详细统计接口
 export interface JsonProcessorInfo {
   status: string
@@ -131,13 +185,27 @@ export interface IdentityAgentStats {
   confirmations: number
 }
 
-export interface FileStats {
-  json: JsonStats
-  postgresql: PostgresqlStats
-  qdrant: QdrantStats
-  tkg: TkgStats
-  identity_agent: IdentityAgentStats
-}
+ export interface FileStats {
+   json: JsonStats
+   postgresql: PostgresqlStats
+   qdrant: QdrantStats
+   tkg: TkgStats
+   identity_agent: IdentityAgentStats
+   vlm_summary: VlmSummaryStats
+   scene_vlm: SceneVlmStats
+ }
+
+export interface VlmSummaryStats {
+   total: number
+   done: number
+ }
+
+export interface SceneVlmStats {
+   total_scenes: number
+   status: string
+   vlm_done: number
+   vlm_total: number
+ }
 
 export const processorCountsCache = ref<Record<string, Record<string, ProcessorOutputInfo>>>({})
 export const fileProgressCache = ref<Record<string, FileProgress>>({})
@@ -146,22 +214,47 @@ export const fileStatusCache = ref<Record<string, string>>({})
 // Cluster agent state (persistent across navigation)
 export const clusterResultsCache = ref<Record<string, any[]>>({})
 export const clusterRunningState = ref<Record<string, boolean>>({})
+const clusterRunningSince = ref<Record<string, number>>({})
+const CLUSTER_RUNNING_STALE_MS = 5 * 60 * 1000
 
 function loadClusterStateFromStorage() {
   try {
     const saved = localStorage.getItem('momentry_cluster_running')
     if (saved) clusterRunningState.value = JSON.parse(saved)
   } catch (e) {}
+  try {
+    const since = localStorage.getItem('momentry_cluster_running_since')
+    if (since) clusterRunningSince.value = JSON.parse(since)
+  } catch (e) {}
+  const now = Date.now()
+  let changed = false
+  for (const uuid of Object.keys(clusterRunningState.value)) {
+    const sinceTs = clusterRunningSince.value[uuid]
+    if (clusterRunningState.value[uuid] && (!sinceTs || now - sinceTs > CLUSTER_RUNNING_STALE_MS)) {
+      clusterRunningState.value[uuid] = false
+      delete clusterRunningSince.value[uuid]
+      changed = true
+    }
+  }
+  if (changed) saveClusterStateToStorage()
 }
 function saveClusterStateToStorage() {
   try {
     localStorage.setItem('momentry_cluster_running', JSON.stringify(clusterRunningState.value))
   } catch (e) {}
+  try {
+    localStorage.setItem('momentry_cluster_running_since', JSON.stringify(clusterRunningSince.value))
+  } catch (e) {}
 }
 loadClusterStateFromStorage()
 
 export function setClusterRunning(fileUuid: string, running: boolean) {
   clusterRunningState.value[fileUuid] = running
+  if (running) {
+    clusterRunningSince.value[fileUuid] = Date.now()
+  } else {
+    delete clusterRunningSince.value[fileUuid]
+  }
   saveClusterStateToStorage()
 }
 
@@ -170,7 +263,7 @@ export function isClusterRunning(fileUuid: string): boolean {
 }
 
 export async function pollClusterResults(fileUuid: string, onDone?: (results: any[]) => void) {
-  if (!fileUuid || isClusterRunning(fileUuid)) return
+  if (!fileUuid) return
   setClusterRunning(fileUuid, true)
   try {
     for (let i = 0; i < 120; i++) {
@@ -196,7 +289,7 @@ export async function pollClusterResults(fileUuid: string, onDone?: (results: an
 export async function loadClusterNames(fileUuid: string, clusters: any[]) {
   console.log('[loadClusterNames] loading names for', clusters.length, 'clusters')
   const promises = clusters.map(async (c) => {
-    const repTid = c.representative_trace || c.trace_ids?.[0]
+    const repTid = c.representative_trace !== undefined && c.representative_trace !== null ? c.representative_trace : c.trace_ids?.[0]
     if (repTid != null) {
       try {
         const key = `${fileUuid}:${repTid}`
@@ -340,13 +433,14 @@ const MAX_PROFILE_CONCURRENT = 4
 
 const loadingThumbs = new Set<string>()
 const loadingProfiles = new Set<string>()
-const loadingFaceThumbs = new Set<string>()
+export const loadingFaceThumbs = reactive(new Set<string>())
 const loadingProcessorCounts = new Set<string>()
 const pollingProgress = new Set<string>()
 export const pollingProgressSet = pollingProgress
 
 export const pipelineStatsCache = ref<Record<string, PipelineStats>>({})
 export const fileStatsCache = ref<Record<string, FileStats>>({})
+export const systemStatsCache = ref<SystemStats | null>(null)
 const loadingPipelineStats = new Set<string>()
 const loadingFileStats = new Set<string>()
 
@@ -410,6 +504,7 @@ export function startFilesWatch() {
       }
       
       // Check status changes for existing files
+      let hasStatusChange = false
       for (const newFile of newFiles) {
         if (!newFile.file_uuid) continue
         const oldFile = filesCache.value.find((f: any) => f.file_uuid === newFile.file_uuid)
@@ -417,14 +512,19 @@ export function startFilesWatch() {
           // Status changed, update cache
           const idx = filesCache.value.findIndex((f: any) => f.file_uuid === newFile.file_uuid)
           if (idx >= 0) {
-            filesCache.value[idx] = newFile
+            filesCache.value.splice(idx, 1, newFile)
+            hasStatusChange = true
           }
         }
       }
+      
+      if (hasStatusChange) {
+        console.log('[startFilesWatch] Status changes detected and updated')
+      }
     } catch (e) {
       console.error('[startFilesWatch] Error:', e)
     }
-  }, 5000)
+  }, 3000)
 }
 
 export function stopFilesWatch() {
@@ -570,8 +670,8 @@ export async function ensureUnassignedTraces(fileUuid: string, page?: number) {
   }
   _unassignedTracesLoading = true
   try {
-    const args: any = { page: targetPage, perPage: UNASSIGNED_PER_PAGE, fileUuid }
-    const batch: any = await apiCall('get_unassigned_traces', args)
+    const args: any = { page: 1, page_size: 3000, limit: 3000, fileUuid }
+    const batch: any = await apiCall('get_file_traces', args)
     const traces = batch?.traces || []
     unassignedTracesCache.value = traces
     unassignedTracesTotal.value = batch?.total ?? traces.length
@@ -586,19 +686,21 @@ export async function ensureUnassignedTraces(fileUuid: string, page?: number) {
 }
 
 export function loadTraceThumb(t: any) {
-  if (!t.file_uuid || !t.trace_id) return
-  const key = `${t.trace_id}-${t.file_uuid}-${t.best_face_id || 0}`
+  if (!t.file_uuid || t.trace_id === undefined || t.trace_id === null) return
+  const key = `${t.file_uuid}-${t.trace_id}`
   if (faceThumbsCache.value[key] || loadingFaceThumbs.has(key)) return
   loadingFaceThumbs.add(key)
   queueThumb(async () => {
     try {
-      // Use direct trace-thumb endpoint for fast keyFace.jpg loading (~8ms)
-      const url = `/api/v1/trace-thumb/${t.file_uuid}/${t.trace_id}`
+      // 改用自己的 robust face-thumbnail 端點（三層 fallback：.faces cache →
+      // key_face.jpg → live 重切格），避免 trace-thumb 缺檔時 404 破圖。
+      const base = getApiBase()
+      const ver = thumbCacheBust > 0 ? `&t=${thumbCacheBust}` : ''
+      const url = `${base}/api/v1/file/${t.file_uuid}/thumbnail?trace_id=${t.trace_id}${ver}`
       const resp = await fetch(url)
       if (resp.ok) {
         const blob = await resp.blob()
-        const dataUrl = URL.createObjectURL(blob)
-        faceThumbsCache.value[key] = dataUrl
+        faceThumbsCache.value[key] = URL.createObjectURL(blob)
       }
     } catch (e) {
       console.error('loadTraceThumb failed:', key, e)
@@ -795,15 +897,11 @@ export async function pollProgress(fileUuid: string) {
         gpu_percent: data.gpu_percent,
         memory_percent: data.memory_percent,
       }
-      fileStatusCache.value[fileUuid] = 'processing'
-      const f = filesCache.value.find((x: any) => x.file_uuid === fileUuid)
-      if (f) f.status = 'processing'
+      // No local status promotion - status comes from Core API only
       saveProgressCacheToStorage()
       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'
-        if (f) f.status = 'completed'
         saveProgressCacheToStorage()
         await loadProcessorCounts(fileUuid)
         break
@@ -838,22 +936,8 @@ export async function refreshFileStatus(fileUuid: string) {
   try {
     const pipeline = await loadPipelineStats(fileUuid, true)
     if (pipeline) {
-      const isComplete = pipeline.overall_progress >= 1.0 || pipeline.stages?.every((s: any) => s.status === 'completed' || s.status === 'failed')
-      const isRunning = pipeline.stages?.some((s: any) => s.status === 'running')
-      
-      if (isComplete) {
-        fileStatusCache.value[fileUuid] = 'completed'
-        await loadFileStats(fileUuid, true)
-      } else if (isRunning) {
-        fileStatusCache.value[fileUuid] = 'processing'
-      }
-      
-      // Also update the file object in filesCache
-      const f = filesCache.value.find((x: any) => x.file_uuid === fileUuid)
-      if (f) {
-        if (isComplete) f.status = 'completed'
-        else if (isRunning) f.status = 'processing'
-      }
+      // No local status promotion - status comes from Core API only
+      await loadFileStats(fileUuid, true)
     }
   } catch (e) {
     console.error('refreshFileStatus failed:', fileUuid, e)
@@ -921,10 +1005,12 @@ export async function loadPipelineStats(fileUuid: string, force = false): Promis
       processors: 0.30,
       rule1_ingestion: 0.05,
       face_tracing: 0.05,
-      identity_agent: 0.10,
+      face_dedup: 0.10,
       tkg_nodes: 0.20,
       tkg_edges: 0.15,
-      rule2_ingestion: 0.15
+      rule2_ingestion: 0.10,
+      vlm_summary: 0.04,
+      moment_chunks: 0.01
     }
     
     const mappedStages = stages.map((s: any) => ({
@@ -934,7 +1020,6 @@ export async function loadPipelineStats(fileUuid: string, force = false): Promis
       status: s.status || 'pending'
     }))
     
-    // 用前端权重重新计算 overall_progress（不信任 API 返回的值）
     const calculatedProgress = mappedStages.reduce((sum, s) => sum + s.weight * s.progress, 0)
     
     const pipelineStats: PipelineStats = {
@@ -946,14 +1031,7 @@ export async function loadPipelineStats(fileUuid: string, force = false): Promis
     
     pipelineStatsCache.value = { ...pipelineStatsCache.value, [fileUuid]: pipelineStats }
     
-    // If pipeline is complete, update file status
-    if (calculatedProgress >= 1.0) {
-      const f = filesCache.value.find((x: any) => x.file_uuid === fileUuid)
-      if (f && f.status !== 'completed') {
-        f.status = 'completed'
-        fileStatusCache.value[fileUuid] = 'completed'
-      }
-    }
+    // No local status promotion - status comes from Core API only
     
     return pipelineStats
   } catch (e) {
@@ -961,11 +1039,9 @@ export async function loadPipelineStats(fileUuid: string, force = false): Promis
     try {
       const oldData: any = await apiCall('get_progress', { fileUuid })
       
-      // 检查所有处理器是否都完成
       const allComplete = oldData.processors?.length > 0 && oldData.processors?.every((p: any) => p.status === 'complete' || p.status === 'failed')
       const hasRunning = oldData.processors?.some((p: any) => p.status === 'running')
       
-      // 如果都完成，显示100%
       const progress = allComplete ? 1.0 : (oldData.overall_progress || 0) / 100
       const status = allComplete ? 'completed' : (hasRunning ? 'running' : 'pending')
       
@@ -988,6 +1064,19 @@ export async function loadPipelineStats(fileUuid: string, force = false): Promis
   }
 }
 
+export async function loadSystemStats(): Promise<SystemStats | null> {
+  try {
+    const resp = await fetch('/api/v1/system-stats')
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data: SystemStats = await resp.json()
+    systemStatsCache.value = data
+    return data
+  } catch (e) {
+    console.error('loadSystemStats failed:', e)
+    return null
+  }
+}
+
 export async function loadFileStats(fileUuid: string, force = false): Promise<FileStats | null> {
   if (!fileUuid) return null
   if (!force && fileStatsCache.value[fileUuid]) return fileStatsCache.value[fileUuid]
@@ -1060,6 +1149,16 @@ export async function loadFileStats(fileUuid: string, force = false): Promise<Fi
         tmdb_matches: data.identity_agent?.tmdb_matches || 0,
         speaker_bindings: data.identity_agent?.speaker_bindings || 0,
         confirmations: data.identity_agent?.confirmations || 0
+      },
+      vlm_summary: {
+        total: data.vlm_summary?.total || 0,
+        done: data.vlm_summary?.done || 0
+      },
+      scene_vlm: {
+        total_scenes: data.scene_vlm?.total_scenes || 0,
+        status: data.scene_vlm?.status || '',
+        vlm_done: data.scene_vlm?.vlm_done || 0,
+        vlm_total: data.scene_vlm?.vlm_total || 0
       }
     }
     
@@ -1090,7 +1189,9 @@ export async function loadFileStats(fileUuid: string, force = false): Promise<Fi
         postgresql: { sentence_chunks: 0, trace_chunks: 0, relationship_chunks: 0, identities: 0, file_identities: 0 },
         qdrant: { faces: 0, face_traces: 0, face_identities: 0, text_chunks: 0, speakers: 0 },
         tkg: { nodes: { character: 0, object: 0, scene: 0, action: 0, location: 0, event: 0, dialogue: 0, emotion: 0, relation: 0 }, edges: { appear_in: 0, interact_with: 0, located_at: 0, perform_action: 0, cause_effect: 0, temporal_link: 0, speak_to: 0, feel: 0 }, total_nodes: 0, total_edges: 0 },
-        identity_agent: { clusters: 0, identities_created: 0, tmdb_matches: 0, speaker_bindings: 0, confirmations: 0 }
+        identity_agent: { clusters: 0, identities_created: 0, tmdb_matches: 0, speaker_bindings: 0, confirmations: 0 },
+        vlm_summary: { total: 0, done: 0 },
+        scene_vlm: { total_scenes: 0, status: '', vlm_done: 0, vlm_total: 0 }
       }
       
       // 从processorCounts填充json.processors
@@ -1132,15 +1233,12 @@ export async function pollPipelineProgress(fileUuid: string) {
         const idx = filesCache.value.findIndex((x: any) => x.file_uuid === fileUuid)
         if (idx === -1) continue
         
-        fileStatusCache.value[fileUuid] = 'processing'
-        filesCache.value.splice(idx, 1, { ...filesCache.value[idx], status: 'processing' })
+        // No local status promotion - status comes from Core API only
         saveProgressCacheToStorage()
         
         const allComplete = stats.stages.every(s => s.status === 'completed' || s.status === 'failed')
         if (allComplete || stats.overall_progress >= 1.0) {
           stopPolling(fileUuid)
-          fileStatusCache.value[fileUuid] = 'completed'
-          filesCache.value.splice(idx, 1, { ...filesCache.value[idx], status: 'completed' })
           saveProgressCacheToStorage()
           await loadFileStats(fileUuid, true)
           break
@@ -1210,4 +1308,24 @@ export async function getAppearance(fileUuid: string, frame: number, bbox?: { x:
     console.error('getAppearance failed:', fileUuid, frame, e)
     return null
   }
+}
+
+export async function getFaceLandmarks(fileUuid: string, frame: number, bbox?: { x: number; y: number; width: number; height: number } | null): Promise<FaceLandmarksResponse | null> {
+  const key = bbox ? `${fileUuid}:${frame}:${bbox.x}:${bbox.y}` : `${fileUuid}:${frame}`
+  if (faceLandmarksCache.value[key]) return faceLandmarksCache.value[key]
+  try {
+    const args: any = { fileUuid, frame }
+    if (bbox) {
+      args.bboxX = bbox.x
+      args.bboxY = bbox.y
+      args.bboxW = bbox.width
+      args.bboxH = bbox.height
+    }
+    const data = await apiCall('get_face_landmarks', args)
+    if (data) faceLandmarksCache.value[key] = data
+    return data
+  } catch (e) {
+    console.error('getFaceLandmarks failed:', fileUuid, frame, e)
+    return null
+  }
 }
\ No newline at end of file
diff --git a/src/stores/autoScan.ts b/src/stores/autoScan.ts
new file mode 100644
index 0000000..248817f
--- /dev/null
+++ b/src/stores/autoScan.ts
@@ -0,0 +1,28 @@
+// Auto Scan Store - controls whether registering a file triggers an automatic deep scan
+import { ref, computed } from 'vue'
+
+const AUTO_SCAN_KEY = 'momentry_auto_scan_after_register'
+
+// Load initial state (default OFF: pure registration, no auto deep scan)
+const savedAutoScan = localStorage.getItem(AUTO_SCAN_KEY)
+const autoScanEnabled = ref(savedAutoScan === 'true')
+
+export function useAutoScan() {
+  const autoScanAfterRegister = computed(() => autoScanEnabled.value)
+
+  function toggleAutoScan() {
+    autoScanEnabled.value = !autoScanEnabled.value
+    localStorage.setItem(AUTO_SCAN_KEY, autoScanEnabled.value.toString())
+  }
+
+  function setAutoScan(value: boolean) {
+    autoScanEnabled.value = value
+    localStorage.setItem(AUTO_SCAN_KEY, value.toString())
+  }
+
+  return {
+    autoScanAfterRegister,
+    toggleAutoScan,
+    setAutoScan,
+  }
+}
\ No newline at end of file
diff --git a/src/stores/themeStore.ts b/src/stores/themeStore.ts
new file mode 100644
index 0000000..6859b80
--- /dev/null
+++ b/src/stores/themeStore.ts
@@ -0,0 +1,32 @@
+import { ref, watch, onMounted } from 'vue'
+
+const THEME_KEY = 'momentry_theme'
+const saved = localStorage.getItem(THEME_KEY) || 'auto'
+const theme = ref(saved)
+
+function applyTheme(t: string) {
+  if (t === 'auto') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
+  } else {
+    document.documentElement.setAttribute('data-theme', t)
+  }
+}
+
+watch(theme, (v) => {
+  localStorage.setItem(THEME_KEY, v)
+  applyTheme(v)
+})
+
+export function useTheme() {
+  onMounted(() => applyTheme(theme.value))
+
+  function toggleTheme() {
+    const current = theme.value === 'auto' 
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme.value
+    theme.value = current === 'dark' ? 'light' : 'dark'
+  }
+
+  return { theme, toggleTheme }
+}
diff --git a/src/utils/asrStatus.ts b/src/utils/asrStatus.ts
index 8cd6075..ed1c6ea 100644
--- a/src/utils/asrStatus.ts
+++ b/src/utils/asrStatus.ts
@@ -29,10 +29,10 @@ export function getAsrStatus(asr: AsrData | null | undefined): AsrStatus {
 
 export function getAsrStatusLabel(status: AsrStatus): string {
   const labels: Record<AsrStatus, string> = {
-    'no_audio_track': '無音軌',
-    'silent_audio': '無語音',
-    'has_transcript': '有語音',
-    'processing': '處理中'
+    'no_audio_track': 'No Audio Track',
+    'silent_audio': 'No Speech',
+    'has_transcript': 'Has Speech',
+    'processing': 'Processing'
   }
   return labels[status]
 }
diff --git a/src/utils/faceLandmarkScoring.ts b/src/utils/faceLandmarkScoring.ts
new file mode 100644
index 0000000..9ac17f3
--- /dev/null
+++ b/src/utils/faceLandmarkScoring.ts
@@ -0,0 +1,122 @@
+import type { FaceLandmarksResponse } from '@/api/types'
+
+export type LandmarkVerdict = 'PASS' | 'REVIEW' | 'FAIL'
+
+export interface LandmarkScoreResult {
+  score: number
+  verdict: LandmarkVerdict
+  reasons: string[]
+}
+
+function pts(arr?: number[][] | null): [number, number][] {
+  return (arr || []).map((p) => [p[0], p[1]] as [number, number])
+}
+
+function centroid(arr?: number[][] | null): [number, number] | null {
+  const a = pts(arr)
+  if (a.length === 0) return null
+  const cx = a.reduce((s, p) => s + p[0], 0) / a.length
+  const cy = a.reduce((s, p) => s + p[1], 0) / a.length
+  return [cx, cy]
+}
+
+export function scoreFaceLandmarks(fa: FaceLandmarksResponse): LandmarkScoreResult {
+  const lm = fa.landmarks || {}
+  const lips = fa.lips || {}
+  const reasons: string[] = []
+
+  // Dimension A: completeness (20)
+  let a = 20
+  for (const k of ['left_eye', 'right_eye', 'nose'] as const) {
+    const v = lm[k] || []
+    if (v.length === 0) {
+      a -= 20 / 3
+      reasons.push(`missing ${k}`)
+    } else if (![6, 8].includes(v.length)) {
+      reasons.push(`${k} pts=${v.length}`)
+    }
+  }
+  if (lips.outer_lips && ![0, 14].includes(lips.outer_lips.length)) {
+    reasons.push(`outer_lips pts=${lips.outer_lips.length}`)
+  }
+  if (lips.inner_lips && ![0, 6].includes(lips.inner_lips.length)) {
+    reasons.push(`inner_lips pts=${lips.inner_lips.length}`)
+  }
+
+  // Dimension B: geometry (50)
+  let b = 50
+  const faceSize = Math.max(fa.width, fa.height, 1)
+  const le = centroid(lm.left_eye)
+  const re = centroid(lm.right_eye)
+  const no = centroid(lm.nose)
+
+  if (le && re && faceSize > 0) {
+    const eyeDist = Math.hypot(le[0] - re[0], le[1] - re[1])
+    const eyeRatio = eyeDist / faceSize
+    if (eyeRatio < 0.25) {
+      const pen = Math.min(20, (0.25 - eyeRatio) * 200)
+      b -= pen
+      reasons.push(`eye_ratio=${eyeRatio.toFixed(2)} too small`)
+    } else if (eyeRatio > 0.55) {
+      const pen = Math.min(20, (eyeRatio - 0.55) * 100)
+      b -= pen
+      reasons.push(`eye_ratio=${eyeRatio.toFixed(2)} too large`)
+    }
+
+    const eyeDy = Math.abs(le[1] - re[1]) / faceSize
+    if (eyeDy > 0.15) {
+      const pen = Math.min(15, (eyeDy - 0.15) * 100)
+      b -= pen
+      reasons.push(`eye_dy=${eyeDy.toFixed(2)} asymmetric`)
+    }
+
+    if (no) {
+      const noseBelow = (no[1] - Math.max(le[1], re[1])) / faceSize
+      if (noseBelow < 0.03) {
+        const pen = Math.min(15, (0.03 - noseBelow) * 50)
+        b -= pen
+        reasons.push(`nose_below=${noseBelow.toFixed(2)}`)
+      } else if (noseBelow > 0.35) {
+        const pen = Math.min(15, (noseBelow - 0.35) * 50)
+        b -= pen
+        reasons.push(`nose_below=${noseBelow.toFixed(2)} too low`)
+      }
+
+      const off = eyeDist > 0 ? (no[0] - (le[0] + re[0]) / 2) / eyeDist : 0
+      if (Math.abs(off) > 0.4) {
+        const pen = Math.min(15, (Math.abs(off) - 0.4) * 20)
+        b -= pen
+        reasons.push(`nose_off_center=${off.toFixed(2)}`)
+      }
+    }
+  } else {
+    b -= 30
+    reasons.push('no eye centroids')
+  }
+
+  for (const k of ['left_eye', 'right_eye', 'nose'] as const) {
+    for (const p of pts(lm[k])) {
+      if (!(fa.x - 5 <= p[0] && p[0] <= fa.x + fa.width + 5 && fa.y - 5 <= p[1] && p[1] <= fa.y + fa.height + 5)) {
+        b -= 10
+        reasons.push(`${k} outside bbox`)
+        break
+      }
+    }
+  }
+  if (Math.min(fa.width, fa.height) < 64) {
+    b -= 10
+    reasons.push('face < 64px')
+  }
+
+  // Dimension C: confidence & pose (30)
+  let c = fa.confidence * 30
+  const pa = fa.pose_angle
+  const maxPose = Math.max(Math.abs(pa?.yaw || 0), Math.abs(pa?.roll || 0), Math.abs(pa?.pitch || 0))
+  if (maxPose > 1.5) {
+    reasons.push(`pose=${maxPose.toFixed(1)}`)
+  }
+
+  const score = Math.max(0, Math.min(100, a + b + c))
+  const verdict: LandmarkVerdict = score >= 70 ? 'PASS' : score >= 40 ? 'REVIEW' : 'FAIL'
+  return { score: Math.round(score * 10) / 10, verdict, reasons }
+}
diff --git a/src/views/AdminView.vue b/src/views/AdminView.vue
index f837ad3..a2998db 100644
--- a/src/views/AdminView.vue
+++ b/src/views/AdminView.vue
@@ -1,21 +1,140 @@
 <template>
   <div id="ms-view-admin">
     <div class="admin-header">
-      <h1>Admin Panel</h1>
+      <h1>{{ t('admin.title') }}</h1>
       <div class="admin-tabs">
-        <button class="admin-tab" :class="{ active: activeTab === 'dashboard' }" @click="activeTab = 'dashboard'">Dashboard</button>
-        <button class="admin-tab" :class="{ active: activeTab === 'users' }" @click="activeTab = 'users'">Users</button>
-        <button class="admin-tab" :class="{ active: activeTab === 'shares' }" @click="activeTab = 'shares'">Shares</button>
-        <button class="admin-tab" :class="{ active: activeTab === 'settings' }" @click="activeTab = 'settings'">Settings</button>
+        <button class="admin-tab" :class="{ active: activeTab === 'dashboard' }" @click="activeTab = 'dashboard'">{{ t('admin.tab.dashboard') }}</button>
+        <button class="admin-tab" :class="{ active: activeTab === 'users' }" @click="activeTab = 'users'">{{ t('admin.tab.users') }}</button>
+        <button class="admin-tab" :class="{ active: activeTab === 'shares' }" @click="activeTab = 'shares'">{{ t('admin.tab.shares') }}</button>
+        <button class="admin-tab" :class="{ active: activeTab === 'config' }" @click="activeTab = 'config'">{{ t('admin.tab.config') }}</button>
+        <button class="admin-tab" :class="{ active: activeTab === 'settings' }" @click="activeTab = 'settings'">{{ t('admin.tab.settings') }}</button>
       </div>
     </div>
 
     <div class="admin-content">
       <div v-if="activeTab === 'dashboard'" class="dashboard-panel">
+        <div class="system-resources">
+          <h3>{{ t('admin.section.systemResources') }} <span class="source-badge">{{ systemStats.source }}</span></h3>
+          <div v-if="systemStats.chip_name" class="chip-info">{{ systemStats.chip_name }}</div>
+          
+          <div class="resource-row">
+            <span class="resource-label">{{ t('admin.resource.cpu') }}</span>
+            <div class="resource-bar-container">
+              <div class="resource-bar" :class="getBarClass(systemStats.cpu_used_percent)" :style="{ width: systemStats.cpu_used_percent + '%' }"></div>
+            </div>
+            <span class="resource-value">{{ systemStats.cpu_used_percent.toFixed(1) }}%</span>
+            <span v-if="systemStats.cpu_power" class="resource-detail power">{{ systemStats.cpu_power.toFixed(1) }}W</span>
+            <span v-if="systemStats.cpu_temp" class="resource-detail">{{ systemStats.cpu_temp.toFixed(1) }}°C</span>
+          </div>
+          <div v-if="systemStats.pcpu_freq_mhz" class="resource-row sub">
+            <span class="resource-label">P-Core</span>
+            <span class="resource-value">{{ systemStats.pcpu_freq_mhz }} MHz</span>
+            <span v-if="systemStats.pcpu_cores" class="resource-detail">{{ systemStats.pcpu_cores }} cores</span>
+          </div>
+          <div v-if="systemStats.ecpu_freq_mhz" class="resource-row sub">
+            <span class="resource-label">E-Core</span>
+            <span class="resource-value">{{ systemStats.ecpu_freq_mhz }} MHz</span>
+            <span v-if="systemStats.ecpu_cores" class="resource-detail">{{ systemStats.ecpu_cores }} cores</span>
+          </div>
+          
+          <div class="resource-row">
+            <span class="resource-label">{{ t('admin.resource.memory') }}</span>
+            <div class="resource-bar-container">
+              <div class="resource-bar" :class="getBarClass(systemStats.memory_used_percent)" :style="{ width: systemStats.memory_used_percent + '%' }"></div>
+            </div>
+            <span class="resource-value">{{ systemStats.memory_used_percent.toFixed(1) }}%</span>
+            <span class="resource-detail">{{ formatMemory(systemStats.memory_available_mb) }} / {{ formatMemory(systemStats.memory_total_mb) }}</span>
+            <span v-if="systemStats.ram_power" class="resource-detail power">{{ systemStats.ram_power.toFixed(1) }}W</span>
+          </div>
+          
+          <div v-if="systemStats.swap_total_mb > 0" class="resource-row">
+            <span class="resource-label">{{ t('admin.resource.swap') }}</span>
+            <div class="resource-bar-container resource-bar-container--scaled" :style="{ '--swap-scale': swapScale() }">
+              <div class="resource-bar" :class="getBarClass(systemStats.swap_used_percent)" :style="{ width: systemStats.swap_used_percent + '%' }"></div>
+            </div>
+            <span class="resource-value">{{ systemStats.swap_used_percent.toFixed(1) }}%</span>
+            <span class="resource-detail">{{ formatMemory(systemStats.swap_available_mb) }} / {{ formatMemory(systemStats.swap_total_mb) }}</span>
+            <span class="resource-detail swap-scale-hint">({{ swapScaleHint() }})</span>
+          </div>
+          
+          <div class="resource-row">
+            <span class="resource-label">{{ t('admin.resource.gpu') }}</span>
+            <div class="resource-bar-container">
+              <div class="resource-bar" :class="getBarClass(systemStats.gpu_utilization || 0)" :style="{ width: (systemStats.gpu_utilization || 0) + '%' }"></div>
+            </div>
+            <span class="resource-value">{{ (systemStats.gpu_utilization || 0).toFixed(1) }}%</span>
+            <span v-if="systemStats.gpu_power" class="resource-detail power">{{ systemStats.gpu_power.toFixed(1) }}W</span>
+            <span v-if="systemStats.gpu_temp" class="resource-detail">{{ systemStats.gpu_temp.toFixed(1) }}°C</span>
+            <span v-if="!systemStats.gpu_power && systemStats.gpu_memory_used_pct" class="resource-detail">VRAM {{ (systemStats.gpu_memory_used_pct || 0).toFixed(1) }}%</span>
+          </div>
+          <div v-if="systemStats.gpu_freq_mhz" class="resource-row sub">
+            <span class="resource-label">{{ t('admin.resource.gpuFreq') }}</span>
+            <span class="resource-value">{{ systemStats.gpu_freq_mhz }} MHz</span>
+            <span v-if="systemStats.gpu_cores" class="resource-detail">{{ systemStats.gpu_cores }} cores</span>
+          </div>
+          
+          <div class="resource-row">
+            <span class="resource-label">ANE 🧠</span>
+            <div class="resource-bar-container">
+              <div class="resource-bar" :class="getBarClass(systemStats.ane_utilization || 0)" :style="{ width: (systemStats.ane_utilization || 0) + '%' }"></div>
+            </div>
+            <span class="resource-value">{{ (systemStats.ane_utilization || 0).toFixed(1) }}%</span>
+            <span v-if="systemStats.ane_power" class="resource-detail power">{{ systemStats.ane_power.toFixed(2) }}W</span>
+            <span v-if="!systemStats.ane_available && !systemStats.ane_power" class="resource-detail">N/A</span>
+          </div>
+          
+          <div v-if="systemStats.sys_power" class="resource-row total">
+            <span class="resource-label">{{ t('admin.resource.systemPower') }}</span>
+            <span class="resource-value power-large">{{ systemStats.sys_power.toFixed(1) }}W</span>
+          </div>
+        </div>
+        <div class="refresh-setting">
+          <label>Refresh:</label>
+          <select v-model="refreshIntervalSec">
+            <option :value="2">2s</option>
+            <option :value="5">5s</option>
+            <option :value="10">10s</option>
+            <option :value="30">30s</option>
+          </select>
+        </div>
+        
+        <div class="validation-section">
+          <div class="validation-header">
+            <h3>{{ t('admin.section.validation') }}</h3>
+            <button class="validation-btn" @click="runValidation" :disabled="validationLoading">
+              {{ validationLoading ? 'Running...' : '▶ Run Validation' }}
+            </button>
+          </div>
+          
+          <div v-if="validationResult" class="validation-result">
+            <div class="validation-summary">
+              <span class="validation-summary-total">{{ validationResult.overall_summary.total }} metrics</span>
+              <span class="validation-summary-passed">{{ validationResult.overall_summary.passed }} passed</span>
+              <span class="validation-summary-failed">{{ validationResult.overall_summary.failed }} failed</span>
+              <span class="validation-summary-unverified">{{ validationResult.overall_summary.unverified }} unverified</span>
+            </div>
+            
+            <div v-if="validationResult.layers.layer1" class="validation-layer">
+              <div class="validation-layer-title">Layer 1: Activity Monitor</div>
+              <div v-for="(metric, key) in validationResult.layers.layer1.metrics" :key="key" class="validation-metric">
+                <span class="validation-metric-name">{{ formatMetricName(String(key)) }}</span>
+                <span :class="['validation-metric-status', metric.status.toLowerCase()]">{{ metric.status }}</span>
+                <span class="validation-metric-value">{{ metric.macmon_value.toFixed(2) }}</span>
+              </div>
+            </div>
+            
+            <div v-if="validationResult.layers.layer2" class="validation-layer">
+              <div class="validation-layer-title">Layer 2: System API</div>
+              <div v-for="(metric, key) in validationResult.layers.layer2.metrics" :key="key" class="validation-metric">
+                <span class="validation-metric-name">{{ formatMetricName(String(key)) }}</span>
+                <span :class="['validation-metric-status', metric.status.toLowerCase()]">{{ metric.status }}</span>
+                <span class="validation-metric-value">{{ metric.macmon_value.toFixed(2) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        
         <div class="stats-grid">
-          <div class="stat-card"><div class="stat-label">CPU</div><div class="stat-value">{{ stats.cpu }}%</div></div>
-          <div class="stat-card"><div class="stat-label">Memory</div><div class="stat-value">{{ stats.memory }}%</div></div>
-          <div class="stat-card"><div class="stat-label">Disk</div><div class="stat-value">{{ stats.disk }}%</div></div>
           <div class="stat-card"><div class="stat-label">Users</div><div class="stat-value">{{ users.length }}</div></div>
           <div class="stat-card"><div class="stat-label">Shares</div><div class="stat-value">{{ shares.length }}</div></div>
         </div>
@@ -23,7 +142,7 @@
 
       <div v-if="activeTab === 'users'" class="users-panel">
         <table class="admin-table">
-          <thead><tr><th>Username</th><th>Home Dir</th><th>Status</th></tr></thead>
+          <thead><tr><th>{{ t('admin.table.username') }}</th><th>{{ t('admin.table.homeDir') }}</th><th>{{ t('admin.table.status') }}</th></tr></thead>
           <tbody>
             <tr v-for="u in users" :key="u.username">
               <td>{{ u.username }}</td><td>{{ u.homeDir }}</td><td>{{ u.status === 1 ? 'Active' : 'Disabled' }}</td>
@@ -34,7 +153,7 @@
 
       <div v-if="activeTab === 'shares'" class="shares-panel">
         <table class="admin-table">
-          <thead><tr><th>Name</th><th>Port</th><th>Status</th></tr></thead>
+          <thead><tr><th>{{ t('admin.table.name') }}</th><th>{{ t('admin.table.port') }}</th><th>{{ t('admin.table.status') }}</th></tr></thead>
           <tbody>
             <tr v-for="s in shares" :key="s.name">
               <td>{{ s.name }}</td><td>{{ s.port }}</td><td>{{ s.status }}</td>
@@ -43,11 +162,278 @@
         </table>
       </div>
 
+      <div v-if="activeTab === 'config'" class="config-panel">
+        <div class="config-header">
+          <h2>{{ t('admin.section.configuration') }}</h2>
+          <div class="config-actions">
+            <button class="config-btn" @click="loadConfig" :disabled="configLoading">{{ configLoading ? 'Loading...' : '↻ Reload' }}</button>
+            <button class="config-btn config-btn-save" @click="saveConfig" :disabled="configSaving">{{ configSaving ? 'Saving...' : '💾 Save' }}</button>
+          </div>
+        </div>
+
+        <div v-if="configError" class="config-error">{{ configError }}</div>
+        <div v-if="configSaveMsg" :class="['config-msg', configSaveOk ? 'ok' : 'error']">{{ configSaveMsg }}</div>
+
+        <!-- VLM Prompts Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('vlm')">
+            <span class="config-section-arrow">{{ expandedSections.vlm ? '▼' : '▶' }}</span>
+            {{ t('admin.section.vlmPrompts') }} ({{ Object.keys(vlmPrompts).length }})
+          </h3>
+          <div v-if="expandedSections.vlm" class="config-section-content">
+            <div v-for="(prompt, key) in vlmPrompts" :key="key" class="config-prompt-card">
+              <div class="config-prompt-header">
+                <span class="config-prompt-key">{{ key }}</span>
+                <span class="config-prompt-desc">{{ prompt.description }}</span>
+              </div>
+              <div class="config-prompt-fields">
+                <div v-if="prompt.system_prompt !== undefined" class="config-field">
+                  <label>System Prompt</label>
+                  <textarea class="config-textarea" v-model="prompt.system_prompt" rows="3"></textarea>
+                </div>
+                <div v-if="prompt.prompt !== undefined" class="config-field">
+                  <label>Prompt</label>
+                  <textarea class="config-textarea" v-model="prompt.prompt" rows="3"></textarea>
+                </div>
+                <div v-if="prompt.user_prompt !== undefined" class="config-field">
+                  <label>User Prompt</label>
+                  <input class="config-input" v-model="prompt.user_prompt" />
+                </div>
+                <div class="config-field config-field-inline">
+                  <label>Max Tokens</label>
+                  <input class="config-input-small" type="number" min="1" :value="prompt.max_tokens" @input="prompt.max_tokens = Math.max(1, parseInt(($event.target as HTMLInputElement).value) || 1)" />
+</div>
+        </div>
+
+        <!-- Language Pack Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('lang')">
+            <span class="config-section-arrow">{{ expandedSections.lang ? '▼' : '▶' }}</span>
+            {{ t('admin.section.languagePacks') }}
+          </h3>
+          <div v-if="expandedSections.lang" class="config-section-content">
+            <div class="config-field">
+              <label>{{ t('admin.config.availableLanguages') }}</label>
+              <div class="lang-list">
+                <div v-for="(lang, code) in availableLanguages" :key="code" class="lang-item">
+                  <span class="lang-code">{{ code }}</span>
+                  <span class="lang-name">{{ lang }}</span>
+                  <button class="lang-export-btn" @click="exportLanguagePack(code as string)" title="Export">
+                    📥 Export
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div class="config-field">
+              <label>{{ t('admin.config.importLanguagePack') }}</label>
+              <div class="lang-import">
+                <input type="file" accept=".json" @change="importLanguagePack" ref="langFileInput" style="display: none" />
+                <button class="lang-import-btn" @click="triggerImport">
+                  📤 Import JSON
+                </button>
+                <span class="lang-import-hint">Upload a language pack JSON file (en.json, zh-TW.json, ja.json)</span>
+              </div>
+            </div>
+            <div v-if="langPackMsg" :class="['lang-pack-msg', langPackOk ? 'lang-pack-ok' : 'lang-pack-error']">
+              {{ langPackMsg }}
+            </div>
+          </div>
+        </div>
+      </div>
+          </div>
+        </div>
+
+        <!-- LLM Config Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('llm')">
+            <span class="config-section-arrow">{{ expandedSections.llm ? '▼' : '▶' }}</span>
+            {{ t('admin.section.llmConfig') }}
+          </h3>
+          <div v-if="expandedSections.llm" class="config-section-content">
+            <div v-for="(cfg, key) in llmConfig" :key="key" class="config-llm-card">
+              <div class="config-llm-name">{{ key }}</div>
+              <div class="config-field">
+                <label>{{ t('admin.config.url') }}</label>
+                <input class="config-input" v-model="cfg.url" />
+              </div>
+              <div class="config-field config-field-inline">
+                <label>{{ t('admin.config.model') }}</label>
+                <input class="config-input" v-model="cfg.model" />
+              </div>
+              <div class="config-field config-field-inline">
+                <label>Timeout (s)</label>
+                <input class="config-input-small" type="number" min="0" :value="cfg.timeout" @input="cfg.timeout = Math.max(0, parseFloat(($event.target as HTMLInputElement).value) || 0)" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Processor Config Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('proc')">
+            <span class="config-section-arrow">{{ expandedSections.proc ? '▼' : '▶' }}</span>
+            {{ t('admin.section.processorConfig') }}
+          </h3>
+          <div v-if="expandedSections.proc" class="config-section-content">
+            <div v-for="(cfg, key) in processorConfig" :key="key" class="config-processor-card">
+              <div class="config-processor-header">
+                <span class="config-processor-name">{{ key }}</span>
+                <label class="config-processor-enabled">
+                  <input type="checkbox" v-model="cfg.enabled" />
+                  Enabled
+                </label>
+              </div>
+              
+              <div v-if="cfg.default_tool" class="config-processor-default">
+                Default Tool: <strong>{{ cfg.default_tool }}</strong>
+              </div>
+              
+              <div v-if="cfg.timeout" class="config-processor-timeout">
+                Timeout: <strong>{{ cfg.timeout }}s</strong>
+              </div>
+              
+              <div v-if="cfg.tools && cfg.tools.length" class="config-tools-section">
+                <div class="config-tools-title">{{ t('admin.config.tools') }}</div>
+                <div v-for="(tool, idx) in cfg.tools" :key="idx" class="config-tool-card">
+                  <div class="config-tool-header">
+                    <span class="config-tool-name">{{ tool.name }}</span>
+                    <label class="config-tool-enabled">
+                      <input type="checkbox" v-model="tool.enabled" />
+                      Enabled
+                    </label>
+                    <span class="config-tool-priority">Priority: {{ tool.priority }}</span>
+                  </div>
+                  
+                  <div v-if="tool.parameters && Object.keys(tool.parameters).length" class="config-tool-params">
+                    <div v-for="(val, paramKey) in tool.parameters" :key="paramKey" class="config-tool-param">
+                      <label>{{ paramKey }}</label>
+<input 
+                         class="config-input-small" 
+                         :type="typeof val === 'number' ? 'number' : 'text'"
+                         :value="val"
+                         @input="onToolParamChange(tool, String(paramKey), ($event.target as HTMLInputElement).value)"
+                         :min="typeof val === 'number' ? 0 : undefined"
+                       />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div v-if="hasTopLevelParams(cfg)" class="config-processor-params">
+                <div v-for="param in getProcParams(cfg)" :key="param.key" class="config-proc-param">
+                  <label>{{ param.key }}</label>
+<input 
+                     class="config-input-small" 
+                     :value="cfg[param.key]"
+                     @input="onProcParamChange(cfg, param.key, ($event.target as HTMLInputElement).value)"
+                     :type="param.isNumber ? 'number' : 'text'"
+                     :min="param.isNumber ? 0 : undefined"
+                   />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filter Config Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('filter')">
+            <span class="config-section-arrow">{{ expandedSections.filter ? '▼' : '▶' }}</span>
+            {{ t('admin.section.filterConfig') }}
+          </h3>
+          <div v-if="expandedSections.filter" class="config-section-content">
+            <table class="config-proc-table">
+              <thead><tr><th>{{ t('admin.table.filter') }}</th><th>{{ t('admin.table.parameters') }}</th></tr></thead>
+              <tbody>
+                <tr v-for="(cfg, key) in filterConfig" :key="key">
+                  <td class="config-proc-name">{{ key }}</td>
+                  <td>
+                    <div v-for="param in getProcParams(cfg)" :key="param.key" class="config-proc-param">
+                      <label>{{ param.key }}</label>
+<input 
+                         class="config-input-small" 
+                         :value="cfg[param.key]"
+                         @input="onProcParamChange(cfg, param.key, ($event.target as HTMLInputElement).value)"
+                         :type="param.isNumber ? 'number' : 'text'"
+                         :min="param.isNumber ? 0 : undefined"
+                       />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Search Config Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('search')">
+            <span class="config-section-arrow">{{ expandedSections.search ? '▼' : '▶' }}</span>
+            {{ t('admin.section.searchConfig') }}
+          </h3>
+          <div v-if="expandedSections.search" class="config-section-content">
+            <div class="config-field config-field-inline">
+              <label>{{ t('admin.vlm.minScore') }}</label>
+              <input 
+                class="config-input" 
+                type="number" 
+                step="0.05"
+                min="0.0"
+                max="1.0"
+                v-model.number="searchConfig.vlm_min_score"
+              />
+              <span class="config-hint">{{ t('admin.vlm.hint.minScore') }}</span>
+            </div>
+            <div class="config-field config-field-inline">
+              <label>{{ t('admin.vlm.maxResults') }}</label>
+              <input 
+                class="config-input" 
+                type="number" 
+                step="1"
+                min="1"
+                max="100"
+                v-model.number="searchConfig.vlm_max_results"
+              />
+              <span class="config-hint">{{ t('admin.vlm.hint.maxResults') }}</span>
+            </div>
+            <div class="config-field config-field-inline">
+              <label>{{ t('admin.vlm.outputLanguage') }}</label>
+              <select class="config-input" v-model="searchConfig.vlm_output_language">
+                <option value="en">English (Default)</option>
+                <option value="zh-TW">繁體中文</option>
+                <option value="ja">日本語</option>
+              </select>
+              <span class="config-hint">{{ t('admin.vlm.hint.outputLanguage') }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- System Config Section -->
+        <div class="config-section">
+          <h3 class="config-section-title" @click="toggleSection('sys')">
+            <span class="config-section-arrow">{{ expandedSections.sys ? '▼' : '▶' }}</span>
+            {{ t('admin.section.systemConfig') }}
+          </h3>
+          <div v-if="expandedSections.sys" class="config-section-content">
+            <div v-for="(val, key) in systemConfig" :key="key" class="config-field config-field-inline">
+              <label>{{ key }}</label>
+<input 
+                 class="config-input" 
+                 :type="typeof val === 'number' ? 'number' : 'text'" 
+                 :min="typeof val === 'number' ? 0 : undefined"
+                 :value="val"
+                 @input="systemConfig[key] = typeof val === 'number' ? Math.max(0, parseFloat(($event.target as HTMLInputElement).value) || 0) : ($event.target as HTMLInputElement).value"
+               />
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div v-if="activeTab === 'settings'" class="settings-panel">
         <div v-if="settingsError" class="settings-error">{{ settingsError }}</div>
 
         <div class="settings-group">
-          <h3>Upload Path</h3>
+          <h3>{{ t('admin.section.uploadPath') }}</h3>
           <p class="settings-desc">Base directory where uploaded files are stored (appended with /&lt;username&gt;).</p>
           <div class="settings-row">
             <input class="settings-input" v-model="uploadPath" placeholder="/Users/accusys/momentry/var/sftpgo/data" />
@@ -57,7 +443,7 @@
         </div>
 
         <div class="settings-group">
-          <h3>Service URLs</h3>
+          <h3>{{ t('admin.section.serviceUrls') }}</h3>
           <p class="settings-desc">Configure backend service endpoints.</p>
           
           <div class="service-card">
@@ -123,22 +509,44 @@
             </div>
           </div>
 
-          <div class="service-card">
-            <div class="service-header">
-              <span class="service-name">Proxy</span>
-              <span :class="['service-status', proxyStatus]">{{ proxyStatus }}</span>
+            <div class="service-card">
+              <div class="service-header">
+                <span class="service-name">Proxy</span>
+                <span :class="['service-status', proxyStatus]">{{ proxyStatus }}</span>
+              </div>
+              <div class="service-row">
+                <input class="settings-input" v-model="proxyUrl" placeholder="http://localhost:8888" />
+                <button class="settings-test-btn" @click="testProxy" :disabled="testingProxy">{{ testingProxy ? 'Testing...' : 'Test' }}</button>
+              </div>
+              <div class="service-actions">
+                <button class="service-stop-btn" @click="stopService('proxy')" :disabled="proxyActionLoading">Stop</button>
+                <button class="service-start-btn" @click="startService('proxy')" :disabled="proxyActionLoading">Start</button>
+                <span v-if="proxyActionLoading" class="action-loading">Processing...</span>
+                <span v-if="proxyActionResult" :class="['action-result', proxyActionResultOk ? 'ok' : 'error']">{{ proxyActionResult }}</span>
+              </div>
             </div>
-            <div class="service-row">
-              <input class="settings-input" v-model="proxyUrl" placeholder="http://localhost:8888" />
-              <button class="settings-test-btn" @click="testProxy" :disabled="testingProxy">{{ testingProxy ? 'Testing...' : 'Test' }}</button>
+
+            <div class="service-card">
+              <div class="service-header">
+                <span class="service-name">Worker</span>
+                <span :class="['service-status', workerStatus]">{{ workerStatus }}</span>
+              </div>
+              <div class="service-row">
+                <input class="settings-input" v-model="workerUrl" placeholder="http://localhost:11438" />
+                <button class="settings-test-btn" @click="testWorker" :disabled="testingWorker">{{ testingWorker ? 'Testing...' : 'Test' }}</button>
+              </div>
+              <div class="service-actions">
+                <button class="service-stop-btn" @click="stopService('worker')" :disabled="workerActionLoading">Stop</button>
+                <button class="service-start-btn" @click="startService('worker')" :disabled="workerActionLoading">Start</button>
+                <span v-if="workerActionLoading" class="action-loading">Processing...</span>
+                <span v-if="workerActionResult" :class="['action-result', workerActionResultOk ? 'ok' : 'error']">{{ workerActionResult }}</span>
+              </div>
+              <div v-if="workerInfo" class="service-info">
+                <span>Version: {{ workerInfo.version || 'N/A' }}</span>
+                <span>Uptime: {{ formatUptime(workerInfo.uptime) }}</span>
+              </div>
             </div>
-            <div class="service-actions">
-              <button class="service-stop-btn" @click="stopService('proxy')" :disabled="proxyActionLoading">Stop</button>
-              <button class="service-start-btn" @click="startService('proxy')" :disabled="proxyActionLoading">Start</button>
-              <span v-if="proxyActionLoading" class="action-loading">Processing...</span>
-              <span v-if="proxyActionResult" :class="['action-result', proxyActionResultOk ? 'ok' : 'error']">{{ proxyActionResult }}</span>
-            </div>
-          </div>
+
 
           <button class="settings-save-btn" @click="saveServiceUrls" style="margin-top: 12px;">Save URLs</button>
           <div v-if="urlSaveMsg" :class="['settings-msg', urlSaveError ? 'error' : 'ok']">{{ urlSaveMsg }}</div>
@@ -149,14 +557,123 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { apiCall } from '../api'
+import { loadSystemStats, systemStatsCache, SystemStats } from '../store'
 
 const activeTab = ref('dashboard')
 const stats = ref({ cpu: 0, memory: 0, disk: 0 })
 const users = ref<any[]>([])
 const shares = ref<any[]>([])
 
+const systemStats = ref<SystemStats>({
+  cpu_used_percent: 0,
+  memory_used_percent: 0,
+  memory_available_mb: 0,
+  memory_total_mb: 0,
+  swap_used_percent: 0,
+  swap_available_mb: 0,
+  swap_total_mb: 0,
+  gpu_available: false,
+  gpu_utilization: null,
+  gpu_memory_used_pct: null,
+  ane_available: false,
+  ane_utilization: null,
+  source: 'loading',
+  chip_name: undefined,
+  cpu_power: undefined,
+  gpu_power: undefined,
+  ane_power: undefined,
+  sys_power: undefined,
+  ram_power: undefined,
+  cpu_temp: undefined,
+  gpu_temp: undefined,
+  ecpu_freq_mhz: undefined,
+  pcpu_freq_mhz: undefined,
+  gpu_freq_mhz: undefined,
+  ecpu_cores: undefined,
+  pcpu_cores: undefined,
+  gpu_cores: undefined,
+})
+const refreshIntervalSec = ref(5)
+let refreshTimer: ReturnType<typeof setInterval> | null = null
+
+const validationLoading = ref(false)
+const validationResult = ref<any>(null)
+
+async function runValidation() {
+  validationLoading.value = true
+  validationResult.value = null
+  try {
+    const result = await apiCall('validate_system_stats', { layers: '1,2' })
+    validationResult.value = result
+  } catch (e: any) {
+    console.error('Validation error:', e)
+  } finally {
+    validationLoading.value = false
+  }
+}
+
+function formatMetricName(key: string): string {
+  const names: Record<string, string> = {
+    'cpu_usage': 'CPU Usage',
+    'memory_used_percent': 'Memory Used',
+    'memory_total_mb': 'Memory Total',
+    'swap_used_percent': 'Swap Used',
+    'cpu_temp': 'CPU Temp',
+  }
+  return names[key] || key.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+}
+
+function getBarClass(value: number): string {
+  if (value >= 80) return 'bar-red'
+  if (value >= 60) return 'bar-yellow'
+  return 'bar-green'
+}
+
+function formatMemory(mb: number): string {
+  if (mb >= 1024) return (mb / 1024).toFixed(1) + ' GB'
+  return mb + ' MB'
+}
+
+function swapScale(): number {
+  const total = systemStats.value.memory_total_mb
+  const swap = systemStats.value.swap_total_mb
+  if (total <= 0) return 1
+  return Math.min(1, swap / total)
+}
+
+function swapScaleHint(): string {
+  const scale = swapScale() * 100
+  if (scale < 1) return ''
+  return `${scale.toFixed(0)}% of RAM`
+}
+
+async function refreshSystemStats() {
+  const result = await loadSystemStats()
+  if (result) {
+    systemStats.value = result
+  }
+}
+
+function startAutoRefresh() {
+  if (refreshTimer) clearInterval(refreshTimer)
+  refreshTimer = setInterval(refreshSystemStats, refreshIntervalSec.value * 1000)
+}
+
+watch(refreshIntervalSec, () => {
+  startAutoRefresh()
+})
+
+onMounted(async () => {
+  await refreshSystemStats()
+  startAutoRefresh()
+})
+
+onUnmounted(() => {
+  if (refreshTimer) clearInterval(refreshTimer)
+})
+
 // Settings
 const uploadPath = ref('')
 const saving = ref(false)
@@ -168,17 +685,21 @@ const coreApiUrl = ref('http://localhost:3002')
 const markbaseUrl = ref('http://localhost:11438')
 const mbeUrl = ref('http://localhost:8080')
 const proxyUrl = ref('http://localhost:8888')
+const workerUrl = ref('http://localhost:11438')
 const coreStatus = ref('unknown')
 const mbStatus = ref('unknown')
 const mbeStatus = ref('unknown')
 const proxyStatus = ref('unknown')
+const workerStatus = ref('unknown')
 const coreInfo = ref<any>(null)
 const mbInfo = ref<any>(null)
 const mbeInfo = ref<any>(null)
+const workerInfo = ref<any>(null)
 const testingCore = ref(false)
 const testingMb = ref(false)
 const testingMbe = ref(false)
 const testingProxy = ref(false)
+const testingWorker = ref(false)
 const urlSaveMsg = ref('')
 const urlSaveError = ref(false)
 
@@ -195,6 +716,9 @@ const mbeActionResultOk = ref(false)
 const proxyActionLoading = ref(false)
 const proxyActionResult = ref('')
 const proxyActionResultOk = ref(false)
+const workerActionLoading = ref(false)
+const workerActionResult = ref('')
+const workerActionResultOk = ref(false)
 
 async function stopService(name: string) {
   const s = serviceState(name)
@@ -244,6 +768,7 @@ function serviceState(name: string) {
     case 'core': return { loading: coreActionLoading, result: coreActionResult, ok: coreActionResultOk, status: coreStatus, test: testCoreApi }
     case 'markbase': return { loading: mbActionLoading, result: mbActionResult, ok: mbActionResultOk, status: mbStatus, test: testMarkbase }
     case 'proxy': return { loading: proxyActionLoading, result: proxyActionResult, ok: proxyActionResultOk, status: proxyStatus, test: testProxy }
+    case 'worker': return { loading: workerActionLoading, result: workerActionResult, ok: workerActionResultOk, status: workerStatus, test: testWorker }
     default: return { loading: mbeActionLoading, result: mbeActionResult, ok: mbeActionResultOk, status: mbeStatus, test: testMbe }
   }
 }
@@ -260,17 +785,20 @@ function loadServiceUrls() {
       markbaseUrl.value = urls.markbase || (isLocalhost ? 'http://localhost:11438' : currentOrigin)
       mbeUrl.value = urls.mbe || (isLocalhost ? 'http://localhost:8080' : currentOrigin)
       proxyUrl.value = urls.proxy || (isLocalhost ? 'http://localhost:8888' : currentOrigin)
+      workerUrl.value = urls.worker || (isLocalhost ? 'http://localhost:11438' : currentOrigin)
     } catch (e) {
       coreApiUrl.value = isLocalhost ? 'http://localhost:3002' : currentOrigin
       markbaseUrl.value = isLocalhost ? 'http://localhost:11438' : currentOrigin
       mbeUrl.value = isLocalhost ? 'http://localhost:8080' : currentOrigin
       proxyUrl.value = isLocalhost ? 'http://localhost:8888' : currentOrigin
+      workerUrl.value = isLocalhost ? 'http://localhost:11438' : currentOrigin
     }
   } else {
     coreApiUrl.value = isLocalhost ? 'http://localhost:3002' : currentOrigin
     markbaseUrl.value = isLocalhost ? 'http://localhost:11438' : currentOrigin
     mbeUrl.value = isLocalhost ? 'http://localhost:8080' : currentOrigin
     proxyUrl.value = isLocalhost ? 'http://localhost:8888' : currentOrigin
+    workerUrl.value = isLocalhost ? 'http://localhost:11438' : currentOrigin
   }
 }
 
@@ -283,10 +811,12 @@ function saveServiceUrls() {
       markbase: markbaseUrl.value,
       mbe: mbeUrl.value,
       proxy: proxyUrl.value,
+      worker: workerUrl.value,
     }))
     ;(window as any).__CORE_API_URL__ = coreApiUrl.value
     ;(window as any).__MARKBASE_URL__ = markbaseUrl.value
     ;(window as any).__MBE_URL__ = mbeUrl.value
+    ;(window as any).__WORKER_URL__ = workerUrl.value
     urlSaveMsg.value = 'Service URLs saved'
   } catch (e: any) {
     urlSaveError.value = true
@@ -367,6 +897,23 @@ async function testProxy() {
   }
 }
 
+async function testWorker() {
+  testingWorker.value = true
+  workerInfo.value = null
+  try {
+    const resp = await fetch(`${workerUrl.value}/api/v2/worker/status`, { signal: AbortSignal.timeout(5000) })
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`)
+    const data = await resp.json()
+    workerStatus.value = data.status === 'running' ? 'online' : 'offline'
+    workerInfo.value = { version: data.version, uptime: data.uptime }
+  } catch (e: any) {
+    workerStatus.value = 'offline'
+    workerInfo.value = null
+  } finally {
+    testingWorker.value = false
+  }
+}
+
 function formatUptime(seconds: number | undefined): string {
   if (!seconds) return 'N/A'
   const d = Math.floor(seconds / 86400)
@@ -423,10 +970,207 @@ async function saveUploadPath() {
   }
 }
 
+// ── Language Pack Management ──
+import { useI18n } from 'vue-i18n'
+import type { MessageSchema } from '@/locales'
+
+const { t, availableLocales, messages, locale } = useI18n()
+const langFileInput = ref<HTMLInputElement | null>(null)
+const langPackMsg = ref('')
+const langPackOk = ref(false)
+
+const availableLanguages = computed(() => {
+  const langs: Record<string, string> = {
+    'en': 'English',
+    'zh-TW': '繁體中文',
+    'ja': '日本語'
+  }
+  return langs
+})
+
+function exportLanguagePack(langCode: string) {
+  try {
+    const langData = messages.value[langCode] as MessageSchema
+    if (!langData) {
+      langPackOk.value = false
+      langPackMsg.value = `Language pack '${langCode}' not found`
+      return
+    }
+    
+    const jsonStr = JSON.stringify(langData, null, 2)
+    const blob = new Blob([jsonStr], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${langCode}.json`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    URL.revokeObjectURL(url)
+    
+    langPackOk.value = true
+    langPackMsg.value = `Language pack '${langCode}' exported successfully`
+    setTimeout(() => { langPackMsg.value = '' }, 3000)
+  } catch (e: any) {
+    langPackOk.value = false
+    langPackMsg.value = 'Export failed: ' + (e.message || e)
+  }
+}
+
+function triggerImport() {
+  langFileInput.value?.click()
+}
+
+async function importLanguagePack(event: Event) {
+  const file = (event.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  
+  try {
+    const text = await file.text()
+    const data = JSON.parse(text)
+    
+    // Validate structure
+    if (typeof data !== 'object' || data === null) {
+      throw new Error('Invalid JSON structure')
+    }
+    
+    // Extract language code from filename
+    const match = file.name.match(/^([a-z]{2}(?:-[A-Z]{2})?)\.json$/)
+    if (!match) {
+      throw new Error('Invalid filename format. Expected: en.json, zh-TW.json, ja.json')
+    }
+    
+    const langCode = match[1]
+    
+    // Validate that the language is supported
+    const supportedLanguages = ['en', 'zh-TW', 'ja']
+    if (!supportedLanguages.includes(langCode)) {
+      throw new Error(`Unsupported language: ${langCode}. Supported: ${supportedLanguages.join(', ')}`)
+    }
+    
+    // Update messages
+    messages.value[langCode] = data
+    
+    langPackOk.value = true
+    langPackMsg.value = `Language pack '${langCode}' imported successfully`
+    setTimeout(() => { langPackMsg.value = '' }, 3000)
+    
+    // Reset file input
+    if (langFileInput.value) {
+      langFileInput.value.value = ''
+    }
+  } catch (e: any) {
+    langPackOk.value = false
+    langPackMsg.value = 'Import failed: ' + (e.message || e)
+  }
+}
+
+// ── Config Tab ──
+const configLoading = ref(false)
+const configSaving = ref(false)
+const configError = ref('')
+const configSaveMsg = ref('')
+const configSaveOk = ref(false)
+const expandedSections = ref({ vlm: true, llm: true, proc: true, filter: true, search: true, sys: false, lang: false })
+
+const vlmPrompts = ref<Record<string, any>>({})
+const llmConfig = ref<Record<string, any>>({})
+const processorConfig = ref<Record<string, any>>({})
+const filterConfig = ref<Record<string, any>>({})
+const systemConfig = ref<Record<string, any>>({})
+const searchConfig = ref<Record<string, any>>({ 
+  vlm_min_score: 0.0, 
+  vlm_max_results: 5,
+  vlm_output_language: 'en'
+})
+
+function toggleSection(section: string) {
+  expandedSections.value[section] = !expandedSections.value[section]
+}
+
+function getProcParams(cfg: Record<string, any>) {
+  return Object.entries(cfg)
+    .filter(([k]) => !['enabled', 'default_tool', 'tools', 'timeout'].includes(k))
+    .map(([key, val]) => ({ key, val, isNumber: typeof val === 'number' }))
+}
+
+function hasTopLevelParams(cfg: Record<string, any>): boolean {
+  return Object.keys(cfg).some(k => !['enabled', 'default_tool', 'tools', 'timeout'].includes(k))
+}
+
+function onToolParamChange(tool: any, key: string, value: any) {
+  if (typeof tool.parameters[key] === 'number') {
+    const num = parseFloat(value)
+    tool.parameters[key] = isNaN(num) ? 0 : Math.max(0, num)
+  } else {
+    tool.parameters[key] = value
+  }
+}
+
+function onProcParamChange(cfg: Record<string, any>, key: string, value: any) {
+  if (typeof cfg[key] === 'number') {
+    const num = parseFloat(value)
+    cfg[key] = isNaN(num) ? 0 : Math.max(0, num)
+  } else {
+    cfg[key] = value
+  }
+}
+
+async function loadConfig() {
+  configLoading.value = true
+  configError.value = ''
+  try {
+    const res = await fetch('/api/v1/admin/config')
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json()
+    vlmPrompts.value = data.vlm_prompts || {}
+    llmConfig.value = data.llm_config || {}
+    processorConfig.value = data.processor_config || {}
+    filterConfig.value = data.filter_config || {}
+    systemConfig.value = data.system_config || {}
+    searchConfig.value = data.search || { vlm_min_score: 0.0, vlm_max_results: 5, vlm_output_language: 'en' }
+  } catch (e: any) {
+    configError.value = 'Failed to load config: ' + (e.message || e)
+  } finally {
+    configLoading.value = false
+  }
+}
+
+async function saveConfig() {
+  configSaving.value = true
+  configSaveMsg.value = ''
+  try {
+    const payload = {
+      version: '1.0.0',
+      vlm_prompts: vlmPrompts.value,
+      llm_config: llmConfig.value,
+      processor_config: processorConfig.value,
+      filter_config: filterConfig.value,
+      system_config: systemConfig.value,
+      search: searchConfig.value,
+    }
+    const res = await fetch('/api/v1/admin/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json()
+    configSaveOk.value = true
+    configSaveMsg.value = 'Config saved successfully'
+  } catch (e: any) {
+    configSaveOk.value = false
+    configSaveMsg.value = 'Save failed: ' + (e.message || e)
+  } finally {
+    configSaving.value = false
+  }
+}
+
 onMounted(async () => { 
   loadServiceUrls()
   await Promise.all([loadDashboard(), loadUsers(), loadShares(), loadSettings()])
-  await Promise.all([testCoreApi(), testMarkbase(), testMbe(), testProxy()])
+  await Promise.all([testCoreApi(), testMarkbase(), testMbe(), testProxy(), testWorker()])
 })
 </script>
 
@@ -441,6 +1185,64 @@ onMounted(async () => {
 .stat-card { background: var(--hover-background); padding: 15px; border-radius: 8px; text-align: center; }
 .stat-label { font-size: 12px; color: var(--text-secondary); }
 .stat-value { font-size: 24px; font-weight: bold; color: var(--text-primary); }
+
+.system-resources { margin-bottom: 24px; background: var(--hover-background); padding: 16px; border-radius: 8px; }
+.system-resources h3 { margin: 0 0 16px; font-size: 16px; color: var(--text-primary); }
+.resource-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.resource-row:last-child { margin-bottom: 0; }
+.resource-label { min-width: 80px; font-weight: 600; font-size: 14px; }
+.resource-bar-container { flex: 1; height: 20px; background: var(--border); border-radius: 4px; overflow: hidden; }
+.resource-bar-container--scaled { 
+  width: calc(var(--swap-scale, 1) * 100%); 
+  flex: none; 
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--text-secondary));
+}
+.swap-scale-hint { font-size: 11px; color: var(--text-secondary); opacity: 0.7; min-width: auto; }
+.resource-bar { height: 100%; transition: width 0.3s ease; }
+.resource-bar.bar-green { background: linear-gradient(90deg, #4caf50, #66bb6a); }
+.resource-bar.bar-yellow { background: linear-gradient(90deg, #ff9800, #ffb74d); }
+.resource-bar.bar-red { background: linear-gradient(90deg, #f44336, #ef5350); }
+.resource-value { min-width: 60px; text-align: right; font-weight: 600; font-size: 14px; }
+.resource-detail { font-size: 12px; color: var(--text-secondary); min-width: 80px; }
+.resource-detail.power { color: #ff9800; font-weight: 600; min-width: 60px; }
+
+.source-badge { font-size: 11px; background: var(--primary-color); color: white; padding: 2px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }
+.chip-info { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
+
+.resource-row.sub { padding-left: 20px; margin-bottom: 6px; }
+.resource-row.sub .resource-label { min-width: 60px; font-weight: 500; }
+.resource-row.sub .resource-value { min-width: 80px; }
+.resource-row.total { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
+.resource-value.power-large { font-size: 18px; font-weight: 700; color: var(--primary-color); min-width: 80px; }
+
+.refresh-setting { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 12px; background: var(--hover-background); border-radius: 6px; }
+.refresh-setting label { font-size: 13px; color: var(--text-secondary); }
+.refresh-setting select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--card-background); color: var(--text-primary); font-size: 13px; }
+
+.validation-section { background: var(--hover-background); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
+.validation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.validation-header h3 { margin: 0; font-size: 16px; color: var(--text-primary); }
+.validation-btn { padding: 6px 16px; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
+.validation-btn:disabled { opacity: 0.6; cursor: default; }
+.validation-result { margin-top: 12px; }
+.validation-summary { display: flex; gap: 16px; font-size: 12px; margin-bottom: 12px; padding: 8px; background: var(--card-background); border-radius: 4px; }
+.validation-summary-total { color: var(--text-secondary); }
+.validation-summary-passed { color: var(--success-color); font-weight: 600; }
+.validation-summary-failed { color: var(--danger-color); font-weight: 600; }
+.validation-summary-unverified { color: var(--text-secondary); }
+.validation-layer { margin-bottom: 12px; }
+.validation-layer-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
+.validation-metric { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
+.validation-metric:last-child { border-bottom: none; }
+.validation-metric-name { flex: 1; font-size: 13px; color: var(--text-secondary); }
+.validation-metric-status { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
+.validation-metric-status.pass { background: rgba(76, 175, 80, 0.2); color: #4caf50; }
+.validation-metric-status.warn { background: rgba(255, 152, 0, 0.2); color: #ff9800; }
+.validation-metric-status.fail { background: rgba(244, 67, 54, 0.2); color: #f44336; }
+.validation-metric-status.unverified { background: var(--hover-background); color: var(--text-secondary); }
+.validation-metric-value { font-size: 13px; font-weight: 600; color: var(--text-primary); min-width: 60px; text-align: right; }
+
 .admin-table { width: 100%; border-collapse: collapse; }
 .admin-table th, .admin-table td { padding: 10px; border: 1px solid var(--border-color); text-align: left; color: var(--text-primary); }
 .settings-panel { max-width: 600px; }
@@ -475,4 +1277,112 @@ onMounted(async () => {
 .action-result { font-size: 12px; }
 .action-result.ok { color: var(--success-color); }
 .action-result.error { color: var(--danger-color); }
+
+@media (max-width: 767px) {
+  .settings-panel { max-width: 100%; padding: 12px; }
+  table { display: block; overflow-x: auto; white-space: nowrap; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
+}
+
+/* Config Panel */
+.config-panel { position: relative; }
+.config-header { 
+  display: flex; 
+  justify-content: space-between; 
+  align-items: center; 
+  padding: 12px 0;
+  margin-bottom: 16px;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--card-background);
+  border-bottom: 1px solid var(--border);
+}
+.config-header h2 { margin: 0; font-size: 18px; }
+.config-actions { display: flex; gap: 8px; }
+.config-btn { padding: 8px 16px; border: 1px solid var(--border); background: var(--hover-background); color: var(--text-primary); cursor: pointer; border-radius: 4px; font-size: 13px; font-weight: 500; }
+.config-btn:hover { background: var(--border-light); }
+.config-btn-save { background: var(--primary-color); color: white; border-color: var(--primary-color); }
+.config-btn-save:hover { background: var(--primary-color); opacity: 0.9; }
+.config-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.config-error { background: #fee; color: #c00; padding: 10px; border-radius: 6px; margin-bottom: 12px; }
+.config-msg { padding: 10px; border-radius: 6px; margin-bottom: 12px; }
+.config-msg.ok { background: #efe; color: #0a0; }
+.config-msg.error { background: #fee; color: #c00; }
+
+.config-section { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+.config-section-title { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 0; cursor: pointer; background: var(--hover-background); font-size: 14px; font-weight: 600; user-select: none; }
+.config-section-title:hover { background: var(--border-light); }
+.config-section-arrow { font-size: 10px; }
+.config-section-content { padding: 14px; }
+
+.config-prompt-card { margin-bottom: 14px; padding: 12px; background: var(--hover-background); border-radius: 6px; }
+.config-prompt-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
+.config-prompt-key { font-weight: 700; font-size: 13px; color: var(--primary-color); font-family: monospace; }
+.config-prompt-desc { font-size: 12px; color: var(--text-secondary); }
+.config-prompt-fields { display: flex; flex-direction: column; gap: 8px; }
+
+.config-llm-card { margin-bottom: 12px; padding: 12px; background: var(--hover-background); border-radius: 6px; }
+.config-llm-name { font-weight: 700; font-size: 13px; color: var(--primary-color); margin-bottom: 6px; text-transform: uppercase; }
+
+.config-field { display: flex; align-items: center; gap: 8px; }
+.config-field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 80px; }
+.config-input { flex: 1; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: var(--card-background); color: var(--text-primary); }
+.config-input-small { width: 80px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: var(--card-background); color: var(--text-primary); }
+.config-textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: var(--card-background); color: var(--text-primary); font-family: inherit; resize: vertical; }
+
+.config-proc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.config-proc-table th { text-align: left; padding: 8px; background: var(--hover-background); font-weight: 600; }
+.config-proc-table td { padding: 8px; border-top: 1px solid var(--border); }
+.config-proc-name { font-weight: 600; color: var(--primary-color); text-transform: uppercase; }
+.config-proc-param { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+.config-proc-param label { font-size: 11px; color: var(--text-secondary); min-width: 60px; }
+
+@media (max-width: 768px) {
+  .config-header { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .config-prompt-header { flex-direction: column; align-items: flex-start; }
+  .config-field { flex-direction: column; align-items: flex-start; }
+  .config-field label { min-width: auto; }
+  .config-input, .config-input-small { width: 100%; }
+}
+
+.lang-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
+.lang-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--hover-background); border-radius: 6px; }
+.lang-code { font-weight: 700; font-size: 14px; color: var(--primary-color); min-width: 60px; font-family: monospace; }
+.lang-name { flex: 1; font-size: 14px; color: var(--text-primary); }
+.lang-export-btn { padding: 4px 12px; background: var(--hover-background); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--text-primary); transition: all 0.2s; }
+.lang-export-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); }
+
+.lang-import { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
+.lang-import-btn { padding: 8px 16px; background: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
+.lang-import-btn:hover { opacity: 0.9; }
+.lang-import-hint { font-size: 12px; color: var(--text-secondary); }
+
+.lang-pack-msg { margin-top: 12px; padding: 8px 12px; border-radius: 4px; font-size: 13px; }
+.lang-pack-ok { background: #4caf50; color: white; }
+.lang-pack-error { background: #f44336; color: white; }
+
+.config-hint { font-size: 11px; color: var(--text-secondary); margin-left: 8px; }
+
+.config-processor-card { margin-bottom: 20px; padding: 16px; background: var(--hover-background); border-radius: 8px; border: 1px solid var(--border); }
+.config-processor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.config-processor-name { font-size: 16px; font-weight: 700; color: var(--primary-color); text-transform: uppercase; }
+.config-processor-enabled { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
+.config-processor-enabled input { cursor: pointer; }
+.config-processor-default, .config-processor-timeout { font-size: 13px; color: var(--text-primary); margin-bottom: 8px; }
+.config-processor-default strong, .config-processor-timeout strong { color: var(--primary-color); }
+
+.config-tools-section { margin-top: 12px; }
+.config-tools-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
+.config-tool-card { padding: 12px; margin-bottom: 8px; background: var(--card-background); border-radius: 6px; border: 1px solid var(--border); }
+.config-tool-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
+.config-tool-name { font-size: 13px; font-weight: 600; color: var(--primary-color); min-width: 80px; }
+.config-tool-enabled { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
+.config-tool-enabled input { cursor: pointer; }
+.config-tool-priority { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
+.config-tool-params { display: flex; flex-wrap: wrap; gap: 8px; }
+.config-tool-param { display: flex; align-items: center; gap: 6px; }
+.config-tool-param label { font-size: 11px; color: var(--text-secondary); min-width: 80px; }
+
+.config-processor-params { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
 </style>
diff --git a/src/views/ClientView.vue b/src/views/ClientView.vue
index 5e5dce3..052ca4a 100644
--- a/src/views/ClientView.vue
+++ b/src/views/ClientView.vue
@@ -2,19 +2,19 @@
   <div id="ms-view-client" class="client-layout">
     <div class="client-header">
       <div class="header-top-row">
-        <h1>File Manager</h1>
+        <h1>{{ t('client.title') }}</h1>
         <div class="header-buttons">
           <button @click="goUp" :disabled="currentPath === '/'">Up</button>
-          <button @click="showCreateFolderDialog">New Folder</button>
-          <button @click="showUploadDialog">Upload</button>
-          <button @click="confirmDelete" :disabled="!selectedFile">Delete</button>
-          <button @click="showMoveDialog" :disabled="!selectedFile">Move</button>
-          <button @click="refreshFiles">Refresh</button>
+          <button @click="showCreateFolderDialog">{{ t('client.button.newFolder') }}</button>
+          <button @click="showUploadDialog">{{ t('client.button.upload') }}</button>
+          <button @click="confirmDelete" :disabled="!selectedFile">{{ t('client.button.delete') }}</button>
+          <button @click="showMoveDialog" :disabled="!selectedFile">{{ t('client.button.move') }}</button>
+          <button @click="refreshFiles">{{ t('client.button.refresh') }}</button>
         </div>
       </div>
       <div class="header-path-row">Path: {{ currentPath }}</div>
       <div class="client-search">
-        <input v-model="searchQuery" type="text" placeholder="Search files..." @input="onSearch" />
+        <input v-model="searchQuery" type="text" :placeholder="t('client.search.placeholder')" @input="onSearch" />
       </div>
     </div>
 
@@ -24,10 +24,10 @@
       <table v-else class="file-table">
         <thead>
           <tr>
-            <th @click="sortBy('name')" class="sortable">Name <span v-if="sortField==='name'">{{ sortAsc ? '▲' : '▼' }}</span></th>
-            <th @click="sortBy('size')" class="sortable">Size <span v-if="sortField==='size'">{{ sortAsc ? '▲' : '▼' }}</span></th>
-            <th>Type</th>
-            <th>Modified</th>
+            <th @click="sortBy('name')" class="sortable">{{ t('client.table.name') }} <span v-if="sortField==='name'">{{ sortAsc ? '▲' : '▼' }}</span></th>
+            <th @click="sortBy('size')" class="sortable">{{ t('client.table.size') }} <span v-if="sortField==='size'">{{ sortAsc ? '▲' : '▼' }}</span></th>
+            <th>{{ t('client.table.type') }}</th>
+            <th>{{ t('client.table.modified') }}</th>
           </tr>
         </thead>
         <tbody>
@@ -78,11 +78,11 @@
     <!-- Create Folder Dialog -->
     <div v-if="showCreateFolder" class="dialog-overlay" @click="hideCreateFolderDialog">
       <div class="dialog" @click.stop>
-        <h3>Create New Folder</h3>
-        <input v-model="newFolderName" type="text" placeholder="Folder name" @keyup.enter="createFolder" />
+        <h3>{{ t('client.dialog.createFolder') }}</h3>
+        <input v-model="newFolderName" type="text" :placeholder="t('client.dialog.folderName')" @keyup.enter="createFolder" />
         <div class="dialog-buttons">
-          <button @click="createFolder">Create</button>
-          <button @click="hideCreateFolderDialog">Cancel</button>
+          <button @click="createFolder">{{ t('client.button.create') }}</button>
+          <button @click="hideCreateFolderDialog">{{ t('client.button.cancel') }}</button>
         </div>
       </div>
     </div>
@@ -90,14 +90,14 @@
     <!-- Delete Confirm Dialog -->
     <div v-if="showDeleteConfirm" class="dialog-overlay" @click="cancelDelete">
       <div class="dialog" @click.stop>
-        <h3>Delete "{{ deleteTarget }}"</h3>
+        <h3>{{ t('client.dialog.deleteTitle', { name: deleteTarget }) }}</h3>
         <p v-if="selectedFile?.isDir && selectedFile.fileCount">
           This folder contains <strong>{{ selectedFile.fileCount }}</strong> file(s). They will be permanently deleted.
         </p>
-        <p v-else>Are you sure you want to delete this item?</p>
+        <p v-else>{{ t('client.dialog.deleteMessage', { type: selectedFile?.isDir ? t('client.type.folder') : t('client.type.file') }) }}</p>
         <div class="dialog-buttons">
-          <button @click="doDelete" class="danger-btn">Delete</button>
-          <button @click="cancelDelete">Cancel</button>
+          <button @click="doDelete" class="danger-btn">{{ t('client.button.delete') }}</button>
+          <button @click="cancelDelete">{{ t('client.button.cancel') }}</button>
         </div>
       </div>
     </div>
@@ -105,11 +105,11 @@
     <!-- Rename Dialog -->
     <div v-if="showRename" class="dialog-overlay" @click="hideRenameDialog">
       <div class="dialog" @click.stop>
-        <h3>Rename "{{ renameOldName }}"</h3>
-        <input v-model="renameNewName" type="text" placeholder="New name" @keyup.enter="doRename" autofocus />
+        <h3>{{ t('client.dialog.renameTitle', { name: renameOldName }) }}</h3>
+        <input v-model="renameNewName" type="text" :placeholder="t('client.dialog.newName')" @keyup.enter="doRename" autofocus />
         <div class="dialog-buttons">
-          <button @click="doRename">Rename</button>
-          <button @click="hideRenameDialog">Cancel</button>
+          <button @click="doRename">{{ t('client.button.rename') }}</button>
+          <button @click="hideRenameDialog">{{ t('client.button.cancel') }}</button>
         </div>
       </div>
     </div>
@@ -117,7 +117,7 @@
     <!-- File Preview Dialog -->
     <div v-if="showPreview" class="dialog-overlay" @click="hidePreview">
       <div class="dialog preview-dialog" @click.stop>
-        <h3>File Preview: {{ selectedFile?.name }}</h3>
+        <h3>{{ t('client.dialog.previewTitle', { name: selectedFile?.name }) }}</h3>
         <div v-if="previewLoading" class="loading">Loading preview...</div>
         <div v-else-if="previewContent" class="preview-content">
           <img v-if="isImage" :src="previewContent" alt="preview" />
@@ -131,8 +131,8 @@
           <pre v-else>{{ previewContent }}</pre>
         </div>
         <div class="dialog-buttons">
-          <button @click="downloadFile">Download</button>
-          <button @click="hidePreview">Close</button>
+          <button @click="downloadFile">{{ t('client.button.download') }}</button>
+          <button @click="hidePreview">{{ t('common.close') }}</button>
         </div>
       </div>
     </div>
@@ -140,7 +140,7 @@
     <!-- Upload Dialog -->
     <div v-if="showUpload" class="dialog-overlay" @click="hideUploadDialog">
       <div class="dialog upload-dialog" @click.stop>
-        <h3>Upload File{{ uploadFiles.length > 1 ? 's' : '' }}</h3>
+        <h3>{{ t('client.dialog.uploadTitle', { s: uploadFiles.length > 1 ? 's' : '' }) }}</h3>
         <input ref="fileInput" type="file" multiple @change="selectUploadFile" />
         <div v-if="uploadFiles.length > 0" class="upload-info">
           <p v-if="!uploading">{{ uploadFiles.length }} file(s) selected</p>
@@ -155,9 +155,9 @@
         </div>
         <div class="dialog-buttons">
           <button @click="uploadFileToServer" :disabled="uploadFiles.length === 0 || uploading">
-            {{ uploading ? 'Uploading...' : 'Upload' }}
+            {{ uploading ? t('client.status.uploading') : t('client.button.upload') }}
           </button>
-          <button @click="hideUploadDialog">Cancel</button>
+          <button @click="hideUploadDialog">{{ t('client.button.cancel') }}</button>
         </div>
       </div>
     </div>
@@ -165,7 +165,7 @@
     <!-- Move Dialog -->
     <div v-if="showMove" class="dialog-overlay" @click="showMove = false">
       <div class="dialog" @click.stop>
-        <h3>{{ selectedFile?.isDir ? 'Move Folder' : 'Move File' }} "{{ selectedFile?.name }}"</h3>
+        <h3>{{ t('client.dialog.moveTitle', { type: selectedFile?.isDir ? t('client.type.folder') : t('client.type.file'), name: selectedFile?.name }) }}</h3>
         <select v-model="moveTarget" class="move-select">
           <option value="" disabled>Select a folder...</option>
           <option v-for="folder in availableFolders" :key="folder.name" :value="folder.name">
@@ -173,8 +173,8 @@
           </option>
         </select>
         <div class="dialog-buttons">
-          <button @click="doMove" :disabled="!moveTarget">Move</button>
-          <button @click="showMove = false">Cancel</button>
+          <button @click="doMove" :disabled="!moveTarget">{{ t('client.button.move') }}</button>
+          <button @click="showMove = false">{{ t('client.button.cancel') }}</button>
         </div>
       </div>
     </div>
@@ -183,6 +183,9 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const currentPath = ref('/')
 const files = ref<any[]>([])
@@ -1305,4 +1308,9 @@ onMounted(() => {
   font-size: 12px;
   color: var(--text-secondary);
 }
+
+@media (max-width: 767px) {
+  table { display: block; overflow-x: auto; white-space: nowrap; }
+  .client-view { padding: 8px; }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/LibraryView.vue b/src/views/LibraryView.vue
index ae53567..0d9ff77 100644
--- a/src/views/LibraryView.vue
+++ b/src/views/LibraryView.vue
@@ -15,16 +15,20 @@
             <input type="radio" name="ms-display-filter" value="photo" v-model="displayFilter"> Photos
           </label>
           <span class="ms-fm-toggle-sep">|</span>
+          <button class="ms-ppl-section-toggle-btn" :class="{ active: showCompletedSection }" @click="showCompletedSection = !showCompletedSection">
+            {{ t('library.status.completed') }} {{ completedCount }} <span class="ms-ppl-toggle-dot" :class="{ on: showCompletedSection }"></span>
+          </button>
           <button class="ms-ppl-section-toggle-btn" :class="{ active: showRegisteredSection }" @click="showRegisteredSection = !showRegisteredSection">
-            Registered {{ registeredCount }} <span class="ms-ppl-toggle-dot" :class="{ on: showRegisteredSection }"></span>
+            {{ t('library.status.registered') }} {{ registeredCount }} <span class="ms-ppl-toggle-dot" :class="{ on: showRegisteredSection }"></span>
           </button>
           <button class="ms-ppl-section-toggle-btn" :class="{ active: showUnregisteredSection }" @click="showUnregisteredSection = !showUnregisteredSection">
-            Unregistered {{ unregisteredCount }} <span class="ms-ppl-toggle-dot" :class="{ on: showUnregisteredSection }"></span>
+            {{ t('library.status.unregistered') }} {{ unregisteredCount }} <span class="ms-ppl-toggle-dot" :class="{ on: showUnregisteredSection }"></span>
           </button>
         </div>
         <div class="ms-fm-toolbar-right">
           <div class="ms-fm-search-wrap">
             <input type="text" class="ms-fm-search" v-model="filterText" placeholder="Search files / docs / videos">
+            <button v-if="filterText" class="ms-fm-search-clear" @click="filterText = ''" type="button">✕</button>
           </div>
           <button class="ms-fm-icon-btn" type="button" @click.stop="showFilter = !showFilter">☰</button>
         </div>
@@ -43,10 +47,10 @@
         </div>
         <div class="ms-fm-sort-section">
           <div class="ms-fm-sort-title">Filter By</div>
-          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterUnregistered"> Unregistered</label>
-          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterRegistered"> Registered</label>
-          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterScanning"> Scanning</label>
-          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterReady"> Ready</label>
+          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterUnregistered"> {{ t('library.status.unregistered') }}</label>
+          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterRegistered"> {{ t('library.status.registered') }}</label>
+          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterScanning"> {{ t('library.status.scanning') }}</label>
+          <label class="ms-fm-radio-label"><input type="checkbox" v-model="filterReady"> {{ t('library.status.ready') }}</label>
           <label class="ms-fm-radio-label"><input type="checkbox" v-model="onlyVideos"> Videos Only</label>
           <label class="ms-fm-radio-label"><input type="checkbox" v-model="onlyPhotos"> Photos Only</label>
         </div>
@@ -66,23 +70,36 @@
             <input type="number" class="ms-fm-edit-input" v-model.number="durationMax" min="0" placeholder="Max Minutes" style="width:100%;">
           </div>
         </div>
+        <div class="ms-fm-sort-section">
+          <div class="ms-fm-sort-title">Settings</div>
+          <label class="ms-fm-radio-label"><input type="checkbox" :checked="autoScanAfterRegister" @change="toggleAutoScan"> {{ t('library.settings.auto_scan') }}</label>
+        </div>
         <button type="button" class="ms-fm-btn" style="width:100%;margin-top:8px;" @click="resetFilters">Clear Filters</button>
       </div>
 
       <div class="ms-fm-status">{{ statusText }}<span v-if="actionMsg" class="ms-fm-action-msg">{{ actionMsg }}</span>
         <span class="ms-fm-axis-sep">·</span>
-        <span class="ms-fm-axis-item">🔍 Scanning <strong>{{ scanningCount }}</strong></span>
-        <span class="ms-fm-axis-item">· ✅ Completed <strong>{{ completedCount }}</strong></span>
+        <span class="ms-fm-axis-item">🔍 {{ t('library.status.scanning') }} <strong>{{ scanningCount }}</strong></span>
+        <span class="ms-fm-axis-item">· ✅ {{ t('library.status.completed') }} <strong>{{ completedCount }}</strong></span>
       </div>
       </div>
 
-      <div class="ms-ppl-scroll-area">
+      <!-- Loading State -->
+      <div v-if="loading" class="ms-fm-loading">
+        <div class="ms-fm-loading-spinner"></div>
+        <div class="ms-fm-loading-text">Loading...</div>
+      </div>
 
-      <!-- Registered Section -->
-      <div v-if="showRegisteredSection" class="ms-fm-section">
-        <div class="ms-fm-section-title">📋 Registered ({{ registeredFiles.length }})</div>
+      <div v-else class="ms-ppl-scroll-area" ref="libraryGridEl" @mousedown="dragMousedown" @click.capture="dragClickCapture">
+
+      <!-- Drag select rectangle -->
+      <div v-if="dragBox" class="ms-select-rect" :style="dragSelectRectStyle(dragBox)"></div>
+
+      <!-- Completed Section -->
+      <div v-if="completedFiles.length && showCompletedSection" class="ms-fm-section">
+        <div class="ms-fm-section-title">✅ {{ t('library.status.completed') }} ({{ completedFiles.length }})</div>
         <div class="ms-fm-grid">
-          <div v-for="f in registeredFiles" :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)" @touchstart="onCardTouchStart($event, f)" @touchend="onCardTouchEnd" @touchmove="onCardTouchEnd">
+          <div v-for="f in completedFiles" :key="f.file_uuid" class="ms-fm-card ms-fm-card-completed" :class="{ 'is-selected': selectedFiles.includes(f.file_uuid) }" :data-drag-key="f.file_uuid" @click="toggleSelect(f)" @contextmenu.prevent="openContextMenu($event, f)" @touchstart="onCardTouchStart($event, f)" @touchend="onCardTouchEnd" @touchmove="onCardTouchEnd">
             <div class="ms-fm-thumb-wrap">
               <div class="ms-fm-badge">{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}</div>
               
@@ -100,11 +117,59 @@
               </div>
               
               <button v-if="isVideo(f)" class="ms-fm-play-btn" @click.stop="playVideo(f)">▶</button>
-              <div class="ms-fm-badges">
-                <div class="ms-fm-badge-row ms-badge-ok">📋 Registered</div>
-                <div class="ms-fm-badge-row" :class="statusBadgeClass(f)">{{ statusBadgeIcon(f) }} {{ statusBadgeLabel(f) }}</div>
-              </div>
+              <button v-if="hasFaceData(f) && (faceCounts[f.file_uuid] === undefined || faceCounts[f.file_uuid] > 0)" class="ms-fm-face-btn" :title="'Faces: ' + f.file_name" @click.stop="openFacePage(f)" v-observe="() => loadFaceCount(f.file_uuid)">
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="10" r="4"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
+                <span v-if="faceCounts[f.file_uuid] > 0" class="ms-fm-face-count">{{ faceCounts[f.file_uuid] }}</span>
+              </button>
+<div class="ms-fm-badges">
+                 <div class="ms-fm-badge-row ms-badge-done">✅ {{ t('library.status.completed') }}</div>
+               </div>
+               <div class="ms-fm-card-checkbox" @click.stop="toggleSelect(f)">
+                 <span v-if="selectedFiles.includes(f.file_uuid)">✓</span>
+               </div>
+             </div>
+            <div class="ms-fm-meta">
+              <div class="ms-fm-name">{{ f.file_name }}</div>
+              <div class="ms-fm-source">{{ formatSize(f.file_size) }} · {{ formatDate(f.modified_time) }}</div>
             </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Registered Section -->
+      <div v-if="showRegisteredSection" class="ms-fm-section">
+        <div class="ms-fm-section-title">📋 {{ t('library.status.registered') }} ({{ registeredFiles.length }})</div>
+        <div class="ms-fm-grid">
+          <div v-for="f in registeredFiles" :key="f.file_uuid" class="ms-fm-card" :class="{ 'is-completed': f.isRegistered, 'is-selected': selectedFiles.includes(f.file_uuid) }" :data-drag-key="f.file_uuid" @click="toggleSelect(f)" @contextmenu.prevent="openContextMenu($event, f)" @touchstart="onCardTouchStart($event, f)" @touchend="onCardTouchEnd" @touchmove="onCardTouchEnd">
+            <div class="ms-fm-thumb-wrap">
+              <div class="ms-fm-badge">{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}</div>
+              
+               <img v-if="thumbnails[thumbKey(f.file_uuid)]" 
+                    class="ms-fm-thumb" 
+                    :src="thumbnails[thumbKey(f.file_uuid)]" 
+                    alt="" 
+                    @error="handleThumbError">
+               
+               <div v-else-if="isPhoto(f) || isVideo(f)" class="ms-fm-thumb-loading" v-observe="() => loadThumbnailLocal(f.file_uuid)">⟳</div>
+               
+               <div v-else class="ms-fm-doc-thumb">
+                <span class="ms-fm-doc-icon">📄</span>
+                <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>
+              <button v-if="hasFaceData(f) && (faceCounts[f.file_uuid] === undefined || faceCounts[f.file_uuid] > 0)" class="ms-fm-face-btn" :title="'Faces: ' + f.file_name" @click.stop="openFacePage(f)" v-observe="() => loadFaceCount(f.file_uuid)">
+                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="10" r="4"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
+                <span v-if="faceCounts[f.file_uuid] > 0" class="ms-fm-face-count">{{ faceCounts[f.file_uuid] }}</span>
+              </button>
+<div class="ms-fm-badges">
+                 <div class="ms-fm-badge-row ms-badge-ok">📋 {{ t('library.status.registered') }}</div>
+                 <div class="ms-fm-badge-row" :class="statusBadgeClass(f)">{{ statusBadgeIcon(f) }} {{ statusBadgeLabel(f) }}</div>
+               </div>
+               <div class="ms-fm-card-checkbox" @click.stop="toggleSelect(f)">
+                 <span v-if="selectedFiles.includes(f.file_uuid)">✓</span>
+               </div>
+             </div>
             <div v-if="f.status === 'scanning' && getPipelineStats(f.file_uuid) && getPipelineStats(f.file_uuid).overall_progress < 1.0" class="ms-fm-progress">
               <div class="ms-fm-progress-bar" :style="{ width: (getPipelineStats(f.file_uuid).overall_progress * 100) + '%' }"></div>
               <div class="ms-fm-progress-text">{{ Math.round(getPipelineStats(f.file_uuid).overall_progress * 100) }}%</div>
@@ -127,9 +192,14 @@
 
       <!-- Unregistered Section -->
       <div v-if="unregisteredFiles.length && showUnregisteredSection" class="ms-fm-section">
-        <div class="ms-fm-section-title">📦 Unregistered ({{ unregisteredFiles.length }})</div>
+        <div class="ms-fm-section-title">
+          📦 {{ t('library.status.unregistered') }} ({{ unregisteredFiles.length }})
+          <button v-if="selectedUnregisteredFiles.length > 0" class="ms-batch-register-btn" @click="batchRegister">
+            📥 {{ t('library.context.register_file') }} ({{ selectedUnregisteredFiles.length }})
+          </button>
+        </div>
         <div class="ms-fm-grid">
-          <div v-for="f in unregisteredFiles" :key="f.file_path" class="ms-fm-card ms-fm-card-unregistered" :class="{ 'is-selected': selectedFiles.includes(f.file_path) }" @click="toggleSelect(f)" @contextmenu.prevent="openContextMenu($event, f)" @touchstart="onCardTouchStart($event, f)" @touchend="onCardTouchEnd" @touchmove="onCardTouchEnd">
+          <div v-for="f in unregisteredFiles" :key="f.file_path" class="ms-fm-card ms-fm-card-unregistered" :class="{ 'is-selected': selectedFiles.includes(f.file_path) }" :data-drag-key="f.file_path" @click="toggleSelect(f)" @contextmenu.prevent="openContextMenu($event, f)" @touchstart="onCardTouchStart($event, f)" @touchend="onCardTouchEnd" @touchmove="onCardTouchEnd">
             <div class="ms-fm-thumb-wrap">
               <div class="ms-fm-badge">{{ isVideo(f) ? 'VIDEO' : (isPhoto(f) ? 'PHOTO' : 'DOC') }}</div>
               
@@ -147,9 +217,17 @@
               </div>
               
               <div class="ms-fm-unreg-overlay">
-                <span class="ms-fm-unreg-label">Unregistered</span>
+                <span class="ms-fm-unreg-label">{{ t('library.status.unregistered') }}</span>
               </div>
               
+              <div class="ms-fm-card-checkbox" @click.stop="toggleSelect(f)">
+                <span v-if="selectedFiles.includes(f.file_path)">✓</span>
+              </div>
+              
+              <button class="ms-fm-card-register-btn" @click.stop="quickRegister(f)" :title="t('library.context.register_file')">
+                📥
+              </button>
+              
             </div>
             <div class="ms-fm-meta">
               <div class="ms-fm-name">{{ f.file_name }}</div>
@@ -159,12 +237,12 @@
         </div>
       </div>
 
-      <!-- Empty State -->
-      <div v-if="!registeredFiles.length && !unregisteredFiles.length" class="ms-fm-empty">
+<!-- Empty State -->
+       <div v-if="!completedFiles.length && !registeredFiles.length && !unregisteredFiles.length" class="ms-fm-empty">
         <div class="ms-fm-empty-icon">📁</div>
         <div class="ms-fm-empty-text">No files found</div>
       </div>
-    </div>
+      </div>
     </section>
 
     <!-- Context Menu -->
@@ -172,37 +250,45 @@
       <div class="ms-ctx-header">
         <div class="ms-ctx-filename">{{ ctxMenuFile?.file_name }}</div>
         <div class="ms-ctx-info">{{ formatSize(ctxMenuFile?.file_size || 0) }} · {{ formatDate(ctxMenuFile?.modified_time || '') }}</div>
-        <div class="ms-ctx-info">Status: <span :class="ctxMenuFile?.status === 'completed' ? 'ms-ctx-done' : ctxMenuFile?.status === 'registered' ? 'ms-ctx-pending' : 'ms-ctx-none'">{{ statusLabel(ctxMenuFile) }}</span></div>
+        <div class="ms-ctx-info">
+          Status: 
+          <span :class="ctxMenuFile?.status === 'completed' ? 'ms-ctx-done' : ctxMenuFile?.status === 'registered' ? 'ms-ctx-pending' : 'ms-ctx-none'">
+            {{ statusLabel(ctxMenuFile) }}
+          </span>
+          <span v-if="ctxMenuFile?.status_updated_at" class="ms-ctx-status-time">
+            · {{ formatRelativeTime(ctxMenuFile.status_updated_at) }}
+          </span>
+        </div>
         <div v-if="ctxMenuFile?.isRegistered && ctxMenuFile?.file_uuid" class="ms-ctx-info">{{ $t('library.qc.uuid_label') }} {{ ctxMenuFile.file_uuid }}</div>
       </div>
       <hr class="ms-ctx-divider">
-      <button v-if="!ctxMenuFile?.isRegistered" class="ms-ctx-item" @click="ctxRegister(ctxMenuFile)">📥 Register File</button>
-      <button v-if="ctxMenuFile?.isRegistered && ctxMenuFile?.status !== 'completed'" class="ms-ctx-item" @click="ctxProcess(ctxMenuFile)">🔍 Deep Scan</button>
-      <button v-if="ctxMenuFile?.isRegistered && ctxMenuFile?.status === 'completed'" class="ms-ctx-item" @click="ctxReprocess(ctxMenuFile)">🔄 Re-scan</button>
+      <button v-if="!ctxMenuFile?.isRegistered" class="ms-ctx-item" @click="ctxRegister(ctxMenuFile)">📥 {{ t('library.context.register_file') }}</button>
+      <button v-if="ctxMenuFile?.isRegistered && ctxMenuFile?.status !== 'completed'" class="ms-ctx-item" @click="ctxProcess(ctxMenuFile)">🔍 {{ t('library.confirm.title_process') }}</button>
+      <button v-if="ctxMenuFile?.isRegistered && ctxMenuFile?.status === 'completed'" class="ms-ctx-item" @click="ctxReprocess(ctxMenuFile)">🔄 {{ t('library.confirm.title_rescan') }}</button>
 
-      <button v-if="ctxMenuFile?.isRegistered" class="ms-ctx-item ms-ctx-danger" @click="ctxUnregister(ctxMenuFile)">🗑️ Unregister</button>
-      <button v-if="isVideo(ctxMenuFile) && ctxMenuFile?.isRegistered" class="ms-ctx-item" @click="playVideo(ctxMenuFile); closeContextMenu()">▶ Play Video</button>
+      <button v-if="ctxMenuFile?.isRegistered" class="ms-ctx-item ms-ctx-danger" @click="ctxUnregister(ctxMenuFile)">🗑️ {{ t('library.context.unregister') }}</button>
+      <button v-if="isVideo(ctxMenuFile) && ctxMenuFile?.isRegistered" class="ms-ctx-item" @click="playVideo(ctxMenuFile); closeContextMenu()">▶ {{ t('library.context.play_video') }}</button>
       <template v-if="ctxMenuFile?.isRegistered">
         <hr class="ms-ctx-divider">
         <div class="ms-ctx-procs">
-          <div class="ms-ctx-procs-title">Processor Output <button v-if="isAdvanced" class="ms-proc-qc-btn" @click="runProcessorQC(ctxMenuFile)" title="QC Check">🔍</button></div>
+          <div class="ms-ctx-procs-title">{{ t('library.processor.output') }} <button v-if="isAdvanced" class="ms-proc-qc-btn" @click="runProcessorQC(ctxMenuFile)" :title="t('library.context.qc_check')">🔍</button></div>
           <div class="ms-proc-line" :class="procStatusClass('asr')">
             <label class="ms-fm-check-label"><input type="checkbox" v-model="procAsr"> ASR</label>
             <span class="ms-proc-status">{{ procStatusIcon('asr') }}</span>
             <span class="ms-proc-count" @click.stop="viewProcessorJson('asr')">{{ procCountLabel('asr', 'segment') }}</span>
-            <button class="ms-proc-redo" @click.stop="redoProcessor('asr')" title="Re-run ASR">🔄</button>
+            <button class="ms-proc-redo" @click.stop="redoProcessor('asr')" :title="t('library.context.reprocess')">🔄</button>
           </div>
           <div class="ms-proc-line" :class="procStatusClass('asrx')">
             <label class="ms-fm-check-label"><input type="checkbox" v-model="procAsrx"> ASRX</label>
             <span class="ms-proc-status">{{ procStatusIcon('asrx') }}</span>
             <span class="ms-proc-count" @click.stop="viewProcessorJson('asrx')">{{ procCountLabel('asrx', 'segment') }}</span>
-            <button class="ms-proc-redo" @click.stop="redoProcessor('asrx')" title="Re-run ASRX">🔄</button>
+            <button class="ms-proc-redo" @click.stop="redoProcessor('asrx')" :title="t('library.context.reprocess')">🔄</button>
           </div>
           <div class="ms-proc-line" :class="procStatusClass('face_cluster')">
-            <label class="ms-fm-check-label"><input type="checkbox" v-model="procFaceCluster"> Face Deduplication</label>
+            <label class="ms-fm-check-label"><input type="checkbox" v-model="procFaceCluster"> {{ t('library.context.face_deduplication') }}</label>
             <span class="ms-proc-status">{{ procStatusIcon('face_cluster') }}</span>
             <span class="ms-proc-count" @click.stop="viewProcessorJson('face_cluster')">{{ procCountLabel('face_cluster', 'frame') }}</span>
-            <button class="ms-proc-redo" @click.stop="redoProcessor('face_cluster')" title="Re-run Face Cluster">🔄</button>
+            <button class="ms-proc-redo" @click.stop="redoProcessor('face_cluster')" :title="t('library.context.reprocess')">🔄</button>
           </div>
           <div class="ms-proc-line" :class="procStatusClass('face')">
             <label class="ms-fm-check-label"><input type="checkbox" v-model="procFace"> Face</label>
@@ -228,6 +314,17 @@
             <span class="ms-proc-count" @click.stop="viewProcessorJson('cut')">{{ procCountLabel('cut', 'frame') }}</span>
             <button class="ms-proc-redo" @click.stop="redoProcessor('cut')" title="Re-run CUT">🔄</button>
           </div>
+          <div v-if="vlmSummaryLabel(ctxMenuFile?.file_uuid)" class="ms-proc-line" :class="vlmSummaryClass(ctxMenuFile?.file_uuid)">
+            <label class="ms-fm-check-label">FS VLM Summary</label>
+            <span class="ms-proc-status">{{ vlmSummaryIcon(ctxMenuFile?.file_uuid) }}</span>
+            <span class="ms-proc-count">{{ vlmSummaryLabel(ctxMenuFile?.file_uuid) }}</span>
+            <button class="ms-proc-redo" @click.stop="triggerVlmSummary(ctxMenuFile?.file_uuid)" title="Generate VLM Summaries">🔄</button>
+          </div>
+          <div v-if="sceneVlmLabel(ctxMenuFile?.file_uuid)" class="ms-proc-line" :class="sceneVlmClass(ctxMenuFile?.file_uuid)">
+            <label class="ms-fm-check-label">Scene VLM</label>
+            <span class="ms-proc-status">{{ sceneVlmIcon(ctxMenuFile?.file_uuid) }}</span>
+            <span class="ms-proc-count" @click.stop="viewScenesJson()">{{ sceneVlmLabel(ctxMenuFile?.file_uuid) }}</span>
+          </div>
         </div>
         <div v-if="ctxMenuFile?.file_uuid && ctxMenuFile?.status === 'scanning'" class="ms-ctx-progress">
           <div v-if="statsLoading" class="ms-ctx-loading">
@@ -236,7 +333,7 @@
           </div>
           <template v-else>
 <div class="ms-ctx-overall-progress" v-if="getPipelineStats(ctxMenuFile.file_uuid)">
-               <div class="ms-ctx-progress-title">Overall Progress</div>
+               <div class="ms-ctx-progress-title">{{ t('library.progress.overall') }}</div>
               <div class="ms-ctx-progress-bar-wrap">
                 <div class="ms-ctx-progress-bar" :style="{ width: formatPipelineProgress(getPipelineStats(ctxMenuFile.file_uuid).overall_progress) }"></div>
                 <span class="ms-ctx-progress-text">{{ formatPipelineProgress(getPipelineStats(ctxMenuFile.file_uuid).overall_progress) }}</span>
@@ -258,7 +355,7 @@
 
             <div v-if="getFileStats(ctxMenuFile.file_uuid)" class="ms-ctx-details">
 <div class="ms-ctx-phase" v-if="getFileStats(ctxMenuFile.file_uuid).json?.processors">
-                 <div class="ms-ctx-phase-title">Rule1: Processor Output</div>
+                 <div class="ms-ctx-phase-title">{{ t('library.phase.processor_output') }}</div>
                 <div v-for="(info, proc) in getFileStats(ctxMenuFile.file_uuid).json.processors" :key="proc" class="ms-ctx-proc-item">
                   <span class="ms-ctx-proc-name">{{ proc.toUpperCase() }}</span>
                   <span class="ms-ctx-proc-count">{{ formatProcCount(proc, info) }}</span>
@@ -328,11 +425,29 @@
       </div>
     </div>
 
+    <!-- Scan Confirm Modal -->
+    <div v-if="confirmDialog" class="ms-modal-overlay" @click.self="cancelConfirm">
+      <div class="ms-modal-box">
+        <div class="ms-modal-header">
+          <span class="ms-modal-title">{{ confirmTitle }}</span>
+          <button class="ms-modal-close" @click="cancelConfirm">✕</button>
+        </div>
+        <div class="ms-modal-body">
+          <div class="ms-ctx-filename" style="margin-bottom:12px;">{{ confirmTarget?.file?.file_name }}</div>
+          <div class="ms-proc-line">{{ confirmMessage }}</div>
+          <div class="ms-modal-actions" style="margin-top:16px;display:flex;gap:8px;justify-content:flex-end;">
+            <button class="ms-ctx-item" @click="cancelConfirm">{{ t('library.confirm.cancel') }}</button>
+            <button class="ms-ctx-item" @click="confirmProceed">{{ t('library.confirm.proceed') }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <!-- QC Modal -->
     <div v-if="showQCModal" class="ms-modal-overlay" @click.self="showQCModal = false">
       <div class="ms-modal-box ms-modal-qc-wide">
         <div class="ms-modal-header">
-          <span class="ms-modal-title">🔍 Pipeline QC - {{ qcFile?.file_name?.slice(0, 30) }}</span>
+          <span class="ms-modal-title">🔍 {{ t('library.processor.pipeline_qc') }} - {{ qcFile?.file_name?.slice(0, 30) }}</span>
           <button class="ms-modal-close" @click="showQCModal = false">✕</button>
         </div>
         <div class="ms-modal-body">
@@ -561,15 +676,21 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { apiCall } from '@/api'
+import { apiCall, pollCommandStatus } from '@/api'
 import { useI18n } from 'vue-i18n'
-import { ensureFiles, filesCache, filesLoaded, thumbnailsCache, loadThumbnail, loadUnregisteredThumbnail, invalidateFiles, processorCountsCache, loadProcessorCounts, getProcessorCounts, ProcessorOutputInfo, pollProgress, stopPolling, getProgress, refreshFileStatus, refreshAllFilesStatus, fileProgressCache, pollingProgressSet, getFileProcessingStatus, ProcessingStatus, ProcessingLevel, loadPipelineStats, getPipelineStats, PipelineStats, loadFileStats, getFileStats, FileStats, startStatsAutoRefresh, stopStatsAutoRefresh, startProcessingFilesPolling, stopProcessingFilesPolling, startFilesWatch, stopFilesWatch, JsonProcessorInfo, pipelineStatsCache, clearFileStatusCache, syncFileStatus } from '@/store'
+import { useRouter } from 'vue-router'
+import { useDragSelect, dragSelectRectStyle, type DragSelectBox } from '@/composables/useDragSelect'
+import { ensureFiles, filesCache, filesLoaded, thumbnailsCache, loadThumbnail, loadUnregisteredThumbnail, invalidateFiles, processorCountsCache, loadProcessorCounts, getProcessorCounts, ProcessorOutputInfo, pollProgress, stopPolling, getProgress, refreshFileStatus, refreshAllFilesStatus, fileProgressCache, pollingProgressSet, getFileProcessingStatus, ProcessingStatus, ProcessingLevel, loadPipelineStats, getPipelineStats, PipelineStats, loadFileStats, getFileStats, FileStats, startStatsAutoRefresh, stopStatsAutoRefresh, startProcessingFilesPolling, stopProcessingFilesPolling, startFilesWatch, stopFilesWatch, JsonProcessorInfo, pipelineStatsCache, clearFileStatusCache, syncFileStatus, faceCountsCache, loadFaceCount, fileStatusCache } from '@/store'
+import { getApiBase } from '@/api/config'
 import { getAsrStatus } from '@/utils/asrStatus'
 import { useAdvancedMode } from '@/stores/advancedMode'
+import { useAutoScan } from '@/stores/autoScan'
 import VideoPlayer from '../components/VideoPlayer.vue'
 
 const { t } = useI18n()
 const { isAdvanced } = useAdvancedMode()
+const { autoScanAfterRegister, toggleAutoScan } = useAutoScan()
+const router = useRouter()
 
 const files = computed(() => filesCache.value)
 const loading = computed(() => !filesLoaded.value)
@@ -603,8 +724,17 @@ const thumbnails = computed(() => thumbnailsCache.value)
 const thumbKey = (uuid: string) => `${uuid}:30`
 const unregThumbKey = (path: string) => `unreg:${path}:30`
 
+function hasFaceData(f: any) {
+  return ['completed', 'face_mgmt_ready', 'agent_ready'].includes(f?.status)
+}
+
+function openFacePage(f: any) {
+  router.push({ path: '/face', query: { file: String(f.file_uuid) } })
+}
+
 const sortBy = ref('time_desc')
 const filterUnregistered = ref(false)
+const faceCounts = computed(() => faceCountsCache.value)
 const filterRegistered = ref(true)
 const filterScanning = ref(false)
 const filterReady = ref(false)
@@ -617,7 +747,7 @@ const durationMax = ref<number | null>(null)
 
 // Sort & Filter
 const registeredFiles = computed(() => {
-  let result = files.value.filter((f: any) => f.isRegistered)
+  let result = files.value.filter((f: any) => f.isRegistered && f.status !== 'completed')
   if (displayFilter.value === 'video') result = result.filter(isVideo)
   else if (displayFilter.value === 'photo') result = result.filter(isPhoto)
   if (filterText.value) {
@@ -625,7 +755,7 @@ const registeredFiles = computed(() => {
     result = result.filter((file: any) => file.file_name.toLowerCase().includes(f))
   }
   if (filterScanning.value) result = result.filter((f: any) => f.status === 'scanning')
-  if (filterReady.value) result = result.filter((f: any) => ['completed','keyword_ready','semantic_ready','face_mgmt_ready'].includes(f.status))
+  if (filterReady.value) result = result.filter((f: any) => ['keyword_ready','semantic_ready','face_mgmt_ready'].includes(f.status))
   if (onlyVideos.value) result = result.filter(isVideo)
   if (onlyPhotos.value) result = result.filter(isPhoto)
   if (sizeMin.value) result = result.filter((f: any) => (f.file_size || 0) >= sizeMin.value! * 1048576)
@@ -672,8 +802,44 @@ const unregisteredFiles = computed(() => {
   return result
 })
 
+const completedFiles = computed(() => {
+  let result = files.value.filter((f: any) => f.status === 'completed')
+  if (displayFilter.value === 'video') result = result.filter(isVideo)
+  else if (displayFilter.value === 'photo') result = result.filter(isPhoto)
+  if (filterText.value) {
+    const f = filterText.value.toLowerCase()
+    result = result.filter((file: any) => file.file_name.toLowerCase().includes(f))
+  }
+  if (onlyVideos.value) result = result.filter(isVideo)
+  if (onlyPhotos.value) result = result.filter(isPhoto)
+  if (sizeMin.value) result = result.filter((f: any) => (f.file_size || 0) >= sizeMin.value! * 1048576)
+  if (sizeMax.value) result = result.filter((f: any) => (f.file_size || 0) <= sizeMax.value! * 1048576)
+  // Sort
+  result.sort((a: any, b: any) => {
+    switch (sortBy.value) {
+      case 'time_desc': return new Date(b.modified_time || 0).getTime() - new Date(a.modified_time || 0).getTime()
+      case 'time_asc': return new Date(a.modified_time || 0).getTime() - new Date(b.modified_time || 0).getTime()
+      case 'size_desc': return (b.file_size || 0) - (a.file_size || 0)
+      case 'size_asc': return (a.file_size || 0) - (b.file_size || 0)
+      case 'name_asc': return (a.file_name || '').localeCompare(b.file_name || '')
+      case 'name_desc': return (b.file_name || '').localeCompare(a.file_name || '')
+      default: return 0
+    }
+  })
+  return result
+})
+
 const showRegisteredSection = ref(true)
 const showUnregisteredSection = ref(true)
+const showCompletedSection = ref(true)
+
+const libraryGridEl = ref<HTMLElement | null>(null)
+const dragBox = ref<DragSelectBox | null>(null)
+const { onMousedown: dragMousedown, onClickCapture: dragClickCapture } = useDragSelect(libraryGridEl, {
+  getSelected: () => selectedFiles.value,
+  setSelected: (keys) => { selectedFiles.value = keys },
+  onBox: (b) => { dragBox.value = b },
+})
 
 const sortedFilteredFiles = computed(() => {
   let result = [...files.value]
@@ -728,11 +894,12 @@ const sortedFilteredFiles = computed(() => {
   return result
 })
 
-const registeredCount = computed(() => files.value.filter((f: any) => f.isRegistered).length)
+const registeredCount = computed(() => files.value.filter((f: any) => f.isRegistered && f.status !== 'completed').length)
 const unregisteredCount = computed(() => files.value.filter((f: any) => !f.isRegistered).length)
+const completedCount = computed(() => files.value.filter((f: any) => f.status === 'completed').length)
 const scanningCount = computed(() => files.value.filter((f: any) => f.status === 'scanning').length)
 const readyCount = computed(() => files.value.filter((f: any) => ['completed','keyword_ready','semantic_ready','face_mgmt_ready'].includes(f.status)).length)
-const completedCount = computed(() => files.value.filter((f: any) => f.status === 'completed').length)
+const selectedUnregisteredFiles = computed(() => unregisteredFiles.value.filter((f: any) => selectedFiles.value.includes(f.file_path)))
 
 onMounted(() => { loadFiles(); document.addEventListener('click', docClickClose); startStatsAutoRefresh(); startProcessingFilesPolling(); startFilesWatch() })
 onUnmounted(() => { document.removeEventListener('click', docClickClose); stopStatsAutoRefresh(); stopProcessingFilesPolling(); stopFilesWatch() })
@@ -797,6 +964,28 @@ function formatDate(date: string) {
   return new Date(date).toISOString().slice(0, 10)
 }
 
+function formatRelativeTime(isoString: string | undefined): string {
+  if (!isoString) return ''
+  
+  try {
+    const date = new Date(isoString)
+    const now = new Date()
+    const diffMs = now.getTime() - date.getTime()
+    const diffMins = Math.floor(diffMs / 60000)
+    const diffHours = Math.floor(diffMs / 3600000)
+    const diffDays = Math.floor(diffMs / 86400000)
+    
+    if (diffMins < 1) return 'just now'
+    if (diffMins < 60) return `${diffMins}m ago`
+    if (diffHours < 24) return `${diffHours}h ago`
+    if (diffDays < 7) return `${diffDays}d ago`
+    
+    return date.toLocaleDateString()
+  } catch {
+    return ''
+  }
+}
+
 async function loadThumbnailLocal(uuid: string) {
   loadThumbnail(uuid, 30)
 }
@@ -807,9 +996,10 @@ function handleThumbError(e: Event) {
 }
 
 function toggleSelect(f: any) {
-  const idx = selectedFiles.value.indexOf(f.file_uuid)
+  const key = f.file_path || f.file_uuid
+  const idx = selectedFiles.value.indexOf(key)
   if (idx >= 0) selectedFiles.value.splice(idx, 1)
-  else selectedFiles.value.push(f.file_uuid)
+  else selectedFiles.value.push(key)
 }
 
 async function playVideo(f: any) {
@@ -832,6 +1022,36 @@ const registering = ref(false)
 const processing = ref(false)
 const unregistering = ref(false)
 const reprocessing = ref(false)
+const confirmDialog = ref(false)
+const confirmTarget = ref<{ mode: 'register' | 'process' | 'reprocess'; file: any } | null>(null)
+const confirmTitle = computed(() => {
+  const m = confirmTarget.value?.mode
+  if (m === 'register') return t('library.confirm.title_register')
+  if (m === 'process') return t('library.confirm.title_process')
+  return t('library.confirm.title_rescan')
+})
+const confirmMessage = computed(() => {
+  const m = confirmTarget.value?.mode
+  if (m === 'register') return autoScanAfterRegister.value ? t('library.confirm.message_register') : t('library.confirm.message_register_no_scan')
+  if (m === 'process') return t('library.confirm.message_process')
+  return t('library.confirm.message_rescan')
+})
+
+function cancelConfirm() {
+  confirmDialog.value = false
+  confirmTarget.value = null
+}
+
+function confirmProceed() {
+  confirmDialog.value = false
+  const t = confirmTarget.value
+  confirmTarget.value = null
+  if (!t) return
+  if (t.mode === 'register') doRegister(t.file)
+  else if (t.mode === 'process') doProcess(t.file)
+  else doReprocess(t.file)
+}
+
 const actionMsg = ref('')
 const procAsr = ref(true)
 const procAsrx = ref(true)
@@ -900,9 +1120,11 @@ function formatStageName(name: string): string {
     processors: 'Processors',
     rule1_ingestion: 'Rule1 Ingestion',
     face_tracing: 'Face Tracing',
+    face_dedup: 'Face Dedup',
     tkg_nodes: 'TKG Nodes',
     tkg_edges: 'TKG Edges',
-    rule2_ingestion: 'Rule2 Ingestion'
+    rule2_ingestion: 'Rule2 Ingestion',
+    vlm_summary: 'VLM Summary'
   }
   return names[name] || name
 }
@@ -955,6 +1177,111 @@ function procStatusIcon(proc: string): string {
   return '✗'
 }
 
+// ── VLM Summary helpers ──
+
+function vlmSummaryStats(fileUuid: string | undefined) {
+  if (!fileUuid) return null
+  return getFileStats(fileUuid)?.vlm_summary || null
+}
+
+function vlmSummaryClass(fileUuid: string | undefined): string {
+  const s = vlmSummaryStats(fileUuid)
+  if (!s || s.total === 0) return ''
+  if (s.done >= s.total) return 'ms-proc-done'
+  // File completed but VLM not done → warning
+  const file = ctxMenu.value.file
+  if (file?.status === 'completed') return 'ms-proc-warning'
+  return 'ms-proc-running'
+}
+
+function vlmSummaryIcon(fileUuid: string | undefined): string {
+  const s = vlmSummaryStats(fileUuid)
+  if (!s || s.total === 0) return '—'
+  if (s.done >= s.total) return '✓'
+  // File completed but VLM not done → warning icon only
+  const file = ctxMenu.value.file
+  if (file?.status === 'completed') return '⚠️'
+  return ''
+}
+
+function vlmSummaryLabel(fileUuid: string | undefined): string {
+  const s = vlmSummaryStats(fileUuid)
+  if (!s || s.total === 0) return ''
+  if (s.done >= s.total) return `(${s.total})`
+  return `${s.done}/${s.total}`
+}
+
+let vlmTriggering = false
+async function triggerVlmSummary(fileUuid: string | undefined) {
+  if (!fileUuid || vlmTriggering) return
+  vlmTriggering = true
+  try {
+    const base = getApiBase()
+    const res = await fetch(`${base}/api/v1/file/${fileUuid}/vlm-summary`, { method: 'POST' })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data: any = await res.json()
+    console.log(`[VLM] started: ${data.pending || data.total_traces || '?'} traces`)
+    // Poll until done
+    const poll = async () => {
+      await loadFileStats(fileUuid, true)
+      const s = getFileStats(fileUuid)?.vlm_summary
+      if (s && s.done >= s.total) {
+        console.log(`[VLM] complete: ${s.total}/${s.total}`)
+        return
+      }
+      setTimeout(poll, 3000)
+    }
+    poll()
+  } catch (e: any) {
+    console.error('VLM trigger failed:', e)
+    alert(t('library.processor.vlm_failed', { message: e?.message || e }))
+  } finally {
+    vlmTriggering = false
+  }
+}
+
+function sceneVlmStats(fileUuid: string | undefined) {
+  if (!fileUuid) return null
+  return getFileStats(fileUuid)?.scene_vlm || null
+}
+
+function sceneVlmClass(fileUuid: string | undefined): string {
+  const s = sceneVlmStats(fileUuid)
+  if (!s || s.total_scenes === 0) return ''
+  if (s.status === 'ready') return 'ms-proc-done'
+  return 'ms-proc-running'
+}
+
+function sceneVlmIcon(fileUuid: string | undefined): string {
+  const s = sceneVlmStats(fileUuid)
+  if (!s || s.total_scenes === 0) return '—'
+  if (s.status === 'ready') return '✓'
+  return ''
+}
+
+function sceneVlmLabel(fileUuid: string | undefined): string {
+  const s = sceneVlmStats(fileUuid)
+  if (!s || s.total_scenes === 0) return ''
+  return `(${s.total_scenes})`
+}
+
+async function viewScenesJson() {
+  const f = ctxMenu.value.file
+  if (!f?.file_uuid) return
+  processorJsonTitle.value = `SCENES — ${f.file_name}`
+  processorJsonContent.value = 'Loading...'
+  processorJsonDialog.value = true
+  try {
+    const base = getApiBase()
+    const res = await fetch(`${base}/api/v1/processor-json?file_hash=${f.file_uuid}&processor=scenes`)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data: any = await res.json()
+    processorJsonContent.value = JSON.stringify(data, null, 2)
+  } catch (e: any) {
+    processorJsonContent.value = `Error: ${e?.message || e}`
+  }
+}
+
 function getProcNodeClass(r: any): string {
   if (r.processor === 'ASR') {
     if (!r.exists) return 'ms-qc-missing'
@@ -1116,48 +1443,43 @@ async function redoProcessor(proc: string) {
   if (!ctxMenu.value.file?.file_uuid) return
   const fileUuid = ctxMenu.value.file.file_uuid
   
-  if (!confirm(`Re-run ${proc.toUpperCase()} for this file?`)) return
+  if (!confirm(t('library.confirm.rerun_processor', { processor: proc.toUpperCase() }))) return
   
   try {
     const result = await apiCall('process_file', { fileUuid, processors: [proc] })
     if (result.success) {
-      alert(`${proc.toUpperCase()} started`)
+      alert(t('library.processor.started', { processor: proc.toUpperCase() }))
     } else {
-      alert(`Failed: ${result.message}`)
+      alert(t('library.processor.failed', { message: result.message }))
     }
   } catch (e: any) {
-    alert(`Error: ${e.message}`)
+    alert(t('library.processor.error', { message: e.message }))
   }
 }
 
 async function redoProcessorFromQC(proc: string) {
-  console.log('[QC] redoProcessorFromQC called:', proc)
-  console.log('[QC] qcFile:', qcFile.value)
   
   if (!qcFile.value?.file_uuid) {
-    alert('Error: No file selected')
+    alert(t('library.processor.no_file'))
     return
   }
   const fileUuid = qcFile.value.file_uuid
-  console.log('[QC] fileUuid:', fileUuid)
   
-  if (!confirm(`Run ${proc.toUpperCase()} on ${qcFile.value.title}?`)) return
+  if (!confirm(t('library.confirm.run_processor', { processor: proc.toUpperCase(), filename: qcFile.value.title }))) return
   
-  console.log('[QC] Calling apiCall process_file...')
   try {
     const result = await apiCall('process_file', { fileUuid, processors: [proc] })
-    console.log('[QC] apiCall result:', result)
     if (result.success) {
-      alert(`${proc.toUpperCase()} started!`)
+      alert(t('library.processor.started', { processor: proc.toUpperCase() }))
       // Re-run QC to refresh status
       setTimeout(() => {
         runProcessorQC(qcFile.value)
       }, 2000)
     } else {
-      alert(`Failed: ${result.message || result.error || 'Unknown error'}`)
+      alert(t('library.processor.failed', { message: result.message || result.error || 'Unknown error' }))
     }
   } catch (e: any) {
-    alert(`Error: ${e.message}`)
+    alert(t('library.processor.error', { message: e.message }))
     console.error('[QC] Redo failed:', e)
   }
 }
@@ -1360,6 +1682,12 @@ function closeContextMenu() {
 
 async function ctxRegister(f: any) {
   closeContextMenu()
+  if (registering.value) return
+  confirmTarget.value = { mode: 'register', file: f }
+  confirmDialog.value = true
+}
+
+async function doRegister(f: any) {
   if (registering.value) return
   registering.value = true
   actionMsg.value = 'Registering...'
@@ -1367,11 +1695,40 @@ async function ctxRegister(f: any) {
   if (!filePath) { registering.value = false; actionMsg.value = 'Missing file path'; return }
   try {
     const result: any = await apiCall('register_file', { filePath })
-    if (result.success) {
-      actionMsg.value = `Registered: ${f.file_name}`
-      f.isRegistered = true
-      f.file_uuid = result.file_uuid
-      clearFileStatusCache(result.file_uuid)
+    if (result.success && result.command_id) {
+      actionMsg.value = `Registration queued...`
+      const finalStatus = await pollCommandStatus(result.command_id)
+      const fileUuid = finalStatus.file_uuid
+      if (fileUuid) {
+        actionMsg.value = `Registered: ${f.file_name}`
+        f.isRegistered = true
+        f.file_uuid = fileUuid
+        clearFileStatusCache(fileUuid)
+        await loadFiles()
+        const procs = selectedProcessors()
+        if (procs.length && autoScanAfterRegister.value) {
+          actionMsg.value = 'Scanning...'
+          
+          // Immediately update status to show user the action started
+          f.status = 'scanning'
+          fileStatusCache.value[fileUuid] = 'scanning'
+          
+          const procResult: any = await apiCall('process_file', { fileUuid: fileUuid, processors: procs })
+          if (procResult.success) {
+            actionMsg.value = `Scanning started: ${f.file_name}`
+            syncFileStatus(fileUuid)
+          } else {
+            actionMsg.value = `Scan failed: ${procResult.message}`
+            // Revert status on failure
+            f.status = 'registered'
+            fileStatusCache.value[fileUuid] = 'registered'
+          }
+        } else {
+          actionMsg.value = `Registered: ${f.file_name}`
+        }
+      } else {
+        actionMsg.value = `Registration completed but no file_uuid`
+      }
     } else {
       actionMsg.value = `Registration failed: ${result.message}`
     }
@@ -1379,6 +1736,100 @@ async function ctxRegister(f: any) {
     actionMsg.value = `Registration error: ${e}`
     console.error('[register]', e)
   }
+registering.value = false
+  await loadFiles()
+  setTimeout(() => { actionMsg.value = '' }, 8000)
+}
+
+async function batchRegister() {
+  if (registering.value) return
+  if (selectedUnregisteredFiles.value.length === 0) return
+  
+  const filesToRegister = selectedUnregisteredFiles.value
+  const procs = selectedProcessors()
+  
+  registering.value = true
+  actionMsg.value = `Registering ${filesToRegister.length} files...`
+  
+  let successCount = 0
+  let failCount = 0
+  
+  for (const f of filesToRegister) {
+    const filePath = f.file_path || f.relative_path || f.file_name
+    if (!filePath) {
+      failCount++
+      continue
+    }
+    
+    try {
+      const result: any = await apiCall('register_file', { filePath })
+      if (result.success) {
+        if (result.command_id) {
+          await pollCommandStatus(result.command_id)
+        }
+        
+        const fileUuid = result.file_uuid
+        if (fileUuid && procs.length && autoScanAfterRegister.value) {
+          await apiCall('process_file', { fileUuid, processors: procs })
+        }
+        
+        successCount++
+      } else {
+        failCount++
+      }
+    } catch (e: any) {
+      failCount++
+      console.error('[batchRegister] Failed:', f.file_name, e)
+    }
+  }
+  
+  selectedFiles.value = []
+  registering.value = false
+  
+  if (successCount > 0) {
+    actionMsg.value = `Registered ${successCount} files${failCount > 0 ? `, ${failCount} failed` : ''}`
+  } else {
+    actionMsg.value = `Failed to register all ${failCount} files`
+  }
+  
+  await loadFiles()
+  setTimeout(() => { actionMsg.value = '' }, 8000)
+}
+
+async function quickRegister(f: any) {
+  if (registering.value) return
+  
+  const filePath = f.file_path || f.relative_path || f.file_name
+  if (!filePath) {
+    actionMsg.value = 'Missing file path'
+    setTimeout(() => { actionMsg.value = '' }, 8000)
+    return
+  }
+  
+  registering.value = true
+  actionMsg.value = `Registering ${f.file_name}...`
+  
+  try {
+    const result: any = await apiCall('register_file', { filePath })
+    if (result.success) {
+      if (result.command_id) {
+        await pollCommandStatus(result.command_id)
+      }
+      
+      const fileUuid = result.file_uuid
+      const procs = selectedProcessors()
+      if (fileUuid && procs.length && autoScanAfterRegister.value) {
+        await apiCall('process_file', { fileUuid, processors: procs })
+      }
+      
+      actionMsg.value = `Registered: ${f.file_name}`
+    } else {
+      actionMsg.value = `Failed to register: ${result.message}`
+    }
+  } catch (e: any) {
+    actionMsg.value = `Error: ${e.message || e}`
+  }
+  
   registering.value = false
   await loadFiles()
   setTimeout(() => { actionMsg.value = '' }, 8000)
@@ -1390,21 +1841,105 @@ async function ctxProcess(f: any) {
   if (!f.isRegistered) { actionMsg.value = 'File not registered'; return }
   const procs = selectedProcessors()
   if (!procs.length) { actionMsg.value = 'Please select at least one processor'; return }
+  confirmTarget.value = { mode: 'process', file: f }
+  confirmDialog.value = true
+}
+
+async function doProcess(f: any) {
+  if (processing.value) return
+  if (!f.isRegistered) { actionMsg.value = 'File not registered'; return }
   processing.value = true
-  actionMsg.value = 'Scanning...'
+  const oldUuid = f.file_uuid
+  actionMsg.value = '🔄 Unregistering...'
+  
   try {
-    const result: any = await apiCall('process_file', { fileUuid: f.file_uuid, processors: procs })
-    if (result.success) {
-      actionMsg.value = `Scanning started: ${f.file_name}`
+    // Step 1: Unregister with deleteOutputFiles=true
+    const unregResult: any = await apiCall('unregister_file', { fileUuid: oldUuid, deleteOutputFiles: true })
+    if (!unregResult.success) {
+      actionMsg.value = `Unregister failed: ${unregResult.message}`
+      processing.value = false
+      setTimeout(() => { actionMsg.value = '' }, 8000)
+      return
+    }
+    
+    if (unregResult.command_id) {
+      actionMsg.value = '🔄 Waiting for unregister...'
+      await pollCommandStatus(unregResult.command_id)
+    }
+
+    // Clear all cached state for this file
+    delete fileProgressCache.value[oldUuid]
+    delete processorCountsCache.value[oldUuid]
+
+    actionMsg.value = '⏳ Waiting for unregister to stabilize...'
+    await waitForStable(async () => {
+      await invalidateFiles()
+      await ensureFiles()
+      return !filesCache.value.some((x: any) => x.file_uuid === oldUuid && x.isRegistered)
+    })
+
+    // Step 2: Register again
+    actionMsg.value = '📥 Registering...'
+    const filePath = f.file_path || f.relative_path || f.file_name
+    if (!filePath) { actionMsg.value = 'Missing file path'; processing.value = false; return }
+    const regResult: any = await apiCall('register_file', { filePath })
+    if (!regResult.success) {
+      actionMsg.value = `Register failed: ${regResult.message}`
+      processing.value = false
+      setTimeout(() => { actionMsg.value = '' }, 8000)
+      return
+    }
+    
+    let newUuid = regResult.file_uuid
+    if (regResult.command_id && !newUuid) {
+      actionMsg.value = '📥 Waiting for registration...'
+      const finalStatus = await pollCommandStatus(regResult.command_id)
+      newUuid = finalStatus.file_uuid
+    }
+    
+    if (!newUuid) {
+      actionMsg.value = `Registration completed but no file_uuid`
+      processing.value = false
+      return
+    }
+    
+    f.file_uuid = newUuid
+    f.isRegistered = true
+
+    actionMsg.value = '⏳ Waiting for registration to stabilize...'
+    await waitForStable(async () => {
+      await invalidateFiles()
+      await ensureFiles()
+      const found = filesCache.value.find((x: any) => x.file_uuid === f.file_uuid)
+      return found && found.isRegistered && found.status === 'registered'
+    })
+
+    // Step 3: Process (deep scan)
+    actionMsg.value = '🔍 Scanning...'
+    const procs = selectedProcessors()
+    if (!procs.length) { actionMsg.value = 'Please select at least one processor'; processing.value = false; return }
+    
+    // Immediately update status to show user the action started
+    f.status = 'scanning'
+    fileStatusCache.value[f.file_uuid] = 'scanning'
+    
+    const procResult: any = await apiCall('process_file', { fileUuid: f.file_uuid, processors: procs })
+    if (procResult.success) {
+      actionMsg.value = `Deep scan started: ${f.file_name}`
       syncFileStatus(f.file_uuid)
     } else {
-      actionMsg.value = `Scan failed: ${result.message}`
+      actionMsg.value = `Scan failed: ${procResult.message}`
+      // Revert status on failure
+      f.status = 'registered'
+      fileStatusCache.value[f.file_uuid] = 'registered'
     }
   } catch (e: any) {
-    actionMsg.value = `Scan error: ${e}`
-    console.error('[process]', e)
+    actionMsg.value = `Deep scan error: ${e}`
+    console.error('[deepScan]', e)
   }
   processing.value = false
+  await loadFiles()
+  setTimeout(() => { actionMsg.value = '' }, 8000)
 }
 
 async function waitForStable(condition: () => boolean | Promise<boolean>, timeoutMs = 15000, intervalMs = 500): Promise<boolean> {
@@ -1416,75 +1951,14 @@ async function waitForStable(condition: () => boolean | Promise<boolean>, timeou
   return false
 }
 
-async function cardRescan(f: any) {
-  if (!confirm(`Re-scan "${f.file_name}"?\n\nThis will unregister and re-process the file.`)) return
-  if (reprocessing.value) return
-  if (!f.isRegistered) { actionMsg.value = 'File not registered'; return }
-  reprocessing.value = true
-  const oldUuid = f.file_uuid
-  actionMsg.value = '🔄 Unregistering...'
-  try {
-    const unregResult: any = await apiCall('unregister_file', { fileUuid: oldUuid, deleteOutputFiles: true })
-    if (!unregResult.success) {
-      actionMsg.value = `Unregister failed: ${unregResult.message}`
-      reprocessing.value = false
-      setTimeout(() => { actionMsg.value = '' }, 8000)
-      return
-    }
-
-    delete fileProgressCache.value[oldUuid]
-    delete processorCountsCache.value[oldUuid]
-
-    actionMsg.value = '⏳ Waiting for unregister to stabilize...'
-    await waitForStable(async () => {
-      await invalidateFiles()
-      await ensureFiles()
-      return !filesCache.value.some((x: any) => x.file_uuid === oldUuid && x.isRegistered)
-    })
-
-    actionMsg.value = '📥 Registering...'
-    const filePath = f.file_path || f.relative_path || f.file_name
-    if (!filePath) { actionMsg.value = 'Missing file path'; reprocessing.value = false; return }
-    const regResult: any = await apiCall('register_file', { filePath })
-    if (!regResult.success) {
-      actionMsg.value = `Register failed: ${regResult.message}`
-      reprocessing.value = false
-      setTimeout(() => { actionMsg.value = '' }, 8000)
-      return
-    }
-    f.file_uuid = regResult.file_uuid
-    f.isRegistered = true
-
-    actionMsg.value = '⏳ Waiting for registration to stabilize...'
-    await waitForStable(async () => {
-      await invalidateFiles()
-      await ensureFiles()
-      const found = filesCache.value.find((x: any) => x.file_uuid === f.file_uuid)
-      return found && found.isRegistered && found.status === 'registered'
-    })
-
-    actionMsg.value = '🔍 Scanning...'
-    const procs = selectedProcessors()
-    if (!procs.length) { actionMsg.value = 'Please select at least one processor'; reprocessing.value = false; return }
-    const procResult: any = await apiCall('process_file', { fileUuid: f.file_uuid, processors: procs })
-    if (procResult.success) {
-      actionMsg.value = `Re-scan started: ${f.file_name}`
-      syncFileStatus(f.file_uuid)
-    } else {
-      actionMsg.value = `Scan failed: ${procResult.message}`
-    }
-  } catch (e: any) {
-    actionMsg.value = `Reprocess error: ${e}`
-    console.error('[rescan]', e)
-  }
-  reprocessing.value = false
-  await loadFiles()
-  setTimeout(() => { actionMsg.value = '' }, 8000)
-}
-
 async function ctxReprocess(f: any) {
   closeContextMenu()
-  if (!confirm(`Re-scan "${f.file_name}"?\n\nThis will unregister and re-process the file.`)) return
+  if (reprocessing.value) return
+  confirmTarget.value = { mode: 'reprocess', file: f }
+  confirmDialog.value = true
+}
+
+async function doReprocess(f: any) {
   if (reprocessing.value) return
   if (!f.isRegistered) { actionMsg.value = 'File not registered'; return }
   reprocessing.value = true
@@ -1498,6 +1972,11 @@ async function ctxReprocess(f: any) {
       setTimeout(() => { actionMsg.value = '' }, 8000)
       return
     }
+    
+    if (unregResult.command_id) {
+      actionMsg.value = '🔄 Waiting for unregister...'
+      await pollCommandStatus(unregResult.command_id)
+    }
 
     // Clear all cached state for this file
     delete fileProgressCache.value[oldUuid]
@@ -1520,7 +1999,21 @@ async function ctxReprocess(f: any) {
       setTimeout(() => { actionMsg.value = '' }, 8000)
       return
     }
-    f.file_uuid = regResult.file_uuid
+    
+    let newUuid = regResult.file_uuid
+    if (regResult.command_id && !newUuid) {
+      actionMsg.value = '📥 Waiting for registration...'
+      const finalStatus = await pollCommandStatus(regResult.command_id)
+      newUuid = finalStatus.file_uuid
+    }
+    
+    if (!newUuid) {
+      actionMsg.value = `Registration completed but no file_uuid`
+      reprocessing.value = false
+      return
+    }
+    
+    f.file_uuid = newUuid
     f.isRegistered = true
 
     actionMsg.value = '⏳ Waiting for registration to stabilize...'
@@ -1534,12 +2027,20 @@ async function ctxReprocess(f: any) {
     actionMsg.value = '🔍 Scanning...'
     const procs = selectedProcessors()
     if (!procs.length) { actionMsg.value = 'Please select at least one processor'; reprocessing.value = false; return }
+    
+    // Immediately update status to show user the action started
+    f.status = 'scanning'
+    fileStatusCache.value[f.file_uuid] = 'scanning'
+    
     const procResult: any = await apiCall('process_file', { fileUuid: f.file_uuid, processors: procs })
     if (procResult.success) {
       actionMsg.value = `Re-scan started: ${f.file_name}`
       syncFileStatus(f.file_uuid)
     } else {
       actionMsg.value = `Scan failed: ${procResult.message}`
+      // Revert status on failure
+      f.status = 'registered'
+      fileStatusCache.value[f.file_uuid] = 'registered'
     }
   } catch (e: any) {
     actionMsg.value = `Reprocess error: ${e}`
@@ -1552,17 +2053,21 @@ async function ctxReprocess(f: any) {
 
 async function ctxUnregister(f: any) {
   closeContextMenu()
-  if (!confirm(`Unregister "${f.file_name}"?\n\nThis will remove the file and its output data.`)) return
+  if (!confirm(t('library.confirm.unregister_message', { filename: f.file_name }))) return
   if (unregistering.value) return
   if (!f.isRegistered) { actionMsg.value = 'File not registered'; return }
   unregistering.value = true
   actionMsg.value = 'Removing...'
   try {
-    const result: any = await apiCall('unregister_file', { fileUuid: f.file_uuid, deleteOutputFiles: true, asyncMode: true })
+    const result: any = await apiCall('unregister_file', { fileUuid: f.file_uuid, deleteOutputFiles: true })
     if (result.success) {
-      actionMsg.value = result.job_id 
-        ? `Removing in background...` 
-        : `Removed: ${f.file_name}`
+      if (result.command_id) {
+        actionMsg.value = 'Removing in background...'
+        await pollCommandStatus(result.command_id)
+        actionMsg.value = `Removed: ${f.file_name}`
+      } else {
+        actionMsg.value = `Removed: ${f.file_name}`
+      }
     } else {
       actionMsg.value = `Removal failed: ${result.message}`
     }
@@ -1625,8 +2130,10 @@ function resetFilters() {
 .ms-fm-check-label { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; cursor: pointer; }
 .ms-fm-check-label input { margin: 0; accent-color: var(--text-primary); }
 .ms-fm-status-badge { position: absolute; bottom: 4px; right: 4px; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 600; letter-spacing: 0.3px; }
-.ms-fm-search-wrap { width: 240px; }
-.ms-fm-search { width: 100%; height: 42px; border: 1px solid var(--border-color); border-radius: 14px; padding: 0 14px; font-size: 14px; background: var(--card-background); color: var(--text-primary); outline: none; font-family: inherit; }
+.ms-fm-search-wrap { width: 240px; position: relative; }
+.ms-fm-search { width: 100%; height: 42px; border: 1px solid var(--border-color); border-radius: 14px; padding: 0 32px 0 14px; font-size: 14px; background: var(--card-background); color: var(--text-primary); outline: none; font-family: inherit; }
+.ms-fm-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: none; background: var(--border-light); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-secondary); padding: 0; line-height: 1; }
+.ms-fm-search-clear:hover { background: var(--border-color); color: var(--text-primary); }
 .ms-fm-status { font-size: 13px; color: var(--text-secondary); margin: 0 0 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
 .ms-fm-action-msg { margin-left: 12px; color: var(--success-color); font-weight: 600; }
 .ms-fm-btn-danger { background: var(--danger-color); color: #fff; border-color: var(--danger-color); }
@@ -1657,7 +2164,11 @@ function resetFilters() {
 .ms-ctx-proc-detail { color: var(--text-secondary); }
 .ms-proc-done { color: var(--success-color); }
 .ms-proc-done .ms-proc-count { color: var(--success-color); font-weight: 600; }
+.ms-proc-warning { background: rgba(255, 180, 0, 0.08); border-radius: 4px; padding: 2px 4px; }
+.ms-proc-warning .ms-proc-status { color: #f59e0b; }
+.ms-proc-warning .ms-proc-count { color: #f59e0b; font-weight: 600; }
 .ms-proc-line { display: flex; align-items: center; }
+.ms-face-th-input { margin-left: auto; width: 90px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--text-primary); background: var(--bg-card); }
 .ms-proc-count { margin-left: 4px; font-size: 11px; color: var(--text-secondary); }
 .ms-fm-progress { position: relative; height: 20px; background: var(--border-light); border-radius: 4px; margin-top: 4px; overflow: hidden; }
 .ms-fm-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary-color), #4285f4); border-radius: 4px; transition: width 0.3s; }
@@ -1686,12 +2197,15 @@ function resetFilters() {
 .ms-fm-source { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
 .ms-fm-name { font-size: 12px; color: var(--text-primary); 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-face-btn { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); height: 28px; padding: 0 8px; border-radius: 14px; border: none; background: rgba(17,24,39,.78); color: #fff; cursor: pointer; z-index: 9; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background .15s, transform .15s; }
+.ms-fm-face-btn:hover { background: var(--primary-color); transform: translateY(-50%) scale(1.1); }
+.ms-fm-face-count { font-size: 11px; font-weight: 500; }
 .ms-fm-rescan-btn { display: block; width: 100%; margin-top: 6px; padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--card-background); cursor: pointer; font-size: 11px; font-family: inherit; color: var(--text-primary); text-align: center; transition: border-color .15s, background .15s; }
 .ms-fm-rescan-btn:hover { border-color: var(--primary-color); background: rgba(var(--primary-color-rgb), 0.1); color: var(--primary-color); }
 .ms-fm-edit-input { width: 100%; height: 32px; border: 1px solid var(--border-color); border-radius: 10px; padding: 0 9px; font-size: 12px; color: var(--text-primary); background: var(--card-background); 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-badges { position: absolute; bottom: 8px; left: 8px; 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: var(--primary-color); color: #fff; }
 .ms-badge-off { background: rgba(0,0,0,.48); color: #ccc; }
@@ -1707,14 +2221,22 @@ function resetFilters() {
 
 /* Section titles */
 .ms-fm-section { margin-bottom: 24px; }
-.ms-fm-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; padding-left: 4px; }
+.ms-fm-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; padding-left: 4px; display: flex; align-items: center; gap: 12px; }
+.ms-batch-register-btn { margin-left: auto; padding: 4px 12px; font-size: 12px; font-weight: 600; background: var(--primary-color); color: white; border: none; border-radius: 6px; cursor: pointer; }
+.ms-batch-register-btn:hover { background: var(--primary-hover); }
+.ms-fm-card-checkbox { position: absolute; bottom: 8px; right: 8px; width: 24px; height: 24px; border: 2px solid var(--border-color); border-radius: 4px; background: var(--card-background); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--primary-color); z-index: 10; }
+.ms-fm-card-checkbox:hover { border-color: var(--primary-color); }
+.ms-fm-card-register-btn { position: absolute; bottom: 8px; right: 40px; width: 28px; height: 28px; border: none; border-radius: 4px; background: var(--primary-color); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity .2s, transform .15s; z-index: 10; }
+.ms-fm-card-unregistered:hover .ms-fm-card-register-btn { opacity: 1; }
+.ms-fm-card-register-btn:hover { background: var(--primary-hover); transform: scale(1.1); }
+.ms-select-rect { position: fixed; z-index: 9999; border: 1.5px solid var(--primary-color); background: rgba(var(--primary-color-rgb), 0.15); pointer-events: none; border-radius: 4px; }
 
 /* Unregistered card styles */
 .ms-fm-card-unregistered { opacity: 0.85; }
 .ms-fm-card-unregistered:hover { opacity: 1; }
 .ms-fm-thumb-unreg { filter: grayscale(30%) brightness(0.85); }
 .ms-fm-thumb-unreg-loading { filter: grayscale(50%); opacity: 0.6; }
-.ms-fm-unreg-overlay { position: absolute; bottom: 6px; right: 6px; pointer-events: none; }
+.ms-fm-unreg-overlay { position: absolute; bottom: 36px; left: 8px; pointer-events: none; }
 .ms-fm-unreg-label { font-size: 9px; padding: 2px 6px; border-radius: 3px; background: rgba(0,0,0,.6); color: #fff; font-weight: 600; letter-spacing: 0.3px; }
 
 /* 加载状态 */
@@ -1946,4 +2468,9 @@ function resetFilters() {
   .ms-fm-sort-panel { position: fixed; left: 8px; right: 8px; width: auto; top: 60px; max-height: 60vh; }
   .ms-fm-status { font-size: 12px; }
 }
+
+.ms-fm-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 0; }
+.ms-fm-loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-color); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 0.8s linear infinite; }
+.ms-fm-loading-text { margin-top: 16px; font-size: 14px; color: var(--text-secondary); }
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>
diff --git a/src/views/PeopleView.vue b/src/views/PeopleView.vue
index 66974fd..92a1067 100644
--- a/src/views/PeopleView.vue
+++ b/src/views/PeopleView.vue
@@ -17,7 +17,16 @@
           <div v-else class="spinner-sm"></div>
           {{ clusterRunning ? 'Running...' : 'Face Deduplication' }}
         </button>
+        <button v-if="selectedFileUuid" class="ms-ppl-section-toggle-btn" @click="refresh" :disabled="refreshing" title="Refresh face groups and pending faces">
+          <svg v-if="!refreshing" width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M21 12a9 9 0 11-6.219-8.56" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M21 3v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          <div v-else class="spinner-sm"></div>
+          Refresh
+        </button>
+        <button v-if="selectedFileUuid" class="ms-ppl-section-toggle-btn" :class="{ active: showFaceFilter }" @click="toggleFaceFilter">
+          Face Filter <span class="ms-ppl-toggle-dot" :class="{ on: showFaceFilter }"></span>
+        </button>
         <button v-if="selectedFileUuid && isAdvanced" class="ms-ppl-section-toggle-btn" @click="runDataQC" :disabled="showQCModal" title="Run Data Quality Check">🔍 QC</button>
+        <button class="ms-ppl-close-btn" @click="goToLibrary" title="Back to Library">✕</button>
       </div>
 
       <!-- Undo Banner -->
@@ -40,73 +49,231 @@
         <p>{{ loadingStep || 'Loading...' }}</p>
       </div>
       <template v-else>
+      <!-- Face Filter (sticky glass panel — grids scroll underneath) -->
+      <div v-if="showFaceFilter && selectedFileUuid" class="ms-ppl-section ms-face-filter-section">
+        <div class="ms-ppl-section-toolbar">
+          <div class="ms-ppl-section-title">Face Filter <span class="ms-ff-count" :class="{ cut: ffTraceHidden > 0 }">keep {{ ffTraceVisible }} / {{ ffTraceTotal }} FS (Face Sequence)</span></div>
+          <div class="ms-ff-toolbar-actions">
+            <button class="ms-fm-btn ms-fm-btn-sm" @click="resetFilterToDefault" title="Reset to system default">⟲</button>
+            <button class="ms-fm-btn ms-fm-btn-sm" @click="loadFaces" :disabled="ffLoading">↻</button>
+            <button class="ms-fm-btn ms-fm-btn-sm" @click="showFaceFilter = false" title="Close face filter">✕</button>
+          </div>
+        </div>
+
+        <div v-if="ffLoading" class="loading-state"><div class="spinner-sm"></div></div>
+        <template v-else>
+          <div class="ms-ff-hist-row">
+            <!-- Confidence histogram -->
+            <div class="ms-ff-hist-group">
+              <div class="ms-ff-hist-title">Confidence</div>
+              <div class="ms-ff-hist-wrap" @click="setThreshold('conf', $event)">
+                <div class="ms-ff-hist">
+                  <div v-for="b in ffConfBins" :key="b.key" class="ms-ff-hist-col" :title="`${b.label}: ${b.count} faces`">
+                    <div class="ms-ff-hist-bar" :class="{ cut: b.isCut }" :style="{ height: ffBarH(b) }">
+                      <span v-if="b.count" class="ms-ff-hist-num">{{ b.count }}</span>
+                    </div>
+                  </div>
+                  <div class="ms-ff-rug">
+                    <div v-for="d in confRugDots" :key="d.trace_id" class="ms-ff-rug-tick" :class="{ cut: d.cut }" :style="{ left: d.pct + '%' }" :title="d.value.toFixed(1) + '%'"></div>
+                  </div>
+                  <div v-if="ffFaces.length" class="ms-ff-hist-cursor" :style="{ left: ffConfCursorPct + '%' }" @mousedown.stop="startDrag('conf', $event)">
+                    <span class="ms-ff-cursor-label">{{ ffMinConfPct.toFixed(1) }}%</span>
+                  </div>
+                </div>
+                <div class="ms-ff-hist-axis">
+                  <span class="ms-ff-hist-tick">{{ ffConfMinPct.toFixed(1) }}</span>
+                  <span class="ms-ff-hist-tick ms-ff-hist-tick-end">{{ ffConfMaxPct.toFixed(1) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Face size histogram -->
+            <div class="ms-ff-hist-group">
+              <div class="ms-ff-hist-title">Face Size</div>
+              <div class="ms-ff-hist-wrap" @click="setThreshold('size', $event)">
+                <div class="ms-ff-hist">
+                  <div v-for="b in ffSizeBins" :key="b.key" class="ms-ff-hist-col" :title="`${b.label}: ${b.count} faces`">
+                    <div class="ms-ff-hist-bar" :class="{ cut: b.isCut }" :style="{ height: ffBarH(b) }">
+                      <span v-if="b.count" class="ms-ff-hist-num">{{ b.count }}</span>
+                    </div>
+                  </div>
+                  <div class="ms-ff-rug">
+                    <div v-for="d in sizeRugDots" :key="d.trace_id" class="ms-ff-rug-tick" :class="{ cut: d.cut }" :style="{ left: d.pct + '%' }" :title="Math.round(d.value) + 'px'"></div>
+                  </div>
+                  <div v-if="ffFaces.length" class="ms-ff-hist-cursor" :style="{ left: ffSizeCursorPct + '%' }" @mousedown.stop="startDrag('size', $event)">
+                    <span class="ms-ff-cursor-label">{{ ffMinSizePx }}px</span>
+                  </div>
+                </div>
+                <div class="ms-ff-hist-axis">
+                  <span class="ms-ff-hist-tick">{{ ffSizeMinRounded }}</span>
+                  <span class="ms-ff-hist-tick ms-ff-hist-tick-end">{{ ffSizeMaxRounded }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Face capture quality histogram -->
+            <div class="ms-ff-hist-group">
+              <div class="ms-ff-hist-title">Capture Quality</div>
+              <div class="ms-ff-hist-wrap" @click="setThreshold('quality', $event)">
+                <div class="ms-ff-hist">
+                  <div v-for="b in ffQualityBins" :key="b.key" class="ms-ff-hist-col" :title="`${b.label}: ${b.count} faces`">
+                    <div class="ms-ff-hist-bar" :class="{ cut: b.isCut }" :style="{ height: ffBarH(b) }">
+                      <span v-if="b.count" class="ms-ff-hist-num">{{ b.count }}</span>
+                    </div>
+                  </div>
+                  <div class="ms-ff-rug">
+                    <div v-for="d in qualityRugDots" :key="d.trace_id" class="ms-ff-rug-tick" :class="{ cut: d.cut }" :style="{ left: d.pct + '%' }" :title="d.value.toFixed(1) + '%'"></div>
+                  </div>
+                  <div v-if="ffQualityValues.length" class="ms-ff-hist-cursor" :style="{ left: ffQualityCursorPct + '%' }" @mousedown.stop="startDrag('quality', $event)">
+                    <span class="ms-ff-cursor-label">{{ ffMinQuality.toFixed(1) }}%</span>
+                  </div>
+                </div>
+                <div class="ms-ff-hist-axis">
+                  <span class="ms-ff-hist-tick">{{ ffQualityMinPct.toFixed(1) }}</span>
+                  <span class="ms-ff-hist-tick ms-ff-hist-tick-end">{{ ffQualityMaxPct.toFixed(1) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="ms-ff-stats">
+            <div v-if="!ffFaces.length" class="ms-ff-stats-empty">No faces</div>
+            <template v-else>
+              <div class="ms-ff-stats-bar">
+                <span class="ms-ff-stats-bar-label">FS</span>
+                <span class="ms-ff-stats-bar-val"><b>{{ ffTraceVisible }}</b><span class="ms-ff-stats-bar-sep">/</span>{{ ffTraceHidden }} hidden<span class="ms-ff-stats-bar-sep">/</span>{{ ffTraceTotal }} total</span>
+              </div>
+            </template>
+          </div>
+          
+          <div class="ms-ff-single-frame-section">
+            <div class="ms-ff-section-header">
+              <div class="ms-ff-section-title">Single Frame FS Settings</div>
+              <div class="ms-ff-section-actions">
+                <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-primary" @click="saveSingleFrameSettings" :disabled="!singleFrameSettingsModified || singleFrameSettingsLoading">
+                  {{ singleFrameSettingsLoading ? 'Saving...' : 'Apply Settings' }}
+                </button>
+                <button class="ms-fm-btn ms-fm-btn-sm" @click="resetSingleFrameSettings" :disabled="singleFrameSettingsLoading">Reset to Default</button>
+              </div>
+            </div>
+            
+            <div class="ms-ff-checkbox-grid">
+              <div class="ms-ff-checkbox-item">
+                <label class="ms-ff-checkbox-label">
+                  <input type="checkbox" v-model="singleFrameSettings.single_frame_trace_vlm_enabled" @change="markSingleFrameSettingsModified" />
+                  VLM Processing
+                </label>
+                <div class="ms-ff-hint">Enable VLM for single-frame traces</div>
+              </div>
+              
+              <div class="ms-ff-checkbox-item">
+                <label class="ms-ff-checkbox-label">
+                  <input type="checkbox" v-model="singleFrameSettings.single_frame_trace_group_enabled" @change="markSingleFrameSettingsModified" />
+                  Face Groups
+                </label>
+                <div class="ms-ff-hint">Include single-frame traces in groups</div>
+              </div>
+              
+              <div class="ms-ff-checkbox-item">
+                <label class="ms-ff-checkbox-label">
+                  <input type="checkbox" v-model="singleFrameSettings.single_frame_trace_unassigned_enabled" @change="markSingleFrameSettingsModified" />
+                  Unassigned List
+                </label>
+                <div class="ms-ff-hint">Show single-frame traces in unassigned</div>
+              </div>
+              
+              <div class="ms-ff-checkbox-item">
+                <label class="ms-ff-checkbox-label">
+                  <input type="checkbox" v-model="singleFrameSettings.single_trace_group_filter_enabled" @change="markSingleFrameSettingsModified" />
+                  Single Trace Groups
+                </label>
+                <div class="ms-ff-hint">Filter auto-generated Person_N groups</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+
       <!-- Face Group -->
       <div v-if="showCluster && faceGroups.length" class="ms-ppl-section">
         <div class="ms-ppl-section-toolbar">
-          <div class="ms-ppl-section-title">{{ t('people.section.face_group') }}： <span class="ms-ppl-section-count">({{ faceGroups.length }})</span></div>
+          <div class="ms-ppl-section-title">{{ t('people.section.face_group') }}： <span class="ms-ppl-section-count">({{ groupSearchQuery ? filteredFaceGroups.length : faceGroups.length }})</span></div>
+          <input v-model="groupSearchQuery" class="ms-cluster-search-input ms-group-search-input" placeholder="Search groups..." />
           <button v-if="selectedGroups.length >= 1" class="ms-fm-btn ms-fm-btn-sm ms-ppl-ai-btn" @click="aiSuggest" :disabled="aiSuggestLoading">{{ aiSuggestLoading ? '🤖 ...' : '🤖 Suggest' }}</button>
           <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-primary" @click="batchMergeGroups" :disabled="selectedGroups.length < 2">⇄ Merge ({{ selectedGroups.length }})</button>
-          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-danger" @click="batchDeleteGroups" :disabled="!selectedGroups.length">🗑 Delete ({{ selectedGroups.length }})</button>
+          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-primary" @click="batchDeleteGroups" :disabled="!selectedGroups.length">Unassign ({{ selectedGroups.length }})</button>
+          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-danger" @click="batchDeleteGroupTraces" :disabled="!selectedGroups.length">Delete ({{ selectedGroups.length }})</button>
           <button v-if="selectedGroups.length" class="ms-fm-btn ms-fm-btn-sm" @click="clearSelection">✕ Cancel</button>
         </div>
-        <div class="ms-ppl-face-grid">
-          <div v-for="c in faceGroups" :key="c.group_uuid" class="ms-ppl-face-card ms-ppl-cluster-card" :class="{ 'ms-ppl-face-card-selected': isGroupSelected(c) }" @click="selectCluster(c)" title="View member faces">
+        <div ref="groupGridEl" class="ms-ppl-face-grid" @mousedown="groupsDragMousedown" @click.capture="groupsDragClick">
+          <div v-for="c in filteredFaceGroups" :key="c.group_uuid" class="ms-ppl-face-card ms-ppl-cluster-card" :class="{ 'ms-ppl-face-card-selected': isGroupSelected(c) }" :data-drag-key="c.group_uuid" @click="selectCluster(c)" title="View member faces">
             <div class="ms-ppl-face-img-wrap">
-              <img v-if="c.rep_trace && c.rep_trace.file_uuid" :src="`/api/v1/trace-thumb/${c.rep_trace.file_uuid}/${c.rep_trace.trace_id}`" alt="" loading="lazy">
-              <img v-else-if="selectedFileUuid && c.representative_trace" :src="`/api/v1/trace-thumb/${selectedFileUuid}/${c.representative_trace}`" alt="" loading="lazy">
+              <img v-if="c.rep_trace && faceThumbsCache[thumbTraceKey(c.rep_trace)]" :src="faceThumbsCache[thumbTraceKey(c.rep_trace)]" alt="" loading="lazy">
+              <div v-else-if="c.rep_trace && loadingFaceThumbs.has(thumbTraceKey(c.rep_trace))" class="ms-ppl-face-img-loading"><span class="spinner-sm"></span></div>
               <svg v-else class="ms-silhouette" viewBox="0 0 120 120" fill="none">
                 <circle cx="60" cy="45" r="25" fill="var(--border-color)"/>
                 <ellipse cx="60" cy="105" rx="40" ry="25" fill="var(--border-color)"/>
               </svg>
-              <span class="ms-ppl-cluster-name-overlay">{{ c.name }}</span>
+              <span class="ms-ppl-cluster-name-overlay"><template v-for="(seg, i) in highlightSegments(c.name, groupSearchQuery)" :key="i"><span :class="{ 'ms-search-hit': seg.hit }">{{ seg.text }}</span></template></span>
               <div class="ms-ppl-card-checkbox" @click.stop="toggleGroupSelection(c)">
                 <span v-if="isGroupSelected(c)">✓</span>
               </div>
             </div>
-            <span class="ms-ppl-face-name">{{ c.trace_count }} FS</span>
+            <span class="ms-ppl-face-name">{{ ffFilterActive ? c.visible_count : c.trace_count }} FS<span v-if="ffFilterActive && c.visible_count !== c.trace_count" class="ms-ff-group-partial">{{ c.trace_count }}</span></span>
           </div>
+          <div v-if="groupSearchQuery && filteredFaceGroups.length === 0" class="ms-ppl-empty-groups">No matching groups</div>
+          <div v-else-if="ffFilterActive && faceGroups.length === 0" class="ms-ppl-empty-groups">All groups filtered out — lower min confidence / min face size</div>
+          <div v-if="groupsDragBox" class="ms-select-rect" :style="dragSelectRectStyle(groupsDragBox)"></div>
         </div>
       </div>
 
 <!-- Pending Faces -->
-      <div v-if="showUface && (unassignedTraces.length || loadingStep)" class="ms-ppl-section">
+      <div v-if="showUface && (unassignedTraces.length || searchFacesResults.length || loadingStep)" class="ms-ppl-section">
         <div class="ms-ppl-section-toolbar">
-          <div class="ms-ppl-section-title">{{ t('people.section.pending_faces') }}： <span class="ms-ppl-section-count">({{ unassignedTracesTotal || unassignedTraces.length }})</span></div>
+          <div class="ms-ppl-section-title">{{ t('people.section.pending_faces') }}： <span class="ms-ppl-section-count">({{ ffFilterActive ? visibleUnassignedCount + ' / ' : '' }}{{ facesPagingActive ? searchFacesTotal : (unassignedTracesTotal || unassignedTraces.length) }})</span></div>
+          <input v-model="facesSearchQuery" class="ms-cluster-search-input ms-faces-search-input" placeholder="Search name or F range..." />
+          <span v-if="facesPagingActive && searchFacesLoading" class="ms-ppl-loading-inline">Searching…</span>
           <span v-if="loadingStep" class="ms-ppl-loading-inline">{{ loadingStep }}</span>
-          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-primary" @click="batchDeleteFaces" :disabled="!selectedFaces.length">🗑 Delete ({{ selectedFaces.length }})</button>
-          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-blue" @click="batchMoveFaces" :disabled="!selectedFaces.length">→ Move ({{ selectedFaces.length }})</button>
+          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-primary" @click="batchMoveFaces" :disabled="!selectedFaces.length">→ Move ({{ selectedFaces.length }})</button>
+          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-danger" @click="batchDeleteFaces" :disabled="!selectedFaces.length">🗑 Delete ({{ selectedFaces.length }})</button>
           <button v-if="selectedFaces.length" class="ms-fm-btn ms-fm-btn-sm" @click="clearSelection">✕ Cancel</button>
         </div>
-        <div v-if="unassignedTraces.length" class="ms-ppl-face-grid ms-uface-grid">
-          <div v-for="t in unassignedTraces" :key="`${t.trace_id}-${t.file_uuid}`" class="ms-ppl-face-card" :class="{ 'ms-ppl-face-card-selected': isFaceSelected(t) }" :data-file-uuid="t.file_uuid" @click="openFaceDetailFromTrace(t)">
+        <div v-if="unassignedTraces.length" ref="faceGridEl" class="ms-ppl-face-grid ms-uface-grid" @mousedown="facesDragMousedown" @click.capture="facesDragClick">
+          <div v-for="trace in filteredUnassignedTraces" :key="`${trace.trace_id}-${trace.file_uuid}`" class="ms-ppl-face-card" :class="{ 'ms-ppl-face-card-selected': isFaceSelected(trace) }" :data-drag-key="`${trace.file_uuid}:${trace.trace_id}`" @click="openFaceDetailFromTrace(trace)" v-observe="() => loadTraceThumb(trace)">
             <div class="ms-ppl-face-img-wrap">
-              <template v-if="activeFrameCard === `${t.trace_id}-${t.file_uuid}`">
-                <img :src="`/api/v1/media/frame?file_uuid=${t.file_uuid}&frame=${t.best_face_frame ?? t.start_frame ?? 0}`" alt="Key Frame" class="ms-ppl-frame-img">
-                <div v-if="activeFrameMode === 'bbox' && t.best_face_bbox" class="ms-ppl-bbox-overlay" :style="{
-                  left: (t.best_face_bbox.x / (fileInfoCache[t.file_uuid]?.width || 1) * 100) + '%',
-                  top: (t.best_face_bbox.y / (fileInfoCache[t.file_uuid]?.height || 1) * 100) + '%',
-                  width: (t.best_face_bbox.width / (fileInfoCache[t.file_uuid]?.width || 1) * 100) + '%',
-                  height: (t.best_face_bbox.height / (fileInfoCache[t.file_uuid]?.height || 1) * 100) + '%'
+              <template v-if="activeFrameCard === `${trace.trace_id}-${trace.file_uuid}`">
+                <img :src="`/api/v1/media/frame?file_uuid=${trace.file_uuid}&frame=${trace.best_face_frame ?? trace.start_frame ?? 0}`" alt="Key Frame" class="ms-ppl-frame-img">
+                <div v-if="activeFrameMode === 'bbox' && trace.best_face_bbox" class="ms-ppl-bbox-overlay" :style="{
+                  left: (trace.best_face_bbox.x / (fileInfoCache[trace.file_uuid]?.width || 1) * 100) + '%',
+                  top: (trace.best_face_bbox.y / (fileInfoCache[trace.file_uuid]?.height || 1) * 100) + '%',
+                  width: (trace.best_face_bbox.width / (fileInfoCache[trace.file_uuid]?.width || 1) * 100) + '%',
+                  height: (trace.best_face_bbox.height / (fileInfoCache[trace.file_uuid]?.height || 1) * 100) + '%'
                 }"></div>
               </template>
               <template v-else>
-                <img :src="`/api/v1/trace-thumb/${t.file_uuid}/${t.trace_id}`" alt="" loading="lazy">
+                <img v-if="faceThumbsCache[thumbTraceKey(trace)]" :src="faceThumbsCache[thumbTraceKey(trace)]" alt="">
+                <div v-else-if="loadingFaceThumbs.has(thumbTraceKey(trace))" class="face-placeholder"><span class="spinner-sm"></span></div>
+                <div v-else class="face-placeholder">{{ trace.frame_count }}f</div>
               </template>
-              <div class="ms-ppl-card-checkbox" @click.stop="toggleFaceSelection(t)">
-                <span v-if="isFaceSelected(t)">✓</span>
+              <div class="ms-ppl-card-checkbox" @click.stop="toggleFaceSelection(trace)">
+                <span v-if="isFaceSelected(trace)">✓</span>
               </div>
             </div>
-            <span class="ms-ppl-face-name">FS#{{ t.trace_id }} · {{ t.frame_count }} frames</span>
-            <span class="ms-ppl-trace-group-label" :title="traceGroupMap[String(t.trace_id)] || getFileName(t.file_uuid)">{{ traceGroupMap[String(t.trace_id)] || getFileName(t.file_uuid) }}</span>
+            <span class="ms-ppl-face-name">FS#<template v-for="(seg, i) in highlightSegments(String(trace.trace_id), facesSearchQuery)" :key="i"><span :class="{ 'ms-search-hit': seg.hit }">{{ seg.text }}</span></template> · {{ trace.frame_count }} frames</span>
+            <span class="ms-ppl-trace-group-label" :title="traceLabel(trace)"><template v-for="(seg, i) in highlightSegments(traceLabel(trace), facesSearchQuery)" :key="i"><span :class="{ 'ms-search-hit': seg.hit }">{{ seg.text }}</span></template></span>
             <div class="ms-ppl-face-range">
-              <span class="ms-ppl-face-frame">F#{{ t.start_frame }}–F#{{ t.end_frame }}</span>
+              <span class="ms-ppl-face-frame" :class="{ 'ms-search-hit': isFaceFRangeHit(trace) }"><template v-for="(seg, i) in highlightSegments('F#' + trace.start_frame + '–F#' + trace.end_frame, facesSearchQuery)" :key="i"><span :class="{ 'ms-search-hit': seg.hit }">{{ seg.text }}</span></template></span>
             </div>
           </div>
+          <div v-if="facesSearchQuery && filteredUnassignedTraces.length === 0" class="ms-ppl-empty-groups">No matching faces</div>
+          <div v-else-if="ffFilterActive && filteredUnassignedTraces.length === 0" class="ms-ppl-empty-groups">All faces filtered out — lower min confidence / min face size</div>
+          <div v-if="facesDragBox" class="ms-select-rect" :style="dragSelectRectStyle(facesDragBox)"></div>
         </div>
-        <div v-if="selectedFileUuid && unassignedTracesTotal > 20" class="ms-ppl-pagination">
+        <div v-if="selectedFileUuid && (facesPagingActive ? searchFacesTotal > 20 : unassignedTracesTotal > 20)" class="ms-ppl-pagination">
           <button class="ms-fm-icon-btn" :disabled="unassignedTracesPage <= 1" @click="goToUfacePage(unassignedTracesPage - 1)">‹</button>
-          <span class="ms-ppl-page-info">Page {{ unassignedTracesPage }} / {{ unassignedTotalPages }} ({{ unassignedTracesTotal }} total)</span>
-          <button class="ms-fm-icon-btn" :disabled="unassignedTracesPage >= unassignedTotalPages" @click="goToUfacePage(unassignedTracesPage + 1)">›</button>
+          <span class="ms-ppl-page-info">Page {{ unassignedTracesPage }} / {{ facesPagingActive ? facesTotalPages : unassignedTotalPages }} ({{ facesPagingActive ? searchFacesTotal : unassignedTracesTotal }} total)</span>
+          <span v-if="searchFacesLoading" class="ms-ppl-loading-inline">Loading...</span>
+          <button class="ms-fm-icon-btn" :disabled="unassignedTracesPage >= (facesPagingActive ? facesTotalPages : unassignedTotalPages)" @click="goToUfacePage(unassignedTracesPage + 1)">›</button>
         </div>
       </div>
     </template>
@@ -129,11 +296,31 @@
     <!-- Assign modal -->
     <!-- Face detail modal -->
     <div v-if="faceDetailModal.show" class="ms-modal-overlay show" :style="{ zIndex: faceDetailZIndex }" @click.self="faceDetailModal.show = false">
+      <!-- Side navigation arrows -->
+      <button v-if="canFaceDetailPrev" class="ms-fs-nav-arrow ms-fs-nav-prev" @click="goFaceDetailPrev" title="Previous FS (←)">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="15 18 9 12 15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
+      <button v-if="canFaceDetailNext" class="ms-fs-nav-arrow ms-fs-nav-next" @click="goFaceDetailNext" title="Next FS (→)">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><polyline points="9 18 15 12 9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+      </button>
       <div class="ms-modal ms-modal-face-detail">
-        <button class="ms-fm-icon-btn close-btn" @click="faceDetailModal.show = false">×</button>
+        <button class="ms-fm-icon-btn close-btn" @click="faceDetailModal.show = false" title="Close (Esc)">×</button>
+        <button class="ms-fm-icon-btn fs-delete-btn" @click="deleteCurrentFace" title="Delete this FS">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+        </button>
+        <div v-if="keyFaceCtxMenu.show" class="ms-ctx-menu" :style="{ left: keyFaceCtxMenu.x + 'px', top: keyFaceCtxMenu.y + 'px', display: 'block' }">
+          <div class="ms-ctx-item" @click="regenerateFaceThumbnail">🔄 Regenerate Thumbnail</div>
+          <div class="ms-ctx-item" @click="openTraceProfileJson">📄 Open trace_profile.json</div>
+          <div class="ms-ctx-item" @click="showFullFace = true">🔍 Full Screen</div>
+        </div>
+        <div v-if="frameCtxMenu.show" class="ms-ctx-menu" :style="{ left: frameCtxMenu.x + 'px', top: frameCtxMenu.y + 'px', display: 'block' }">
+          <div class="ms-ctx-item" @click="openTraceProfileJson">📄 Open trace_profile.json</div>
+          <div class="ms-ctx-item" @click="showFullFrame = true">🔍 Full Screen</div>
+        </div>
         <div class="ms-face-detail-header">
-          <div class="ms-face-detail-thumb" @click="showEnlargedFace = true" style="cursor:pointer;">
-            <img v-if="candidateThumbs[faceDetailModal.candidate?.id]" :src="candidateThumbs[faceDetailModal.candidate?.id]" alt="">
+          <div class="ms-face-detail-thumb" @click="showEnlargedFace = true" @contextmenu.prevent="showKeyFaceCtxMenu" style="cursor:pointer;">
+            <img v-if="candidateThumbs[thumbTraceKey(faceDetailModal.candidate)]" :src="candidateThumbs[thumbTraceKey(faceDetailModal.candidate)]" alt="">
+            <div v-else-if="faceDetailModal.candidate && loadingFaceThumbs.has(thumbTraceKey(faceDetailModal.candidate))" class="face-placeholder"><span class="spinner-sm"></span></div>
             <div v-else class="face-placeholder">{{ Math.round(faceDetailModal.candidate?.confidence * 100 || 0) }}%</div>
           </div>
           <div class="ms-face-detail-info">
@@ -141,16 +328,15 @@
               <span class="ms-face-trace-id">{{ faceDetailModal.candidate?.file_uuid }}:FS#{{ faceDetailModal.candidate?.trace_id }}</span>
             </div>
             <div class="ms-face-detail-row">
-              <span class="ms-face-detail-label">{{ t('people.face_detail.frame_number') }}</span>
-              <span class="ms-face-detail-value">#{{ faceDetailModal.candidate?.frame_number }}</span>
+              <span class="ms-face-detail-value">F{{ faceDetailModal.candidate?.start_frame }}–[F{{ faceDetailModal.candidate?.frame_number }}]–F{{ faceDetailModal.candidate?.end_frame }} {{ faceDetailModal.candidate?.frame_count }} Frames</span>
             </div>
             <div class="ms-face-detail-row">
               <span class="ms-face-detail-label">{{ t('people.face_detail.confidence') }}</span>
-              <span class="ms-face-detail-value">{{ Math.round(faceDetailModal.candidate?.confidence * 100) }}%</span>
+              <span class="ms-face-detail-value">{{ (faceDetailModal.candidate?.confidence * 100).toFixed(1) }}%</span>
             </div>
             <div class="ms-face-detail-row">
-              <span class="ms-face-detail-label">{{ t('people.face_detail.face_id') }}</span>
-              <span class="ms-face-detail-value">{{ faceDetailModal.candidate?.face_id || faceDetailModal.candidate?.id }}</span>
+              <span class="ms-face-detail-label">Capture Quality:</span>
+              <span class="ms-face-detail-value">{{ faceDetailCaptureQuality }}</span>
             </div>
           </div>
         </div>
@@ -162,28 +348,27 @@
             {{ t('people.face_detail.play_segment') }}
           </button>
         </div>
-        <div v-if="faceDetailPose" class="ms-face-detail-pose">
+        <div v-if="faceDetailFrameUrl" class="ms-face-detail-pose">
           <div class="ms-pose-controls">
             <label class="ms-pose-toggle"><input type="checkbox" v-model="showBboxOverlay"> BBox</label>
-            <label class="ms-pose-toggle"><input type="checkbox" v-model="showPoseOverlay"> Pose</label>
+            <label class="ms-pose-toggle"><input type="checkbox" v-model="showLandmarkOverlay"> Landmark</label>
+            <label class="ms-pose-toggle"><input type="checkbox" v-model="showOthersOverlay"> Others</label>
             <span class="ms-pose-frame-no">Frame: {{ faceDetailModal.candidate?.frame_number || '—' }}</span>
           </div>
           <div v-if="faceDetailModal.candidate?.bbox" class="ms-pose-bbox-info">
-            BBox: ({{ Math.round(faceDetailModal.candidate.bbox.x) }}, {{ Math.round(faceDetailModal.candidate.bbox.y) }}) {{ Math.round(faceDetailModal.candidate.bbox.width) }}x{{ Math.round(faceDetailModal.candidate.bbox.height) }}
+            <span class="ms-lm-score">bbox: ({{ Math.round(faceDetailModal.candidate.bbox.x) }}, {{ Math.round(faceDetailModal.candidate.bbox.y) }}) size: {{ Math.round(faceDetailModal.candidate.bbox.width) }}x{{ Math.round(faceDetailModal.candidate.bbox.height) }}</span>
           </div>
-          <div class="ms-pose-frame-container" ref="poseFrameContainer">
+          <div class="ms-pose-frame-container" ref="poseFrameContainer" @contextmenu.prevent="showFrameCtxMenu">
             <img v-if="faceDetailFrameUrl" :src="faceDetailFrameUrl" class="ms-pose-frame-img" @load="onFrameLoad" alt="Frame">
             <canvas ref="poseCanvas" class="ms-pose-overlay-canvas"></canvas>
           </div>
         </div>
         <hr class="ms-face-detail-divider">
         <div class="ms-face-detail-move-group">
-          <div class="ms-face-detail-move-title">Current Group</div>
-          <div class="ms-face-detail-current-group" :title="traceGroupMap[String(faceDetailModal.candidate?.trace_id)] || getFileName(faceDetailModal.candidate?.file_uuid) || ''">{{ traceGroupMap[String(faceDetailModal.candidate?.trace_id)] || getFileName(faceDetailModal.candidate?.file_uuid) || '—' }}</div>
-          <div class="ms-face-detail-move-title" style="margin-top: 12px;">Move to Group</div>
+          <div class="ms-face-detail-move-title">Current Group: <span class="ms-face-detail-current-group" :title="traceGroupMap[String(faceDetailModal.candidate?.trace_id)] || t('people.section.unassigned')">{{ traceGroupMap[String(faceDetailModal.candidate?.trace_id)] || t('people.section.unassigned') }}</span></div>
           <div class="ms-face-detail-move-row">
             <select v-model="faceMoveTarget" class="ms-ppl-file-select">
-              <option value="">— Select group —</option>
+              <option value="">Move to Group — Select group —</option>
               <option v-for="g in otherClusters" :key="g.cluster_id" :value="String(g.cluster_id)">{{ g.name }} ({{ g.trace_count }} Faces)</option>
               <option value="__new__">+ New Group...</option>
             </select>
@@ -195,6 +380,18 @@
           </div>
         </div>
         <div class="ms-face-detail-footer">
+          <div class="ms-fs-nav-bar">
+            <button class="ms-fm-icon-btn" :disabled="!canFaceDetailPrev" @click="goFaceDetailPrev" title="Previous FS">‹</button>
+            <div class="ms-fs-nav-info">
+              <span class="ms-fs-nav-counter">{{ faceDetailNavTotal ? (faceDetailNavIndex + 1) + ' / ' + faceDetailNavTotal : '—' }}</span>
+              <span v-if="faceDetailNavLabel" class="ms-fs-nav-label">{{ faceDetailNavLabel }}</span>
+            </div>
+            <button class="ms-fm-icon-btn" :disabled="!canFaceDetailNext" @click="goFaceDetailNext" title="Next FS">›</button>
+          </div>
+          <button class="ms-fm-btn ms-fm-btn-sm ms-fm-btn-danger" @click="deleteCurrentFace" title="Delete this FS">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style="margin-right:4px;"><polyline points="3 6 5 6 21 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            Del
+          </button>
           <button class="ms-fm-btn" @click="faceDetailModal.show = false">{{ t('people.face_detail.close') }}</button>
         </div>
       </div>
@@ -204,7 +401,48 @@
     <div v-if="showEnlargedFace && faceDetailModal.candidate" class="ms-modal-overlay show" style="z-index:10000;" @click.self="showEnlargedFace = false">
       <div class="ms-enlarged-face-modal">
         <button class="ms-modal-video-close" @click="showEnlargedFace = false">&times;</button>
-        <img v-if="candidateThumbs[faceDetailModal.candidate.id]" :src="candidateThumbs[faceDetailModal.candidate.id]" alt="" style="max-width:90vw;max-height:90vh;object-fit:contain;border-radius:12px;">
+        <img v-if="candidateThumbs[thumbTraceKey(faceDetailModal.candidate)]" :src="candidateThumbs[thumbTraceKey(faceDetailModal.candidate)]" alt="" style="max-width:90vw;max-height:90vh;object-fit:contain;border-radius:12px;">
+      </div>
+    </div>
+
+    <!-- Full Screen Key Face -->
+    <div v-if="showFullFace && faceDetailModal.candidate" class="ms-modal-overlay show" style="z-index:11000;" @click.self="showFullFace = false">
+      <div class="ms-full-face-modal">
+        <button class="ms-modal-video-close" @click="showFullFace = false">&times;</button>
+        <img v-if="candidateThumbs[thumbTraceKey(faceDetailModal.candidate)]" :src="candidateThumbs[thumbTraceKey(faceDetailModal.candidate)]" alt="" style="max-width:95vw;max-height:95vh;object-fit:contain;">
+      </div>
+    </div>
+
+    <!-- Full Screen Frame -->
+    <div v-if="showFullFrame && faceDetailFrameUrl" class="ms-modal-overlay show" style="z-index:11000;" @click.self="showFullFrame = false">
+      <div class="ms-full-face-modal" @mouseenter="fullControlsVisible = true" @mouseleave="fullControlsVisible = false">
+        <transition name="fade-controls">
+          <button v-show="fullControlsVisible" class="ms-modal-video-close" @click="showFullFrame = false">&times;</button>
+        </transition>
+        <transition name="fade-controls">
+          <div v-show="fullControlsVisible" class="ms-full-frame-controls">
+            <label class="ms-pose-toggle"><input type="checkbox" v-model="showBboxOverlay"> BBox</label>
+            <label class="ms-pose-toggle"><input type="checkbox" v-model="showLandmarkOverlay"> Landmark</label>
+            <label class="ms-pose-toggle"><input type="checkbox" v-model="showOthersOverlay"> Others</label>
+          </div>
+        </transition>
+        <div class="ms-full-frame-container">
+          <img :src="faceDetailFrameUrl" alt="Frame" class="ms-full-frame-img" @load="onFullFrameLoad">
+          <canvas ref="fullFrameCanvas" class="ms-full-frame-canvas"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <!-- Trace Profile JSON Viewer Modal -->
+    <div v-if="traceProfileJsonDialog" class="ms-modal-overlay show" style="z-index:12000;" @click.self="traceProfileJsonDialog = false">
+      <div class="ms-modal-box ms-modal-wide">
+        <div class="ms-modal-header">
+          <span class="ms-modal-title">{{ traceProfileJsonTitle }}</span>
+          <button class="ms-modal-close" @click="traceProfileJsonDialog = false">✕</button>
+        </div>
+        <div class="ms-modal-body">
+          <pre class="ms-json-view">{{ traceProfileJsonContent }}</pre>
+        </div>
       </div>
     </div>
 
@@ -218,7 +456,7 @@
           <div class="ms-cluster-title-wrap">
             <input v-if="clusterEditMode" v-model="clusterEditName" class="ms-cluster-edit-input" @keyup.enter="saveClusterEdit" @keyup.escape="cancelClusterEdit" ref="clusterEditInput" />
             <div v-else class="ms-cluster-title" @click="startClusterEdit">
-              {{ clusterDetailModal.cluster?.name }} ({{ clusterDetailModal.cluster?.trace_count }} Faces)
+              {{ clusterDetailCluster?.name }} ({{ clusterDetailCluster?.visible_count }} FS)<span v-if="ffFilterActive && clusterDetailCluster && clusterDetailCluster.visible_count !== clusterDetailCluster.trace_count" class="ms-ff-group-partial">{{ clusterDetailCluster.trace_count }}</span>
             </div>
             <button class="ms-fm-btn ms-fm-btn-primary ms-cluster-play-btn" @click="playClusterVideo" :disabled="!clusterDetailCluster?.rep_trace?.file_uuid">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="margin-right:6px;">
@@ -250,16 +488,17 @@
           <button class="ms-ppl-strip-arrow" :disabled="clusterStripPage === 1" @click="clusterStripPage--">‹</button>
           <div class="ms-ppl-face-strip">
             <div v-if="loadingClusterTraces" style="padding:10px;color:#999;font-size:12px;">Loading...</div>
-            <div v-else-if="filteredClusterTraces.length === 0" style="padding:10px;color:#999;font-size:12px;">No faces</div>
-            <div v-for="t in paginatedClusterTraces" :key="t.trace_id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: clusterDetailModal.selectedTrace?.trace_id === t.trace_id || isClusterTraceSelected(t) }" @click="clusterBatchMode ? toggleClusterTraceSelection(t) : openFaceDetailFromTrace(t)">
-              <div v-if="clusterBatchMode" class="ms-ppl-card-checkbox" @click.stop="toggleClusterTraceSelection(t)">
-                <span v-if="isClusterTraceSelected(t)">✓</span>
+            <div v-else-if="filteredClusterTraces.length === 0" style="padding:10px;color:#999;font-size:12px;">{{ ffFilterActive ? 'All faces filtered out — lower min confidence / min face size' : 'No faces' }}</div>
+            <div v-for="trace in paginatedClusterTraces" :key="trace.trace_id" class="ms-ppl-strip-face ms-ppl-strip-face-clickable" :class="{ selected: clusterDetailModal.selectedTrace?.trace_id === trace.trace_id || isClusterTraceSelected(trace) }" @click="clusterBatchMode ? toggleClusterTraceSelection(trace) : openFaceDetailFromTrace(trace)" v-observe="() => loadTraceThumb(trace)">
+              <div v-if="clusterBatchMode" class="ms-ppl-card-checkbox" @click.stop="toggleClusterTraceSelection(trace)">
+                <span v-if="isClusterTraceSelected(trace)">✓</span>
               </div>
               <div class="ms-ppl-strip-face-img">
-                <img v-if="faceThumbsCache[thumbTraceKey(t)]" :src="faceThumbsCache[thumbTraceKey(t)]" alt="" loading="lazy">
-                <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;">FS#{{ t.trace_id }}</div>
+                <img v-if="faceThumbsCache[thumbTraceKey(trace)]" :src="faceThumbsCache[thumbTraceKey(trace)]" alt="" loading="lazy">
+                <div v-else-if="loadingFaceThumbs.has(thumbTraceKey(trace))" class="spinner-sm"></div>
+                <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;">FS#{{ trace.trace_id }}</div>
               </div>
-              <div class="ms-ppl-strip-trace-label">FS#{{ t.trace_id }}<span class="ms-ppl-strip-group-name">{{ clusterDetailModal.cluster?.name }}</span></div>
+              <div class="ms-ppl-strip-trace-label">FS#{{ trace.trace_id }}<span class="ms-ppl-strip-group-name">{{ clusterDetailModal.cluster?.name }}</span></div>
             </div>
           </div>
           <button class="ms-ppl-strip-arrow" :disabled="clusterStripPage >= clusterStripTotalPages" @click="clusterStripPage++">›</button>
@@ -272,7 +511,7 @@
       </div>
     </div>
 
-    <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-frame="currentVideo.startFrame" :end-frame="currentVideo.endFrame" :all-traces="clusterVideoTraces" :merged-segments="clusterVideoSegments" :title="currentVideo.title" :show-face="true" :show-asrx="false" :show-ocr="false" :show-pose="false" @close="playing = false; clusterVideoTraces = []; clusterVideoSegments = []" />
+    <VideoPlayer v-if="playing" :file-uuid="currentVideo.fileUuid" :start-frame="currentVideo.startFrame" :end-frame="currentVideo.endFrame" :all-traces="clusterVideoTraces" :merged-segments="clusterVideoSegments" :key-frame="currentVideo.keyFrame" :title="currentVideo.title" :show-face="true" :show-asrx="false" :show-ocr="false" :show-pose="false" @close="playing = false; clusterVideoTraces = []; clusterVideoSegments = []" />
 
     <!-- Merge Target Selection Modal -->
     <div v-if="showMergeTargetModal" class="ms-modal-overlay show" @click.self="showMergeTargetModal = false">
@@ -283,8 +522,7 @@
         <div class="ms-merge-grid">
           <div v-for="c in mergeCandidateGroups" :key="c.group_uuid" class="ms-merge-face-card" @click="executeMerge(c.group_uuid)">
             <div class="ms-merge-face-img">
-              <img v-if="c.rep_trace && c.rep_trace.file_uuid" :src="`/api/v1/trace-thumb/${c.rep_trace.file_uuid}/${c.rep_trace.trace_id}`" alt="" loading="lazy">
-              <img v-else-if="selectedFileUuid && c.representative_trace" :src="`/api/v1/trace-thumb/${selectedFileUuid}/${c.representative_trace}`" alt="" loading="lazy">
+              <img v-if="c.rep_trace && faceThumbsCache[thumbTraceKey(c.rep_trace)]" :src="faceThumbsCache[thumbTraceKey(c.rep_trace)]" alt="" loading="lazy">
               <svg v-else viewBox="0 0 120 120" fill="none" style="width:100%;height:100%;">
                 <circle cx="60" cy="45" r="25" fill="var(--border-color)"/>
                 <ellipse cx="60" cy="105" rx="40" ry="25" fill="var(--border-color)"/>
@@ -314,8 +552,7 @@
         <div class="ms-merge-grid">
           <div v-for="c in faceGroups" :key="c.group_uuid" class="ms-merge-face-card" @click="moveToGroup(c)">
             <div class="ms-merge-face-img">
-              <img v-if="c.rep_trace && c.rep_trace.file_uuid" :src="`/api/v1/trace-thumb/${c.rep_trace.file_uuid}/${c.rep_trace.trace_id}`" alt="" loading="lazy">
-              <img v-else-if="selectedFileUuid && c.representative_trace" :src="`/api/v1/trace-thumb/${selectedFileUuid}/${c.representative_trace}`" alt="" loading="lazy">
+              <img v-if="c.rep_trace && faceThumbsCache[thumbTraceKey(c.rep_trace)]" :src="faceThumbsCache[thumbTraceKey(c.rep_trace)]" alt="" loading="lazy">
               <svg v-else viewBox="0 0 120 120" fill="none" style="width:100%;height:100%;">
                 <circle cx="60" cy="45" r="25" fill="var(--border-color)"/>
                 <ellipse cx="60" cy="105" rx="40" ry="25" fill="var(--border-color)"/>
@@ -328,6 +565,46 @@
       </div>
     </div>
 
+    <!-- Delete Faces Confirm Modal -->
+    <div v-if="showDeleteFacesModal" class="ms-modal-overlay show" :style="{ zIndex: getNextZIndex() }" @click.self="showDeleteFacesModal = false">
+      <div class="ms-modal ms-modal-delete-faces">
+        <button class="ms-fm-icon-btn close-btn" @click="showDeleteFacesModal = false">×</button>
+        <h2 class="ms-ppl-section-title">Delete {{ pendingDeleteFaces.length }} FS?</h2>
+        <p class="ms-delete-faces-warning">
+          ⚠️ This will <strong>permanently delete</strong> {{ pendingDeleteFaces.length }} unassigned FS (face traces).
+          The face data, profile and image files will be removed. This action <strong>cannot be undone</strong>.
+        </p>
+        <div class="ms-delete-faces-confirm">
+          <label class="ms-delete-faces-label">Type <code>DELETE</code> to confirm:</label>
+          <input v-model="deleteConfirmInput" class="ms-ppl-edit-input" placeholder="DELETE" autocomplete="off" @keyup.enter="confirmDeleteFaces" />
+        </div>
+        <div class="ms-delete-faces-actions">
+          <button class="ms-fm-btn" @click="showDeleteFacesModal = false">Cancel</button>
+          <button class="ms-fm-btn ms-fm-btn-danger" :disabled="deleteConfirmInput.trim().toUpperCase() !== 'DELETE'" @click="confirmDeleteFaces">Permanently Delete</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Group Faces Confirm Modal -->
+    <div v-if="showDeleteGroupModal" class="ms-modal-overlay show" :style="{ zIndex: getNextZIndex() }" @click.self="showDeleteGroupModal = false">
+      <div class="ms-modal ms-modal-delete-faces">
+        <button class="ms-fm-icon-btn close-btn" @click="showDeleteGroupModal = false">×</button>
+        <h2 class="ms-ppl-section-title">Delete {{ pendingDeleteGroupFaces.length }} FS from selected group(s)?</h2>
+        <p class="ms-delete-faces-warning">
+          ⚠️ This will <strong>permanently delete</strong> {{ pendingDeleteGroupFaces.length }} face trace(s) across {{ selectedGroups.length }} group(s).
+          All face data, profiles and image files will be removed. This action <strong>cannot be undone</strong>.
+        </p>
+        <div class="ms-delete-faces-confirm">
+          <label class="ms-delete-faces-label">Type <code>DELETE</code> to confirm:</label>
+          <input v-model="deleteGroupConfirmInput" class="ms-ppl-edit-input" placeholder="DELETE" autocomplete="off" @keyup.enter="confirmDeleteGroupFaces" />
+        </div>
+        <div class="ms-delete-faces-actions">
+          <button class="ms-fm-btn" @click="showDeleteGroupModal = false">Cancel</button>
+          <button class="ms-fm-btn ms-fm-btn-danger" :disabled="deleteGroupConfirmInput.trim().toUpperCase() !== 'DELETE'" @click="confirmDeleteGroupFaces">Permanently Delete</button>
+        </div>
+      </div>
+    </div>
+
     <!-- QC Modal -->
     <div v-if="showQCModal" class="ms-modal-overlay show">
       <div class="ms-modal ms-modal-qc">
@@ -420,6 +697,74 @@
               <span class="ms-qc-trace-stat-label">Key Face</span>
               <span class="ms-qc-trace-stat-value">{{ qcTraceSummary.withKeyFace }}/{{ qcTraceSummary.total }}</span>
             </div>
+            <div class="ms-qc-trace-stat">
+              <span class="ms-qc-trace-stat-label">Key Face BBox (short)</span>
+              <span class="ms-qc-trace-stat-value">{{ qcTraceSummary.bboxShort.avg }}px</span>
+              <span class="ms-qc-trace-stat-sub">{{ qcTraceSummary.bboxShort.min }}–{{ qcTraceSummary.bboxShort.max }}</span>
+            </div>
+            <div class="ms-qc-trace-stat">
+              <span class="ms-qc-trace-stat-label">Key Face Area</span>
+              <span class="ms-qc-trace-stat-value">{{ qcTraceSummary.bboxArea.avg }}px²</span>
+              <span class="ms-qc-trace-stat-sub">{{ qcTraceSummary.bboxArea.min }}–{{ qcTraceSummary.bboxArea.max }}</span>
+            </div>
+            <div class="ms-qc-trace-stat">
+              <span class="ms-qc-trace-stat-label">Confidence</span>
+              <span class="ms-qc-trace-stat-value">{{ (qcTraceSummary.conf.avg * 100).toFixed(1) }}%</span>
+              <span class="ms-qc-trace-stat-sub">{{ (qcTraceSummary.conf.min * 100).toFixed(0) }}%–{{ (qcTraceSummary.conf.max * 100).toFixed(0) }}%</span>
+            </div>
+          </div>
+
+          <!-- Face Filter Hidden-State Summary -->
+          <div class="ms-qc-filter-summary">
+            <div class="ms-qc-filter-row">
+              <span class="ms-qc-filter-label">Min Confidence</span>
+              <span class="ms-qc-filter-value">{{ qcTraceSummary.filter.minConfPct }}%</span>
+            </div>
+            <div class="ms-qc-filter-row">
+              <span class="ms-qc-filter-label">Min Face Size</span>
+              <span class="ms-qc-filter-value">{{ qcTraceSummary.filter.minSizePx }}px</span>
+            </div>
+            <div class="ms-qc-filter-row">
+              <span class="ms-qc-filter-label">Min Capture Quality</span>
+              <span class="ms-qc-filter-value">{{ qcTraceSummary.filter.minQualityPct }}%</span>
+            </div>
+            <div class="ms-qc-filter-row">
+              <span class="ms-qc-filter-label">Filter Active</span>
+              <span class="ms-qc-filter-value" :class="qcTraceSummary.filter.active ? 'ms-qc-pass' : ''">{{ qcTraceSummary.filter.active ? 'yes' : 'no' }}</span>
+            </div>
+            <div class="ms-qc-filter-row">
+              <span class="ms-qc-filter-label">Hidden FS</span>
+              <span class="ms-qc-filter-value">{{ qcTraceSummary.filter.hidden }}/{{ qcTraceSummary.total }}</span>
+            </div>
+            <div class="ms-qc-filter-row">
+              <span class="ms-qc-filter-label">Visible FS</span>
+              <span class="ms-qc-filter-value">{{ qcTraceSummary.filter.visible }}/{{ qcTraceSummary.total }}</span>
+            </div>
+            <div class="ms-qc-filter-sub">
+              conf-only {{ qcTraceSummary.filter.hiddenConfOnly }} · size-only {{ qcTraceSummary.filter.hiddenSizeOnly }} · qual-only {{ qcTraceSummary.filter.hiddenQualOnly }} · both {{ qcTraceSummary.filter.hiddenBoth }} · neither {{ qcTraceSummary.filter.hiddenNeither }}
+            </div>
+          </div>
+
+          <!-- File Profile Content -->
+          <div v-if="qcFileProfileInfo" class="ms-qc-fileprofile">
+            <div class="ms-qc-fileprofile-title">File Profile</div>
+            <div class="ms-qc-fileprofile-row"><span class="ms-qc-filter-label">name</span><span class="ms-qc-fileprofile-val">{{ qcFileProfileInfo.file_name }}</span></div>
+            <div class="ms-qc-fileprofile-row"><span class="ms-qc-filter-label">duration</span><span class="ms-qc-fileprofile-val">{{ qcFileProfileInfo.duration }}s</span></div>
+            <div class="ms-qc-fileprofile-row"><span class="ms-qc-filter-label">resolution</span><span class="ms-qc-fileprofile-val">{{ qcFileProfileInfo.width }}×{{ qcFileProfileInfo.height }}</span></div>
+            <div class="ms-qc-fileprofile-row"><span class="ms-qc-filter-label">fps</span><span class="ms-qc-fileprofile-val">{{ Number(qcFileProfileInfo.fps).toFixed(2) }}</span></div>
+            <div class="ms-qc-fileprofile-row"><span class="ms-qc-filter-label">total_frames</span><span class="ms-qc-fileprofile-val">{{ qcFileProfileInfo.total_frames }}</span></div>
+            <div class="ms-qc-fileprofile-row"><span class="ms-qc-filter-label">status</span><span class="ms-qc-fileprofile-val">{{ qcFileProfileInfo.status }}</span></div>
+          </div>
+
+          <!-- FS Profile Statistics -->
+          <div v-if="qcTraceSummary.total > 0" class="ms-qc-fsprofile">
+            <div class="ms-qc-fileprofile-title">FS Profile</div>
+            <div class="ms-qc-fs-row"><span class="ms-qc-filter-label">face_count</span><span class="ms-qc-fs-val">{{ qcTraceSummary.fs.faceCount.avg }} ({{ qcTraceSummary.fs.faceCount.min }}–{{ qcTraceSummary.fs.faceCount.max }})</span></div>
+            <div class="ms-qc-fs-row"><span class="ms-qc-filter-label">avg_confidence</span><span class="ms-qc-fs-val">{{ qcTraceSummary.fs.avgConf.avg }} ({{ qcTraceSummary.fs.avgConf.min }}–{{ qcTraceSummary.fs.avgConf.max }})</span></div>
+            <div class="ms-qc-fs-row"><span class="ms-qc-filter-label">best_confidence</span><span class="ms-qc-fs-val">{{ qcTraceSummary.fs.bestConf.avg }} ({{ qcTraceSummary.fs.bestConf.min }}–{{ qcTraceSummary.fs.bestConf.max }})</span></div>
+            <div class="ms-qc-fs-row"><span class="ms-qc-filter-label">duration_sec</span><span class="ms-qc-fs-val">{{ qcTraceSummary.fs.durationSec.avg }} ({{ qcTraceSummary.fs.durationSec.min }}–{{ qcTraceSummary.fs.durationSec.max }})</span></div>
+            <div class="ms-qc-fs-row"><span class="ms-qc-filter-label">pose_count</span><span class="ms-qc-fs-val">{{ qcTraceSummary.fs.poseCount.avg }} ({{ qcTraceSummary.fs.poseCount.min }}–{{ qcTraceSummary.fs.poseCount.max }})</span></div>
+            <div class="ms-qc-fs-row"><span class="ms-qc-filter-label">frame_span</span><span class="ms-qc-fs-val">{{ qcTraceSummary.fs.frameSpan.avg }} ({{ qcTraceSummary.fs.frameSpan.min }}–{{ qcTraceSummary.fs.frameSpan.max }})</span></div>
           </div>
 
           <div class="ms-qc-progress-section">
@@ -466,17 +811,21 @@
 
 <script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { apiCall } from '@/api'
-import { ensureUnassignedTraces, unassignedTracesCache, unassignedTracesLoaded, unassignedTracesTotal, unassignedTracesPage, ensureFiles, filesCache, faceThumbsCache, loadFaceThumb, loadTraceThumb, loadThumbnail, thumbnailsCache, clusterResultsCache, clusterRunningState, isClusterRunning, setClusterRunning, getClusterResults, setClusterResults, pollClusterResults, updateTraceProfileGroup, loadClusterNames, getTraceProfile, getPose, getAppearance, syncAllProcessingFiles } from '@/store'
+import { ensureUnassignedTraces, unassignedTracesCache, unassignedTracesLoaded, unassignedTracesTotal, unassignedTracesPage, ensureFiles, filesCache, faceThumbsCache, loadFaceThumb, loadTraceThumb, loadThumbnail, thumbnailsCache, clusterResultsCache, clusterRunningState, isClusterRunning, setClusterRunning, getClusterResults, setClusterResults, pollClusterResults, updateTraceProfileGroup, loadClusterNames, getFaceLandmarks, getAppearance, syncAllProcessingFiles, loadingFaceThumbs, clearFaceThumbs, bumpThumbCacheBust } from '@/store'
 import { useI18n } from 'vue-i18n'
 import { drawPoseSkeleton, drawAppearanceOverlay } from '@/utils/poseRenderer'
-import type { PoseResponse, AppearanceResponse } from '@/api/types'
+import type { AppearanceResponse, FaceLandmarksResponse } from '@/api/types'
+import { scoreFaceLandmarks, type LandmarkScoreResult } from '@/utils/faceLandmarkScoring'
 import { getNextZIndex } from '@/composables/useZIndex'
+import { getApiBase } from '@/api/config'
 import { useAdvancedMode } from '@/stores/advancedMode'
+import { useDragSelect, dragSelectRectStyle, type DragSelectBox } from '@/composables/useDragSelect'
 
 const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
 const { isAdvanced } = useAdvancedMode()
 import VideoPlayer from '../components/VideoPlayer.vue'
 
@@ -489,7 +838,7 @@ const loading = computed(() => refreshing.value)
 const faces = ref<any[]>([])
 const traces = ref<any[]>([])
 const playing = ref(false)
-const currentVideo = ref({ fileUuid: '', startFrame: 0, endFrame: 0, title: '' })
+const currentVideo = ref({ fileUuid: '', startFrame: 0, endFrame: 0, title: '', keyFrame: null as number | null })
 const candidateThumbs = faceThumbsCache
 const activeFrameCard = ref('')
 const activeFrameMode = ref('')
@@ -497,14 +846,22 @@ const fileInfoCache = ref<Record<string, { width: number; height: number }>>({})
 const poseCanvas = ref<HTMLCanvasElement | null>(null)
 const colorCanvas = ref<HTMLCanvasElement | null>(null)
 const poseFrameContainer = ref<HTMLDivElement | null>(null)
-const faceDetailPose = ref<PoseResponse | null>(null)
+const fullFrameCanvas = ref<HTMLCanvasElement | null>(null)
+const fullFrameContainer = ref<HTMLDivElement | null>(null)
+const faceDetailLandmarks = ref<FaceLandmarksResponse | null>(null)
+const landmarkScore = ref<LandmarkScoreResult | null>(null)
 const faceDetailAppearance = ref<AppearanceResponse | null>(null)
 const faceDetailFrameUrl = ref<string>('')
 const faceDetailVideoSize = ref<{ width: number; height: number } | null>(null)
 const faceDetailScale = ref<{ x: number; y: number; offsetX: number; offsetY: number }>({ x: 1, y: 1, offsetX: 0, offsetY: 0 })
 const showEnlargedFace = ref(false)
+const showFullFace = ref(false)
+const showFullFrame = ref(false)
+const fullControlsVisible = ref(false)
+const frameCtxMenu = ref({ show: false, x: 0, y: 0 })
 const showBboxOverlay = ref(true)
-const showPoseOverlay = ref(true)
+const showLandmarkOverlay = ref(true)
+const showOthersOverlay = ref(true)
 const showAppearanceOverlay = ref(true)
 
 const selectedFaces = ref<string[]>([])
@@ -516,10 +873,31 @@ const showMoveFacesModal = ref(false)
 const lastDeletedTraces = ref<{ file_uuid: string; trace_id: number }[]>([])
 const showUndoBanner = ref(false)
 let undoBannerTimer: ReturnType<typeof setTimeout> | null = null
+const showDeleteFacesModal = ref(false)
+const pendingDeleteFaces = ref<{ file_uuid: string; trace_id: number }[]>([])
+const deleteConfirmInput = ref('')
+const showDeleteGroupModal = ref(false)
+const pendingDeleteGroupFaces = ref<{ file_uuid: string; trace_id: number }[]>([])
+const deleteGroupConfirmInput = ref('')
 
 const clusterBatchMode = ref(false)
 const selectedClusterTraces = ref<number[]>([])
 
+const faceGridEl = ref<HTMLElement | null>(null)
+const groupGridEl = ref<HTMLElement | null>(null)
+const facesDragBox = ref<DragSelectBox | null>(null)
+const groupsDragBox = ref<DragSelectBox | null>(null)
+const { onMousedown: facesDragMousedown, onClickCapture: facesDragClick } = useDragSelect(faceGridEl, {
+  getSelected: () => selectedFaces.value,
+  setSelected: (keys) => { selectedFaces.value = [...keys] },
+  onBox: (b) => { facesDragBox.value = b },
+})
+const { onMousedown: groupsDragMousedown, onClickCapture: groupsDragClick } = useDragSelect(groupGridEl, {
+  getSelected: () => selectedGroups.value,
+  setSelected: (keys) => { selectedGroups.value = [...keys] },
+  onBox: (b) => { groupsDragBox.value = b },
+})
+
 const operationLoading = ref(false)
 const operationMessage = ref('')
 
@@ -530,7 +908,18 @@ const qcProfileIssues = ref<{ traceId: number; fileUuid: string; groupName: stri
 const qcApiTests = ref<{ name: string; status: boolean; error?: string }[]>([])
 const qcApiBlocked = ref(false)
 const qcFileProfile = ref<{ key_frame?: number; key_frame_url?: string } | null>(null)
-const qcTraceSummary = ref({ total: 0, withKeyFrame: 0, withKeyFace: 0, missingBoth: 0 })
+const qcTraceSummary = ref({
+  total: 0,
+  withKeyFrame: 0,
+  withKeyFace: 0,
+  missingBoth: 0,
+  bboxShort: { min: 0, avg: 0, max: 0 },
+  bboxArea: { min: 0, avg: 0, max: 0 },
+  conf: { min: 0, avg: 0, max: 0 },
+  filter: { active: false, minConfPct: 0, minSizePx: 0, minQualityPct: 0, visible: 0, hidden: 0, hiddenConfOnly: 0, hiddenSizeOnly: 0, hiddenBoth: 0, hiddenQualOnly: 0, hiddenNeither: 0 },
+  fs: { faceCount: { min: 0, avg: 0, max: 0 }, avgConf: { min: 0, avg: 0, max: 0 }, bestConf: { min: 0, avg: 0, max: 0 }, durationSec: { min: 0, avg: 0, max: 0 }, poseCount: { min: 0, avg: 0, max: 0 }, frameSpan: { min: 0, avg: 0, max: 0 } },
+})
+const qcFileProfileInfo = ref<Record<string, any> | null>(null)
 
 function isFaceSelected(t: any): boolean {
   return selectedFaces.value.includes(`${t.file_uuid}:${t.trace_id}`)
@@ -562,6 +951,11 @@ async function toggleFrameView(t: any, mode: 'frame' | 'bbox') {
 }
 function goToUfacePage(page: number) {
   if (page < 1) return
+  if (facesSearchQuery.value.trim()) {
+    unassignedTracesPage.value = page
+    runFacesSearch(page)
+    return
+  }
   ensureUnassignedTraces(selectedFileUuid.value, page)
   for (const t of unassignedTracesCache.value.slice(0, 20)) {
     if (t.file_uuid) loadTraceThumb(t)
@@ -570,7 +964,7 @@ function goToUfacePage(page: number) {
 
 function thumbTraceKey(t: any): string {
   if (!t) return ''
-  return `${t.trace_id || 0}-${t.file_uuid || ''}-${t.best_face_id || 0}`
+  return `${t.file_uuid || ''}-${t.trace_id || 0}`
 }
 function getFileName(fileUuid: string): string {
   if (!fileUuid) return ''
@@ -601,7 +995,14 @@ const unassignedTotalPages = computed(() => {
 
 const faceCtxMenu = ref({ show: false, x: 0, y: 0, candidate: null as any })
 const clusterCtxMenu = ref({ show: false, x: 0, y: 0, cluster: null as any })
+const keyFaceCtxMenu = ref({ show: false, x: 0, y: 0 })
+const traceProfileJsonDialog = ref(false)
+const traceProfileJsonContent = ref('')
+const traceProfileJsonTitle = ref('')
 const faceDetailModal = ref({ show: false, candidate: null as any, newIdentityName: '' })
+const faceDetailNavSource = ref<'unassigned' | 'cluster' | null>(null)
+const faceDetailNavIndex = ref(-1)
+const regeneratingThumbnail = ref(false)
 const clusterDetailModal = ref({ show: false, cluster: null as any, selectedTrace: null as any })
 const clusterVideoTraces = ref<any[]>([])
 const clusterVideoSegments = ref<any[]>([])
@@ -610,6 +1011,59 @@ const clusterStripPerPage = 20
 const clusterEditMode = ref(false)
 const clusterEditName = ref('')
 const clusterSearchQuery = ref('')
+const groupSearchQuery = ref('')
+const facesSearchQuery = ref('')
+// Server-side faces search (all traces incl. grouped) via /file/:uuid/faces/search
+const searchFacesResults = ref<any[]>([])
+const searchFacesTotal = ref(0)
+const searchFacesLoading = ref(false)
+const facesPagingActive = computed(() => !!facesSearchQuery.value.trim())
+
+let facesSearchTimer: ReturnType<typeof setTimeout> | null = null
+async function runFacesSearch(page = 1) {
+  const q = facesSearchQuery.value.trim()
+  const fileUuid = selectedFileUuid.value
+  if (!q || !fileUuid) {
+    searchFacesResults.value = []
+    searchFacesTotal.value = 0
+    return
+  }
+  searchFacesLoading.value = true
+  try {
+    const res: any = await apiCall('search_file_faces', { fileUuid, q, page, perPage: 20 })
+    if (selectedFileUuid.value !== fileUuid || facesSearchQuery.value.trim() !== q) return
+    searchFacesResults.value = res.traces || []
+    searchFacesTotal.value = res.total || 0
+  } catch (e) {
+    console.error('search_file_faces failed:', e)
+  } finally {
+    searchFacesLoading.value = false
+  }
+}
+
+watch(facesSearchQuery, () => {
+  if (facesSearchTimer) clearTimeout(facesSearchTimer)
+  facesSearchTimer = setTimeout(() => {
+    if (facesSearchQuery.value.trim()) unassignedTracesPage.value = 1
+    runFacesSearch(1)
+  }, 250)
+})
+watch(selectedFileUuid, async () => {
+  searchFacesResults.value = []
+  searchFacesTotal.value = 0
+  ffFaces.value = []
+  if (selectedFileUuid.value) {
+    await loadDefaultFaceFilter()
+    await loadFaceFilterFromProfile(selectedFileUuid.value)
+    await loadFaces()
+  }
+})
+watch(() => route.query.file, async (v) => {
+  if (typeof v === 'string' && v !== selectedFileUuid.value) {
+    selectedFileUuid.value = v
+    await onFileFilterChange()
+  }
+})
 const fileFilterList = computed(() => {
   const files = filesCache.value
   return files.filter((f: any) => f.status === 'completed').map((f: any) => ({
@@ -621,7 +1075,23 @@ const fileFilterList = computed(() => {
 // Section visibility toggles
 const showCluster = ref(true)
 const showUface = ref(true)
+const showFaceFilter = ref(false)
+const ffLoading = ref(false)
+const ffFaces = ref<any[]>([])
+const ffMinConfPct = ref(0)
+const ffMinSizePx = ref(0)
+const ffMinQuality = ref(0)
+const dragState = ref<{ type: 'conf' | 'size' | 'quality'; wrap: HTMLElement } | null>(null)
 const starFilter = ref(false)
+
+const singleFrameSettings = ref({
+  single_frame_trace_vlm_enabled: true,
+  single_frame_trace_group_enabled: true,
+  single_frame_trace_unassigned_enabled: true,
+  single_trace_group_filter_enabled: true,
+})
+const singleFrameSettingsLoading = ref(false)
+const singleFrameSettingsModified = ref(false)
 const faceSourceClusterId = ref<number | null>(null)
 const faceMoveTarget = ref('')
 const faceMoveNewGroupName = ref('')
@@ -637,7 +1107,7 @@ const faceGroups = computed(() => {
   }
   return clusterResults.value.map((c: any, idx: number) => {
     const traceIds = c.trace_ids || []
-    const repTraceId = c.representative_trace || traceIds[0]
+    const repTraceId = c.representative_trace !== undefined && c.representative_trace !== null ? c.representative_trace : traceIds[0]
     const traceMap = clusterTracesMap.value
     let repTrace: any = null
     if (traceMap[String(repTraceId)]) {
@@ -647,19 +1117,45 @@ const faceGroups = computed(() => {
         if (traceMap[String(tid)]) { repTrace = traceMap[String(tid)]; break }
       }
     }
+    // 若 clusterTracesMap 查無此 trace（map 只抓前 1000 筆，rep 常落在其後），
+    // 用 cluster-results 資料合成 rep_trace，讓縮圖仍能經 loadTraceThumb 載入。
+    if (!repTrace && repTraceId !== undefined && repTraceId !== null) {
+      repTrace = {
+        trace_id: repTraceId,
+        file_uuid: selectedFileUuid.value,
+        best_face_id: 0,
+        best_face_frame: 1,
+        start_frame: 1,
+        end_frame: 1,
+      }
+    }
     const defaultName = `group ${String(idx + 1).padStart(2, '0')}`
     if (!c.name) c.name = defaultName
+    const visibleTraceIds = ffFilterActive.value
+      ? traceIds.filter(tid => !ffHiddenTraces.value.has(tid))
+      : traceIds
     return {
       group_uuid: `group_${c.cluster_id ?? c.group_id}`,
       group_id: c.cluster_id ?? c.group_id,
       name: c.name,
       trace_count: c.trace_count,
+      visible_count: visibleTraceIds.length,
       representative_trace: repTraceId,
       cluster_id: c.cluster_id ?? c.group_id,
       trace_ids: traceIds,
+      visible_trace_ids: visibleTraceIds,
       rep_trace: repTrace,
     }
-  })
+  }).filter((g: any) => !(ffFilterActive.value && g.visible_count === 0))
+    .sort((a: any, b: any) => a.name.localeCompare(b.name, undefined, { numeric: true, sensitivity: 'base' }))
+})
+
+const filteredFaceGroups = computed(() => {
+  const groups = faceGroups.value.filter((g: any) => (g.name || '').toLowerCase() !== 'unassigned')
+  if (!groupSearchQuery.value) return groups
+  const q = groupSearchQuery.value.trim().toLowerCase()
+  if (!q) return groups
+  return groups.filter((g: any) => (g.name || '').toLowerCase().includes(q))
 })
 
 const otherClusters = computed(() => {
@@ -688,6 +1184,85 @@ const traceGroupMap = computed(() => {
   return map
 })
 
+// Pending faces search: name (group label) or frame range (F#start–F#end).
+// When a query is active, results come straight from the server-side search
+// (/file/:uuid/faces/search) which covers ALL traces (incl. grouped); otherwise
+// fall back to the paginated unassigned list.
+// Also include unassigned traces when the query matches "Unassigned" label.
+const filteredUnassignedTraces = computed(() => {
+  const q = facesSearchQuery.value.trim().toLowerCase()
+  let base: any[]
+  if (q) {
+    base = [...searchFacesResults.value]
+    // Also include unassigned traces whose label matches the query
+    if (q.length >= 1 && t('people.section.unassigned').toLowerCase().startsWith(q)) {
+      for (const t of unassignedTraces.value) {
+        if (!base.some((r: any) => r.trace_id === t.trace_id)) base.push(t)
+      }
+    }
+  } else {
+    base = unassignedTraces.value
+  }
+  if (!ffFilterActive.value) return base
+  return base.filter((tr: any) => !ffHiddenTraces.value.has(tr.trace_id))
+})
+
+const visibleUnassignedCount = computed(() => {
+  if (!ffFilterActive.value) return unassignedTracesTotal.value || unassignedTraces.value.length
+  const list = facesSearchQuery.value.trim().toLowerCase() ? searchFacesResults.value : unassignedTraces.value
+  return list.filter((t: any) => !ffHiddenTraces.value.has(t.trace_id)).length
+})
+
+const facesTotalPages = computed(() => {
+  return Math.ceil(searchFacesTotal.value / 20) || 1
+})
+
+function traceLabel(tr: any): string {
+  const n = tr?.name || traceGroupMap.value[String(tr.trace_id)]
+  return n || t('people.section.unassigned')
+}
+
+// Split text into segments, marking the literal query match for highlight
+function highlightSegments(text: string, query: string): { text: string; hit: boolean }[] {
+  const q = (query || '').trim().toLowerCase()
+  const t = String(text ?? '')
+  if (!q || !t) return [{ text: t, hit: false }]
+  const lower = t.toLowerCase()
+  const segs: { text: string; hit: boolean }[] = []
+  let i = 0
+  let idx = lower.indexOf(q)
+  while (idx >= 0) {
+    if (idx > i) segs.push({ text: t.slice(i, idx), hit: false })
+    segs.push({ text: t.slice(idx, idx + q.length), hit: true })
+    i = idx + q.length
+    idx = lower.indexOf(q, i)
+  }
+  if (i < t.length) segs.push({ text: t.slice(i), hit: false })
+  return segs
+}
+
+// Whether a pending face matched the current faces query by FRAME (F# range) —
+// either semantically (number within [start,end] / range overlap) or by
+// substring of the start/end frame numbers, so F is searchable like FS.
+function isFaceFRangeHit(t: any): boolean {
+  const q = facesSearchQuery.value.trim().toLowerCase()
+  if (!q || !/[\d-]/.test(q)) return false
+  const s = t.start_frame ?? 0
+  const e = t.end_frame ?? s
+  const rangeMatch = q.match(/^(\d+)\s*-\s*(\d+)$/)
+  if (rangeMatch) {
+    const qs = parseInt(rangeMatch[1], 10)
+    const qe = parseInt(rangeMatch[2], 10)
+    return qs <= qe && s <= qe && e >= qs
+  }
+  if (/^\d+$/.test(q)) {
+    const n = parseInt(q, 10)
+    if (n >= s && n <= e) return true
+    if (String(s).includes(q) || String(e).includes(q)) return true
+  }
+  return false
+}
+
 // Cluster detail modal computed
 const loadingClusterTraces = ref(false)
 
@@ -695,12 +1270,22 @@ const filteredClusterTraces = computed(() => {
   const c = clusterDetailModal.value.cluster
   if (!c) return []
   const traceIds = c.trace_ids || []
-  const traces = traceIds.map((tid: any) => clusterTracesMap.value[String(tid)]).filter((t: any) => t)
+  let traces = traceIds.map((tid: any) => clusterTracesMap.value[String(tid)]).filter((t: any) => t)
+  if (ffFilterActive.value) traces = traces.filter((t: any) => !ffHiddenTraces.value.has(t.trace_id))
   if (!clusterSearchQuery.value) return traces
   const q = clusterSearchQuery.value.toLowerCase()
   return traces.filter((t: any) => String(t.trace_id).includes(q))
 })
 
+// Group traces filtered by the active face filter (shared by cluster detail
+// strip, FS detail navigation, etc.)
+function filteredGroupTraces(c: any): any[] {
+  const traceIds = c.trace_ids || []
+  const traces = traceIds.map((tid: any) => clusterTracesMap.value[String(tid)]).filter((t: any) => t)
+  if (ffFilterActive.value) return traces.filter((t: any) => !ffHiddenTraces.value.has(t.trace_id))
+  return traces
+}
+
 const clusterStripTotalPages = computed(() => Math.ceil(filteredClusterTraces.value.length / clusterStripPerPage) || 1)
 
 const paginatedClusterTraces = computed(() => {
@@ -708,6 +1293,43 @@ const paginatedClusterTraces = computed(() => {
   return filteredClusterTraces.value.slice(start, start + clusterStripPerPage)
 })
 
+// Face detail modal navigation
+const faceDetailNavList = computed(() => {
+  if (faceDetailNavSource.value === 'unassigned') return filteredUnassignedTraces.value
+  if (faceDetailNavSource.value === 'cluster') {
+    const tid = faceDetailModal.value.candidate?.trace_id
+    const groupName = traceGroupMap.value[String(tid)]
+    if (groupName) {
+      const cluster = clusterResults.value.find((c: any) => c.name === groupName)
+      if (cluster) return filteredGroupTraces(cluster)
+    }
+  }
+  return []
+})
+
+const canFaceDetailPrev = computed(() => faceDetailNavIndex.value > 0)
+const canFaceDetailNext = computed(() => {
+  if (faceDetailNavSource.value === null) return false
+  return faceDetailNavIndex.value < faceDetailNavList.value.length - 1
+})
+const faceDetailNavTotal = computed(() => faceDetailNavList.value.length)
+const faceDetailNavLabel = computed(() => {
+  if (faceDetailNavSource.value === 'unassigned') return 'Unassigned'
+  if (faceDetailNavSource.value === 'cluster') {
+    const tid = faceDetailModal.value.candidate?.trace_id
+    return traceGroupMap.value[String(tid)] || ''
+  }
+  return ''
+})
+
+const faceDetailCaptureQuality = computed(() => {
+  const raw = faceDetailModal.value.candidate?.capture_quality
+  if (raw == null) return '—'
+  const num = Number(raw)
+  if (!isFinite(num)) return '—'
+  return `${num.toFixed(1)}%`
+})
+
 const clusterEditInput = ref<HTMLInputElement | null>(null)
 
 function startClusterEdit() {
@@ -743,8 +1365,557 @@ function cancelClusterEdit() {
   clusterEditMode.value = false
 }
 
+// --- trace-level stats (FS = trace) ---
+// Each trace is represented by its best face; the filter only changes the
+// hidden trace set, and statistics below are counted per trace, not per face.
+const ffTraceValues = computed(() => [...ffBestFaces.value.values()])
+
+const ffTraceTotal = computed(() => ffTraceValues.value.length)
+
+const ffTraceVisible = computed(() =>
+  ffTraceValues.value.filter((f: any) => !ffHiddenTraces.value.has(f.trace_id)).length)
+
+const ffTraceHidden = computed(() => ffTraceTotal.value - ffTraceVisible.value)
+
+const ffGroupsPartial = computed(() => {
+  if (!ffFilterActive.value) return 0
+  return faceGroups.value.filter((g: any) => g.visible_count > 0 && g.visible_count < g.trace_count).length
+})
+
+const ffGroupsHidden = computed(() => {
+  if (!ffFilterActive.value) return 0
+  return clusterResults.value.filter((c: any) => {
+    const ids = c.trace_ids || []
+    return ids.length > 0 && ids.every((tid: number) => ffHiddenTraces.value.has(tid))
+  }).length
+})
+
+const ffStatus = computed(() => {
+  const minConf = ffConfEffective.value / 100
+  const sizeEff = ffSizeEffective.value
+  const qualEff = ffQualityEffective.value
+  let both = 0, confOnly = 0, sizeOnly = 0, cut = 0
+  for (const f of ffTraceValues.value) {
+    const passConf = f.confidence >= minConf
+    const passSize = f.size >= sizeEff
+    const passQual = f.quality == null || f.quality >= qualEff
+    if (passConf && passSize && passQual) both++
+    else if (passConf && passQual) confOnly++
+    else if (passSize && passQual) sizeOnly++
+    else cut++
+  }
+  return { both, confOnly, sizeOnly, cut }
+})
+
+const ffStatusRows = computed(() => {
+  const s = ffStatus.value
+  return [
+    { key: 'both', label: 'conf+size', count: s.both, cut: false },
+    { key: 'confOnly', label: 'conf only', count: s.confOnly, cut: true },
+    { key: 'sizeOnly', label: 'size only', count: s.sizeOnly, cut: true },
+    { key: 'cut', label: 'neither', count: s.cut, cut: true },
+  ]
+})
+
+// --- trace-level hidden flag mechanism ---
+// Each trace is represented by its best face (max confidence). The filter only
+// changes this hidden set; the FS section and face groups read it to hide/deduct.
+const ffSizeEffective = computed(() =>
+  ffMinSizePx.value > ffSizeMinRounded.value ? ffMinSizePx.value : 0)
+
+const ffConfEffective = computed(() =>
+  ffMinConfPct.value > ffConfMinPct.value ? ffMinConfPct.value : 0)
+
+const ffFilterActive = computed(() =>
+  (ffFaces.value.length > 0) && (ffConfEffective.value > 0 || ffSizeEffective.value > 0 || ffQualityEffective.value > 0))
+
+const ffBestFaces = computed(() => {
+  const m = new Map<number, any>()
+  for (const f of ffFaces.value) {
+    const cur = m.get(f.trace_id)
+    if (!cur || f.confidence > cur.confidence) m.set(f.trace_id, f)
+  }
+  return m
+})
+
+const ffHiddenTraces = computed(() => {
+  const minConf = ffConfEffective.value / 100
+  const sizeEff = ffSizeEffective.value
+  const qualEff = ffQualityEffective.value
+  const s = new Set<number>()
+  for (const [tid, best] of ffBestFaces.value) {
+    if (best.confidence < minConf || best.size < sizeEff ||
+        (best.quality != null && best.quality < qualEff)) s.add(tid)
+  }
+  return s
+})
+
+const ffConfMinMax = computed(() => {
+  let min = Infinity, max = -Infinity
+  for (const f of ffTraceValues.value) {
+    if (f.confidence < min) min = f.confidence
+    if (f.confidence > max) max = f.confidence
+  }
+  if (!ffTraceValues.value.length) return { min: 0, max: 1 }
+  return { min, max }
+})
+
+// Slider range mirrors the size slider: bound to the actual data range (%).
+const ffConfMinPct = computed(() => {
+  const m = Math.floor(ffConfMinMax.value.min * 100)
+  return isFinite(m) ? m : 0
+})
+
+const ffConfMaxPct = computed(() => {
+  const m = Math.ceil(ffConfMinMax.value.max * 100)
+  const mi = ffConfMinPct.value
+  return isFinite(m) ? (m > mi ? m : mi + 1) : 1
+})
+
+const ffConfBins = computed(() => buildBins(ffTraceValues.value.map((f: any) => f.confidence), ffConfEffective.value / 100, 10, 'percent'))
+
+const ffConfCursorPct = computed(() => {
+  const min = ffConfMinPct.value
+  const max = ffConfMaxPct.value
+  if (max <= min) return 0
+  return Math.max(0, Math.min(100, ((ffMinConfPct.value - min) / (max - min)) * 100))
+})
+
+const confRugDots = computed(() => {
+  const min = ffConfMinPct.value; const max = ffConfMaxPct.value
+  if (max <= min) return []
+  return ffTraceValues.value.map((f: any) => ({
+    trace_id: f.trace_id,
+    value: f.confidence * 100,
+    pct: ((f.confidence * 100 - min) / (max - min)) * 100,
+    cut: f.confidence * 100 < ffConfEffective.value,
+  }))
+})
+
+const ffSizeMinRounded = computed(() => {
+  let m = Infinity
+  for (const f of ffTraceValues.value) if (f.size < m) m = f.size
+  return isFinite(m) ? Math.floor(m) : 0
+})
+
+const ffSizeMaxRounded = computed(() => {
+  let m = -Infinity
+  for (const f of ffTraceValues.value) if (f.size > m) m = f.size
+  return isFinite(m) ? Math.ceil(m) : 1
+})
+
+const ffSizeBins = computed(() => buildBins(ffTraceValues.value.map((f: any) => f.size), ffMinSizePx.value + 0.5, 10, 'size'))
+
+const ffSizeCursorPct = computed(() => {
+  const { min, max } = { min: ffSizeMinRounded.value, max: ffSizeMaxRounded.value }
+  if (max <= min) return 0
+  return Math.max(0, Math.min(100, ((ffMinSizePx.value - min) / (max - min)) * 100))
+})
+
+const sizeRugDots = computed(() => {
+  const min = ffSizeMinRounded.value; const max = ffSizeMaxRounded.value
+  if (max <= min) return []
+  return ffTraceValues.value.map((f: any) => ({
+    trace_id: f.trace_id,
+    value: f.size,
+    pct: ((f.size - min) / (max - min)) * 100,
+    cut: f.size < ffSizeEffective.value,
+  }))
+})
+
+const ffQualityValues = computed(() => ffTraceValues.value.filter((f: any) => f.quality != null))
+
+const ffQualityMinMax = computed(() => {
+  let min = Infinity, max = -Infinity
+  for (const f of ffQualityValues.value) {
+    if (f.quality < min) min = f.quality
+    if (f.quality > max) max = f.quality
+  }
+  if (!ffQualityValues.value.length) return { min: 0, max: 100 }
+  return { min, max }
+})
+
+const ffQualityMinPct = computed(() => {
+  const m = Math.floor(ffQualityMinMax.value.min)
+  return isFinite(m) ? m : 0
+})
+
+const ffQualityMaxPct = computed(() => {
+  const m = Math.ceil(ffQualityMinMax.value.max)
+  const mi = ffQualityMinPct.value
+  return isFinite(m) ? (m > mi ? m : mi + 1) : 100
+})
+
+const ffQualityEffective = computed(() =>
+  ffMinQuality.value > ffQualityMinPct.value ? ffMinQuality.value : 0)
+
+const ffQualityBins = computed(() => buildBins(ffQualityValues.value.map((f: any) => f.quality / 100), ffQualityEffective.value / 100, 10, 'percent'))
+
+const ffQualityCursorPct = computed(() => {
+  const min = ffQualityMinPct.value
+  const max = ffQualityMaxPct.value
+  if (max <= min) return 0
+  return Math.max(0, Math.min(100, ((ffMinQuality.value - min) / (max - min)) * 100))
+})
+
+const qualityRugDots = computed(() => {
+  const min = ffQualityMinPct.value; const max = ffQualityMaxPct.value
+  if (max <= min) return []
+  return ffQualityValues.value.map((f: any) => ({
+    trace_id: f.trace_id,
+    value: f.quality,
+    pct: ((f.quality - min) / (max - min)) * 100,
+    cut: f.quality < ffQualityEffective.value,
+  }))
+})
+
+function buildBins(vals: number[], threshold: number, binCount: number, format: 'percent' | 'size' | 'decimal' = 'decimal') {
+  if (!vals.length) return []
+  const min = Math.min(...vals)
+  const max = Math.max(...vals)
+  const span = max - min
+  const width = span > 0 ? span / binCount : 1
+  const idxOf = (v: number) => (span > 0 ? Math.min(binCount - 1, Math.floor((v - min) / width)) : 0)
+  const counts = Array(binCount).fill(0)
+  for (const v of vals) counts[idxOf(v)]++
+  const top = Math.max(1, ...counts)
+  return counts.map((count, i) => {
+    const lo = min + i * width
+    const hi = min + (i + 1) * width
+    let label: string
+    if (span > 0) {
+      if (format === 'percent') {
+        const loPct = lo * 100
+        const hiPct = hi * 100
+        const hiDisplay = hiPct - 0.1
+        label = `${loPct.toFixed(1)}–${hiDisplay.toFixed(1)}`
+      } else if (format === 'size') {
+        const loInt = Math.round(lo)
+        const hiInt = Math.round(hi)
+        const hiDisplay = Math.max(loInt, hiInt - 1)
+        label = `${loInt}–${hiDisplay}`
+      } else {
+        label = `${lo.toFixed(1)}–${hi.toFixed(1)}`
+      }
+    } else {
+      if (format === 'percent') {
+        label = `${(max * 100).toFixed(1)}`
+      } else if (format === 'size') {
+        label = `${Math.round(max)}`
+      } else {
+        label = `${max}`
+      }
+    }
+    return {
+      key: i,
+      label,
+      count,
+      isCut: hi <= threshold,
+      top,
+    }
+  })
+}
+
+function ffBarH(b: any): string {
+  const h = Math.round((b.count / b.top) * 60)
+  return Math.max(3, h) + 'px'
+}
+
+function setThreshold(type: 'conf' | 'size' | 'quality', e: MouseEvent) {
+  if (dragState.value) return
+  applyThreshold(type, e)
+}
+
+function applyThreshold(type: 'conf' | 'size' | 'quality', e: MouseEvent) {
+  const wrap = (e.currentTarget as HTMLElement).closest('.ms-ff-hist-wrap') as HTMLElement
+  if (!wrap) return
+  const rect = wrap.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const pct = Math.max(0, Math.min(1, x / rect.width))
+  if (type === 'conf') {
+    const min = ffConfMinPct.value; const max = ffConfMaxPct.value
+    ffMinConfPct.value = Math.max(0, min + pct * (max - min))
+  } else if (type === 'size') {
+    const min = ffSizeMinRounded.value; const max = ffSizeMaxRounded.value
+    ffMinSizePx.value = Math.max(0, Math.round(min + pct * (max - min)))
+  } else {
+    const min = ffQualityMinPct.value; const max = ffQualityMaxPct.value
+    ffMinQuality.value = Math.max(0, min + pct * (max - min))
+  }
+}
+
+function startDrag(type: 'conf' | 'size' | 'quality', e: MouseEvent) {
+  e.preventDefault()
+  const wrap = (e.currentTarget as HTMLElement).closest('.ms-ff-hist-wrap') as HTMLElement
+  if (!wrap) return
+  dragState.value = { type, wrap }
+  applyThreshold(type, e)
+}
+
+function onDragMove(e: MouseEvent) {
+  if (!dragState.value) return
+  const { type, wrap } = dragState.value
+  const rect = wrap.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const pct = Math.max(0, Math.min(1, x / rect.width))
+  if (type === 'conf') {
+    const min = ffConfMinPct.value; const max = ffConfMaxPct.value
+    ffMinConfPct.value = Math.max(0, min + pct * (max - min))
+  } else if (type === 'size') {
+    const min = ffSizeMinRounded.value; const max = ffSizeMaxRounded.value
+    ffMinSizePx.value = Math.max(0, Math.round(min + pct * (max - min)))
+  } else {
+    const min = ffQualityMinPct.value; const max = ffQualityMaxPct.value
+    ffMinQuality.value = Math.max(0, min + pct * (max - min))
+  }
+}
+
+function onDragEnd() {
+  dragState.value = null
+}
+
+const FF_DOT_CAP = 15
+function ffDotsFilled(n: number, max: number): boolean[] {
+  const cap = FF_DOT_CAP
+  const scaled = max > cap ? Math.max(1, Math.round((n / max) * cap)) : n
+  return Array.from({ length: cap }, (_, i) => i < scaled)
+}
+
+function faceQuality(t: any): number | null {
+  const pre = Number(t?.best_face_capture_quality ?? t?.capture_quality ?? NaN)
+  if (isFinite(pre)) return Math.max(0, Math.min(100, Math.round(pre * 100)))
+  const eye = Number(t?.best_face_eye_ratio ?? t?.eye_ratio ?? NaN)
+  const nose = Number(t?.best_face_nose_ratio ?? t?.nose_ratio ?? NaN)
+  const pose = Number(t?.best_face_pose_score ?? t?.pose_score ?? NaN)
+  if (!isFinite(eye) && !isFinite(nose) && !isFinite(pose)) return null
+  let score = 1.0
+  if (isFinite(eye) && (eye < 0.25 || eye > 0.55)) score -= 0.25
+  if (isFinite(nose) && nose < 0.08) score -= 0.25
+  if (isFinite(pose) && pose > 0.8) score -= 0.25
+  return Math.max(0, Math.min(100, Math.round(score * 100)))
+}
+
+async function toggleFaceFilter() {
+  showFaceFilter.value = !showFaceFilter.value
+  if (showFaceFilter.value && selectedFileUuid.value) {
+    if (ffFaces.value.length === 0) {
+      await loadFaces()
+    }
+    await loadSingleFrameSettings()
+  }
+}
+
+async function loadFaces() {
+  if (!selectedFileUuid.value || ffLoading.value) return
+  ffLoading.value = true
+  const uuid = selectedFileUuid.value
+  const all: any[] = []
+  try {
+    // Per-trace endpoint is trace-level (best face per trace), far lighter than
+    // downloading every individual face detection page-by-page. A file with
+    // 300k+ detections would otherwise need thousands of sequential requests.
+    const pageSize = 3000
+    const first: any = await apiCall('get_file_traces', { fileUuid: uuid, page: 1, page_size: pageSize, limit: pageSize })
+    const traces = first?.traces || []
+    const total = Number(first?.total ?? traces.length) || traces.length
+    if (total > traces.length) {
+      const totalPages = Math.ceil(total / pageSize)
+      const rest = await Promise.all(
+        Array.from({ length: totalPages - 1 }, (_, i) =>
+          apiCall('get_file_traces', { fileUuid: uuid, page: i + 2, page_size: pageSize, limit: pageSize })
+            .then((r: any) => r?.traces || [])
+            .catch(() => [] as any[])
+        )
+      )
+      for (const batch of rest) {
+        traces.push(...batch)
+      }
+    }
+    for (const t of traces) {
+      const conf = Number(t.best_face_confidence ?? 0)
+      const bbox = t.best_face_bbox || {}
+      all.push({
+        face_id: String(t.best_face_id ?? t.trace_id ?? 0),
+        trace_id: Number(t.trace_id ?? 0),
+        frame: Number(t.best_face_frame ?? 0),
+        confidence: conf,
+        confPct: Math.round(conf * 100),
+        size: Math.min(Number(bbox.width ?? 0), Number(bbox.height ?? 0)),
+        quality: faceQuality(t),
+      })
+    }
+    ffFaces.value = all
+  } catch (e) {
+    console.error('loadFaces error:', e)
+  } finally {
+    ffLoading.value = false
+  }
+}
+
+// Per-file face filter persistence via file profile (Core owns the storage).
+// Fallback init from localStorage for backward-compat until per-file value exists.
+let ffSaveTimer: ReturnType<typeof setTimeout> | null = null
+let ffLastLoadedFile = ''
+
+async function loadFaceFilterFromProfile(fileUuid: string) {
+  ffLastLoadedFile = fileUuid
+  
+  try {
+    const fp: any = await apiCall('get_file_profile', { fileUuid })
+    const ff = fp?.face_filter
+    
+    // Priority: File Profile → Admin Config
+    if (ff?.min_confidence != null) {
+      ffMinConfPct.value = Math.max(0, Math.min(100, Number(ff.min_confidence)))
+    } else if (adminFaceFilter?.min_confidence != null) {
+      ffMinConfPct.value = Math.max(0, Math.min(100, Number(adminFaceFilter.min_confidence)))
+    }
+    
+    if (ff?.min_size != null) {
+      ffMinSizePx.value = Math.max(0, Number(ff.min_size))
+    } else if (adminFaceFilter?.min_size != null) {
+      ffMinSizePx.value = Math.max(0, Number(adminFaceFilter.min_size))
+    }
+    
+    if (ff?.min_capture_quality != null) {
+      ffMinQuality.value = Math.max(0, Math.min(100, Number(ff.min_capture_quality)))
+    } else if (adminFaceFilter?.min_capture_quality != null) {
+      ffMinQuality.value = Math.max(0, Math.min(100, Number(adminFaceFilter.min_capture_quality)))
+    }
+  } catch (e) {
+    console.error('loadFaceFilterFromProfile error:', e)
+    // Fallback to admin config
+    if (adminFaceFilter?.min_confidence != null) {
+      ffMinConfPct.value = Math.max(0, Math.min(100, Number(adminFaceFilter.min_confidence)))
+    }
+    if (adminFaceFilter?.min_size != null) {
+      ffMinSizePx.value = Math.max(0, Number(adminFaceFilter.min_size))
+    }
+    if (adminFaceFilter?.min_capture_quality != null) {
+      ffMinQuality.value = Math.max(0, Math.min(100, Number(adminFaceFilter.min_capture_quality)))
+    }
+  }
+}
+
+function saveFaceFilterToProfile() {
+  if (!selectedFileUuid.value) return
+  if (ffSaveTimer) clearTimeout(ffSaveTimer)
+  ffSaveTimer = setTimeout(async () => {
+    try {
+      await apiCall('update_file_profile', {
+        fileUuid: selectedFileUuid.value,
+        faceFilter: {
+          min_confidence: ffMinConfPct.value,
+          min_size: ffMinSizePx.value,
+          min_capture_quality: ffMinQuality.value,
+          single_frame_trace_vlm_enabled: singleFrameSettings.value.single_frame_trace_vlm_enabled,
+          single_frame_trace_group_enabled: singleFrameSettings.value.single_frame_trace_group_enabled,
+          single_frame_trace_unassigned_enabled: singleFrameSettings.value.single_frame_trace_unassigned_enabled,
+          single_trace_group_filter_enabled: singleFrameSettings.value.single_trace_group_filter_enabled,
+        },
+      })
+      singleFrameSettingsModified.value = false
+    } catch (e) {
+      console.error('saveFaceFilterToProfile error:', e)
+    }
+  }, 400)
+}
+
+async function resetFilterToDefault() {
+  if (!selectedFileUuid.value) return
+  if (!confirm('Reset face filter to system default?')) return
+  
+  try {
+    await apiCall('update_file_profile', {
+      fileUuid: selectedFileUuid.value,
+      faceFilter: null,
+    })
+    
+    if (adminFaceFilter) {
+      if (adminFaceFilter.min_confidence != null) ffMinConfPct.value = Number(adminFaceFilter.min_confidence)
+      if (adminFaceFilter.min_size != null) ffMinSizePx.value = Number(adminFaceFilter.min_size)
+      if (adminFaceFilter.min_capture_quality != null) ffMinQuality.value = Number(adminFaceFilter.min_capture_quality)
+    }
+  } catch (e) {
+    console.error('resetFilterToDefault error:', e)
+  }
+}
+
+async function loadSingleFrameSettings() {
+  if (!selectedFileUuid.value) return
+  singleFrameSettingsLoading.value = true
+  try {
+    const profile = await apiCall('get_file_profile', { fileUuid: selectedFileUuid.value })
+    if (profile?.face_filter) {
+      singleFrameSettings.value = {
+        single_frame_trace_vlm_enabled: profile.face_filter.single_frame_trace_vlm_enabled ?? true,
+        single_frame_trace_group_enabled: profile.face_filter.single_frame_trace_group_enabled ?? true,
+        single_frame_trace_unassigned_enabled: profile.face_filter.single_frame_trace_unassigned_enabled ?? true,
+        single_trace_group_filter_enabled: profile.face_filter.single_trace_group_filter_enabled ?? true,
+      }
+      singleFrameSettingsModified.value = false
+    }
+  } catch (e) {
+    console.error('loadSingleFrameSettings error:', e)
+  } finally {
+    singleFrameSettingsLoading.value = false
+  }
+}
+
+async function saveSingleFrameSettings() {
+  if (!selectedFileUuid.value) return
+  singleFrameSettingsLoading.value = true
+  try {
+    await saveFaceFilterToProfile()
+  } finally {
+    singleFrameSettingsLoading.value = false
+  }
+}
+
+function resetSingleFrameSettings() {
+  singleFrameSettings.value = {
+    single_frame_trace_vlm_enabled: true,
+    single_frame_trace_group_enabled: true,
+    single_frame_trace_unassigned_enabled: true,
+    single_trace_group_filter_enabled: true,
+  }
+  singleFrameSettingsModified.value = true
+}
+
+function markSingleFrameSettingsModified() {
+  singleFrameSettingsModified.value = true
+}
+
+watch(ffMinConfPct, v => {
+  if (selectedFileUuid.value && ffLastLoadedFile === selectedFileUuid.value) saveFaceFilterToProfile()
+})
+watch(ffMinSizePx, v => {
+  if (selectedFileUuid.value && ffLastLoadedFile === selectedFileUuid.value) saveFaceFilterToProfile()
+})
+watch(ffMinQuality, v => {
+  if (selectedFileUuid.value && ffLastLoadedFile === selectedFileUuid.value) saveFaceFilterToProfile()
+})
+
+let adminFaceFilter: any = null
+
+async function loadDefaultFaceFilter() {
+  try {
+    const base = getApiBase()
+    const res = await fetch(`${base}/api/v1/admin/config`)
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const config: any = await res.json()
+    adminFaceFilter = config?.filter_config?.face || null
+  } catch (e) {
+    console.error('loadDefaultFaceFilter error:', e)
+  }
+}
+
+loadDefaultFaceFilter()
 
 async function refresh() {
+  // 清掉縮圖 blob cache + 換新 ?t=，讓 face grid 重抓最新 key_face
+  clearFaceThumbs()
+  bumpThumbCacheBust()
   refreshing.value = true
   loadingStep.value = 'Loading files...'
   await ensureFiles()
@@ -764,17 +1935,17 @@ async function refresh() {
 
   if (selectedFileUuid.value) {
     unassignedTracesPage.value = 1
+    unassignedTracesLoaded.value = false
+    unassignedTracesCache.value = []
     delete clusterResultsCache.value[selectedFileUuid.value]
     clusterTracesMap.value = {}
+    loadingClusterTraces.value = false
     clusterVideoTraces.value = []
     clusterVideoSegments.value = []
     loadingStep.value = 'Loading clusters...'
-    // Load cluster results first
-    if (isClusterRunning(selectedFileUuid.value)) {
-      pollClusterResults(selectedFileUuid.value, () => loadClusterResults())
-    } else {
-      loadClusterResults()
-    }
+    // Load cluster results first (always reload server truth; clear stuck running flag)
+    setClusterRunning(selectedFileUuid.value, false)
+    await loadClusterResults()
     // Only load unassigned traces if Faces section is visible
     if (showUface.value) {
       loadingStep.value = 'Loading traces...'
@@ -836,21 +2007,27 @@ async function onFileFilterChange() {
 async function runClusterAgent() {
   if (!selectedFileUuid.value || isClusterRunning(selectedFileUuid.value)) return
   setClusterRunning(selectedFileUuid.value, true)
+  let agentFinished = false
   try {
-    const result: any = await apiCall('run_cluster_agent', { fileUuid: selectedFileUuid.value })
-    if (result.success) {
-      // Poll for results
-      for (let i = 0; i < 120; i++) {
-        await new Promise(r => setTimeout(r, 3000))
-        try {
-          const results: any = await apiCall('get_cluster_results', { fileHash: selectedFileUuid.value })
-          const groups = results?.face_groups || results?.clusters || []
-          if (groups.length) {
-            await loadClusterResults()
-            return
-          }
-        } catch { /* not ready */ }
-      }
+    try {
+      const result: any = await apiCall('run_cluster_agent', { fileUuid: selectedFileUuid.value })
+      if (result.success) agentFinished = true
+    } catch (e: any) {
+      // Timeout/network failure: server may still be processing. Fall through to polling.
+      console.warn('Cluster agent request interrupted, polling for results:', e)
+    }
+    // Poll for results (covers both success and interrupted/timeout cases)
+    for (let i = 0; i < 120; i++) {
+      if (!isClusterRunning(selectedFileUuid.value)) return
+      await new Promise(r => setTimeout(r, 3000))
+      try {
+        const results: any = await apiCall('get_cluster_results', { fileHash: selectedFileUuid.value })
+        const groups = results?.face_groups || results?.clusters || []
+        if (groups.length) {
+          await loadClusterResults()
+          return
+        }
+      } catch { /* not ready */ }
     }
   } catch (e) {
     console.error('Cluster agent failed:', e)
@@ -861,18 +2038,12 @@ async function runClusterAgent() {
 
 async function loadClusterResults() {
   if (!selectedFileUuid.value) {
-    console.log('[cluster] no file selected')
     return
   }
   const fileUuid = selectedFileUuid.value
   try {
-    console.log('[cluster] loading for', fileUuid)
     const results: any = await apiCall('get_cluster_results', { fileHash: fileUuid })
-    console.log('[cluster] api returned:', results)
-    console.log('[cluster] results.face_groups:', results?.face_groups)
-    console.log('[cluster] results.clusters:', results?.clusters)
     if (selectedFileUuid.value !== fileUuid) {
-      console.log('[cluster] file changed during load')
       return
     }
     const groups = results?.face_groups || results?.clusters || []
@@ -905,113 +2076,186 @@ async function loadClusterResults() {
       c.member_faces = clusterFacesMap[cid] || []
       c.face_count = c.member_faces.length
     }
-    console.log('[cluster] groups extracted:', groups.length, groups)
     if (groups.length) {
       setClusterResults(fileUuid, groups)
-      console.log('[cluster] set', groups.length, 'groups')
 
       // Load trace profiles for names in background (non-blocking)
       loadClusterNames(fileUuid, groups).catch(() => {})
 
-      // Build trace map for representative thumbnails
-      const allTraces: any[] = []
-      for (let page = 1; page <= 10; page++) {
-        const resp: any = await apiCall('get_unassigned_traces', { fileUuid, page, perPage: 100 })
-        const batch = resp.traces || []
-        allTraces.push(...batch)
-        if (batch.length < 100) break
-      }
-      if (selectedFileUuid.value !== fileUuid) return
-      clusterTracesMap.value = {}
-      for (const t of allTraces) {
-        if (!t.file_uuid) {
-          console.warn('[cluster] trace missing file_uuid:', t.trace_id, t)
-        }
-        clusterTracesMap.value[String(t.trace_id)] = t
-      }
-
-      // Also add traces from cluster results to the map
+      // Load thumbnails for cluster representatives immediately.
+      // rep 資料只需 file_uuid + trace_id，皆已存在 cluster-results payload 中，
+      // 不需等待慢速的 get_unassigned_traces（~5s/page）。
       for (const c of groups) {
         const traceIds = c.trace_ids || []
-        for (const tid of traceIds) {
-          if (!clusterTracesMap.value[String(tid)]) {
-            // Create trace entry from cluster data
-            const repTrace = clusterTracesMap.value[String(c.representative_trace || traceIds[0])]
-            if (repTrace) {
-              clusterTracesMap.value[String(tid)] = {
-                ...repTrace,
-                trace_id: tid,
-              }
-            }
-          }
-        }
+        const repId = c.representative_trace !== undefined && c.representative_trace !== null ? c.representative_trace : traceIds[0]
+        if (repId === undefined || repId === null) continue
+        loadTraceThumb({ trace_id: repId, file_uuid: fileUuid, best_face_id: 0 })
       }
 
-      // Load thumbnails for cluster representatives
-      for (const c of groups) {
-        const traceIds = c.trace_ids || []
-        const repId = c.representative_trace || traceIds[0]
-        const rep = clusterTracesMap.value[String(repId)]
-        if (rep?.file_uuid) loadTraceThumb(rep)
-      }
-
-      // Load TMDB identity matches and assign to clusters
-      try {
-        const identityResults: any = await apiCall('get_identity_matches', { fileHash: fileUuid })
-        if (identityResults?.suggestions) {
-          const suggestions = identityResults.suggestions as Record<string, any>
-          for (const c of groups) {
-            const traceIds = c.trace_ids || []
-            // Count identity matches in this cluster
-            const identityCounts: Record<string, { name: string; uuid: string; count: number }> = {}
-            for (const tid of traceIds) {
-              const s = suggestions[String(tid)]
-              if (s) {
-                const key = s.group_uuid
-                if (!identityCounts[key]) {
-                  identityCounts[key] = { name: s.name, uuid: s.group_uuid, count: 0 }
+      // Build trace map in background (non-blocking, parallel pages).
+      // 只服務 cluster detail modal 的 member strip，不應阻塞 Face Group 主網格。
+      buildClusterTracesMap(fileUuid, groups)
+      void (async () => {
+        // Load TMDB identity matches and assign to clusters
+        try {
+          const identityResults: any = await apiCall('get_identity_matches', { fileHash: fileUuid })
+          if (identityResults?.suggestions) {
+            const suggestions = identityResults.suggestions as Record<string, any>
+            for (const c of groups) {
+              const traceIds = c.trace_ids || []
+              // Count identity matches in this cluster
+              const identityCounts: Record<string, { name: string; uuid: string; count: number }> = {}
+              for (const tid of traceIds) {
+                const s = suggestions[String(tid)]
+                if (s) {
+                  const key = s.group_uuid
+                  if (!identityCounts[key]) {
+                    identityCounts[key] = { name: s.name, uuid: s.group_uuid, count: 0 }
+                  }
+                  identityCounts[key].count++
                 }
-                identityCounts[key].count++
+              }
+              // Assign the most common identity name
+              const best = Object.values(identityCounts).sort((a, b) => b.count - a.count)[0]
+              if (best) {
+                c.tmdb_name = best.name
+                c.tmdb_uuid = best.uuid
+                c.tmdb_count = best.count
               }
             }
-            // Assign the most common identity name
-            const best = Object.values(identityCounts).sort((a, b) => b.count - a.count)[0]
-            if (best) {
-              c.tmdb_name = best.name
-              c.tmdb_uuid = best.uuid
-              c.tmdb_count = best.count
-            }
           }
-        }
-      } catch { /* no identity matches available */ }
+        } catch { /* no identity matches available */ }
+      })()
     }
   } catch (e) {
     console.error('[cluster] loadClusterResults failed:', e)
   }
-  console.log('[cluster] cluster results length:', getClusterResults(fileUuid).length)
+}
+
+// 背景建立 clusterTracesMap（並行抓取頁面），只服務 cluster detail modal 的 member strip。
+async function buildClusterTracesMap(fileUuid: string, groups: any[]) {
+  loadingClusterTraces.value = true
+  try {
+    const allTraces: any[] = []
+    const pageSize = 3000
+    const first: any = await apiCall('get_file_traces', { fileUuid, page: 1, page_size: pageSize, limit: pageSize })
+    allTraces.push(...(first?.traces || []))
+    const total = first?.total || 0
+    const totalPages = Math.ceil(total / pageSize)
+    if (totalPages > 1) {
+      const rest = await Promise.all(
+        Array.from({ length: totalPages - 1 }, (_, i) =>
+          apiCall('get_file_traces', { fileUuid, page: i + 2, page_size: pageSize, limit: pageSize })
+            .then((r: any) => r?.traces || [])
+            .catch(() => [] as any[])
+        )
+      )
+      for (const batch of rest) {
+        allTraces.push(...batch)
+      }
+    }
+    if (selectedFileUuid.value !== fileUuid) return
+    clusterTracesMap.value = {}
+    for (const t of allTraces) {
+      if (!t.file_uuid) {
+        console.warn('[cluster] trace missing file_uuid:', t.trace_id, t)
+      }
+      clusterTracesMap.value[String(t.trace_id)] = t
+    }
+
+    // Also add traces from cluster results to the map
+    for (const c of groups) {
+      const traceIds = c.trace_ids || []
+      for (const tid of traceIds) {
+        if (!clusterTracesMap.value[String(tid)]) {
+          // Create trace entry from cluster data
+          const repTrace = clusterTracesMap.value[String(c.representative_trace !== undefined && c.representative_trace !== null ? c.representative_trace : traceIds[0])]
+          if (repTrace) {
+            clusterTracesMap.value[String(tid)] = {
+              ...repTrace,
+              trace_id: tid,
+            }
+          }
+        }
+      }
+    }
+  } catch (e) {
+    console.error('[cluster] buildClusterTracesMap failed:', e)
+  } finally {
+    loadingClusterTraces.value = false
+  }
 }
 
 onMounted(async () => {
+  const rqFile = route.query.file
+  if (typeof rqFile === 'string') selectedFileUuid.value = rqFile
   await refresh()
   // Resume cluster polling if a run was in progress when user navigated away
   if (selectedFileUuid.value && isClusterRunning(selectedFileUuid.value)) {
-    console.log('[cluster] resuming poll for', selectedFileUuid.value)
     await pollClusterResults(selectedFileUuid.value, async (results) => {
       await loadClusterResults()
     })
   }
   document.addEventListener('click', closeFaceCtxMenu)
   document.addEventListener('click', closeClusterCtxMenu)
+  document.addEventListener('click', closeKeyFaceCtxMenu)
+  document.addEventListener('click', closeFrameCtxMenu)
+  document.addEventListener('keydown', handleFaceDetailKeydown)
+  document.addEventListener('mousemove', onDragMove)
+  document.addEventListener('mouseup', onDragEnd)
+  window.addEventListener('resize', onResizeOverlay)
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', closeFaceCtxMenu)
   document.removeEventListener('click', closeClusterCtxMenu)
+  document.removeEventListener('click', closeKeyFaceCtxMenu)
+  document.removeEventListener('click', closeFrameCtxMenu)
+  document.removeEventListener('keydown', handleFaceDetailKeydown)
+  document.removeEventListener('mousemove', onDragMove)
+  document.removeEventListener('mouseup', onDragEnd)
+  window.removeEventListener('resize', onResizeOverlay)
 })
 
-async function loadCandidateThumb(c: any) {
-  if (!c?.file_uuid || candidateThumbs.value[c.id]) return
-  loadFaceThumb(String(c.id), c.file_uuid, c.frame_number || 0, c.bbox)
+function loadCandidateThumb(c: any) {
+  if (!c?.file_uuid) return
+  const traceLike = {
+    trace_id: c.trace_id,
+    file_uuid: c.file_uuid,
+    best_face_id: c.best_face_id,
+    best_face_frame: c.best_face_frame !== undefined && c.best_face_frame !== null ? c.best_face_frame : (c.frame_number || c.start_frame || 0),
+    best_face_bbox: c.best_face_bbox || c.bbox,
+    start_frame: c.start_frame,
+  }
+  const key = thumbTraceKey(traceLike)
+  if (faceThumbsCache.value[key] || loadingFaceThumbs.has(key)) return
+  loadTraceThumb(traceLike)
+}
+
+async function regenerateFaceThumbnail() {
+  const c = faceDetailModal.value.candidate
+  if (!c?.file_uuid || c?.trace_id === undefined) return
+  
+  regeneratingThumbnail.value = true
+  try {
+    await apiCall('regenerate_trace_thumbnail', { 
+      fileUuid: c.file_uuid, 
+      traceId: c.trace_id 
+    })
+    
+    const key = thumbTraceKey(c)
+    if (faceThumbsCache.value[key]) {
+      URL.revokeObjectURL(faceThumbsCache.value[key])
+      delete faceThumbsCache.value[key]
+    }
+    
+    bumpThumbCacheBust()
+    loadCandidateThumb(c)
+  } catch (e) {
+    console.error('regenerateFaceThumbnail error:', e)
+  } finally {
+    regeneratingThumbnail.value = false
+  }
 }
 
 function selectCluster(c: any) {
@@ -1019,6 +2263,14 @@ function selectCluster(c: any) {
   clusterDetailModal.value = { show: true, cluster: c, selectedTrace: null }
   clusterStripPage.value = 1
   clusterSearchQuery.value = ''
+  const traceIds = c.trace_ids || []
+  const missing = traceIds.some((tid: any) => !clusterTracesMap.value[String(tid)])
+  if (missing && !loadingClusterTraces.value) {
+    loadingClusterTraces.value = true
+    loadClusterResults().finally(() => {
+      loadingClusterTraces.value = false
+    })
+  }
 }
 
 async function playClusterVideo() {
@@ -1091,6 +2343,7 @@ async function playClusterVideo() {
       startFrame: firstTrace ? firstTrace.start_frame : 0,
       endFrame: lastTrace ? lastTrace.end_frame : 30,
       title: `${getFileName(fileUuid)} - ${c.name}`,
+      keyFrame: firstTrace?.best_face_frame ?? firstTrace?.first_frame ?? null,
     }
     clusterVideoTraces.value = allClusterTraces
     clusterVideoSegments.value = merged
@@ -1114,6 +2367,7 @@ async function playClusterTraceVideo(trace: any) {
       startFrame: startFrame,
       endFrame: endFrame,
       title: `${getFileName(fileUuid)} - F${trace.trace_id}`,
+      keyFrame: trace.best_face_frame || startFrame,
     }
     clusterVideoTraces.value = [{
       trace_id: trace.trace_id,
@@ -1136,7 +2390,7 @@ async function assignClusterTrace(trace: any) {
   const candidateLike = {
     id: trace.trace_id,
     file_uuid: trace.file_uuid,
-    frame_number: trace.best_face_frame || trace.start_frame,
+    frame_number: trace.best_face_frame !== undefined && trace.best_face_frame !== null ? trace.best_face_frame : (trace.start_frame || 0),
     confidence: trace.best_face_confidence,
     bbox: trace.best_face_bbox,
     trace_id: trace.trace_id,
@@ -1150,7 +2404,8 @@ function playTrace(t: any) {
     fileUuid: t.file_uuid,
     startFrame: t.first_frame || 0,
     endFrame: t.last_frame || (t.first_frame || 0) + 30,
-    title: `F${t.first_frame || 0}-F${t.last_frame || 0} (${formatTime(t.first_sec || 0)}-${formatTime(t.last_sec || 0)})`
+    title: `F${t.first_frame || 0}-F${t.last_frame || 0} (${formatTime(t.first_sec || 0)}-${formatTime(t.last_sec || 0)})`,
+    keyFrame: t.best_face_frame || t.first_frame || 0,
   }
   playing.value = true
 }
@@ -1165,12 +2420,15 @@ async function openFaceDetailFromTrace(t: any) {
   const candidate = {
     id: t.trace_id,
     file_uuid: t.file_uuid,
-    frame_number: t.best_face_frame || t.start_frame,
+    frame_number: t.best_face_frame !== undefined && t.best_face_frame !== null ? t.best_face_frame : (t.start_frame || 0),
     confidence: t.best_face_confidence,
     bbox: t.best_face_bbox,
     trace_id: t.trace_id,
     frame_count: t.frame_count,
     best_face_id: t.best_face_id,
+    capture_quality: faceQuality(t),
+    start_frame: t.start_frame ?? 0,
+    end_frame: t.end_frame ?? (t.start_frame ?? 0) + (t.frame_count ?? 1),
   }
   faceDetailModal.value = { show: true, candidate, newIdentityName: '' }
   faceSourceClusterId.value = clusterDetailModal.value.cluster?.cluster_id ?? null
@@ -1178,14 +2436,16 @@ async function openFaceDetailFromTrace(t: any) {
   faceMoveNewGroupName.value = ''
   loadCandidateThumb(candidate)
 
-  faceDetailPose.value = null
+  faceDetailLandmarks.value = null
+  landmarkScore.value = null
   faceDetailAppearance.value = null
   faceDetailFrameUrl.value = ''
   faceDetailVideoSize.value = null
 
-  const frame = t.best_face_frame || t.start_frame
   const bbox = t.best_face_bbox
-  if (t.file_uuid && frame) {
+
+  const frame = t.best_face_frame !== undefined && t.best_face_frame !== null ? t.best_face_frame : (t.start_frame || 0)
+  if (t.file_uuid && frame !== undefined && frame !== null) {
     faceDetailFrameUrl.value = `/api/v1/media/frame?file_uuid=${t.file_uuid}&frame=${frame}`
 
     try {
@@ -1193,22 +2453,105 @@ async function openFaceDetailFromTrace(t: any) {
       const videoWidth = fileInfo?.width || 1920
       const videoHeight = fileInfo?.height || 1080
       faceDetailVideoSize.value = { width: videoWidth, height: videoHeight }
-      console.log('[pose] Video size:', videoWidth, 'x', videoHeight)
-      console.log('[pose] BBox:', bbox)
 
-      console.log('[pose] Loading for file:', t.file_uuid, 'frame:', frame)
-      const [pose, appearance] = await Promise.all([
-        getPose(t.file_uuid, frame, bbox),
+      const [landmarks, appearance] = await Promise.all([
+        getFaceLandmarks(t.file_uuid, frame, bbox),
         getAppearance(t.file_uuid, frame, bbox)
       ])
-      console.log('[pose] Response:', pose)
-      console.log('[appearance] Response:', appearance)
-      faceDetailPose.value = pose
+      faceDetailLandmarks.value = landmarks
       faceDetailAppearance.value = appearance
+      if (landmarks) {
+        landmarkScore.value = scoreFaceLandmarks(landmarks)
+      }
     } catch (e) {
-      console.error('Failed to load pose/appearance:', e)
+      console.error('Failed to load landmarks/appearance:', e)
     }
   }
+  setFaceDetailNavContext(t)
+}
+
+function setFaceDetailNavContext(t: any) {
+  // The trace's own group takes priority — navigation is limited to that group
+  const groupName = traceGroupMap.value[String(t.trace_id)]
+  if (groupName) {
+    const cluster = clusterResults.value.find((c: any) => c.name === groupName)
+    if (cluster) {
+      const traces = filteredGroupTraces(cluster)
+      const cIdx = traces.findIndex((x: any) => x.trace_id === t.trace_id)
+      if (cIdx >= 0) {
+        faceDetailNavSource.value = 'cluster'
+        faceDetailNavIndex.value = cIdx
+        return
+      }
+    }
+  }
+  // Truly unassigned traces (already filtered out grouped ones), filter-aware
+  const uIdx = filteredUnassignedTraces.value.findIndex(
+    (x: any) => x.trace_id === t.trace_id && x.file_uuid === t.file_uuid
+  )
+  if (uIdx >= 0) {
+    faceDetailNavSource.value = 'unassigned'
+    faceDetailNavIndex.value = uIdx
+    return
+  }
+  faceDetailNavSource.value = null
+  faceDetailNavIndex.value = -1
+}
+
+function goFaceDetailPrev() {
+  if (!canFaceDetailPrev.value) return
+  faceDetailNavIndex.value--
+  const prev = faceDetailNavList.value[faceDetailNavIndex.value]
+  if (prev) openFaceDetailFromTrace(prev)
+}
+
+function goFaceDetailNext() {
+  if (!canFaceDetailNext.value) return
+  faceDetailNavIndex.value++
+  const next = faceDetailNavList.value[faceDetailNavIndex.value]
+  if (next) openFaceDetailFromTrace(next)
+}
+
+async function deleteCurrentFace() {
+  const candidate = faceDetailModal.value.candidate
+  if (!candidate) return
+  const confirmed = window.confirm(`Delete FS#${candidate.trace_id}? This cannot be undone.`)
+  if (!confirmed) return
+
+  operationLoading.value = true
+  operationMessage.value = `Deleting FS#${candidate.trace_id}...`
+
+  try {
+    await apiCall('delete_trace', {
+      file_uuid: candidate.file_uuid,
+      trace_id: candidate.trace_id,
+      mode: 'delete'
+    })
+    const key = `${candidate.file_uuid}:${candidate.trace_id}`
+    removeTracesFromCache([key])
+
+    // Try next first, then prev
+    if (canFaceDetailNext.value) {
+      goFaceDetailNext()
+    } else if (canFaceDetailPrev.value) {
+      goFaceDetailPrev()
+    } else {
+      faceDetailModal.value.show = false
+      unassignedTracesLoaded.value = false
+      await ensureUnassignedTraces(selectedFileUuid.value, unassignedTracesPage.value)
+    }
+  } catch (e) {
+    console.error('Delete face failed:', e)
+  } finally {
+    operationLoading.value = false
+    operationMessage.value = ''
+  }
+}
+
+function handleFaceDetailKeydown(e: KeyboardEvent) {
+  if (!faceDetailModal.value.show) return
+  if (e.key === 'ArrowLeft') { e.preventDefault(); goFaceDetailPrev() }
+  if (e.key === 'ArrowRight') { e.preventDefault(); goFaceDetailNext() }
 }
 
 function onFrameLoad(e: Event) {
@@ -1232,35 +2575,61 @@ function onFrameLoad(e: Event) {
   redrawOverlay()
 }
 
+function onFullFrameLoad(e: Event) {
+  const img = e.target as HTMLImageElement
+  const canvas = fullFrameCanvas.value
+  if (!canvas) return
+
+  canvas.width = img.naturalWidth
+  canvas.height = img.naturalHeight
+
+  const c = fullFrameContainer.value
+  if (c) {
+    const imgRect = img.getBoundingClientRect()
+    const cRect = c.getBoundingClientRect()
+    canvas.style.width = imgRect.width + 'px'
+    canvas.style.height = imgRect.height + 'px'
+    canvas.style.left = (imgRect.left - cRect.left) + 'px'
+    canvas.style.top = (imgRect.top - cRect.top) + 'px'
+  }
+
+  drawFullFrameOverlay()
+}
+
+function onResizeOverlay() {
+  redrawOverlay()
+  if (showFullFrame.value) drawFullFrameOverlay()
+}
+
+function drawFullFrameOverlay() {
+  const canvas = fullFrameCanvas.value
+  if (!canvas) return
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+
+  ctx.clearRect(0,0, canvas.width, canvas.height)
+  drawOverlays(ctx, canvas.width, canvas.height)
+}
+
 function redrawOverlay() {
   const canvas = poseCanvas.value
   if (!canvas) return
-  
   const ctx = canvas.getContext('2d')
   if (!ctx) return
-  
   ctx.clearRect(0, 0, canvas.width, canvas.height)
-  
+  drawOverlays(ctx, canvas.width, canvas.height)
+}
+
+function drawOverlays(ctx: CanvasRenderingContext2D, cw: number, ch: number) {
   const bbox = faceDetailModal.value.candidate?.bbox
-  const pose = faceDetailPose.value
-  
-  // Debug: log coordinates
-  console.log('[redrawOverlay] canvas:', canvas.width, 'x', canvas.height)
-  console.log('[redrawOverlay] bbox:', bbox)
-  console.log('[redrawOverlay] pose keypoints:', pose?.keypoints?.slice(0, 3))
-  
+  const landmarks = faceDetailLandmarks.value
+
   if (showBboxOverlay.value && bbox) {
-    // Check if bbox is normalized (0-1) or absolute
     const isNormalized = bbox.x <= 1.0 && bbox.y <= 1.0 && bbox.width <= 1.0 && bbox.height <= 1.0
-    console.log('[redrawOverlay] bbox isNormalized:', isNormalized)
-    
-    const x = isNormalized ? bbox.x * canvas.width : bbox.x
-    const y = isNormalized ? bbox.y * canvas.height : bbox.y
-    const w = isNormalized ? bbox.width * canvas.width : bbox.width
-    const h = isNormalized ? bbox.height * canvas.height : bbox.height
-    
-    console.log('[redrawOverlay] drawing bbox at:', x, y, w, h)
-    
+    const x = isNormalized ? bbox.x * cw : bbox.x
+    const y = isNormalized ? bbox.y * ch : bbox.y
+    const w = isNormalized ? bbox.width * cw : bbox.width
+    const h = isNormalized ? bbox.height * ch : bbox.height
     ctx.strokeStyle = '#00ffff'
     ctx.lineWidth = 3
     ctx.strokeRect(x, y, w, h)
@@ -1268,39 +2637,66 @@ function redrawOverlay() {
     ctx.fillRect(x, y, w, h)
   }
   
-  if (showPoseOverlay.value && pose?.keypoints && bbox) {
-    const faceKps = ['nose', 'left_eye', 'right_eye']
-    const faceKeypoints = pose.keypoints.filter(kp => 
-      faceKps.includes(kp.name) && kp.confidence > 0 && kp.x > 0 && kp.y > 0
-    )
-    
-    if (faceKeypoints.length < 2) return
-    
-    const centerX = faceKeypoints.reduce((sum, kp) => sum + kp.x, 0) / faceKeypoints.length
-    const centerY = faceKeypoints.reduce((sum, kp) => sum + kp.y, 0) / faceKeypoints.length
-    
-    const inBbox = centerX >= bbox.x && centerX <= bbox.x + bbox.width &&
-                   centerY >= bbox.y && centerY <= bbox.y + bbox.height
-    
-    if (!inBbox) return
-    
-    const validKeypoints = pose.keypoints.filter(kp => kp.confidence > 0 && kp.x > 0 && kp.y > 0)
-    ctx.fillStyle = '#00ff00'
-    for (const kp of validKeypoints) {
-      ctx.beginPath()
-      ctx.arc(kp.x, kp.y, 6, 0, Math.PI * 2)
-      ctx.fill()
-      
+  if (showOthersOverlay.value && landmarks?.faces && landmarks.faces.length > 0) {
+    let selCx: number | null = null
+    let selCy: number | null = null
+    if (bbox) {
+      const isNorm = bbox.x <= 1.0 && bbox.y <= 1.0 && bbox.width <= 1.0 && bbox.height <= 1.0
+      const bx = isNorm ? bbox.x * cw : bbox.x
+      const by = isNorm ? bbox.y * ch : bbox.y
+      const bw = isNorm ? bbox.width * cw : bbox.width
+      const bh = isNorm ? bbox.height * ch : bbox.height
+      selCx = bx + bw / 2
+      selCy = by + bh / 2
+    }
+    ctx.lineWidth = 1
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.35)'
+    for (const f of landmarks.faces) {
+      const cx = f.x + f.width / 2
+      const cy = f.y + f.height / 2
+      if (selCx != null && selCy != null && Math.abs(cx - selCx) < 5 && Math.abs(cy - selCy) < 5) continue
+      ctx.strokeRect(f.x, f.y, f.width, f.height)
+    }
+  }
+  
+  if (showLandmarkOverlay.value && landmarks?.landmarks) {
+    const groups: Array<{ key: string; label: string; color: string }> = [
+      { key: 'right_eye', label: 'left_eye', color: '#00ffff' },
+      { key: 'left_eye', label: 'right_eye', color: '#ffff00' },
+      { key: 'nose', label: 'nose', color: '#00ff00' }
+    ]
+    for (const g of groups) {
+      const ptsArr: number[][] = landmarks.landmarks?.[g.key as 'left_eye' | 'right_eye' | 'nose'] || []
+      if (ptsArr.length === 0) continue
+      ctx.fillStyle = g.color
+      for (const p of ptsArr) {
+        ctx.beginPath()
+        ctx.arc(p[0], p[1], 6, 0, Math.PI * 2)
+        ctx.fill()
+      }
       ctx.fillStyle = '#fff'
       ctx.font = '10px sans-serif'
-      ctx.fillText(kp.name, kp.x + 8, kp.y + 4)
-      ctx.fillStyle = '#00ff00'
+      ctx.fillText(g.label, ptsArr[0][0] + 8, ptsArr[0][1] + 4)
+    }
+
+    const outer = landmarks.lips?.outer_lips || []
+    if (outer.length > 0) {
+      ctx.strokeStyle = '#ff69b4'
+      ctx.lineWidth = 2
+      ctx.beginPath()
+      outer.forEach((p: number[], i: number) => {
+        if (i === 0) ctx.moveTo(p[0], p[1])
+        else ctx.lineTo(p[0], p[1])
+      })
+      ctx.closePath()
+      ctx.stroke()
     }
   }
 }
 
-watch([showBboxOverlay, showPoseOverlay], () => {
+watch([showBboxOverlay, showLandmarkOverlay, showOthersOverlay], () => {
   redrawOverlay()
+  if (showFullFrame.value) drawFullFrameOverlay()
 })
 
 function formatHistoryTime(ts: string): string {
@@ -1393,7 +2789,8 @@ async function playFaceDetailVideo() {
       fileUuid: c.file_uuid,
       startFrame: Math.round(startTime * fps),
       endFrame: Math.round(endTime * fps),
-      title: `F${Math.round(startTime * fps)}-F${Math.round(endTime * fps)} (${c.name})`
+      title: `F${Math.round(startTime * fps)}-F${Math.round(endTime * fps)} (${c.name})`,
+      keyFrame: frame,
     }
     playing.value = true
   } catch (e) {
@@ -1403,7 +2800,8 @@ async function playFaceDetailVideo() {
       fileUuid: c.file_uuid,
       startFrame: Math.round(Math.max(0, frameTime - 5) * defaultFps),
       endFrame: Math.round((frameTime + 5) * defaultFps),
-      title: `F${Math.round(Math.max(0, frameTime - 5) * defaultFps)}-F${Math.round((frameTime + 5) * defaultFps)}`
+      title: `F${Math.round(Math.max(0, frameTime - 5) * defaultFps)}-F${Math.round((frameTime + 5) * defaultFps)}`,
+      keyFrame: frame,
     }
     playing.value = true
   }
@@ -1438,6 +2836,11 @@ async function confirmMoveFace() {
   const finalClusters = updatedClusters.filter((cr: any) => cr.trace_ids.length > 0 || cr.cluster_id === Number(targetId))
   clusterResultsCache.value[selectedFileUuid.value] = finalClusters
   
+  // Remove from unassigned cache if source was unassigned
+  if (sourceId === null) {
+    unassignedTracesCache.value = unassignedTracesCache.value.filter((t: any) => t.trace_id !== tid)
+  }
+  
   try {
     await updateTraceProfileGroup(c.file_uuid, [tid], { name: target.name || `Group ${targetId}` })
   } catch (e) { console.error('move face failed:', e) }
@@ -1481,6 +2884,12 @@ async function confirmMoveFaceToNewGroup() {
     }
   }
   clusterResultsCache.value[selectedFileUuid.value] = updatedClusters
+  
+  // Remove from unassigned cache if source was unassigned
+  if (sourceId === null) {
+    unassignedTracesCache.value = unassignedTracesCache.value.filter((t: any) => t.trace_id !== tid)
+  }
+  
   try {
     await updateTraceProfileGroup(c.file_uuid, [tid], { name })
   } catch (e) { console.error('create group and move face failed:', e) }
@@ -1523,15 +2932,52 @@ function showTraceCtxMenu(e: MouseEvent, t: any) {
   const candidateLike = {
     id: t.trace_id,
     file_uuid: t.file_uuid,
-    frame_number: t.best_face_frame || t.start_frame,
+    frame_number: t.best_face_frame !== undefined && t.best_face_frame !== null ? t.best_face_frame : (t.start_frame || 0),
     confidence: t.best_face_confidence,
     bbox: t.best_face_bbox,
     trace_id: t.trace_id,
     frame_count: t.frame_count,
+    best_face_id: t.best_face_id,
+    capture_quality: faceQuality(t),
   }
   faceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY, candidate: candidateLike }
 }
 
+function showKeyFaceCtxMenu(e: MouseEvent) {
+  keyFaceCtxMenu.value = { show: true, x: e.clientX, y: e.clientY }
+}
+
+function showFrameCtxMenu(e: MouseEvent) {
+  frameCtxMenu.value = { show: true, x: e.clientX, y: e.clientY }
+}
+
+async function openTraceProfileJson() {
+  const c = faceDetailModal.value.candidate
+  if (!c?.file_uuid || c.trace_id == null) {
+    traceProfileJsonTitle.value = 'trace_profile.json'
+    traceProfileJsonContent.value = 'No file_uuid / trace_id available for this face.'
+    traceProfileJsonDialog.value = true
+    return
+  }
+  traceProfileJsonTitle.value = `trace_profile.json — ${c.file_uuid}:FS#${c.trace_id}`
+  traceProfileJsonContent.value = 'Loading...'
+  traceProfileJsonDialog.value = true
+  try {
+    const data: any = await apiCall('get_trace_profile_file', { file_uuid: c.file_uuid, trace_id: c.trace_id })
+    traceProfileJsonContent.value = JSON.stringify(data, null, 2)
+  } catch (e: any) {
+    traceProfileJsonContent.value = `Error: ${e?.message || e}`
+  }
+}
+
+function closeFrameCtxMenu() {
+  frameCtxMenu.value.show = false
+}
+
+function closeKeyFaceCtxMenu() {
+  keyFaceCtxMenu.value.show = false
+}
+
 function toggleFaceSelection(t: any) {
   const key = `${t.file_uuid}:${t.trace_id}`
   const idx = selectedFaces.value.indexOf(key)
@@ -1652,37 +3098,58 @@ function removeTracesFromClusterCache(traceIds: number[]) {
 
 async function batchDeleteFaces() {
   if (!selectedFaces.value.length) return
-  
+
   const traceList: { file_uuid: string; trace_id: number }[] = []
   for (const key of selectedFaces.value) {
     const [file_uuid, trace_id] = key.split(':')
     traceList.push({ file_uuid, trace_id: parseInt(trace_id) })
   }
-  
-  if (!confirm(`Delete ${traceList.length} trace(s)?`)) return
-  
+
+  pendingDeleteFaces.value = traceList
+  deleteConfirmInput.value = ''
+  showDeleteFacesModal.value = true
+}
+
+async function confirmDeleteFaces() {
+  if (deleteConfirmInput.value.trim().toUpperCase() !== 'DELETE') return
+  const traceList = [...pendingDeleteFaces.value]
+  if (!traceList.length) return
+
+  showDeleteFacesModal.value = false
+  deleteConfirmInput.value = ''
+
   operationLoading.value = true
   operationMessage.value = `Deleting ${traceList.length} trace(s)...`
-  
+
   const deletedKeys = [...selectedFaces.value]
-  
-  lastDeletedTraces.value = []
+
+  let failedCount = 0
+  let filesNotRemoved = 0
   for (const t of traceList) {
     try {
-      await apiCall('delete_trace', { file_uuid: t.file_uuid, trace_id: t.trace_id })
-      lastDeletedTraces.value.push(t)
+      const res: any = await apiCall('delete_trace', { file_uuid: t.file_uuid, trace_id: t.trace_id, mode: 'delete' })
+      if (res?.files_removed === false) filesNotRemoved++
     } catch (e) {
       console.error('Delete failed:', t, e)
+      failedCount++
     }
   }
-  
+
   removeTracesFromCache(deletedKeys)
-  
+
   operationLoading.value = false
   operationMessage.value = ''
-  
+
   clearSelection()
-  showUndoBannerWithTimer()
+  pendingDeleteFaces.value = []
+  unassignedTracesLoaded.value = false
+  await ensureUnassignedTraces(selectedFileUuid.value, unassignedTracesPage.value)
+
+  if (failedCount > 0) {
+    alert(`${failedCount} trace(s) failed to delete.`)
+  } else if (filesNotRemoved > 0) {
+    alert(`${filesNotRemoved} trace(s) deleted from database but disk files could not be removed.`)
+  }
 }
 
 async function batchDeleteGroups() {
@@ -1727,6 +3194,74 @@ async function batchDeleteGroups() {
   await loadClusterResults()
 }
 
+function batchDeleteGroupTraces() {
+  if (!selectedGroups.value.length) return
+
+  const groupIds = Array.from(selectedGroups.value)
+  const groupsToDelete = faceGroups.value.filter((c: any) => groupIds.includes(c.group_uuid))
+
+  const traceList: { file_uuid: string; trace_id: number }[] = []
+  for (const g of groupsToDelete) {
+    const traceIds = g.trace_ids || []
+    const fileUuid = g.rep_trace?.file_uuid || selectedFileUuid.value
+    if (!fileUuid) continue
+    for (const tid of traceIds) {
+      traceList.push({ file_uuid: fileUuid, trace_id: tid })
+    }
+  }
+
+  if (!traceList.length) return
+
+  pendingDeleteGroupFaces.value = traceList
+  deleteGroupConfirmInput.value = ''
+  showDeleteGroupModal.value = true
+}
+
+async function confirmDeleteGroupFaces() {
+  if (deleteGroupConfirmInput.value.trim().toUpperCase() !== 'DELETE') return
+  const traceList = [...pendingDeleteGroupFaces.value]
+  if (!traceList.length) return
+
+  showDeleteGroupModal.value = false
+  deleteGroupConfirmInput.value = ''
+
+  operationLoading.value = true
+  operationMessage.value = `Deleting ${traceList.length} trace(s) from group(s)...`
+
+  let failedCount = 0
+  let filesNotRemoved = 0
+  for (const t of traceList) {
+    try {
+      const res: any = await apiCall('delete_trace', { file_uuid: t.file_uuid, trace_id: t.trace_id, mode: 'delete' })
+      if (res?.files_removed === false) filesNotRemoved++
+    } catch (e) {
+      console.error('Delete group trace failed:', t, e)
+      failedCount++
+    }
+  }
+
+  // Remove deleted traces from cluster cache
+  for (const t of traceList) {
+    delete clusterTracesMap.value[String(t.trace_id)]
+  }
+
+  // Clear selection and reload
+  clearSelection()
+  pendingDeleteGroupFaces.value = []
+  unassignedTracesLoaded.value = false
+  await ensureUnassignedTraces(selectedFileUuid.value, unassignedTracesPage.value)
+  await loadClusterResults()
+
+  operationLoading.value = false
+  operationMessage.value = ''
+
+  if (failedCount > 0) {
+    alert(`${failedCount} trace(s) failed to delete.`)
+  } else if (filesNotRemoved > 0) {
+    alert(`${filesNotRemoved} trace(s) deleted from database but disk files could not be removed.`)
+  }
+}
+
 async function batchMergeGroups() {
   if (selectedGroups.value.length < 2) {
     alert('Select at least 2 groups to merge')
@@ -1734,24 +3269,19 @@ async function batchMergeGroups() {
   }
   
   const groupIds = Array.from(selectedGroups.value)
-  console.log('[batchMergeGroups] groupIds:', groupIds)
   
   mergeCandidateGroups.value = faceGroups.value.filter((c: any) => groupIds.includes(c.group_uuid))
-  console.log('[batchMergeGroups] mergeCandidateGroups:', mergeCandidateGroups.value.length)
   
   showMergeTargetModal.value = true
 }
 
 async function executeMerge(targetGroupId: string) {
-  console.log('[executeMerge] targetGroupId:', targetGroupId)
   showMergeTargetModal.value = false
   
   const targetGroup = faceGroups.value.find((c: any) => c.group_uuid === targetGroupId)
-  console.log('[executeMerge] targetGroup:', targetGroup)
   if (!targetGroup) return
   
   const targetGroupName = targetGroup.name
-  console.log('[executeMerge] targetGroupName:', targetGroupName)
   if (!targetGroupName) {
     alert('Target group has no name')
     return
@@ -1760,10 +3290,8 @@ async function executeMerge(targetGroupId: string) {
   const groupIds = Array.from(selectedGroups.value)
   const sourceGroupIds = groupIds.filter(id => id !== targetGroupId)
   const sourceGroups = faceGroups.value.filter((c: any) => sourceGroupIds.includes(c.group_uuid))
-  console.log('[executeMerge] sourceGroups:', sourceGroups.length)
   
   const sourceGroupNames = sourceGroups.map(g => g.name).filter(Boolean)
-  console.log('[executeMerge] sourceGroupNames:', sourceGroupNames)
   
   if (sourceGroupNames.length === 0) {
     alert('No valid source groups to merge')
@@ -1776,22 +3304,14 @@ async function executeMerge(targetGroupId: string) {
   operationMessage.value = `Merging ${sourceGroupNames.length} group(s)...`
   
   try {
-    console.log('[executeMerge] calling merge_groups API:', {
-      fileUuid: selectedFileUuid.value,
-      sourceGroups: sourceGroupNames,
-      targetGroupName: targetGroupName
-    })
-    
     const result = await apiCall('merge_groups', {
       fileUuid: selectedFileUuid.value,
       sourceGroups: sourceGroupNames,
       targetGroupName: targetGroupName
     })
     
-    console.log('[executeMerge] result:', result)
     
     if (result?.success) {
-      console.log('[executeMerge] success, traces_merged:', result.traces_merged)
       await loadClusterResults()
       clearSelection()
     } else {
@@ -1846,6 +3366,10 @@ async function moveToGroup(targetGroup: any) {
     await loadClusterResults()
   }
   
+  // Remove moved traces from unassigned cache
+  const movedTraceIds = traceList.map(t => t.trace_id)
+  unassignedTracesCache.value = unassignedTracesCache.value.filter((t: any) => !movedTraceIds.includes(t.trace_id))
+  
   operationLoading.value = false
   operationMessage.value = ''
   
@@ -1888,6 +3412,10 @@ async function createNewGroupAndMove() {
     await loadClusterResults()
   }
   
+  // Remove moved traces from unassigned cache
+  const movedTraceIds = traceList.map(t => t.trace_id)
+  unassignedTracesCache.value = unassignedTracesCache.value.filter((t: any) => !movedTraceIds.includes(t.trace_id))
+  
   operationLoading.value = false
   operationMessage.value = ''
   
@@ -1917,6 +3445,10 @@ async function deleteSelectedClusterTraces() {
   await loadClusterResults()
 }
 
+function goToLibrary() {
+  router.push('/library')
+}
+
 async function runDataQC() {
   if (!selectedFileUuid.value) {
     alert('Please select a file first')
@@ -2036,6 +3568,9 @@ async function runDataQC() {
   try {
     const fileProfile: any = await apiCall('get_file_profile', { fileUuid })
     fileProfileResult.canRead = !!fileProfile
+    if (fileProfile) {
+      qcFileProfileInfo.value = { ...fileProfile }
+    }
     if (fileProfile?.key_frame != null) {
       fileProfileResult.keyFrame = fileProfile.key_frame
       qcFileProfile.value = {
@@ -2064,7 +3599,17 @@ async function runDataQC() {
     check: 'File Profile',
     status: fileProfileResult.canRead && fileProfileResult.canWrite ? 'PASS' : 'FAIL',
     details: fileProfileResult.canRead && fileProfileResult.canWrite 
-      ? `Read/Write OK, Key Frame: ${fileProfileResult.keyFrame ?? 'N/A'}`
+      ? (() => {
+          const fp = qcFileProfileInfo.value
+          if (!fp) return `Read/Write OK, Key Frame: ${fileProfileResult.keyFrame ?? 'N/A'}`
+          const parts = []
+          if (fp.duration != null) parts.push(`duration=${fp.duration}s`)
+          if (fp.width && fp.height) parts.push(`${fp.width}×${fp.height}`)
+          if (fp.fps != null) parts.push(`fps=${Number(fp.fps).toFixed(2)}`)
+          if (fp.total_frames != null) parts.push(`frames=${fp.total_frames}`)
+          if (fp.status) parts.push(`status=${fp.status}`)
+          return `Read/Write OK, Key Frame: ${fileProfileResult.keyFrame ?? 'N/A'} | ${parts.join(' | ')}`
+        })()
       : `Read: ${fileProfileResult.canRead ? '✓' : '✗'}, Write: ${fileProfileResult.canWrite ? '✓' : '✗'}`
   })
   
@@ -2094,6 +3639,24 @@ async function runDataQC() {
   let withKeyFrame = 0
   let withKeyFace = 0
   const profileIssues: { traceId: number; fileUuid: string; groupName: string; canRead: boolean; canWrite: boolean; hasKeyFrame: boolean; hasKeyFace: boolean; error?: string }[] = []
+
+  // Key-face bbox / confidence / FS profile accumulators
+  const shortAcc = [] as number[]
+  const areaAcc = [] as number[]
+  const confAcc = [] as number[]
+  const fcAcc = [] as number[]
+  const avgConfAcc = [] as number[]
+  const bestConfAcc = [] as number[]
+  const durAcc = [] as number[]
+  const poseAcc = [] as number[]
+  const spanAcc = [] as number[]
+  const filterCand = [] as { conf: number; short: number; quality: number | null }[]
+  
+  const sumMinMax = (arr: number[], rnd: (n: number) => number = (n) => Math.round(n * 1000) / 1000) => {
+    if (!arr.length) return { min: 0, avg: 0, max: 0 }
+    const sum = arr.reduce((a, b) => a + b, 0)
+    return { min: rnd(Math.min(...arr)), avg: rnd(sum / arr.length), max: rnd(Math.max(...arr)) }
+  }
   
   for (const traceId of allTraceIds) {
     tested++
@@ -2113,16 +3676,17 @@ async function runDataQC() {
       hasKeyFace: false
     }
     
+    let profile: any = null
     if (trace?.file_uuid) {
       try {
-        const profile: any = await apiCall('get_trace_profile', { 
+        profile = await apiCall('get_trace_profile', { 
           fileUuid: trace.file_uuid, 
           traceId 
         })
         result.canRead = !!profile
         if (profile) {
-          result.hasKeyFrame = profile.key_frame != null && profile.key_frame >= 0
-          result.hasKeyFace = profile.key_face != null && profile.key_face >= 0
+          result.hasKeyFrame = profile.key_frame != null && profile.key_frame !== ''
+          result.hasKeyFace = profile.key_face != null && profile.key_face !== ''
           if (result.hasKeyFrame) withKeyFrame++
           if (result.hasKeyFace) withKeyFace++
         }
@@ -2146,17 +3710,95 @@ async function runDataQC() {
       result.error = 'missing file_uuid'
     }
     
+    // Aggregate key-face bbox + confidence + FS profile stats
+    const t: any = trace || {}
+    const bbox: any = t.best_face_bbox || (result.canRead ? (profile?.bbox ?? profile?.properties?.avg_bbox ?? null) : null) || {}
+    const w = Number(bbox.width ?? 0)
+    const h = Number(bbox.height ?? 0)
+    if (w > 0 && h > 0) {
+      shortAcc.push(Math.min(w, h))
+      areaAcc.push(w * h)
+    }
+    const conf = Number(t.best_face_confidence ?? profile?.properties?.best_face_confidence ?? 0)
+    if (conf > 0) confAcc.push(conf)
+    const shortSide = Math.min(w, h)
+    if (conf > 0 && shortSide > 0) filterCand.push({ conf, short: shortSide, quality: faceQuality(t) })
+    const fc = Number(t.face_count ?? 0)
+    if (fc > 0) fcAcc.push(fc)
+    const avgConf = Number(t.avg_confidence ?? 0)
+    if (avgConf > 0) avgConfAcc.push(avgConf)
+    const bestConf = Number(t.best_face_confidence ?? 0)
+    if (bestConf > 0) bestConfAcc.push(bestConf)
+    const dur = Number(t.duration_sec ?? 0)
+    if (dur > 0) durAcc.push(dur)
+    const pose = Number(t.pose_count ?? profile?.properties?.pose_count ?? 0)
+    if (pose > 0) poseAcc.push(pose)
+    const span = Number(t.end_frame ?? profile?.properties?.end_frame ?? 0) - Number(t.start_frame ?? profile?.properties?.start_frame ?? 0)
+    if (span >= 0) spanAcc.push(span)
+    
     if (!result.canRead || !result.canWrite || (!result.hasKeyFrame && !result.hasKeyFace)) {
       profileIssues.push(result)
       qcProfileIssues.value = [...profileIssues]
     }
   }
   
+  // Face Filter hidden-state statistics — computed from the 22 traces' own data
+  // (best_face_confidence + best_face_bbox short side vs effective thresholds),
+  // NOT from ffFaces/ffStatus which may be empty during a QC run.
+  const rawMinConf = ffMinConfPct.value
+  const rawMinSize = ffMinSizePx.value
+  const rawMinQuality = ffMinQuality.value
+  const minConfEffective = filterCand.length && rawMinConf > 0
+    ? (filterCand.some(c => c.conf * 100 < rawMinConf) ? rawMinConf : 0)
+    : 0
+  const minSizeEffective = filterCand.length && rawMinSize > 0
+    ? (filterCand.some(c => c.short < rawMinSize) ? rawMinSize : 0)
+    : 0
+  const minQualityEffective = filterCand.length && rawMinQuality > 0
+    ? (filterCand.some(c => c.quality != null && c.quality < rawMinQuality) ? rawMinQuality : 0)
+    : 0
+  const confThreshold = minConfEffective / 100
+  let visibleCount = 0, hiddenConfOnly = 0, hiddenSizeOnly = 0, hiddenBoth = 0, hiddenQualOnly = 0
+  for (const c of filterCand) {
+    const passConf = c.conf >= confThreshold
+    const passSize = c.short >= minSizeEffective
+    const passQual = c.quality == null || c.quality >= minQualityEffective
+    if (passConf && passSize && passQual) visibleCount++
+    else if (passConf && passSize) hiddenQualOnly++
+    else if (passConf && passQual) hiddenSizeOnly++
+    else if (passSize && passQual) hiddenConfOnly++
+    else hiddenBoth++
+  }
+
   qcTraceSummary.value = {
     total: tested,
     withKeyFrame,
     withKeyFace,
-    missingBoth: tested - withKeyFrame - withKeyFace + profileIssues.filter(p => p.hasKeyFrame && p.hasKeyFace).length
+    missingBoth: tested - withKeyFrame - withKeyFace + profileIssues.filter(p => p.hasKeyFrame && p.hasKeyFace).length,
+    bboxShort: sumMinMax(shortAcc, (n) => Math.round(n)),
+    bboxArea: sumMinMax(areaAcc, (n) => Math.round(n)),
+    conf: sumMinMax(confAcc, (n) => Math.round(n * 1000) / 1000),
+    filter: {
+      active: minConfEffective > 0 || minSizeEffective > 0 || minQualityEffective > 0,
+      minConfPct: minConfEffective,
+      minSizePx: minSizeEffective,
+      minQualityPct: minQualityEffective,
+      visible: visibleCount,
+      hidden: filterCand.length - visibleCount,
+      hiddenConfOnly,
+      hiddenSizeOnly,
+      hiddenBoth,
+      hiddenQualOnly,
+      hiddenNeither: visibleCount,
+    },
+    fs: {
+      faceCount: sumMinMax(fcAcc, (n) => Math.round(n)),
+      avgConf: sumMinMax(avgConfAcc, (n) => Math.round(n * 1000) / 1000),
+      bestConf: sumMinMax(bestConfAcc, (n) => Math.round(n * 1000) / 1000),
+      durationSec: sumMinMax(durAcc, (n) => Math.round(n * 100) / 100),
+      poseCount: sumMinMax(poseAcc, (n) => Math.round(n)),
+      frameSpan: sumMinMax(spanAcc, (n) => Math.round(n)),
+    },
   }
   
   // FS profile summary
@@ -2199,7 +3841,6 @@ async function runDataQC() {
   })
   
   qcProgress.value.status = 'QC Complete'
-  console.log('[QC] Complete:', qcReport.value)
 }
 
 function copyQCReport() {
@@ -2233,6 +3874,29 @@ function copyQCReport() {
   }
   lines.push(`Key Frame: ${qcTraceSummary.value.withKeyFrame}/${qcTraceSummary.value.total}`)
   lines.push(`Key Face: ${qcTraceSummary.value.withKeyFace}/${qcTraceSummary.value.total}`)
+  lines.push(`Key Face BBox short: ${qcTraceSummary.value.bboxShort.avg}px (${qcTraceSummary.value.bboxShort.min}–${qcTraceSummary.value.bboxShort.max})`)
+  lines.push(`Key Face Area: ${qcTraceSummary.value.bboxArea.avg}px² (${qcTraceSummary.value.bboxArea.min}–${qcTraceSummary.value.bboxArea.max})`)
+  lines.push(`Confidence: ${(qcTraceSummary.value.conf.avg * 100).toFixed(1)}% (${(qcTraceSummary.value.conf.min * 100).toFixed(0)}%–${(qcTraceSummary.value.conf.max * 100).toFixed(0)}%)`)
+  lines.push('')
+  
+  lines.push(`Filter: active=${qcTraceSummary.value.filter.active ? 'yes' : 'no'} minConf=${qcTraceSummary.value.filter.minConfPct}% minSize=${qcTraceSummary.value.filter.minSizePx}px minQuality=${qcTraceSummary.value.filter.minQualityPct}% hidden=${qcTraceSummary.value.filter.hidden}/${qcTraceSummary.value.total}`)
+  lines.push(`  confOnly=${qcTraceSummary.value.filter.hiddenConfOnly} sizeOnly=${qcTraceSummary.value.filter.hiddenSizeOnly} qualOnly=${qcTraceSummary.value.filter.hiddenQualOnly} both=${qcTraceSummary.value.filter.hiddenBoth} neither=${qcTraceSummary.value.filter.hiddenNeither}`)
+  lines.push('')
+  
+  if (qcFileProfileInfo.value) {
+    const fp = qcFileProfileInfo.value
+    lines.push(`File Profile: ${fp.file_name} | duration=${fp.duration}s | ${fp.width}×${fp.height} | fps=${Number(fp.fps).toFixed(2)} | frames=${fp.total_frames} | status=${fp.status}`)
+    lines.push('')
+  }
+  
+  const fs = qcTraceSummary.value.fs
+  lines.push('FS Profile:')
+  lines.push(`  face_count: ${fs.faceCount.avg} (${fs.faceCount.min}–${fs.faceCount.max})`)
+  lines.push(`  avg_confidence: ${fs.avgConf.avg} (${fs.avgConf.min}–${fs.avgConf.max})`)
+  lines.push(`  best_confidence: ${fs.bestConf.avg} (${fs.bestConf.min}–${fs.bestConf.max})`)
+  lines.push(`  duration_sec: ${fs.durationSec.avg} (${fs.durationSec.min}–${fs.durationSec.max})`)
+  lines.push(`  pose_count: ${fs.poseCount.avg} (${fs.poseCount.min}–${fs.poseCount.max})`)
+  lines.push(`  frame_span: ${fs.frameSpan.avg} (${fs.frameSpan.min}–${fs.frameSpan.max})`)
   lines.push('')
   
   const passed = qcReport.value.filter(r => r.status === 'PASS').length
@@ -2281,6 +3945,8 @@ h1 { margin: 0; }
 .ms-fm-icon-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
 .ms-ppl-section-toggle-btn { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--border-color); border-radius: 10px; background: var(--card-background); cursor: pointer; font-size: 12.5px; font-family: inherit; color: var(--text-secondary); transition: border-color .15s, color .15s, background .15s; }
 .ms-ppl-section-toggle-btn.active { border-color: var(--text-primary); color: var(--text-primary); background: var(--hover-background); }
+.ms-ppl-close-btn { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .15s, color .15s; }
+.ms-ppl-close-btn:hover { background: var(--hover-background); color: var(--text-primary); }
 .ms-ppl-toggle-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-color); transition: background .15s; }
 .ms-ppl-toggle-dot.on { background: var(--primary-color); }
 .ms-ppl-section { margin-bottom: 8px; }
@@ -2289,7 +3955,8 @@ h1 { margin: 0; }
 .ms-ppl-section-title { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 6px; }
 .ms-ppl-section-count { font-weight: 400; color: var(--muted-text); font-size: 13px; }
 .ms-ppl-hr { border: none; border-top: 1.5px solid var(--border-light); margin: 24px 0; }
-.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; }
+.ms-ppl-face-grid { display: flex; flex-wrap: wrap; gap: 16px; position: relative; }
+.ms-select-rect { position: fixed; z-index: 9999; border: 1.5px solid var(--primary-color); background: rgba(var(--primary-color-rgb), 0.15); pointer-events: none; border-radius: 4px; }
 .ms-ppl-face-card { width: 120px; cursor: pointer; border-radius: 12px; transition: transform .15s, box-shadow .15s; position: relative; overflow: visible; }
 .ms-ppl-face-card:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.1); }
 .ms-ppl-face-card:hover .ms-ppl-face-img-wrap { border-radius: 0; }
@@ -2323,6 +3990,15 @@ h1 { margin: 0; }
 .ms-merge-face-name { font-size: 12px; color: var(--text-primary); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 88px; font-weight: 500; }
 .ms-merge-divider { border: none; border-top: 1px solid var(--border-color); margin: 16px 0; }
 
+.ms-modal-delete-faces { max-width: 480px; width: 92%; padding: 24px 28px; background: var(--card-background); border-radius: 16px; box-shadow: var(--shadow); position: relative; }
+.ms-delete-faces-warning { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 18px; }
+.ms-delete-faces-warning strong { color: var(--danger-color); }
+.ms-delete-faces-confirm { margin-bottom: 18px; }
+.ms-delete-faces-label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
+.ms-delete-faces-label code { background: var(--border-light); padding: 1px 6px; border-radius: 4px; font-size: 12px; color: var(--text-primary); }
+.ms-delete-faces-confirm .ms-ppl-edit-input { width: 100%; }
+.ms-delete-faces-actions { display: flex; justify-content: flex-end; gap: 10px; }
+
 .ms-undo-banner { 
   display: flex; align-items: center; gap: 12px; 
   padding: 10px 16px; margin-bottom: 12px;
@@ -2363,6 +4039,7 @@ h1 { margin: 0; }
 .ms-ppl-face-img-wrap { width: 120px; height: 120px; border-radius: 20px; background: var(--border-light); overflow: hidden; position: relative; transition: border-radius 0.2s; }
 .ms-ppl-face-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; }
 .ms-ppl-frame-img { width: 100%; height: 100%; object-fit: contain; background: #000; }
+.ms-ppl-face-img-loading { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
 .ms-ppl-bbox-overlay { position: absolute; border: 2px solid #ea4335; background: rgba(234,67,53,0.15); pointer-events: none; }
 .ms-ppl-card-star { display: none; position: absolute; top: 4px; right: 4px; font-size: 14px; line-height: 1; }
 .ms-silhouette { width: 100%; height: 100%; }
@@ -2433,8 +4110,24 @@ h1 { margin: 0; }
 .ms-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 9998; align-items: center; justify-content: center; }
 .ms-modal-overlay.show { display: flex; }
 .close-btn { position: absolute; top: 16px; right: 16px; }
+.fs-delete-btn { position: absolute; top: 16px; right: 56px; color: var(--text-secondary); }
+.fs-delete-btn:hover { color: var(--danger-color); }
+
+/* Face detail side navigation arrows */
+.ms-fs-nav-arrow {
+  position: fixed; top: 50%; transform: translateY(-50%); z-index: 10010;
+  width: 44px; height: 44px; border-radius: 50%; border: none;
+  background: rgba(0,0,0,0.5); color: #fff; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: background .2s, transform .15s;
+}
+.ms-fs-nav-arrow:hover { background: rgba(0,0,0,0.8); transform: translateY(-50%) scale(1.1); }
+.ms-fs-nav-prev { left: 24px; }
+.ms-fs-nav-next { right: 24px; }
+
 .ms-ppl-strip-trace-label { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 100%; overflow: hidden; }
 .ms-ppl-strip-group-name { font-size: 9px; color: var(--muted-text); max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ms-ppl-face-strip { overflow-x: auto; min-width: 0; }
 .ms-ppl-strip-face { flex-shrink: 0; width: 80px; }
 
 /* Assign modal */
@@ -2479,22 +4172,22 @@ h1 { margin: 0; }
   width: 92%; 
   max-height: 85vh; 
   overflow-y: auto;
-  padding: 24px 28px; 
+  padding: 46px 28px 24px; 
   background: var(--card-background); 
   border-radius: 16px; 
   box-shadow: var(--shadow); 
   position: relative; 
 }
-.ms-face-detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
+.ms-face-detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; margin-left: 0; }
 .ms-face-detail-thumb { width: 100px; height: 100px; border-radius: 14px; background: var(--border-light); 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: var(--text-primary); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
+.ms-face-detail-title { font-family: 'DM Sans', 'Noto Sans TC', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px; padding-top: 5px; display: flex; align-items: center; gap: 8px; }
 .ms-face-detail-title input { flex: 1; }
-.ms-face-trace-id { font-size: 11px; color: var(--text-secondary); font-family: monospace; }
+.ms-face-trace-id { font-size: 12px; color: var(--text-secondary); font-family: monospace; }
 .ms-edit-btn { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--hover-background); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; }
-.ms-face-detail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
-.ms-face-detail-label { font-size: 12px; color: var(--text-secondary); min-width: 60px; }
+.ms-face-detail-row { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
+.ms-face-detail-label { font-size: 12px; color: var(--text-secondary); min-width: 0; margin-right: 4px; }
 .ms-face-detail-value { font-size: 12px; color: var(--text-primary); }
 .ms-face-detail-video { margin-bottom: 16px; }
 .ms-face-detail-divider { height: 1px; background: var(--border-light); margin: 16px 0; }
@@ -2509,9 +4202,21 @@ h1 { margin: 0; }
 .ms-face-detail-move-row select { flex: 1; }
 .ms-face-detail-move-new-row { display: flex; gap: 8px; margin-top: 8px; }
 .ms-face-detail-move-new-row .ms-ppl-edit-input { flex: 1; }
-.ms-face-detail-footer { display: flex; justify-content: flex-end; margin-top: 20px; }
+.ms-face-detail-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 20px; }
+.ms-fs-nav-bar { display: flex; align-items: center; gap: 8px; flex: 1; }
+.ms-fs-nav-info { display: flex; flex-direction: column; align-items: center; min-width: 60px; }
+.ms-fs-nav-counter { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+.ms-fs-nav-label { font-size: 10px; color: var(--text-secondary); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ms-enlarged-face-modal { display: flex; align-items: center; justify-content: center; background: var(--card-background); border-radius: 16px; padding: 20px; position: relative; max-width: 95vw; max-height: 95vh; }
 .ms-enlarged-face-modal .ms-modal-video-close { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-secondary); line-height: 1; }
+.ms-full-face-modal { display: flex; align-items: center; justify-content: center; background: #000; position: fixed; inset: 0; z-index: 11000; }
+.ms-full-face-modal .ms-modal-video-close { position: fixed; top: 16px; right: 20px; background: rgba(0,0,0,0.5); border: none; font-size: 28px; cursor: pointer; color: #fff; line-height: 1; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 11001; }
+.ms-full-frame-controls { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 11001; background: rgba(0,0,0,0.6); padding: 8px 16px; border-radius: 8px; transition: opacity 0.3s; }
+.ms-full-frame-container { position: relative; display: flex; align-items: center; justify-content: center; max-width: 95vw; max-height: 95vh; }
+.ms-full-frame-img { max-width: 95vw; max-height: 95vh; object-fit: contain; }
+.ms-full-frame-canvas { position: absolute; pointer-events: none; }
+.fade-controls-enter-active, .fade-controls-leave-active { transition: opacity 0.3s; }
+.fade-controls-enter-from, .fade-controls-leave-to { opacity: 0; }
 .ms-load-more { text-align: center; padding: 12px 0; }
 .ms-load-more .ms-fm-btn { font-size: 13px; padding: 6px 20px; color: var(--text-secondary); background: var(--hover-background); border: 1px solid var(--border-color); border-radius: 8px; }
 .ms-load-more .ms-fm-btn:hover { background: var(--border-light); }
@@ -2548,6 +4253,9 @@ h1 { margin: 0; }
 .ms-cluster-search { margin-bottom: 12px; }
 .ms-cluster-search-input { width: 100%; padding: 6px 12px; border: 1.5px solid var(--border-color); border-radius: 8px; font-size: 13px; font-family: inherit; outline: none; background: var(--card-background); color: var(--text-primary); }
 .ms-cluster-search-input:focus { border-color: var(--text-primary); }
+.ms-group-search-input, .ms-faces-search-input { width: auto; flex: 0 1 180px; min-width: 120px; padding: 5px 10px; font-size: 12px; border-radius: 999px; margin-left: 2px; }
+.ms-search-hit { background: rgba(255, 193, 7, 0.4); border-radius: 3px; padding: 0 1px; }
+.ms-ppl-empty-groups { width: 100%; grid-column: 1 / -1; padding: 24px; text-align: center; color: var(--text-secondary); font-size: 13px; }
 
 .ms-face-detail-pose { margin-top: 16px; padding: 12px; background: var(--hover-background); border-radius: 12px; }
 .ms-pose-controls { display: flex; gap: 16px; margin-bottom: 12px; align-items: center; }
@@ -2555,6 +4263,12 @@ h1 { margin: 0; }
 .ms-pose-toggle input { width: 16px; height: 16px; cursor: pointer; }
 .ms-pose-frame-no { font-size: 12px; color: var(--primary-color); font-weight: 500; margin-left: auto; }
 .ms-pose-bbox-info { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; font-family: monospace; }
+.ms-lm-verdict { font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-right: 8px; }
+.ms-lm-verdict--pass { color: #1a7f37; background: rgba(26, 127, 55, 0.15); }
+.ms-lm-verdict--review { color: #b26b00; background: rgba(178, 107, 0, 0.15); }
+.ms-lm-verdict--fail { color: #cf222e; background: rgba(207, 34, 46, 0.15); }
+.ms-lm-score { font-weight: 600; margin-right: 8px; }
+.ms-lm-reasons { color: var(--text-secondary); }
 .ms-pose-frame-container { 
   position: relative; 
   width: 100%; 
@@ -2608,6 +4322,20 @@ h1 { margin: 0; }
 .ms-qc-trace-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
 .ms-qc-trace-stat-label { font-size: 11px; color: var(--text-secondary); }
 .ms-qc-trace-stat-value { font-size: 16px; font-weight: 600; color: var(--text-primary); }
+.ms-qc-trace-stat-sub { font-size: 11px; color: var(--muted-text); margin-top: 2px; }
+
+.ms-qc-filter-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin-bottom: 16px; padding: 12px; background: var(--hover-background); border-radius: 8px; }
+.ms-qc-filter-row { display: flex; justify-content: space-between; align-items: center; }
+.ms-qc-filter-label { font-size: 11px; color: var(--text-secondary); }
+.ms-qc-filter-value { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.ms-qc-filter-value.ms-qc-pass { color: var(--success-color); }
+.ms-qc-filter-sub { grid-column: 1 / -1; font-size: 11px; color: var(--muted-text); margin-top: 4px; }
+
+.ms-qc-fileprofile, .ms-qc-fsprofile { margin-bottom: 16px; padding: 12px; background: var(--hover-background); border-radius: 8px; }
+.ms-qc-fileprofile-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
+.ms-qc-fileprofile-row, .ms-qc-fs-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--border-light); }
+.ms-qc-fileprofile-row:last-child, .ms-qc-fs-row:last-child { border-bottom: none; }
+.ms-qc-fileprofile-val, .ms-qc-fs-val { font-size: 12px; color: var(--text-primary); word-break: break-all; }
 
 .ms-qc-stats { display: flex; gap: 16px; margin-bottom: 20px; padding: 16px; background: var(--hover-background); border-radius: 12px; }
 .ms-qc-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
@@ -2646,4 +4374,83 @@ h1 { margin: 0; }
 .ms-qc-more { text-align: center; font-size: 11px; color: var(--text-secondary); padding: 8px; }
 
 .ms-qc-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
+
+/* Face Filter */
+.ms-face-filter-section {
+  position: sticky;
+  top: 4px;
+  z-index: 30;
+  background:
+    linear-gradient(165deg, color-mix(in srgb, var(--background-color) 72%, rgb(var(--primary-color-rgb)) 10%),
+      color-mix(in srgb, var(--background-color) 45%, rgb(var(--primary-color-rgb)) 6%));
+  border: 1px solid color-mix(in srgb, var(--border-color) 80%, rgb(var(--primary-color-rgb)) 25%);
+  border-radius: 14px;
+  padding: 8px 14px;
+  margin-bottom: 10px;
+  backdrop-filter: blur(18px) saturate(1.6);
+  -webkit-backdrop-filter: blur(18px) saturate(1.6);
+  box-shadow: 0 6px 24px -6px rgba(0,0,0,0.18);
+}
+.ms-face-filter-section::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background: linear-gradient(180deg, color-mix(in srgb, #fff 14%, transparent), transparent 42%);
+}
+.ms-face-filter-section .ms-ppl-section-toolbar { flex-wrap: wrap; row-gap: 4px; margin-bottom: 8px; padding: 0; background: transparent; border: none; position: relative; z-index: 1; }
+.ms-ff-toolbar-actions { margin-left: auto; display: inline-flex; gap: 6px; }
+.ms-face-filter-section > * { position: relative; z-index: 1; }
+.ms-ff-count { font-weight: 400; color: var(--text-secondary); font-size: 12px; }
+.ms-ff-count.cut { color: var(--danger-color); }
+.ms-ff-group-partial { font-size: 10px; color: var(--danger-color); opacity: 0.7; margin-left: 4px; }
+.ms-ff-hist-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
+.ms-ff-hist-group { flex: 1 1 260px; min-width: 260px; }
+.ms-ff-hist-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
+.ms-ff-hist-wrap { border: 1px solid var(--border-color); border-radius: 8px; padding: 8px 10px 5px; cursor: pointer; background: color-mix(in srgb, var(--card-background) 85%, transparent); }
+.ms-ff-hist { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 52px; padding: 21px 2px 0; }
+.ms-ff-hist-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
+.ms-ff-hist-bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--primary-color); opacity: 0.85; position: relative; min-height: 3px; }
+.ms-ff-hist-bar.cut { background: var(--danger-color); opacity: 0.35; }
+.ms-ff-hist-num { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 9px; color: rgba(255,255,255,0.85); white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
+.ms-ff-hist-bar.cut .ms-ff-hist-num { color: var(--danger-color); text-shadow: none; }
+.ms-ff-rug { position: absolute; bottom: 0; left: 0; right: 0; height: 6px; pointer-events: none; }
+.ms-ff-rug-tick { position: absolute; bottom: 0; width: 1.5px; height: 5px; border-radius: 1px; background: var(--text-primary); opacity: 0.45; }
+.ms-ff-rug-tick.cut { background: var(--danger-color); opacity: 0.35; }
+.ms-ff-hist-axis { display: flex; justify-content: space-between; padding-top: 3px; margin-top: 2px; border-top: 1px solid var(--border-color); }
+.ms-ff-hist-tick { font-size: 10px; color: var(--muted-text); line-height: 1; }
+.ms-ff-hist-cursor { position: absolute; top: 0; bottom: 6px; width: 2px; background: #000; border: none; border-radius: 0; z-index: 2; cursor: ew-resize; transform: translateX(-50%); }
+.ms-ff-hist-cursor::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #e11d48; border: 1px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.4); }
+.ms-ff-cursor-label { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #fff; background: var(--primary-color); border-radius: 3px; padding: 1px 5px; white-space: nowrap; line-height: 1; }
+
+/* Face Filter stats bar (horizontal) */
+.ms-ff-stats { display: block; }
+.ms-ff-stats-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); padding: 4px 0; }
+.ms-ff-stats-bar-label { font-weight: 600; color: var(--text-primary); }
+.ms-ff-stats-bar-val { font-size: 12px; color: var(--text-secondary); }
+.ms-ff-stats-bar-val b { color: var(--primary-color); font-weight: 600; }
+.ms-ff-stats-bar-sep { margin: 0 3px; opacity: 0.5; }
+.ms-ff-stats-empty { font-size: 12px; color: var(--text-secondary); padding: 4px 0; }
+
+/* Single Frame FS Settings */
+.ms-ff-single-frame-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
+.ms-ff-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
+.ms-ff-section-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
+.ms-ff-checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
+.ms-ff-checkbox-item { display: flex; flex-direction: column; gap: 2px; }
+.ms-ff-checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--text-primary); }
+.ms-ff-checkbox-label input { width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
+.ms-ff-hint { font-size: 11px; color: var(--text-secondary); margin-left: 20px; }
+.ms-ff-section-actions { display: flex; gap: 8px; }
+
+/* Trace Profile JSON Viewer Modal */
+.ms-modal-box { background: var(--card-background); border-radius: 12px; box-shadow: var(--shadow); max-height: 80vh; display: flex; flex-direction: column; }
+.ms-modal-wide { width: 90vw; max-width: 900px; }
+.ms-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
+.ms-modal-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
+.ms-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--text-secondary); padding: 4px 8px; border-radius: 4px; }
+.ms-modal-close:hover { background: var(--hover-background); }
+.ms-modal-body { padding: 20px; overflow: auto; flex: 1; }
+.ms-json-view { font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text-primary); margin: 0; }
 </style>
diff --git a/src/views/PersonDetailView.vue b/src/views/PersonDetailView.vue
index 94e6b9b..827e2c0 100644
--- a/src/views/PersonDetailView.vue
+++ b/src/views/PersonDetailView.vue
@@ -88,15 +88,15 @@
               </div>
               <template v-if="showAliasInput">
                 <select v-model="aliasLocale" class="ms-ppl-alias-locale-select">
-                  <option value="en">English</option>
-                  <option value="zh-TW">繁體中文</option>
-                  <option value="zh-CN">简体中文</option>
-                  <option value="ja">日本語</option>
-                  <option value="ko">한국어</option>
+                  <option value="en">{{ $t('language.en') }}</option>
+                  <option value="zh-TW">{{ $t('language.zh-TW') }}</option>
+                  <option value="zh-CN">{{ $t('language.zh-CN') }}</option>
+                  <option value="ja">{{ $t('language.ja') }}</option>
+                  <option value="ko">{{ $t('language.ko') }}</option>
                 </select>
                 <input v-model="aliasName" class="ms-ppl-alias-inline-input" placeholder="Enter alias and press Enter" @keyup.enter="addAlias">
               </template>
-              <button v-if="!showAliasInput" class="ms-ppl-alias-add-btn" @click="showAliasInput = true; aliasName = ''">＋ Alias</button>
+              <button v-if="!showAliasInput" class="ms-ppl-alias-add-btn" @click="showAliasInput = true; aliasName = ''">{{ $t('people.detail.add_alias') }}</button>
               <button v-else class="ms-ppl-alias-add-btn" @click="showAliasInput = false">Collapse</button>
             </div>
             <div class="ms-ppl-edit-fields">
@@ -122,8 +122,8 @@
         <button class="ms-ppl-strip-add-btn" @click="showCandidates = true" title="Add same person">＋</button>
         <button class="ms-ppl-strip-arrow" :disabled="faceStripPage === 1" @click="prevFacePage">‹</button>
         <div class="ms-ppl-face-strip">
-          <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-if="loadingTraces" style="padding:10px;color:#999;font-size:12px;">Loading FS...</div>
+          <div v-else-if="allTraces.length === 0" style="padding:10px;color:#999;font-size:12px;">No FS 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="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:contain;border-radius:8px;">
@@ -185,11 +185,11 @@
           <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">{{ allSegCard.count }} segments · {{ allTraces.length }} traces</div>
+          <div class="ms-ppl-media-title">{{ allSegCard.count }} segments · {{ allTraces.length }} FS</div>
           <div class="ms-ppl-media-sub">All segments · {{ formatTime(allSegCard.start) }}</div>
         </div>
       </div>
-      <div v-else-if="!loadingTraces" 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 FS segments available for this person</div>
 
       <!-- Tabs -->
       <div v-show="activeTab === 'actions'">
@@ -867,7 +867,11 @@ let mergeSearchTimer: any
 .ms-ppl-strip-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
 .ms-ppl-strip-add-btn { width: 52px; height: 52px; border-radius: 12px; border: 1.5px dashed var(--border-color); background: var(--card-background); font-size: 20px; color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; outline: none; flex-shrink: 0; transition: border-color .15s, color .15s; }
 .ms-ppl-strip-add-btn:hover { border-color: var(--text-primary); color: var(--text-primary); }
-.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; flex: 1; }
+.ms-ppl-face-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #b8bec6 transparent; flex: 1; min-width: 0; }
+.ms-ppl-face-strip::-webkit-scrollbar { height: 8px; }
+.ms-ppl-face-strip::-webkit-scrollbar-track { background: transparent; }
+.ms-ppl-face-strip::-webkit-scrollbar-thumb { background: #b8bec6; border-radius: 999px; }
+.ms-ppl-face-strip::-webkit-scrollbar-thumb:hover { background: #8a919b; }
 .ms-ppl-strip-face { position: relative; flex-shrink: 0; cursor: pointer; }
 .ms-ppl-strip-face-clickable.selected { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: 14px; }
 .ms-ppl-strip-face-img { width: 52px; height: 52px; border-radius: 12px; border: 2px solid transparent; background: var(--border-light); overflow: hidden; transition: border-color .15s; }
@@ -925,4 +929,12 @@ let mergeSearchTimer: any
 /* Remove button for face strip */
 .ms-ppl-strip-remove-btn { display: none; position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid #d1d5db; font-size: 11px; color: #5f6368; line-height: 1; cursor: pointer; outline: none; place-items: center; }
 .ms-ppl-edit-mode .ms-ppl-strip-remove-btn { display: grid; }
+
+@media (max-width: 767px) {
+  .people-view { padding-top: 8px; }
+  .ms-ppl-strip-wrap { gap: 6px; margin-bottom: 16px; }
+  .ms-ppl-strip-face-img { width: 40px; height: 40px; }
+  .ms-ppl-detail-name { font-size: 16px; }
+  .ms-ppl-detail-info { flex-direction: column; align-items: flex-start; }
+}
 </style>
\ No newline at end of file
diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
index c7d55c1..3b83be4 100644
--- a/src/views/SearchView.vue
+++ b/src/views/SearchView.vue
@@ -38,7 +38,16 @@
           <div id="msHSL">
             <div v-if="!historyList.length" style="color:var(--muted-text);font-size:12px;padding:8px 0">No history yet</div>
             <div v-for="h in historyList" :key="h.id" class="hs-item" :class="{ pinned: h.pinned }">
-              <div class="hs-title" @click="restoreHistory(h)">{{ h.title || h.query }}</div>
+              <div class="hs-main">
+                <div class="hs-row">
+                  <span class="hs-mode">{{ formatMode(h.mode) }}</span>
+                  <div class="hs-title" @click="restoreHistory(h)">{{ h.title || h.query }}</div>
+                </div>
+                <div class="hs-time">
+                  <template v-if="h.updated_at && h.updated_at !== h.created_at">{{ formatHistoryTime(h.created_at) }} - {{ formatHistoryTime(h.updated_at) }}</template>
+                  <template v-else>{{ formatHistoryTime(h.created_at || h.updated_at) }}</template>
+                </div>
+              </div>
               <button class="hs-menu-btn" @click.stop="toggleHistoryMenu(h.id)">⋯</button>
               <div v-if="activeHistoryMenu === h.id" class="hs-menu">
                 <button v-if="!h.pinned" @click="pinHistoryItem(h.id)">Pin</button>
@@ -95,6 +104,7 @@
         <template v-else>
           <div v-for="(msg, i) in messages" :key="i" class="msg" :class="msg.role">
             <div v-if="msg.role === 'user'" class="msg-user">
+              <span class="msg-mode">{{ formatMode(msg.mode) }}</span>
               {{ msg.query }}
             </div>
             <div v-else>
@@ -108,28 +118,54 @@
               </div>
 
               <div v-if="msg.results.length" class="card-grid">
-                <div v-for="(r, j) in msg.results" :key="j" class="result-card">
-                  <div class="card-thumb" v-observe="() => loadThumb(r.file_uuid, r.start_frame)" @click="playVideo(r)">
-                    <img v-if="thumbs[r.file_uuid + ':' + r.start_frame]" :src="thumbs[r.file_uuid + ':' + r.start_frame]" alt="" loading="lazy">
-                    <div v-else class="thumb-placeholder">
-                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                <div v-for="(r, j) in msg.results" :key="j" class="result-card" :class="{ 'ocr-grouped': r.ocr_frames && r.ocr_frames.length > 1 }">
+<div class="card-thumb" @click="playVideo(r)">
+                     <img v-if="r.thumbnail_url" :src="r.thumbnail_url" alt="" loading="lazy">
+                     <img v-else-if="thumbs[r.file_uuid + ':' + r.start_frame]" :src="thumbs[r.file_uuid + ':' + r.start_frame]" alt="" loading="lazy">
+                     <div v-else class="thumb-placeholder" v-observe="() => loadThumb(r.file_uuid, r.start_frame || 0)">
+                       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                     </div>
+                     <div v-if="r.ocr_frames && r.ocr_frames.length > 1" class="ocr-group-badge">{{ r.ocr_frames.length }}</div>
+                   </div>
+                  <div v-if="r.ocr_frames && r.ocr_frames.length > 1" class="ocr-frame-marks">
+                    <span v-for="f in r.ocr_frames" :key="f" class="ocr-frame-mark"
+                          :class="{ 'ocr-frame-variant': isVariantFrame(r, f) }"
+                          @click.stop="playVideoAtFrame(r, f)"
+                          :title="getFrameText(r, f)">
+                      F{{ f }}
+                    </span>
+                  </div>
+                  <div v-if="r.variants?.length" class="ocr-corrected-list">
+                    <div v-for="(v, vi) in r.variants" :key="vi" class="ocr-corrected-item">
+                      <span class="ocr-corrected-frames">F{{ v.frames.join(', F') }}</span>
+                      <span class="ocr-corrected-arrow">→</span>
+                      <span class="ocr-corrected-original">{{ v.text }}</span>
                     </div>
                   </div>
                   <div class="card-name" @click.stop="showTextDetail(r)">
-                    <span v-if="getSourceType(r)" class="card-source-type" :class="getSourceType(r).toLowerCase()">{{ getSourceType(r) }}</span><span v-html="highlightMatch(parseSummary(r.summary).text, r.search_query)"></span>
+                    <span v-if="r._isPerson" class="card-source-type person">
+                      <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="4"/><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/></svg>
+                    </span><span v-html="highlightMatch(r._isPerson ? r.file_name : parseSummary(r.summary).text, r.search_query)"></span>
                   </div>
-                  <div v-if="r.text_content" class="card-text" v-html="highlightMatch(r.text_content.slice(0, 120), r.search_query)"></div>
-                  <div class="card-file">{{ r.file_name || '' }}<br><span class="card-file-uuid">{{ r.file_uuid }}</span></div>
+                  <div v-if="r._isPerson" class="card-text card-person-stats">{{ r.text_content }}</div>
+                  <div v-if="r.text_content && !r._isPerson" class="card-text" v-html="highlightMatch(r.text_content.slice(0, 120), r.search_query)"></div>
+                  <div class="card-file" v-if="!r._isPerson">{{ r.file_name || '' }}<br><span class="card-file-uuid">{{ r.file_uuid }}</span></div>
+                  <div class="card-file card-person-file" v-if="r._isPerson">{{ r.display_file_name }}<br><span class="card-file-uuid">{{ r.file_uuid }}</span></div>
                   <div class="card-meta">
-                    <span v-if="r.ocr_frames" class="card-frame">F{{ r.ocr_frames.join(', F') }}</span>
-                    <span v-else-if="r.start_frame" class="card-frame">F{{ r.start_frame }}–{{ r.end_frame }}</span>
+                    <span v-if="!r.ocr_frames && r.start_frame" class="card-frame">F{{ r.start_frame }}–{{ r.end_frame }}</span>
                     <span v-if="r.start_time != null" class="card-time">({{ formatTime(r.start_time) }}–{{ formatTime(r.end_time) }})</span>
                     <span v-if="r.similarity != null" class="card-score">{{ (r.similarity * 100).toFixed(0) }}%</span>
                   </div>
                   <div class="card-actions">
-                    <button class="card-action-btn" @click="playVideo(r)" title="Play">▶</button>
-                    <button class="card-action-btn" @click="expandRange(r)" title="Expand ±150 frames">⬌</button>
-                    <button class="card-action-btn" :class="{ marked: isMarked(r) }" @click="toggleMark(r)" title="Mark for export">⭐</button>
+                    <button class="card-action-btn" @click="playVideo(r)" title="Play">
+                      <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Play
+                    </button>
+                    <button class="card-action-btn" @click="expandRange(r)" title="Expand ±150 frames">
+                      <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg> Expand
+                    </button>
+                    <button class="card-action-btn" :class="{ marked: isMarked(r) }" @click="toggleMark(r)" title="Mark for export">
+                      <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> Mark
+                    </button>
                   </div>
                 </div>
               </div>
@@ -188,16 +224,18 @@
 
     <VideoPlayer
       v-if="playing"
-      simple
+      :simple="clusterTraces.length === 0"
       :file-uuid="currentVideo.fileUuid"
       :start-frame="currentVideo.startFrame"
       :end-frame="currentVideo.endFrame"
+      :all-traces="clusterTraces.length ? clusterTraces : undefined"
+      :merged-segments="clusterSegments.length ? clusterSegments : undefined"
       :title="currentVideo.title"
       :show-asrx="true"
       :show-ocr="true"
-      :show-face="false"
+      :show-face="clusterTraces.length > 0"
       :show-pose="false"
-      @close="playing = false"
+      @close="playing = false; clusterTraces = []; clusterSegments = []"
     />
     <div v-if="selectionPopup.show" class="sel-popup" :style="{ top: selectionPopup.y + 'px', left: selectionPopup.x + 'px' }">
       <button class="sel-popup-btn" @click="addSelectionBookmark">Bookmark this</button>
@@ -222,9 +260,15 @@
           <div class="text-detail-content" v-html="highlightMatch(textDetailModal.text, textDetailModal.query)"></div>
         </div>
         <div class="text-detail-actions">
-          <button class="card-action-btn" @click="playVideo(textDetailModal)">▶ Play</button>
-          <button class="card-action-btn" @click="expandRange(textDetailModal)">⬌ Expand</button>
-          <button class="card-action-btn" :class="{ marked: isMarked(textDetailModal) }" @click="toggleMark(textDetailModal)">⭐ Mark</button>
+          <button class="card-action-btn" @click="playVideo(textDetailModal)">
+            <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Play
+          </button>
+          <button class="card-action-btn" @click="expandRange(textDetailModal)">
+            <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg> Expand
+          </button>
+          <button class="card-action-btn" :class="{ marked: isMarked(textDetailModal) }" @click="toggleMark(textDetailModal)">
+            <svg class="card-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> Mark
+          </button>
         </div>
       </div>
     </div>
@@ -234,10 +278,11 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, onMounted, onUnmounted } from 'vue'
 import { apiCall } from '@/api'
+import { getApiBase } from '@/api/config'
 import VideoPlayer from '../components/VideoPlayer.vue'
 import { useRouter } from 'vue-router'
 import { useSearchHistory, useBookmarks } from '@/composables/useSearchHistory'
-import { thumbnailsCache, loadThumbnail } from '@/store'
+import { thumbnailsCache, loadThumbnail, filesCache, ensureFiles } from '@/store'
 import type { HistoryItem } from '@/composables/useSearchHistory'
 
 interface SourceInfo {
@@ -255,6 +300,7 @@ interface ChatMessage {
   answer?: string
   sources?: SourceInfo[]
   chips?: string[]
+  mode?: string
 }
 
 const router = useRouter()
@@ -262,6 +308,7 @@ const router = useRouter()
 const modes = [
   { label: 'Keyword', value: 'keyword', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>' },
   { label: 'Semantic', value: 'semantic', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>' },
+  { label: 'Visual', value: 'visual', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>' },
   { label: 'Agent', value: 'agent', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/></svg>' },
   { label: 'People', value: 'people', icon: '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>' },
 ]
@@ -288,14 +335,28 @@ const { history: historyList, loadHistory, saveToHistory, renameHistory, pinHist
 const { bookmarks: bookmarkList, loadBookmarks, saveBookmark, deleteBookmark } = useBookmarks()
 
 const markedResults = ref<any[]>([])
+const searchConfig = ref({ vlm_min_score: 0.0, vlm_max_results: 5, vlm_output_language: 'en' })
 
-const textDetailModal = ref<any>({ show: false, tag: '', text: '', fileName: '', startFrame: 0, endFrame: 0, startTime: 0, endTime: 0, similarity: 0, summary: '', file_uuid: '', start_frame: 0, end_frame: 0, start_time: 0, end_time: 0, file_name: '', query: '' })
+const textDetailModal = ref<any>({ show: false, tag: '', text: '', fileName: '', startFrame: 0, endFrame: 0, startTime: 0, endTime: 0, similarity: 0, summary: '', file_uuid: '', start_frame: 0, end_frame: 0, start_time: 0, end_time: 0, file_name: '', query: '', _traces: null, _isPerson: false })
 
 function parseSummary(summary: string): { tag: string; text: string } {
   if (!summary) return { tag: '', text: '' }
-  const match = summary.match(/^\[(OCR|ASRX)\]\s*(.*)$/i)
+  const match = summary.match(/^\[(OCR|ASRX|SCENE)\]\s*(.*)$/i)
   if (match) {
-    return { tag: match[1].toUpperCase(), text: match[2] }
+    let text = match[2]
+    if (match[1].toUpperCase() === 'SCENE') {
+      const draftMatch = text.match(/\* \*Draft[^*]*:\*\*\s*(.+?)(?:\n\n|\n\*|$)/s)
+      if (draftMatch) {
+        text = draftMatch[1].trim()
+      } else {
+        const envMatch = text.match(/\* \*Environment:\*\*\s*(.+?)(?:\n\n|\n\*|$)/s)
+        const objMatch = text.match(/\* \*Objects:\*\*\s*(.+?)(?:\n\n|\n\*|$)/s)
+        if (envMatch && objMatch) {
+          text = `${envMatch[1].trim()} ${objMatch[1].trim()}`
+        }
+      }
+    }
+    return { tag: match[1].toUpperCase(), text }
   }
   return { tag: '', text: summary }
 }
@@ -318,14 +379,23 @@ function highlightMatch(text: string, searchQuery: string): string {
   return escaped.replace(regex, '<mark class="highlight">$1</mark>')
 }
 
+function getFileNameFromCache(fileUuid: string): string {
+  if (!fileUuid) return ''
+  const clean = fileUuid.replace(/-/g, '')
+  const f = filesCache.value.find((f: any) => f.file_uuid?.replace(/-/g, '') === clean)
+  return f?.file_name || f?.file_path?.split('/').pop() || ''
+}
+
 function showTextDetail(r: any) {
   const parsed = parseSummary(r.summary)
   const sourceType = getSourceType(r)
+  // Use display_file_name for person results, or lookup from filesCache
+  const actualFileName = r.display_file_name || getFileNameFromCache(r.file_uuid) || r.file_name || ''
   textDetailModal.value = {
     show: true,
     tag: parsed.tag || (sourceType ? `[${sourceType}]` : ''),
     text: parsed.text,
-    fileName: r.file_name || '',
+    fileName: actualFileName,
     startFrame: r.start_frame || 0,
     endFrame: r.end_frame || 0,
     startTime: r.start_time || 0,
@@ -337,11 +407,30 @@ function showTextDetail(r: any) {
     end_frame: r.end_frame,
     start_time: r.start_time,
     end_time: r.end_time,
-    file_name: r.file_name,
+    file_name: actualFileName,
     query: r.search_query || '',
+    _traces: r._traces || null,
+    _isPerson: r._isPerson || false,
   }
 }
 
+function levenshteinDistance(a: string, b: string): number {
+  const m = a.length, n = b.length
+  const dp: number[][] = Array.from({ length: m + 1 }, () => Array(n + 1).fill(0))
+  for (let i = 0; i <= m; i++) dp[i][0] = i
+  for (let j = 0; j <= n; j++) dp[0][j] = j
+  for (let i = 1; i <= m; i++)
+    for (let j = 1; j <= n; j++)
+      dp[i][j] = Math.min(dp[i-1][j] + 1, dp[i][j-1] + 1, dp[i-1][j-1] + (a[i-1] !== b[j-1] ? 1 : 0))
+  return dp[m][n]
+}
+
+function textSimilarity(a: string, b: string): number {
+  const maxLen = Math.max(a.length, b.length)
+  if (maxLen === 0) return 1
+  return 1 - levenshteinDistance(a, b) / maxLen
+}
+
 function mergeResults(results: any[]): any[] {
   if (!results.length) return results
   const sorted = [...results].sort((a, b) => {
@@ -350,7 +439,7 @@ function mergeResults(results: any[]): any[] {
     return fa - fb
   })
   const merged: any[] = []
-  const ocrTextFrames: Map<string, { frames: number[]; results: any[] }> = new Map()
+  const ocrGroups: Array<{ canonicalText: string; frames: number[]; results: any[]; variants: { text: string; frames: number[] }[] }> = []
   
   for (const r of sorted) {
     const rawText = (r.summary || r.text_content || '').trim()
@@ -359,12 +448,24 @@ function mergeResults(results: any[]): any[] {
     
     if (isOcr) {
       const ocrText = parsed.tag === '[OCR]' ? parsed.text : rawText
-      if (ocrTextFrames.has(ocrText)) {
-        const data = ocrTextFrames.get(ocrText)!
-        data.frames.push(r.start_frame || 0)
-        data.results.push(r)
+      
+      let bestGroup = null
+      let bestSim = 0
+      for (const g of ocrGroups) {
+        const sim = textSimilarity(ocrText, g.canonicalText)
+        if (sim > bestSim) { bestSim = sim; bestGroup = g }
+      }
+      
+      if (bestSim > 0.85 && bestGroup) {
+        bestGroup.frames.push(r.start_frame || 0)
+        bestGroup.results.push(r)
+        if (ocrText !== bestGroup.canonicalText) {
+          let variant = bestGroup.variants.find(v => v.text === ocrText)
+          if (!variant) { variant = { text: ocrText, frames: [] }; bestGroup.variants.push(variant) }
+          variant.frames.push(r.start_frame || 0)
+        }
       } else {
-        ocrTextFrames.set(ocrText, { frames: [r.start_frame || 0], results: [r] })
+        ocrGroups.push({ canonicalText: ocrText, frames: [r.start_frame || 0], results: [r], variants: [] })
       }
       continue
     }
@@ -381,7 +482,7 @@ function mergeResults(results: any[]): any[] {
     const lastEnd = last.end_frame || last.start_frame + 1
     const rStart = r.start_frame || 0
     const gap = rStart - lastEnd
-    if (gap <= 30) {
+    if (gap <= 100) {
       last.end_frame = Math.max(lastEnd, r.end_frame || rStart + 1)
       if (r.similarity > (last.similarity || 0)) {
         last.summary = r.summary
@@ -392,13 +493,14 @@ function mergeResults(results: any[]): any[] {
     }
   }
   
-  for (const [ocrText, data] of ocrTextFrames) {
-    const uniqueFrames = [...new Set(data.frames)].sort((a, b) => a - b)
+  for (const group of ocrGroups) {
+    const uniqueFrames = [...new Set(group.frames)].sort((a, b) => a - b)
     merged.push({
-      ...data.results[0],
-      summary: `[OCR] ${ocrText}`,
+      ...group.results[0],
+      summary: `[OCR] ${group.canonicalText}`,
       ocr_frames: uniqueFrames,
-      ocr_details: data.results,
+      ocr_details: group.results,
+      variants: group.variants,
       start_frame: uniqueFrames[0],
       end_frame: uniqueFrames[uniqueFrames.length - 1],
     })
@@ -429,6 +531,8 @@ function ensureMinDuration(r: any) {
 
 const playing = ref(false)
 const currentVideo = ref({ fileUuid: '', startFrame: 0, endFrame: 0, title: '' })
+const clusterTraces = ref<any[]>([])
+const clusterSegments = ref<any[]>([])
 
 const currentModeLabel = computed(() => modes.find(m => m.value === mode.value)?.label || 'Keyword')
 
@@ -473,10 +577,28 @@ function closeDropdowns(e: MouseEvent) {
   }
 }
 
-onMounted(() => {
+onMounted(async () => {
   document.addEventListener('click', closeDropdowns)
+  await ensureFiles()
   loadHistory()
   loadBookmarks()
+  // Load search config for visual search parameters
+  try {
+    const base = getApiBase()
+    const res = await fetch(`${base}/api/v1/admin/config`)
+    if (res.ok) {
+      const data = await res.json()
+      if (data.search) {
+        searchConfig.value = {
+          vlm_min_score: data.search.vlm_min_score ?? 0.0,
+          vlm_max_results: data.search.vlm_max_results ?? 5,
+          vlm_output_language: data.search.vlm_output_language ?? 'en'
+        }
+      }
+    }
+  } catch (e) {
+    console.error('[SearchView] Failed to load search config:', e)
+  }
 })
 onUnmounted(() => document.removeEventListener('click', closeDropdowns))
 
@@ -603,7 +725,7 @@ async function sendMessage() {
   query.value = ''
 
   const seq = searchSeq
-  messages.value.push({ role: 'user', query: q, results: [], loading: false, message: '' })
+  messages.value.push({ role: 'user', query: q, results: [], loading: false, message: '', mode: mode.value })
   const msgIdx = messages.value.length
   messages.value.push({ role: 'assistant', results: [], loading: true, message: '' })
   sending.value = true
@@ -667,6 +789,58 @@ async function sendMessage() {
             }
           }
         }
+        // Agent tools return "cards" array (e.g. semantic_search, keyword_search, vlm_search)
+        if (Array.isArray(src.parsed?.cards)) {
+          for (const card of src.parsed.cards) {
+            if (card.card_type === 'chunk' && card.file_uuid) {
+              results.push({
+                file_uuid: card.file_uuid,
+                file_name: card.file_name || '',
+                summary: card.text_preview || '',
+                text_content: card.text_preview || '',
+                similarity: card.score ?? null,
+                start_frame: card.start_frame ?? 0,
+                end_frame: card.end_frame ?? 0,
+                source_type: card.chunk_type === 'ocr' ? 'ocr' : 'asrx',
+                chunk_id: card.chunk_id || '',
+              })
+            }
+            if (card.card_type === 'scene' && card.file_uuid) {
+              const sceneIndex = card.scene_index ?? 0
+              results.push({
+                file_uuid: card.file_uuid,
+                file_name: card.file_name || '',
+                summary: card.vlm_description ? `[SCENE] ${card.vlm_description}` : `Scene ${sceneIndex}`,
+                text_content: card.vlm_description || '',
+                similarity: card.score ?? null,
+                start_frame: card.frame_number ?? Math.round((card.timestamp_sec || 0) * 30),
+                end_frame: (card.frame_number ?? Math.round((card.timestamp_sec || 0) * 30)) + 30,
+                start_time: card.timestamp_sec,
+                end_time: (card.timestamp_sec || 0) + 1,
+                source_type: 'scene',
+                thumbnail_url: card.thumbnail_url,
+                vlm_tags: card.vlm_tags || [],
+              })
+            }
+            if (card.card_type === 'face' && card.file_uuid) {
+              results.push({
+                file_uuid: card.file_uuid,
+                file_name: card.file_name || '',
+                summary: card.vlm_description || card.identity_name || `Trace ${card.trace_id}`,
+                text_content: card.vlm_description || '',
+                similarity: card.score ?? null,
+                start_frame: card.start_frame ?? 0,
+                end_frame: card.end_frame ?? 0,
+                source_type: 'trace',
+                trace_id: card.trace_id,
+                identity_name: card.identity_name,
+                vlm_clothing: card.vlm_clothing,
+                vlm_location: card.vlm_location,
+                vlm_tags: card.vlm_tags || [],
+              })
+            }
+          }
+        }
       }
 
       const smartSrc = sources.find(s => s.tool === 'smart_search')
@@ -725,20 +899,50 @@ async function sendMessage() {
       const raw: any = await apiCall('search_people', { query: q, limit: 50 })
       if (searchSeq !== seq) return
       const peopleList = raw?.people || []
-      const results = peopleList.map((p: any) => ({
-        file_name: p.name || 'Unknown',
-        summary: `People · ${p.appearance_count || 0} appearances`,
-        similarity: 1.0,
-        start_frame: p.first_appearance_time,
-        end_frame: p.last_appearance_time,
-        search_query: q,
-      }))
+
+      const personMap = new Map<string, { traces: any[], minFrame: number, maxFrame: number }>()
+      for (const t of peopleList) {
+        const name = t.name || 'Unknown'
+        const key = `${t.file_uuid || ''}::${name}`
+        if (!personMap.has(key)) {
+          personMap.set(key, { traces: [], minFrame: Infinity, maxFrame: -Infinity })
+        }
+        const p = personMap.get(key)!
+        p.traces.push(t)
+        if (t.start_frame < p.minFrame) p.minFrame = t.start_frame
+        if (t.end_frame > p.maxFrame) p.maxFrame = t.end_frame
+      }
+
+      const fileUuidToName: Record<string, string> = {}
+      for (const f of filesCache.value) {
+        if (f.file_uuid) fileUuidToName[f.file_uuid] = f.file_name || f.file_path?.split('/').pop() || ''
+      }
+      const results = Array.from(personMap.entries()).map(([key, p]) => {
+        const firstTrace = p.traces[0]
+        const totalFrames = p.traces.reduce((sum, t) => sum + (t.frame_count || 0), 0)
+        const avgConfidence = p.traces.reduce((sum, t) => sum + (t.avg_confidence || 0), 0) / p.traces.length
+        const personName = key.split('::').pop() || 'Unknown'
+        const fname = fileUuidToName[firstTrace.file_uuid] || ''
+        return {
+          file_uuid: firstTrace.file_uuid,
+          file_name: personName,
+          display_file_name: fname,
+          summary: personName,
+          text_content: `${p.traces.length} FS · ${totalFrames}F · ${(avgConfidence * 100).toFixed(0)}%`,
+          similarity: 1.0,
+          start_frame: p.minFrame,
+          end_frame: p.maxFrame,
+          search_query: q,
+          _traces: p.traces,
+          _isPerson: true,
+        }
+      })
       messages.value[msgIdx].results = results
       messages.value[msgIdx].loading = false
     } else if (mode.value === 'semantic') {
       const [semanticRes, keywordRes] = await Promise.all([
-        apiCall('search_semantic', { query: q, limit: 20 }),
-        apiCall('search_keyword', { query: q, limit: 20 })
+        apiCall('search_semantic', { query: q, limit: 5 }),
+        apiCall('search_keyword', { query: q, limit: 5 })
       ])
       if (searchSeq !== seq) return
       const semanticResults = (semanticRes?.results || semanticRes || [])
@@ -748,6 +952,11 @@ async function sendMessage() {
       const merged: any[] = []
       const semanticMerged = mergeResults(semanticResults)
       const keywordMerged = mergeResults(keywordResults)
+      
+      // Rerank: prioritize results containing query text (case-insensitive)
+      const queryLower = q.toLowerCase()
+      const hasQueryText = (text: string) => text && text.toLowerCase().includes(queryLower)
+      
       for (const r of semanticMerged) {
         const key = `${r.file_uuid}:${r.start_frame || 0}`
         if (!seen.has(key)) {
@@ -762,15 +971,200 @@ async function sendMessage() {
           merged.push({ ...r, search_query: q, source_type: r.source_type || 'ocr' })
         }
       }
+      
+      // Rerank: put results with query text first
+      merged.sort((a, b) => {
+        const aHasText = hasQueryText(a.text_content || a.summary || '')
+        const bHasText = hasQueryText(b.text_content || b.summary || '')
+        if (aHasText && !bHasText) return -1
+        if (!aHasText && bHasText) return 1
+        return (b.similarity || 0) - (a.similarity || 0)
+      })
+      
       messages.value[msgIdx].results = merged.slice(0, 15)
       messages.value[msgIdx].loading = false
+    } else if (mode.value === 'visual') {
+      // Visual search: Scene VLM + Trace VLM
+      // min_score is handled by API (uses admin config default)
+      // Bilingual output: English + preferred language (if not English)
+      await ensureFiles()
+      const registeredUuids = new Set(filesCache.value.map((f: any) => f.file_uuid || f.uuid))
+      
+      const base = getApiBase()
+      const maxResults = searchConfig.value.vlm_max_results || 5
+      const outputLang = searchConfig.value.vlm_output_language || 'en'
+      const bilingual = outputLang !== 'en'
+      let scenes: any[] = []
+      let traces: any[] = []
+      
+      try {
+        if (bilingual) {
+          // Bilingual mode: fetch both English and preferred language
+          const [scenesEn, scenesLang, tracesEn, tracesLang] = await Promise.all([
+            fetch(`${base}/api/v1/search/vlm/scenes`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: q, page_size: maxResults, min_score: 0.0, output_language: 'en' })
+            }).then(r => r.json()).catch(() => ({})),
+            fetch(`${base}/api/v1/search/vlm/scenes`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: q, page_size: maxResults, min_score: 0.0, output_language: outputLang })
+            }).then(r => r.json()).catch(() => ({})),
+            fetch(`${base}/api/v1/search/vlm/traces`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: q, page_size: maxResults, min_score: 0.0, output_language: 'en' })
+            }).then(r => r.json()).catch(() => ({})),
+            fetch(`${base}/api/v1/search/vlm/traces`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: q, page_size: maxResults, min_score: 0.0, output_language: outputLang })
+            }).then(r => r.json()).catch(() => ({}))
+          ])
+          
+          // Merge bilingual results
+          const scenesEnList = (scenesEn?.results || scenesEn || []) as any[]
+          const scenesLangList = (scenesLang?.results || scenesLang || []) as any[]
+          const tracesEnList = (tracesEn?.results || tracesEn || []) as any[]
+          const tracesLangList = (tracesLang?.results || tracesLang || []) as any[]
+          
+          // Match results by file_uuid + scene_index
+          scenes = scenesEnList.map((sEn: any) => {
+            const sceneIndex = sEn.index ?? sEn.scene_index ?? 0
+            const sLang = scenesLangList.find((s: any) => 
+              s.file_uuid === sEn.file_uuid && (s.index ?? s.scene_index ?? 0) === sceneIndex
+            )
+            return {
+              ...sEn,
+              vlm_description_en: sEn.vlm_description || '',
+              vlm_description_lang: sLang?.vlm_description || '',
+              vlm_description: sEn.vlm_description || ''
+            }
+          })
+          
+          traces = tracesEnList.map((tEn: any) => {
+            const traceId = tEn.trace_id
+            const tLang = tracesLangList.find((t: any) => t.file_uuid === tEn.file_uuid && t.trace_id === traceId)
+            return {
+              ...tEn,
+              vlm_description_en: tEn.vlm_description || '',
+              vlm_description_lang: tLang?.vlm_description || '',
+              vlm_description: tEn.vlm_description || ''
+            }
+          })
+        } else {
+          // English only
+          const [scenesRes, tracesRes] = await Promise.all([
+            fetch(`${base}/api/v1/search/vlm/scenes`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: q, page_size: maxResults, min_score: 0.0, output_language: 'en' })
+            }).then(r => r.json()).catch(() => ({})),
+            fetch(`${base}/api/v1/search/vlm/traces`, {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ query: q, page_size: maxResults, min_score: 0.0, output_language: 'en' })
+            }).then(r => r.json()).catch(() => ({}))
+          ])
+          
+          scenes = (scenesRes?.results || scenesRes || []) as any[]
+          traces = (tracesRes?.results || tracesRes || []) as any[]
+        }
+      } catch (e) {
+        console.error('Visual search API error:', e)
+      }
+      
+      if (searchSeq !== seq) return
+      
+      // Filter by registered files only (API handles min_score filtering)
+      const filteredScenes = scenes.filter((s: any) => registeredUuids.has(s.file_uuid))
+      const filteredTraces = traces.filter((t: any) => registeredUuids.has(t.file_uuid))
+      
+      const sceneResults = filteredScenes.map((s: any) => {
+        const sceneIndex = s.index ?? s.scene_index ?? 0
+        const frameNumber = s.frame_number ?? Math.round((s.timestamp_sec || 0) * 30)
+        
+        // Build bilingual description
+        let vlmDesc = s.vlm_description || ''
+        let textContent = vlmDesc
+        
+        if (bilingual && s.vlm_description_en && s.vlm_description_lang) {
+          // Show both English and preferred language
+          textContent = `【English】\n${s.vlm_description_en}\n\n【${outputLang.toUpperCase()}】\n${s.vlm_description_lang}`
+          vlmDesc = textContent
+        } else if (bilingual && s.vlm_description_en) {
+          // Only English available
+          textContent = `【English】\n${s.vlm_description_en}`
+          vlmDesc = textContent
+        }
+        
+        return {
+          ...s,
+          search_query: q,
+          source_type: 'scene',
+          start_frame: frameNumber,
+          end_frame: frameNumber + 30,
+          start_time: s.timestamp_sec,
+          end_time: (s.timestamp_sec || 0) + 1,
+          summary: vlmDesc ? `[SCENE] ${vlmDesc}` : `Scene ${sceneIndex}`,
+          text_content: textContent,
+          similarity: s.score ?? null,
+          thumbnail_url: `${base}/api/v1/file/${s.file_uuid}/scenes/scene_${String(sceneIndex).padStart(3, '0')}.jpg`,
+          bilingual,
+          vlm_description_en: s.vlm_description_en,
+          vlm_description_lang: s.vlm_description_lang
+        }
+      })
+      
+      const traceResults = filteredTraces.map((t: any) => {
+        const frame = t.start_frame ?? t.best_face_frame ?? 0
+        
+        // Build bilingual description
+        let vlmDesc = t.vlm_description || ''
+        let textContent = vlmDesc
+        
+        if (bilingual && t.vlm_description_en && t.vlm_description_lang) {
+          textContent = `【English】\n${t.vlm_description_en}\n\n【${outputLang.toUpperCase()}】\n${t.vlm_description_lang}`
+          vlmDesc = textContent
+        } else if (bilingual && t.vlm_description_en) {
+          textContent = `【English】\n${t.vlm_description_en}`
+          vlmDesc = textContent
+        }
+        
+        return {
+          ...t,
+          search_query: q,
+          source_type: 'trace',
+          start_frame: frame,
+          end_frame: frame + 30,
+          summary: vlmDesc || t.text_content || 'Person appearance',
+          text_content: textContent,
+          similarity: t.score ?? null,
+          bilingual,
+          vlm_description_en: t.vlm_description_en,
+          vlm_description_lang: t.vlm_description_lang
+        }
+      })
+      
+      // Limit total results to maxResults
+      const allResults = [...sceneResults, ...traceResults]
+      messages.value[msgIdx].results = allResults.slice(0, maxResults)
+      messages.value[msgIdx].loading = false
     } else {
-      const results = await apiCall('search_keyword', { query: q, limit: 30 })
+      const results = await apiCall('search_keyword', { query: q, limit: 50 })
       if (searchSeq !== seq) return
       const rawResults = (results?.results || results || []) as any[]
-      const merged = mergeResults(rawResults)
-      for (const r of merged) r.search_query = q
-      messages.value[msgIdx].results = merged.slice(0, 10)
+      // Keyword search: skip merge, just deduplicate by file_uuid:start_frame
+      const seen = new Set<string>()
+      const deduped = rawResults.filter(r => {
+        const key = `${r.file_uuid}:${r.start_frame || 0}`
+        if (seen.has(key)) return false
+        seen.add(key)
+        return true
+      })
+      for (const r of deduped) r.search_query = q
+      messages.value[msgIdx].results = deduped.slice(0, 20)
       messages.value[msgIdx].loading = false
     }
   } catch (e: any) {
@@ -807,7 +1201,32 @@ function formatTime(sec: number): string {
   return `${m}:${s.toString().padStart(2, '0')}`
 }
 
+function formatMode(mode: string | null): string {
+  const map: Record<string, string> = {
+    keyword: 'Keyword',
+    semantic: 'Semantic',
+    agent: 'Agent',
+    people: 'People',
+  }
+  return map[mode || ''] || '—'
+}
+
+function formatHistoryTime(ts: string | null): string {
+  if (!ts) return ''
+  // SQLite datetime('now') writes "YYYY-MM-DD HH:MM:SS" (no TZ) while Rust writes
+  // "YYYY-MM-DDTHH:MM:SSZ". Normalize the former to UTC before parsing.
+  const norm = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(ts) ? `${ts}Z` : ts
+  const d = new Date(norm)
+  if (isNaN(d.getTime())) return ts
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  return `${d.getFullYear()}/${pad(d.getMonth() + 1)}/${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
+}
+
 function playVideo(r: any) {
+  if (r._traces) {
+    playPersonGroup(r)
+    return
+  }
   const sf = r.start_frame || 0
   const ef = r.end_frame || sf + 1
   currentVideo.value = {
@@ -819,6 +1238,84 @@ function playVideo(r: any) {
   playing.value = true
 }
 
+function playVideoAtFrame(r: any, frame: number) {
+  const ef = r.end_frame || frame + 1
+  currentVideo.value = {
+    fileUuid: r.file_uuid,
+    startFrame: frame,
+    endFrame: ef,
+    title: r.summary?.slice(0, 60) || r.file_name || 'Video'
+  }
+  playing.value = true
+}
+
+function isVariantFrame(r: any, frame: number): boolean {
+  return r.variants?.some((v: any) => v.frames.includes(frame))
+}
+
+function getFrameText(r: any, frame: number): string {
+  const variant = r.variants?.find((v: any) => v.frames.includes(frame))
+  return variant?.text || (r.summary || '').replace(/^\[OCR\]\s*/, '')
+}
+
+async function playPersonGroup(person: any) {
+  const traces = person._traces || []
+  if (!traces.length) return
+  const fileUuid = traces[0].file_uuid
+  let fps = 24
+  try {
+    const fi: any = await apiCall('get_file_info', { uuid: fileUuid })
+    if (fi?.fps) fps = fi.fps
+  } catch {}
+
+  const all = traces.map((t: any) => {
+    const sf = t.start_frame || 0
+    const ef = t.end_frame || sf + (t.frame_count || 1)
+    return {
+      trace_id: t.trace_id,
+      start_frame: sf,
+      end_frame: ef,
+      frame_count: t.frame_count || 1,
+      first_frame: sf,
+      last_frame: ef,
+      first_sec: sf / fps,
+      last_sec: ef / fps,
+      file_uuid: t.file_uuid,
+    }
+  }).sort((a: any, b: any) => a.start_frame - b.start_frame)
+
+  const merged: any[] = []
+  let cur: any = null
+  all.forEach((item: any, idx: number) => {
+    const st = item.first_sec
+    const en = item.last_sec
+    const fu = item.file_uuid || ''
+    if (cur && fu === cur.file_uuid && (st - cur.end) < 10) {
+      cur.end = Math.max(cur.end, en)
+      cur.end_frame = Math.max(cur.end_frame, item.last_frame)
+      cur.count++
+      cur._endIdx = idx
+    } else {
+      if (cur) merged.push(cur)
+      cur = { file_uuid: fu, start_frame: item.first_frame, end_frame: item.last_frame, start: st, end: en, count: 1, _startIdx: idx, _endIdx: idx }
+    }
+  })
+  if (cur) merged.push(cur)
+
+  const first = all[0]
+  const last = all[all.length - 1]
+
+  currentVideo.value = {
+    fileUuid,
+    startFrame: first ? first.start_frame : 0,
+    endFrame: last ? last.end_frame : 30,
+    title: `${person.file_name} · ${traces.length} ${traces.length > 1 ? 'FS' : 'FS'}`,
+  }
+  clusterTraces.value = all
+  clusterSegments.value = merged
+  playing.value = true
+}
+
 function expandRange(r: any) {
   const sf = r.start_frame || 0
   const ef = r.end_frame || sf + 1
@@ -1002,6 +1499,27 @@ function openSource(src: SourceInfo) {
   position: relative;
   cursor: pointer;
 }
+.hs-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.hs-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.hs-time {
+  font-size: 10px;
+  color: var(--muted-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.hs-item.pinned .hs-time { color: rgba(var(--primary-color-rgb), 0.8); }
+.hs-mode {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--border-light);
+  color: var(--text-secondary);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 500;
+}
+.hs-item.pinned .hs-mode { background: rgba(var(--primary-color-rgb), 0.15); color: var(--primary-color); }
 .hs-item:hover { background: var(--hover-background); }
 .hs-item.pinned { background: rgba(var(--primary-color-rgb), 0.1); }
 .hs-item.pinned .hs-title { font-weight: 500; color: var(--primary-color); }
@@ -1177,16 +1695,28 @@ function openSource(src: SourceInfo) {
   text-align: right;
 }
 .msg-user {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   background: rgba(var(--primary-color-rgb), 0.1);
   color: var(--text-primary);
   padding: 8px 14px;
   border-radius: 12px;
   border-bottom-right-radius: 4px;
-  font-size: 14px;
+  font-size: 15px;
   max-width: 70%;
   word-break: break-word;
 }
+.msg-mode {
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: rgba(var(--primary-color-rgb), 0.2);
+  color: var(--primary-color);
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-weight: 500;
+}
 .msg.assistant {
   background: transparent;
   color: var(--text-primary);
@@ -1270,6 +1800,44 @@ function openSource(src: SourceInfo) {
   position: relative;
 }
 .card-thumb img { width: 100%; height: 100%; object-fit: cover; }
+.ocr-group-badge {
+  position: absolute; top: 6px; right: 6px;
+  background: rgba(var(--primary-color-rgb), 0.85); color: #fff;
+  font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 10px;
+}
+.ocr-frame-marks {
+  display: flex; flex-wrap: wrap; gap: 3px; padding: 6px 8px 2px;
+  max-height: 48px; overflow: hidden;
+}
+.ocr-frame-mark {
+  font-size: 9px; padding: 1px 5px; border-radius: 4px;
+  background: var(--hover-background); color: var(--text-secondary);
+  cursor: pointer; transition: all .15s; white-space: nowrap;
+}
+.ocr-frame-mark:hover {
+  background: rgba(var(--primary-color-rgb), 0.2); color: var(--primary-color);
+}
+.ocr-frame-mark.ocr-frame-variant {
+  background: rgba(var(--warning-color-rgb), 0.2);
+  color: var(--warning-color);
+  border: 1px solid var(--warning-color);
+}
+.ocr-corrected-list {
+  padding: 4px 8px 6px;
+  border-top: 1px solid var(--border-light);
+  font-size: 10px;
+}
+.ocr-corrected-item {
+  display: flex; align-items: center; gap: 6px;
+  padding: 2px 0; color: var(--text-secondary);
+}
+.ocr-corrected-frames {
+  color: var(--warning-color); font-weight: 500; min-width: 80px;
+}
+.ocr-corrected-arrow { opacity: 0.5; }
+.ocr-corrected-original {
+  font-style: italic; opacity: 0.7;
+}
 .thumb-placeholder {
   width: 100%;
   height: 100%;
@@ -1500,6 +2068,24 @@ mark.highlight {
   background: rgba(var(--success-color), 0.2);
   color: var(--success-color);
 }
+.card-source-type.person {
+  background: rgba(var(--primary-color-rgb), 0.2);
+  color: var(--primary-color);
+  display: inline-flex;
+  align-items: center;
+}
+.card-icon {
+  flex-shrink: 0;
+  vertical-align: middle;
+}
+.card-person-stats {
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 500;
+}
+.card-person-file {
+  padding: 2px 8px 6px;
+}
 
 .card-tag {
   font-size: 10px;
@@ -1604,4 +2190,13 @@ mark.highlight {
   display: flex;
   gap: 8px;
 }
+
+@media (max-width: 767px) {
+  .chat--empty { padding: 40px 16px; }
+  .ms-hero h1 { font-size: 24px; }
+  .ms-hero p { font-size: 13px; }
+  .ibar { padding: 8px; gap: 6px; }
+  .ibar input { font-size: 14px; }
+  .message { max-width: 100%; padding: 8px 10px; font-size: 13px; }
+}
 </style>