fix: trace debug — show Stranger_NNN for unnamed traces instead of unknown

2026-05-14 15:12:21 +08:00
parent 8f013cbdbc
commit c90394897d
42 changed files with 1806 additions and 1722 deletions
--- a/docs_v1.0/API_V1.0.0/API_REFERENCE_V1.0.0.md
+++ b/docs_v1.0/API_V1.0.0/API_REFERENCE_V1.0.0.md
@@ -20,6 +20,8 @@ owner: "Warren"
 | Development | `http://localhost:3003` |
 | Auth | Header `X-API-Key: <key>` (login endpoint unprotected) |

+> **Note**: All examples below use production port 3002. For dev testing, replace `3002` with `3003`.
+
 ---

 ## 1. System
@@ -55,22 +57,32 @@ curl http://localhost:3002/health
 | 13 | GET | `/api/v1/file/:file_uuid` | Single file detail |
 | 14 | GET | `/api/v1/file/:file_uuid/probe` | ffprobe metadata |
 | 15 | POST | `/api/v1/file/:file_uuid/process` | Start pipeline |
-| 16 | GET | `/api/v1/file/:file_uuid/chunks` | List pre-chunks |
+| 16 | GET | `/api/v1/file/:file_uuid/chunk/:chunk_id` | Single chunk detail (V1.0.2+) |
 | 17 | GET | `/api/v1/progress/:file_uuid` | Processing progress |
 | 18 | GET | `/api/v1/jobs` | Monitor jobs (filterable) |

 ```bash
-curl -X POST http://localhost:3002/api/v1/files/register  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"file_path":"/sftpgo/data/demo/video.mp4"}'
+curl -X POST http://localhost:3002/api/v1/files/register  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"file_path":"/Users/accusys/momentry/var/sftpgo/data/demo/video.mp4"}'
 ```
 ```json
 {"success":true,"file_uuid":"3abeee81d94597629ed8cb943f182e94","duration":5954.0}
 ```

+```bash
+curl -X POST http://localhost:3002/api/v1/unregister \
+  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69" \
+  -H "Content-Type: application/json" \
+  -d '{"uuid":"53e3a229bf68878b7a799e811e097f9c"}'
+```
+```json
+{"success":true,"uuid":"53e3a229bf68878b7a799e811e097f9c","message":"File unregistered successfully"}
+```
+
 ```bash
 curl "http://localhost:3002/api/v1/files?page=1&page_size=2" -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"
 ```
 ```json
-{"files":[{"file_name":"Charade (1963)..."}],"total":37}
+{"success":true,"data":[{"file_uuid":"aeed7134...","file_name":"Charade (1963)...","status":"ready"}],"total":0,"page":1,"page_size":2}
 ```

 ---
@@ -92,14 +104,14 @@ curl "http://localhost:3002/api/v1/files?page=1&page_size=2" -H "X-API-Key: muse
 curl -X POST http://localhost:3002/api/v1/search/universal  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"query":"name","limit":2,"mode":"bm25","uuid":"3abeee81d94597629ed8cb943f182e94"}'
 ```
 ```json
-{"count":1,"results":[{"text":"What's your name?","score":0.90}]}
+{"query":"name","results":[{"chunk_id":"100","text":"What's your name?","start_time":258.68,"score":0.90}],"total":5,"page":1,"page_size":20,"took_ms":42}
 ```

 ```bash
 curl -X POST http://localhost:3002/api/v1/search/universal  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"query":"friends","limit":2,"mode":"bm25","uuid":"3abeee81d94597629ed8cb943f182e94"}'
 ```
 ```json
-{"count":1,"results":[{"text":"You won't find it difficult to make some new friends.","score":0.90}]}
+{"query":"friends","results":[{"chunk_id":"104","text":"You won't find it difficult to make some new friends.","start_time":272.38,"score":0.90}],"total":3,"page":1,"page_size":20,"took_ms":38}
 ```

 ---
@@ -183,7 +195,7 @@ Returns MP4 video binary (3.0MB) with bbox overlay.
 curl "http://localhost:3002/api/v1/identities?page=1&page_size=3"  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"
 ```
 ```json
-{"identities":[
+{"count":3,"page":1,"page_size":3,"identities":[
  {"name":"Cary Grant","tmdb_id":2102},
  {"name":"Audrey Hepburn","tmdb_id":187},
  {"name":"Walter Matthau","tmdb_id":2091}
@@ -228,7 +240,7 @@ curl -X POST "http://localhost:3002/api/v1/identity/a9a90105-6d6b-46ff-92da-0c3c
 curl "http://localhost:3002/api/v1/resources"  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"
 ```
 ```json
-{"resources":[{"resource_id":"mxbai-embed-large-v1","resource_type":"embedding_model"}]}
+{"success":true,"data":[{"resource_id":"mxbai-embed-large-v1","resource_type":"embedding_model"}],"message":"OK"}
 ```

 ---
--- a/docs_v1.0/API_V1.0.0/API_REFERENCE_v1.0.0.md
+++ b/docs_v1.0/API_V1.0.0/API_REFERENCE_v1.0.0.md
@@ -20,6 +20,8 @@ owner: "Warren"
 | Development | `http://localhost:3003` |
 | Auth | Header `X-API-Key: <key>` (login endpoint unprotected) |

+> **Note**: All examples below use production port 3002. For dev testing, replace `3002` with `3003`.
+
 ---

 ## 1. System
@@ -55,22 +57,32 @@ curl http://localhost:3002/health
 | 13 | GET | `/api/v1/file/:file_uuid` | Single file detail |
 | 14 | GET | `/api/v1/file/:file_uuid/probe` | ffprobe metadata |
 | 15 | POST | `/api/v1/file/:file_uuid/process` | Start pipeline |
-| 16 | GET | `/api/v1/file/:file_uuid/chunks` | List pre-chunks |
+| 16 | GET | `/api/v1/file/:file_uuid/chunk/:chunk_id` | Single chunk detail (V1.0.2+) |
 | 17 | GET | `/api/v1/progress/:file_uuid` | Processing progress |
 | 18 | GET | `/api/v1/jobs` | Monitor jobs (filterable) |

 ```bash
-curl -X POST http://localhost:3002/api/v1/files/register  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"file_path":"/sftpgo/data/demo/video.mp4"}'
+curl -X POST http://localhost:3002/api/v1/files/register  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"file_path":"/Users/accusys/momentry/var/sftpgo/data/demo/video.mp4"}'
 ```
 ```json
 {"success":true,"file_uuid":"3abeee81d94597629ed8cb943f182e94","duration":5954.0}
 ```

+```bash
+curl -X POST http://localhost:3002/api/v1/unregister \
+  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69" \
+  -H "Content-Type: application/json" \
+  -d '{"uuid":"53e3a229bf68878b7a799e811e097f9c"}'
+```
+```json
+{"success":true,"uuid":"53e3a229bf68878b7a799e811e097f9c","message":"File unregistered successfully"}
+```
+
 ```bash
 curl "http://localhost:3002/api/v1/files?page=1&page_size=2" -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"
 ```
 ```json
-{"files":[{"file_name":"Charade (1963)..."}],"total":37}
+{"success":true,"data":[{"file_uuid":"aeed7134...","file_name":"Charade (1963)...","status":"ready"}],"total":0,"page":1,"page_size":2}
 ```

 ---
@@ -92,14 +104,14 @@ curl "http://localhost:3002/api/v1/files?page=1&page_size=2" -H "X-API-Key: muse
 curl -X POST http://localhost:3002/api/v1/search/universal  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"query":"name","limit":2,"mode":"bm25","uuid":"3abeee81d94597629ed8cb943f182e94"}'
 ```
 ```json
-{"count":1,"results":[{"text":"What's your name?","score":0.90}]}
+{"query":"name","results":[{"chunk_id":"100","text":"What's your name?","start_time":258.68,"score":0.90}],"total":5,"page":1,"page_size":20,"took_ms":42}
 ```

 ```bash
 curl -X POST http://localhost:3002/api/v1/search/universal  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"  -H "Content-Type: application/json"  -d '{"query":"friends","limit":2,"mode":"bm25","uuid":"3abeee81d94597629ed8cb943f182e94"}'
 ```
 ```json
-{"count":1,"results":[{"text":"You won't find it difficult to make some new friends.","score":0.90}]}
+{"query":"friends","results":[{"chunk_id":"104","text":"You won't find it difficult to make some new friends.","start_time":272.38,"score":0.90}],"total":3,"page":1,"page_size":20,"took_ms":38}
 ```

 ---
@@ -183,7 +195,7 @@ Returns MP4 video binary (3.0MB) with bbox overlay.
 curl "http://localhost:3002/api/v1/identities?page=1&page_size=3"  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"
 ```
 ```json
-{"identities":[
+{"count":3,"page":1,"page_size":3,"identities":[
  {"name":"Cary Grant","tmdb_id":2102},
  {"name":"Audrey Hepburn","tmdb_id":187},
  {"name":"Walter Matthau","tmdb_id":2091}
@@ -228,7 +240,7 @@ curl -X POST "http://localhost:3002/api/v1/identity/a9a90105-6d6b-46ff-92da-0c3c
 curl "http://localhost:3002/api/v1/resources"  -H "X-API-Key: muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69"
 ```
 ```json
-{"resources":[{"resource_id":"mxbai-embed-large-v1","resource_type":"embedding_model"}]}
+{"success":true,"data":[{"resource_id":"mxbai-embed-large-v1","resource_type":"embedding_model"}],"message":"OK"}
 ```

 ---
--- a/docs_v1.0/API_V1.0.0/INTERNAL/API_DICTIONARY_V1.0.0.md
+++ b/docs_v1.0/API_V1.0.0/INTERNAL/API_DICTIONARY_V1.0.0.md
@@ -84,7 +84,7 @@ related_documents:
 | `GET` | `/api/v1/files` | Public |
 | `GET` | `/api/v1/files/scan` | Public |
 | `POST` | `/api/v1/files/register` | Public |
-| `POST` | `/api/v1/files/unregister` | Public |
+| `POST` | `/api/v1/unregister` | Public |
 | `GET` | `/api/v1/file/:file_uuid` | Public |
 | `GET` | `/api/v1/file/:file_uuid/probe` | Public |
 | `POST` | `/api/v1/file/:file_uuid/process` | Public |
--- a/docs_v1.0/API_V1.0.0/RELEASE/RELEASE_API_REFERENCE_V1.0.0.md
+++ b/docs_v1.0/API_V1.0.0/RELEASE/RELEASE_API_REFERENCE_V1.0.0.md
@@ -63,7 +63,7 @@ curl $BASE/health
 | 13 | GET | `/api/v1/file/:file_uuid` | Single file detail |
 | 14 | GET | `/api/v1/file/:file_uuid/probe` | ffprobe metadata |
 | 15 | POST | `/api/v1/file/:file_uuid/process` | Start pipeline |
-| 16 | GET | `/api/v1/file/:file_uuid/chunks` | List pre-chunks |
+| 16 | GET | `/api/v1/file/:file_uuid/chunk/:chunk_id` | Single chunk detail (V1.0.2+) |
 | 17 | GET | `/api/v1/progress/:file_uuid` | Processing progress |
 | 18 | GET | `/api/v1/jobs` | Monitor jobs |

--- a/docs_v1.0/API_V1.0.0/RELEASE/RELEASE_API_REFERENCE_v1.0.0.md
+++ b/docs_v1.0/API_V1.0.0/RELEASE/RELEASE_API_REFERENCE_v1.0.0.md
@@ -63,7 +63,7 @@ curl $BASE/health
 | 13 | GET | `/api/v1/file/:file_uuid` | Single file detail |
 | 14 | GET | `/api/v1/file/:file_uuid/probe` | ffprobe metadata |
 | 15 | POST | `/api/v1/file/:file_uuid/process` | Start pipeline |
-| 16 | GET | `/api/v1/file/:file_uuid/chunks` | List pre-chunks |
+| 16 | GET | `/api/v1/file/:file_uuid/chunk/:chunk_id` | Single chunk detail (V1.0.2+) |
 | 17 | GET | `/api/v1/progress/:file_uuid` | Processing progress |
 | 18 | GET | `/api/v1/jobs` | Monitor jobs |

--- a/docs_v1.0/REFERENCE/API_3002_VS_3003_COMPARISON.md
+++ b/docs_v1.0/REFERENCE/API_3002_VS_3003_COMPARISON.md
@@ -1,6 +1,6 @@
 # 3002 vs 3003 API 比較報告

-> **日期**: 2026-04-14 | **目的**: 分析正式版與開發版 API 差異
+**日期**: 2026-05-13 | **目的**: 正式版與開發版 API 差異（Release 前）

 ---

@@ -8,191 +8,50 @@

 | 項目 | 3002 (正式版) | 3003 (開發版) |
 |------|:---:|:---:|
-| **Build 日期** | 2026-04-13 00:29:25 | 2026-04-14 23:01:47 |
-| **程式碼狀態** | ❌ 舊版，缺少新 API | ✅ 最新版，包含所有新功能 |
-| **需要重新編譯** | ✅ 是 | ❌ 否 |
+| **Build 日期** | 2026-05-13 21:07 | 2026-05-13 (持續開發) |
+| **Version** | v1.0.0 | v1.0.0 |
+| **Build Git Hash** | `d34bcae+` | `d34bcae+` |
+| **程式碼狀態** | ✅ 同步（從 dev release binary） | ✅ 最新 |
+| **Schema** | `public`（需執行 `chunks→chunk` RENAME） | `dev` |

 ---

-## 2. API 端點可用性比較
+## 2. 共同端點（JSON 結構一致）

-### 2.1 完全相同的端點（JSON 結構一致）
-
-| 端點 | 3002 | 3003 | JSON 結構 |
-|------|:---:|:---:|:---:|
-| `GET /health` | ✅ 200 | ✅ 200 | ✅ 一致 |
-| `GET /api/v1/person/:id` | ✅ 200 | ✅ 200 | ✅ 一致 |
-| `GET /api/v1/chunks/:id/persons` | ✅ 200 | ✅ 200 | ✅ 一致 |
-| `GET /api/v1/face/list` | ✅ 200 | ✅ 200 | ✅ 一致 |
-| `GET /api/v1/face/:id` | ✅ 200 | ✅ 200 | ✅ 一致 |
-| `POST /api/v1/face/search` | ✅ 200 | ✅ 200 | ✅ 一致 |
-
-### 2.2 3002 缺少的端點
-
-| 端點 | 3002 | 3003 | 新增日期 |
-|------|:---:|:---:|:---:|
-| `GET /api/v1/person/list` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/auto-identify` | ❌ 405 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/suggest` | ❌ 405 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/merge` | ❌ 405 | ✅ 200/400 | 2026-04-14 |
-| `POST /api/v1/person/merge/undo` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `GET /api/v1/person/merge/history` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `GET /api/v1/person/:id/similar` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `PATCH /api/v1/person/:id/confirm` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/:id/unbind-speaker` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/:id/reassign-speaker` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/:id/remove-appearance` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/:id/reassign-appearance` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/person/:id/split` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/search/universal` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `POST /api/v1/search/frames` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `GET /api/v1/search/persons` | ❌ 404 | ✅ 200 | 2026-04-14 |
-| `GET /api/v1/person/:id/thumbnail` | ❌ 404 | ✅ 200 | 2026-04-14 |
+| 端點 | 3002 | 3003 | 備註 |
+|------|:---:|:---:|------|
+| `GET /health` | ✅ | ✅ | 含 `version` + `build_git_hash` |
+| `GET /health/detailed` | ✅ | ✅ | 同上 |
+| `GET /api/v1/files` | ✅ | ✅ | `total` 從 DB 讀取（不再寫死 0） |
+| `GET /api/v1/files/scan` | ✅ | ✅ | 含 `.jpg/.png` 掃描（不再限 mp4） |
+| `GET /api/v1/file/:uuid/process` | ✅ | ✅ | |
+| `GET /api/v1/file/:uuid/chunk/:id` | ✅ | ✅ | |
+| `GET /api/v1/identities` | ✅ | ✅ | 含分頁 |
+| `GET /api/v1/identities/:id` | ✅ | ✅ | |
+| `GET /api/v1/identity_bindings` | ✅ | ✅ | |
+| `POST /api/v1/search/universal` | ✅ | ✅ | |
+| `GET /api/v1/resources` | ✅ | ✅ | |
+| `GET /api/v1/traces/:tid/faces` | ✅ | ✅ | |
+| `GET /api/v1/traces/:tid/video` | ✅ | ✅ | |

 ---

-## 3. JSON 回應結構比較
+## 3. 差異

-### 3.1 GET /api/v1/person/:id (兩者一致)
-
-```json
-{
-  "success": "bool",
-  "person_id": "str",
-  "name": "str",
-  "face_identity_id": "null",
-  "speaker_id": "str|null",
-  "confidence": "float",
-  "appearance_count": "int",
-  "total_appearance_duration": "float",
-  "first_appearance_time": "float",
-  "last_appearance_time": "float",
-  "is_confirmed": "bool",
-  "created_at": "str",
-  "updated_at": "str"
-}
-```
-
-### 3.2 3003 獨有的 JSON 結構
-
-#### POST /api/v1/person/auto-identify
-```json
-{
-  "success": "bool",
-  "message": "str",
-  "total_persons": "int",
-  "matched_speakers": "int",
-  "persons": [{
-    "person_id": "str",
-    "name": "str|null",
-    "speaker_id": "str|null",
-    "appearance_count": "int",
-    "total_appearance_duration": "float",
-    "first_appearance_time": "float|null",
-    "last_appearance_time": "float|null",
-    "is_confirmed": "bool",
-    "speaker_confidence": "float|null"
-  }]
-}
-```
-
-#### POST /api/v1/person/suggest
-```json
-{
-  "success": "bool",
-  "naming_suggestions": [{
-    "person_id": "str",
-    "current_name": "str|null",
-    "suggested_name": "str",
-    "confidence": "float",
-    "sources": [{"type": "str", "detail": "str", "weight": "float"}],
-    "action": "str (auto_apply|needs_review)"
-  }],
-  "merge_suggestions": [{
-    "person_id": "str",
-    "merge_with": ["str"],
-    "confidence": "float",
-    "reasons": ["str"],
-    "action": "str"
-  }],
-  "total_naming": "int",
-  "total_merge": "int"
-}
-```
-
-#### POST /api/v1/search/universal
-```json
-{
-  "query": "str",
-  "results": [{
-    "type": "str (chunk|frame|person)",
-    // chunk 類型
-    "chunk_id": "str",
-    "chunk_type": "str",
-    "start_time": "float",
-    "end_time": "float",
-    "score": "float",
-    "text": "str|null",
-    "speaker_id": "str|null",
-    "metadata": "object"
-    // 或 frame 類型
-    // 或 person 類型
-  }],
-  "total": "int",
-  "took_ms": "int"
-}
-```
-
---
-
-## 4. 資料來源隔離
-
-| 層級 | 3002 | 3003 |
+| 項目 | 3002 | 3003 |
 |------|------|------|
-| PostgreSQL Schema | `public` | `dev` |
+| PostgreSQL Schema | `public`（需 rename `chunks→chunk`） | `dev`（已為 `chunk`） |
 | MongoDB Database | `momentry` | `momentry_dev` |
 | Redis Prefix | `momentry:` | `momentry_dev:` |
-| Qdrant Collection | `momentry_rule1` | `momentry_dev_rule1` |
+| Qdrant Collection Prefix | `momentry_` | `momentry_dev_` |
 | Output Dir | `/Users/accusys/momentry/output` | `/Users/accusys/momentry/output_dev` |
+| `.env` | `.env`（`DATABASE_SCHEMA=public`） | `.env.development`（`DATABASE_SCHEMA=dev`） |

 ---

-## 5. 部署建議
+## 4. Release 必要步驟

-### 3002 需要更新
-
-3002 運行的是 **2026-04-13** 的舊版程式碼，缺少 **17 個新 API 端點**。
-
-**更新步驟**:
-```bash
-# 1. 確認程式碼已是最新
-git status
-
-# 2. 重新編譯
-cargo build --release
-
-# 3. 停止舊版
-kill $(lsof -ti:3002)
-
-# 4. 啟動新版
-nohup cargo run --release --bin momentry -- server > /tmp/momentry_prod.log 2>&1 &
-
-# 5. 驗證
-curl http://localhost:3002/test-schema
-# 應回傳: SCHEMA=public
-
-curl http://localhost:3002/api/v1/person/list?limit=1
-# 應回傳: {"success":true,"persons":[...], "total":N}
-```
-
---
-
-## 6. 總結
-
-| 類別 | 狀態 |
-|------|------|
-| **程式碼版本** | 3002 落後 1 天 (2026-04-13 vs 2026-04-14) |
-| **API 端點** | 3002 缺少 17 個新端點 |
-| **JSON 結構** | 相同端點的 JSON 結構完全一致 |
-| **資料隔離** | ✅ 完全獨立 (public vs dev) |
-| **需要行動** | ✅ 3002 需要重新編譯部署 |
+1. **Binary**：使用 M5 交付的 `momentry_v1.0.0` 取代 port 3002 binary
+2. **Schema**：`ALTER TABLE public.chunks RENAME TO chunk;`
+3. **Deploy**：`bash deploy.sh`（9 步驟，含 vec0.dylib）
+4. **Identity**：保留 15 TMDB + merge dev data（`file_uuid` 欄位輔助）
--- a/portal/.env.development
+++ b/portal/.env.development
@@ -1,4 +1,4 @@
 # Portal Development Environment
 VITE_APP_TITLE=Momentry Portal (Development)
 VITE_API_BASE_URL=http://127.0.0.1:3003
-VITE_API_KEY=muser_test_001
+VITE_API_KEY=muser_68600856036340bcafc01930eb4bd839_1774418104_97221b69
--- a/portal/.gitignore
+++ b/portal/.gitignore
@@ -1,22 +0,0 @@
-# Dependencies
-node_modules/
-target/
-dist/
-
-# Tauri
-src-tauri/icons/
-src-tauri/target/
-
-# Environment
-.env
-.env.local
-
-# OS
-.DS_Store
-Thumbs.db
-
-# IDE
-.vscode/
-.idea/
-*.swp
-*.swo
--- a/portal/VIDEO_DETAIL_UPDATE.md
+++ b/portal/VIDEO_DETAIL_UPDATE.md
@@ -1,89 +0,0 @@
-# VideoDetailView.vue 更新摘要
-
-## 更新日期
-2026-04-27
-
-## 更新內容
-
-### 1. 跳回按鈕優化
- **原版**: 純文字按鈕，樣式簡單
- **新版**: 
-  - 使用 Tailwind CSS 樣式化按鈕
-  - `bg-gray-800 hover:bg-gray-700 rounded-lg transition`
-  - 清晰的文字："返回納管檔案列表"
-  - 位於頁面左側，標題位於右側
-
-### 2. Probe 消息展示優化
- **原版**: 直接展示所有信息
- **新版**: 
-  - **基本信息 Grid**: Duration, Resolution, Frame Rate, Codec
-  - **影片串流**: 折疊式展示（<details>標籤）
-    - 提示文字："click to expand"
-    - 最大高度限制：`max-h-64`
-  - **音訊串流**: 折疊式展示
-    - 顯示數量標記："音訊串流 (N)"
-    - 每個串流獨立折疊
-  - **完整 Probe JSON**: 
-    - 折疊式展示
-    - 藍色標記："詳細"
-    - 最大高度限制：`max-h-96`
-
-### 3. 新增 Status / Processing Status 展示
- **狀態區塊**: 新增獨立的"處理狀態"區塊
-  - UUID (truncate)
-  - Status (帶顏色標籤)
-    - completed: 綠色
-    - processing: 藍色
-    - pending: 灰色
-    - failed: 紅色
-  - 註冊時間
-
- **Processing Status Details**:
-  - **階段 (Phase)**: PROCESSING / COMPLETED 等
-  - **處理器列表**: active_processors (藍色標籤)
-  - **進度條**:
-    - 每個處理器獨立進度條
-    - 動態顏色（根據status）
-    - 顯示百分比和帧數
-  - **Agent 狀態**:
-    - 顯示各Agent狀態（five_w1h, identity等）
-    - 進度百分比和完成數量
-
-### 4. 新增輔助函數
-```typescript
-// 狀態顏色函數
-getStatusColor(status: string): string
-getProgressColor(status: string): string
-getAgentStatusColor(status: string): string
-
-// Processing Status解析
-if (typeof v.processing_status === 'string') {
-  video.value.processing_status = JSON.parse(v.processing_status)
-}
-```
-
-## 檔案大小
- **原版**: 227 行
- **新版**: 371 行（增加 144 行）
-
-## 編譯結果
-✅ `npm run build` 成功
- VideoDetailView-CP9GNQZ0.js: 10.56 kB (gzip: 3.46 kB)
-
-## 測試建議
-1. 啟動 portal dev server: `cd portal && npm run dev`
-2. 確保 API server 在 port 3003
-3. 登入 portal
-4. 進入 "/files" 頁面
-5. 點擊任意影片查看詳情
-
-## API 端點需求
- `/api/v1/videos?uuid={uuid}` - 返回 video 物件（包含 processing_status）
- `/api/v1/videos/{uuid}/faces` - 返回 face clusters
-
-## 未來改進建議
-1. 添加 chunk 搜尋功能（在詳情頁搜尋該影片的 chunks）
-2. 添加 processing_status 更新按鈕（重新載入狀態）
-3. 添加處理器重新執行功能
-4. 添加時間軸視覺化（timeline visualization）
-
--- a/portal/momentry-portal@0.1.0
+++ b/portal/momentry-portal@0.1.0
--- a/portal/package-lock.json
+++ b/portal/package-lock.json
@@ -12,12 +12,15 @@
        "@tauri-apps/plugin-fs": "^2.5.0",
        "@tauri-apps/plugin-http": "^2.5.8",
        "@tauri-apps/plugin-shell": "^2.3.5",
+        "@types/three": "^0.184.1",
        "axios": "^1.6.5",
        "pinia": "^2.1.7",
+        "three": "^0.184.0",
        "vue": "^3.4.0",
        "vue-router": "^4.2.5"
      },
      "devDependencies": {
+        "@tauri-apps/cli": "^2.10.1",
        "@vitejs/plugin-vue": "^5.0.0",
        "autoprefixer": "^10.4.17",
        "postcss": "^8.4.33",
@@ -86,6 +89,12 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.21.5",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -913,6 +922,238 @@
        "url": "https://opencollective.com/tauri"
      }
    },
+    "node_modules/@tauri-apps/cli": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-2.11.1.tgz",
+      "integrity": "sha512-rpEbaJ/HzNb6fwsquwoAbq29/Vt4gADhS423A8fdkwL4edJ0wZmoB8ar7O6JPDL834MUKOCm/rrJ7c9oAaEaYQ==",
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "bin": {
+        "tauri": "tauri.js"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/tauri"
+      },
+      "optionalDependencies": {
+        "@tauri-apps/cli-darwin-arm64": "2.11.1",
+        "@tauri-apps/cli-darwin-x64": "2.11.1",
+        "@tauri-apps/cli-linux-arm-gnueabihf": "2.11.1",
+        "@tauri-apps/cli-linux-arm64-gnu": "2.11.1",
+        "@tauri-apps/cli-linux-arm64-musl": "2.11.1",
+        "@tauri-apps/cli-linux-riscv64-gnu": "2.11.1",
+        "@tauri-apps/cli-linux-x64-gnu": "2.11.1",
+        "@tauri-apps/cli-linux-x64-musl": "2.11.1",
+        "@tauri-apps/cli-win32-arm64-msvc": "2.11.1",
+        "@tauri-apps/cli-win32-ia32-msvc": "2.11.1",
+        "@tauri-apps/cli-win32-x64-msvc": "2.11.1"
+      }
+    },
+    "node_modules/@tauri-apps/cli-darwin-arm64": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.11.1.tgz",
+      "integrity": "sha512-6eEKMBXsQPCuM1EmvrjT2+aBuxWQuFdKdW8pzNuNQtpq45nEEpBlD5gr8pUeAyOU1DQKlkFaEc/MPBxb/Pfjtg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-darwin-x64": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-2.11.1.tgz",
+      "integrity": "sha512-LQUO7exfRWjWALNhetph5guWpMeHphRpokOLk0OIbTTExaNwJNFu3I4vb+CCM/4G/QGoZe/5XikZOJdNEFP1ig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-arm-gnueabihf": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-2.11.1.tgz",
+      "integrity": "sha512-5i/awiBCRRhOUG8yjn0fMHXIWD5Ez8eEk5LtvOxyQrKuJkRaZDvnbIjZbE183blAwkoA4xN3aO/prJiqscl02Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-arm64-gnu": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-2.11.1.tgz",
+      "integrity": "sha512-9LrwDw3S9Fygtw/Q6WDhOP+3svJRGAsejeE+GKrc0eO1ThMVhwi2LL6hw4dlKw93IfS7VY1G19sWGxJ/NcU4nA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-arm64-musl": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.11.1.tgz",
+      "integrity": "sha512-mNA5dbbqPqDUdTIwdUYYuhO2GvIe9UnB2r0VU2njxBOS3Opbx4gKNC5yP0Iu4rYmEmqdlwry9VzGZQ3wq9dyFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-riscv64-gnu": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-riscv64-gnu/-/cli-linux-riscv64-gnu-2.11.1.tgz",
+      "integrity": "sha512-fZj3Gwq+6fUs305T5WQiD5iSGJw+j/4w/HGmk4sHDAcy+rp9zU5eaxB7nOyz5/I/nkNAuKPqfp6uIbiUBXkBCw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-x64-gnu": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-2.11.1.tgz",
+      "integrity": "sha512-XFxGxOvHM7jjeD6ozCKdGfhzJ7lERYDGZl1/Kb4fsvchaJsfLJ981TlyTG8Qy/gFq+f5GitH3bfrX9JAkjPEyw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-linux-x64-musl": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-2.11.1.tgz",
+      "integrity": "sha512-d5C2/Zm+68v7R9wTuTCjRQEVrWjcdMkJBZ1+rXse+QdMMlTB9+u9PDNDLw9PQflWxYLaYZ7tjxxL9Nb9II6PbA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-win32-arm64-msvc": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-arm64-msvc/-/cli-win32-arm64-msvc-2.11.1.tgz",
+      "integrity": "sha512-YdeVWFAR1pTXzUU6NLstPq4G6OLxuDrXCXEBdmBH+5EZIDXUx0D2kJlz3+YjpazkKvAzYpgziTsyRagls0OfRQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-win32-ia32-msvc": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-2.11.1.tgz",
+      "integrity": "sha512-VBGkuH0eB9K9LLSMv361Gzr5Ou72sCS4+ztpmkWEQ+wd/amhcYOsf3X6qn1RJZDzIhiOYHJEOysZUC3baD01rA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tauri-apps/cli-win32-x64-msvc": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.11.1.tgz",
+      "integrity": "sha512-b3ORhIAKgp9ZYY+zBt7b7r0kLU2kjvyGF0+MS2SBym3emsweGPybEqocJcmtMuxyBhkOKHP4CiuEJEDuAlTx6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "Apache-2.0 OR MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
    "node_modules/@tauri-apps/plugin-fs": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-fs/-/plugin-fs-2.5.0.tgz",
@@ -940,6 +1181,12 @@
        "@tauri-apps/api": "^2.10.1"
      }
    },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -947,6 +1194,32 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.184.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.1.tgz",
+      "integrity": "sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
    "node_modules/@vitejs/plugin-vue": {
      "version": "5.2.4",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -1637,6 +1910,12 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/fill-range": {
      "version": "7.1.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -1955,6 +2234,12 @@
        "node": ">= 8"
      }
    },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "license": "MIT"
+    },
    "node_modules/micromatch": {
      "version": "4.0.8",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -2578,6 +2863,12 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/three": {
+      "version": "0.184.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.16",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
--- a/portal/package.json
+++ b/portal/package.json
@@ -13,12 +13,15 @@
    "@tauri-apps/plugin-fs": "^2.5.0",
    "@tauri-apps/plugin-http": "^2.5.8",
    "@tauri-apps/plugin-shell": "^2.3.5",
+    "@types/three": "^0.184.1",
    "axios": "^1.6.5",
    "pinia": "^2.1.7",
+    "three": "^0.184.0",
    "vue": "^3.4.0",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
+    "@tauri-apps/cli": "^2.10.1",
    "@vitejs/plugin-vue": "^5.0.0",
    "autoprefixer": "^10.4.17",
    "postcss": "^8.4.33",
--- a/portal/src/App.vue
+++ b/portal/src/App.vue
@@ -9,11 +9,15 @@
            <router-link to="/home" class="hover:text-blue-400 transition">首頁</router-link>
            <router-link to="/search" class="hover:text-blue-400 transition">搜尋</router-link>
            <router-link to="/persons" class="hover:text-blue-400 transition">人物管理</router-link>
-            <router-link to="/faces/candidates" class="hover:text-blue-400 transition text-green-400">Face Candidates</router-link>
+            <router-link to="/traces" class="hover:text-blue-400 transition">Face Traces</router-link>
            <router-link to="/files" class="hover:text-blue-400 transition">納管檔案</router-link>
            <router-link to="/settings" class="hover:text-blue-400 transition">設定</router-link>
+            <router-link to="/jobs" class="hover:text-blue-400 transition">Pipeline</router-link>
            <button @click="handleLogout" class="text-xs bg-red-800 hover:bg-red-700 px-2 py-1 rounded transition ml-4 text-red-100">登出</button>
-            <button @click="openDevTools" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2">🛠️ Console</button>
+            <button @click="toggleDevMode" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2" :title="showApiDemo ? '隱藏 API Console' : '顯示 API Console'">
+              {{ showApiDemo ? '🔧' : '🛠️' }}
+            </button>
+            <button @click="openDevTools" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2">Console</button>
          </nav>
        </div>
      </div>
@@ -24,15 +28,15 @@
      <router-view />
    </main>

-    <!-- API Demo (always show) -->
-    <div class="container mx-auto px-4 pb-8 pt-4" v-if="!isLoginPage">
+    <!-- API Demo (hidden by default, enable via localStorage devMode=true) -->
+    <div v-if="!isLoginPage && showApiDemo" class="container mx-auto px-4 pb-8 pt-4">
      <ApiDemo />
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ApiDemo from './components/ApiDemo.vue'

@@ -40,6 +44,12 @@ const route = useRoute()
 const router = useRouter()

 const isLoginPage = computed(() => route.path === '/login')
+const showApiDemo = ref(localStorage.getItem('devMode') === 'true')
+
+const toggleDevMode = () => {
+  showApiDemo.value = !showApiDemo.value
+  localStorage.setItem('devMode', String(showApiDemo.value))
+}

 const openDevTools = () => {
  console.clear()
--- a/portal/src/api/client.ts
+++ b/portal/src/api/client.ts
@@ -245,37 +245,44 @@ async function tauriInvoke<T>(command: string, args?: Record<string, unknown>):

 // ── Unified API functions ───────────────────────────────────────────────

-export async function searchVideos(query: string, limit = 10, mode = 'vector'): Promise<SearchResult> {
+export async function searchVideos(query: string, limit = 10, mode = 'vector', fileUuid?: string): Promise<SearchResult> {
  if (isTauri()) {
-    return tauriInvoke<SearchResult>('search_videos', { query, limit, mode })
+    return tauriInvoke<SearchResult>('search_videos', { query, limit, mode, uuid: fileUuid })
  }

  const config = getConfig()
  const url = `${config.api_base_url}/api/v1/search/universal`

+  const body: any = { query, limit, mode }
+  if (fileUuid) body.uuid = fileUuid
+
  const response: any = await httpFetch<any>(url, {
    method: 'POST',
-    body: JSON.stringify({ query, limit }),
+    body: JSON.stringify(body),
  })

  return {
    query: response.query || query,
    count: response.results?.length || 0,
-    hits: (response.results || []).map((r: any) => ({
-      id: r.chunk_id || r.id,
-      vid: r.uuid || r.vid || r.file_uuid || '',
-      start_frame: Math.floor((r.start_time || 0) * (r.fps || 30)),
-      end_frame: Math.floor((r.end_time || 0) * (r.fps || 30)),
-      fps: r.fps || 30,
-      start: r.start_time || r.start || 0,
-      end: r.end_time || r.end || 0,
-      text: r.text || r.text_content || '',
-      score: r.score || 0,
-      title: r.title || r.file_name || '',
-      file_path: r.file_path,
-      has_visual_stats: !!r.visual_stats,
-      parent_id: r.parent_chunk_id,
-    })),
+    hits: (response.results || []).map((r: any) => {
+      const chunkId = r.chunk_id || r.id || ''
+      const fileUuid = r.uuid || r.vid || r.file_uuid || chunkId.split('_').slice(0, -1).join('_') || ''
+      return {
+        id: chunkId,
+        vid: fileUuid,
+        start_frame: r.start_frame || Math.floor((r.start_time || 0) * (r.fps || 30)),
+        end_frame: r.end_frame || Math.floor((r.end_time || 0) * (r.fps || 30)),
+        fps: r.fps || 30,
+        start: r.start_time || r.start || 0,
+        end: r.end_time || r.end || 0,
+        text: r.text || r.text_content || '',
+        score: r.score || 0,
+        title: r.title || r.file_name || '',
+        file_path: r.file_path,
+        has_visual_stats: !!r.visual_stats,
+        parent_id: r.parent_chunk_id,
+      }
+    }),
  }
 }

--- a/portal/src/api/search.rs:3:5
+++ b/portal/src/api/search.rs:3:5
--- a/portal/src/components/TranslatableText.vue
+++ b/portal/src/components/TranslatableText.vue
@@ -30,6 +30,7 @@
      </div>
      {{ translatedText }}
    </div>
+    <div v-if="errorMsg" class="mt-2 text-xs text-red-400">{{ errorMsg }}</div>
  </div>
 </template>

@@ -45,16 +46,19 @@ const targetLang = ref('zh-TW')
 const translatedText = ref('')
 const loading = ref(false)
 const showTranslation = ref(false)
+const errorMsg = ref('')

 const translate = async () => {
  if (!props.text.trim()) return
  
  loading.value = true
+  errorMsg.value = ''
  try {
    translatedText.value = await translateText(props.text, targetLang.value)
    showTranslation.value = true
  } catch (error) {
-    console.error('Translation failed:', error)
+    errorMsg.value = '翻譯失敗: ' + (error as any)?.message || String(error)
+    showTranslation.value = false
  } finally {
    loading.value = false
  }
--- a/portal/src/main.rs:14:18
+++ b/portal/src/main.rs:14:18
--- a/portal/src/router.ts
+++ b/portal/src/router.ts
@@ -31,8 +31,8 @@ const routes = [
    meta: { requiresAuth: true }
  },
  {
-    path: '/faces/candidates',
-    name: 'face-candidates',
+    path: '/traces',
+    name: 'traces',
    component: () => import('./views/FaceCandidatesView.vue'),
    meta: { requiresAuth: true }
  },
@@ -49,28 +49,55 @@ const routes = [
    meta: { requiresAuth: true }
  },
  {
-    path: '/videos/:uuid',
-    name: 'video-detail',
+    path: '/file/:file_uuid',
+    name: 'file-detail',
    component: () => import('./views/VideoDetailView.vue'),
    meta: { requiresAuth: true }
  },
  {
-    path: '/chunk-detail/:uuid/:chunkId',
+    path: '/chunk-detail/:file_uuid/:chunk_id',
    name: 'chunk-detail',
    component: () => import('./views/ChunkDetailView.vue'),
    meta: { requiresAuth: true }
  },
  {
-    path: '/identity/:id',
+    path: '/identity/:identity_uuid',
    name: 'identity-detail',
    component: () => import('./views/IdentityDetailView.vue'),
    meta: { requiresAuth: true }
+  },
+  {
+    path: '/jobs',
+    name: 'pipeline-progress',
+    component: () => import('./views/PipelineProgressView.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/traces/:file_uuid/:trace_id',
+    name: 'trace-detail',
+    component: () => import('./views/TraceDetailView.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/trace-viz/:file_uuid',
+    name: 'trace-viz',
+    component: () => import('./views/TraceVizView.vue'),
+    meta: { requiresAuth: false }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'not-found',
+    component: () => import('./views/NotFoundView.vue'),
+    meta: { requiresAuth: false }
  }
 ]

 const router = createRouter({
  history: createWebHistory(),
-  routes
+  routes,
+  scrollBehavior() {
+    return { top: 0 }
+  }
 })

 router.beforeEach((to, _from, next) => {
--- a/portal/src/views/ChunkDetailView.vue
+++ b/portal/src/views/ChunkDetailView.vue
@@ -214,7 +214,10 @@
    </div>

    <!-- Error -->
-    <div v-else class="text-center py-12 text-red-400">
+    <div v-else-if="error" class="text-center py-12 text-red-400">
+      {{ error }}
+    </div>
+    <div v-else class="text-center py-12 text-gray-500">
      無法載入詳情
    </div>
  </div>
@@ -229,28 +232,28 @@ import { httpFetch, getCurrentConfig } from '@/api/client'
 const route = useRoute()
 const chunkId = ref('')
 const detail = ref<any>(null)
+const error = ref('')
 const loading = ref(false)

 const loadDetail = async () => {
-  const uuid = route.params.uuid as string
-  chunkId.value = route.params.chunkId as string
+  const uuid = route.params.file_uuid as string
+  chunkId.value = route.params.chunk_id as string
  loading.value = true

  try {
    const config = getCurrentConfig()
-    const url = `${config.api_base_url}/api/v1/file/${uuid}/${chunkId.value}`
+    const url = `${config.api_base_url}/api/v1/file/${uuid}/chunk/${chunkId.value}`
    
    const res = await httpFetch<any>(url)
-    console.log('Response status:', res.status, res.statusText)
    
-    if (!res.ok) {
-      throw new Error(`API error: ${res.status} ${res.statusText}`)
+    if (res && res.chunk_id) {
+      detail.value = res
+    } else {
+      detail.value = null
    }
-    
-    detail.value = res
-  } catch (error) {
-    console.error('Failed to load chunk detail:', error)
-    alert('載入失敗: ' + error)
+  } catch (err) {
+    error.value = '載入失敗: ' + (err as any)?.message || String(err)
+    console.error('Failed to load chunk detail:', err)
  } finally {
    loading.value = false
  }
@@ -316,16 +319,11 @@ const goBack = () => {
    try {
      const data = JSON.parse(saved)
      localStorage.removeItem('searchState')
-      router.push({ 
-        name: 'search', 
-        query: { q: data.query }
-      })
-    } catch {
-      router.back()
-    }
-  } else {
-    router.back()
+      router.push({ name: 'search', query: { q: data.query } })
+      return
+    } catch { /* ignore */ }
  }
+  router.push('/files')
 }

 onMounted(() => {
--- a/portal/src/views/FaceCandidatesView.vue
+++ b/portal/src/views/FaceCandidatesView.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
-      <h2 class="text-2xl font-bold">Face Candidates</h2>
+      <h2 class="text-2xl font-bold">Face Traces</h2>
      <button
-        @click="loadCandidates"
+        @click="loadTraces"
        class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
      >
        Refresh
@@ -11,187 +11,248 @@
    </div>

    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 space-y-4">
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-4 gap-4">
        <div>
-          <label class="text-gray-400 text-sm mb-1">Min Confidence</label>
-          <input
-            v-model.number="minConfidence"
-            @change="loadCandidates"
-            type="number"
-            step="0.1"
-            min="0"
-            max="1"
+          <label class="text-gray-400 text-sm mb-1">Filter by File (必選)</label>
+          <select
+            v-model="selectedFileUuid"
+            @change="loadTraces"
            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
-          />
+          >
+            <option value="">-- 選擇檔案 --</option>
+            <option v-for="f in files" :key="f.file_uuid" :value="f.file_uuid">
+              {{ f.file_name?.substring(0, 50) || f.file_uuid }}
+            </option>
+          </select>
        </div>
        <div>
-          <label class="text-gray-400 text-sm mb-1">Page Size</label>
+          <label class="text-gray-400 text-sm mb-1">Sort By</label>
+          <select
+            v-model="sortBy"
+            @change="loadTraces"
+            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+          >
+            <option value="face_count">Face Count</option>
+            <option value="duration">Duration</option>
+            <option value="first_appearance">First Appearance</option>
+          </select>
+        </div>
+        <div>
+          <label class="text-gray-400 text-sm mb-1">Min Faces</label>
          <input
-            v-model.number="pageSize"
-            @change="loadCandidates"
+            v-model.number="minFaces"
+            @change="loadTraces"
            type="number"
            min="1"
-            max="100"
+            max="1000"
            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
          />
        </div>
-      </div>
-    </div>
-
-    <div v-if="loading" class="text-center py-12 text-gray-500">
-      Loading...
-    </div>
-
-    <div v-else-if="candidates.length > 0">
-      <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-4">
-        <div class="text-gray-400">
-          Showing {{ candidates.length }} of {{ total }} candidates
-          <span v-if="selectedFaces.length > 0" class="ml-4 text-green-400">
-            {{ selectedFaces.length }} selected
-          </span>
+        <div>
+          <label class="text-gray-400 text-sm mb-1">Binding Status</label>
+          <select
+            v-model="bindingFilter"
+            @change="loadTraces"
+            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+          >
+            <option value="all">全部</option>
+            <option value="registered">已綁定</option>
+            <option value="unregistered">未綁定</option>
+          </select>
        </div>
      </div>
+    </div>

-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-        <div
-          v-for="face in candidates"
-          :key="face.id"
-          @click="toggleSelection(face)"
-          :class="[
-            'bg-gray-800 rounded-lg border overflow-hidden cursor-pointer transition',
-            selectedFaces.includes(face.id) ? 'border-green-500 bg-green-900/20' : 'border-gray-700 hover:border-gray-500'
-          ]"
-        >
-          <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
-            <img 
-              :src="getThumbnailUrl(face)"
-              alt="Face thumbnail"
-              class="w-full h-full object-cover"
-              loading="lazy"
-              @error="onThumbnailError"
-            />
+    <div v-if="!selectedFileUuid" class="text-center py-12 text-gray-500">
+      請選擇一個檔案來檢視 Face Traces
+    </div>
+
+    <template v-else>
+      <div v-if="loading && traces.length === 0" class="text-center py-12 text-gray-500">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500 mx-auto mb-4"></div>
+        <span>Loading...</span>
+      </div>
+
+      <div v-if="traces.length > 0">
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-4 flex justify-between items-center">
+          <div class="text-gray-400">
+            Showing {{ paginatedTraces.length }} of {{ traces.length }} traces
          </div>
-          <div class="p-3">
-            <div class="flex justify-between items-center mb-1">
-              <span class="text-xs text-gray-400">Conf:</span>
-              <span class="text-sm font-mono" :class="getConfidenceColor(face.confidence)">
-                {{ face.confidence.toFixed(2) }}
-              </span>
+          <div class="flex items-center space-x-2">
+            <span class="text-xs text-gray-500">每頁</span>
+            <select v-model.number="pageSize" @change="page=1"
+              class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-white text-xs">
+              <option :value="20">20</option>
+              <option :value="50">50</option>
+              <option :value="100">100</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Pagination top -->
+        <div v-if="totalPages > 1" class="flex justify-center mb-4 space-x-2">
+          <button @click="page = 1" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">«</button>
+          <button @click="page--" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">‹</button>
+          <span class="text-gray-400 text-sm py-1">{{ page }} / {{ totalPages }}</span>
+          <button @click="page++" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">›</button>
+          <button @click="page = totalPages" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">»</button>
+        </div>
+
+        <!-- Loading overlay during pagination -->
+        <div v-if="loading" class="text-center py-4 text-gray-500 mb-2">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
+        </div>
+
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+          <div
+            v-for="trace in paginatedTraces"
+            :key="trace.trace_id"
+            @click="viewTrace(trace)"
+            class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden cursor-pointer hover:border-blue-500 transition"
+          >
+            <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
+              <img
+                :src="getThumbnailUrl(trace)"
+                alt="Trace thumbnail"
+                class="w-full h-full object-cover"
+                loading="lazy"
+                @error="onThumbnailError(trace.trace_id)"
+              />
            </div>
-            <div v-if="face.attributes" class="text-xs text-gray-500">
-              <div v-if="face.attributes.gender">{{ face.attributes.gender }}</div>
-              <div v-if="face.attributes.age">Age: {{ face.attributes.age }}</div>
+            <div class="p-3 space-y-1">
+              <div class="flex items-center justify-between">
+                <div class="text-sm font-semibold text-blue-300">Trace #{{ trace.trace_id }}</div>
+                <span class="text-xs px-1.5 py-0.5 rounded"
+                  :class="trace.face_count > 5 ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'">
+                  {{ trace.face_count > 5 ? '多' : '少' }}
+                </span>
+              </div>
+              <div class="text-xs text-gray-400">{{ trace.face_count }} faces, {{ trace.duration_sec?.toFixed(1) || '?' }}s</div>
+              <div class="text-xs font-mono" :class="getConfidenceColor(trace.avg_confidence)">
+                {{ (trace.avg_confidence * 100).toFixed(0) }}%
+              </div>
            </div>
          </div>
        </div>
+
+        <!-- Pagination bottom -->
+        <div v-if="totalPages > 1" class="flex justify-center mt-6 space-x-2">
+          <button @click="page = 1" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">«</button>
+          <button @click="page--" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">‹</button>
+          <span class="text-gray-400 text-sm py-1">{{ page }} / {{ totalPages }}</span>
+          <button @click="page++" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">›</button>
+          <button @click="page = totalPages" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">»</button>
+        </div>
      </div>

-      <div v-if="total > pageSize" class="flex justify-center mt-6 space-x-2">
-        <button
-          v-if="page > 1"
-          @click="prevPage"
-          class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded"
-        >
-          Previous
-        </button>
-        <span class="text-gray-400 py-2">
-          Page {{ page }} of {{ Math.ceil(total / pageSize) }}
-        </span>
-        <button
-          v-if="page * pageSize < total"
-          @click="nextPage"
-          class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded"
-        >
-          Next
-        </button>
+      <div v-if="!loading && traces.length === 0" class="text-center py-12 text-gray-500">
+        No traces found for this file
      </div>
-    </div>
-
-    <div v-else class="text-center py-12 text-gray-500">
-      No candidates found
-    </div>
+    </template>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { listFaceCandidates, getCurrentConfig } from '@/api/client'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getVideos, getCurrentConfig } from '@/api/client'

-interface FaceCandidate {
-  id: number
-  face_id: string | null
-  file_uuid: string
-  frame_number: number
-  confidence: number
-  bbox: any
-  attributes: any
+const router = useRouter()
+
+interface TraceInfo {
+  trace_id: number
+  face_count: number
+  first_frame: number
+  last_frame: number
+  first_sec: number
+  last_sec: number
+  duration_sec: number
+  avg_confidence: number
+  sample_face_id?: string | null
 }

-const candidates = ref<FaceCandidate[]>([])
+const traces = ref<TraceInfo[]>([])
 const loading = ref(false)
-const total = ref(0)
+const totalTraces = ref(0)
+const selectedFileUuid = ref('')
+const files = ref<any[]>([])
+const sortBy = ref('face_count')
+const minFaces = ref(1)
+const bindingFilter = ref('all')
 const page = ref(1)
-const pageSize = ref(20)
-const minConfidence = ref(0.8)
-const selectedFaces = ref<number[]>([])
+const pageSize = ref(50)

-const getThumbnailUrl = (face: FaceCandidate): string => {
+const totalPages = computed(() => Math.max(1, Math.ceil(traces.value.length / pageSize.value)))
+
+const paginatedTraces = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return traces.value.slice(start, start + pageSize.value)
+})
+
+const failedThumbnails = ref<Set<number>>(new Set())
+
+const getThumbnailUrl = (trace: TraceInfo): string => {
  const config = getCurrentConfig()
-  if (!face.bbox) return ''
-  const b = face.bbox
-  return `${config.api_base_url}/api/v1/file/${face.file_uuid}/thumbnail?frame=${face.frame_number}&x=${b.x}&y=${b.y}&w=${b.width}&h=${b.height}`
+  return `${config.api_base_url}/api/v1/file/${selectedFileUuid.value}/thumbnail?frame=${trace.first_frame}`
 }

-const onThumbnailError = (event: Event) => {
-  const img = event.target as HTMLImageElement
-  img.style.display = 'none'
-  const parent = img.parentElement
-  if (parent) {
-    parent.innerHTML = '<div class="text-center p-4"><div class="text-2xl">👤</div></div>'
-  }
+const onThumbnailError = (traceId: number) => {
+  failedThumbnails.value = new Set([...failedThumbnails.value, traceId])
 }

-const loadCandidates = async () => {
+const getConfidenceColor = (conf: number): string => {
+  if (conf >= 0.8) return 'text-green-400'
+  if (conf >= 0.5) return 'text-yellow-400'
+  return 'text-red-400'
+}
+
+const viewTrace = (trace: TraceInfo) => {
+  router.push(`/traces/${selectedFileUuid.value}/${trace.trace_id}`)
+}
+
+const loadTraces = async () => {
+  if (!selectedFileUuid.value) return
  loading.value = true
+  page.value = 1
  try {
-    const result = await listFaceCandidates(undefined, minConfidence.value, page.value, pageSize.value)
-    candidates.value = result.candidates || []
-    total.value = result.total || 0
-  } catch (error) {
-    console.error('Failed to load candidates:', error)
-    alert('Load failed: ' + error)
+    const config = getCurrentConfig()
+    const result = await fetch(
+      `${config.api_base_url}/api/v1/file/${selectedFileUuid.value}/face_trace/sortby`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(config.api_key ? { 'X-API-Key': config.api_key } : {})
+        },
+        body: JSON.stringify({
+          sort_by: sortBy.value,
+          limit: 200,
+          min_faces: minFaces.value
+        })
+      }
+    )
+    const data = await result.json()
+    traces.value = data.traces || []
+    totalTraces.value = data.total_traces || 0
+  } catch (e) {
+    console.error('Failed to load traces:', e)
  } finally {
    loading.value = false
  }
 }

-const toggleSelection = (face: FaceCandidate) => {
-  const idx = selectedFaces.value.indexOf(face.id)
-  if (idx >= 0) {
-    selectedFaces.value.splice(idx, 1)
-  } else {
-    selectedFaces.value.push(face.id)
-  }
-}
-
-const nextPage = () => {
-  page.value++
-  loadCandidates()
-}
-
-const prevPage = () => {
-  page.value--
-  loadCandidates()
-}
-
-const getConfidenceColor = (conf: number): string => {
-  if (conf >= 0.9) return 'text-green-400'
-  if (conf >= 0.8) return 'text-blue-400'
-  if (conf >= 0.7) return 'text-yellow-400'
-  return 'text-gray-400'
-}
-
-onMounted(() => {
-  loadCandidates()
+onMounted(async () => {
+  try {
+    const result = await getVideos()
+    files.value = result.data || result.files || []
+  } catch { /* ignore */ }
 })
 </script>
--- a/portal/src/views/FilesView.vue
+++ b/portal/src/views/FilesView.vue
@@ -42,6 +42,13 @@
            已完成
          </button>
        </div>
+        <!-- Search input -->
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="搜尋檔名..."
+          class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm w-full md:w-48 focus:outline-none focus:border-blue-500"
+        />
      </div>
    </div>

@@ -174,24 +181,36 @@ function setStatusFilter(status: string) {

 async function fetchFiles() {
  loading.value = true
-  error.value = null
  try {
    const config = getCurrentConfig()
-    // Call the scan endpoint to get list of files with status
-    // Note: /api/v1/files/scan returns unregistered files. 
-    // We might need a combined list or call /api/v1/files for registered ones.
-    // For now, let's assume /api/v1/files/scan returns all files with is_registered flag.
-    const response: any = await httpFetch(`${config.api_base_url}/api/v1/files/scan`)
-    
-    // Map scan response to our expected format
-    // Scan returns: { files: [ { file_uuid, file_name, is_registered, status... } ] }
-    files.value = response.files?.map((f: any) => ({
+    const scanResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files/scan`)
+    const scanFiles: any[] = (scanResp?.files || []).map((f: any) => ({
      ...f,
-      status: f.status || (f.is_registered ? 'pending' : 'unregistered') 
-    })) || []
+      status: f.is_registered ? 'registered_scan' : 'unregistered'
+    }))

-    // To get actual processing status, we might need to cross reference with /api/v1/files
-    // But for Demo, let's rely on the scan endpoint providing status.
+    // Get registered files with real processing status
+    let regFiles: any[] = []
+    try {
+      const regResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files?page=1&page_size=100`)
+      regFiles = (regResp?.files || regResp?.data || []).map((f: any) => ({
+        ...f,
+        status: f.status || 'pending'
+      }))
+    } catch {
+      // Registered files API may not be available; use scan data only
+    }
+
+    // Merge: scan results first, then overlay with registered statuses
+    const merged = new Map<string, any>()
+    for (const f of scanFiles) {
+      merged.set(f.file_path, f)
+    }
+    for (const f of regFiles) {
+      merged.set(f.file_path, f)
+    }
+
+    files.value = Array.from(merged.values())
  } catch (e) {
    console.error('Failed to fetch files:', e)
    error.value = String(e)
@@ -201,6 +220,7 @@ async function fetchFiles() {
 }

 async function registerFile(filePath: string) {
+  if (!filePath) { alert('無法註冊：缺少檔案路徑'); return }
  try {
    await registerVideo(filePath)
    // Refresh list
@@ -212,7 +232,9 @@ async function registerFile(filePath: string) {
 }

 async function unregisterFile(fileUuid: string, fileName: string) {
-  if (!confirm(`確定要取消註冊 "${fileName}" 嗎？這將刪除資料庫中的相關記錄。`)) {
+  if (!fileUuid) { alert('無法取消註冊：缺少 UUID'); return }
+  const displayName = fileName || '未知檔案'
+  if (!confirm(`確定要取消註冊 "${displayName}" 嗎？這將刪除資料庫中的相關記錄。`)) {
    return
  }
  
@@ -226,6 +248,7 @@ async function unregisterFile(fileUuid: string, fileName: string) {
 }

 async function startProcessing(fileUuid: string) {
+  if (!fileUuid) { alert('無法處理：缺少 UUID'); return }
  if (!confirm('確定要開始分析處理此檔案嗎？')) return
  
  try {
@@ -245,8 +268,8 @@ async function startProcessing(fileUuid: string) {
 }

 function enterWorkbench(fileUuid: string) {
-  // Navigate to the new Face Workbench view
-  router.push(`/video-detail/${fileUuid}`)
+  if (!fileUuid) { alert('無法開啟工作台：缺少 UUID'); return }
+  router.push(`/file/${fileUuid}`)
 }

 onMounted(fetchFiles)
--- a/portal/src/views/HomeView.vue
+++ b/portal/src/views/HomeView.vue
@@ -112,6 +112,12 @@
      <h3 class="text-xl font-semibold text-orange-400 mb-4">SFTPGo 狀態</h3>
      
      <div v-if="sftpgoStatus" class="space-y-4">
+        <!-- Status message -->
+        <div v-if="statusMsg" class="text-sm px-3 py-2 rounded"
+          :class="statusMsg.type === 'ok' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'">
+          {{ statusMsg.text }}
+          <button @click="statusMsg = null" class="ml-2 text-gray-500 hover:text-white">&times;</button>
+        </div>
        <!-- Basic Info -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
@@ -343,11 +349,7 @@

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { getHealth, getIngestStats, getSftpgoStatus, getInferenceHealth } from '@/api/client'
-
-const isTauri = () => {
-  return (window as any).__TAURI__ !== undefined
-}
+import { getHealth, getIngestStats, getSftpgoStatus, getInferenceHealth, getCurrentConfig, isTauri } from '@/api/client'

 interface ServiceStatus {
  status: string
@@ -414,8 +416,9 @@ const ingestStats = ref<IngestStats | null>(null)
 const sftpgoStatus = ref<SftpgoStatus | null>(null)
 const inferenceHealth = ref<InferenceHealthResponse | null>(null)
 const loading = ref(false)
-const apiBaseUrl = ref('http://127.0.0.1:3003 (dev)')
+const apiBaseUrl = ref(getCurrentConfig().api_base_url)
 const sftpgoUrl = ref('https://sftpgo.momentry.ddns.net/web/client')
+const statusMsg = ref<{ text: string; type: string } | null>(null)

 async function fetchHealth() {
  loading.value = true
@@ -455,33 +458,31 @@ async function fetchInferenceHealth() {
 function openSftpgoFiles() {
  const url = sftpgoUrl.value
  console.log('Momentry: Opening URL:', url, 'isTauri:', isTauri())
-  alert('即將開啟：' + url)
+  statusMsg.value = { text: '即將開啟：' + url, type: 'ok' }
  
  if (isTauri()) {
-    // Use Tauri invoke in app mode
    try {
      import('@tauri-apps/api/core').then(({ invoke }) => {
        invoke('plugin:shell|open', { path: url }).then(() => {
          console.log('Momentry: Opened with shell')
-          alert('已開啟')
+          statusMsg.value = { text: '已開啟', type: 'ok' }
        }).catch((e) => {
          console.error('Momentry: Shell error:', e)
-          alert('開啟失敗：' + e)
+          statusMsg.value = { text: '開啟失敗：' + e, type: 'err' }
        })
      })
    } catch (e) {
      console.error('Momentry: Import error:', e)
-      alert('導入失敗：' + e)
+      statusMsg.value = { text: '導入失敗：' + e, type: 'err' }
    }
    return
  }
-  // Use browser open in web mode
  window.open(url, '_blank')?.focus()
 }

 function copySftpgoUrl() {
  navigator.clipboard.writeText(sftpgoUrl.value)
-  alert('已複製網址：' + sftpgoUrl.value)
+  statusMsg.value = { text: '已複製網址：' + sftpgoUrl.value, type: 'ok' }
 }

 async function refreshHealth() {
@@ -507,44 +508,3 @@ onMounted(() => {
  fetchInferenceHealth()
 })
 </script>
-
-<script lang="ts">
-import { defineComponent, h } from 'vue'
-
-const ServiceStatusCard = defineComponent({
-  props: {
-    name: String,
-    status: String,
-    latency: [Number, null],
-    error: [String, null]
-  },
-  setup(props) {
-    const statusColor = () => {
-      if (props.status === 'ok') return 'text-green-400'
-      if (props.status === 'degraded') return 'text-yellow-400'
-      return 'text-red-400'
-    }
-    
-    const bgColor = () => {
-      if (props.status === 'ok') return 'bg-green-900/20 border-green-700'
-      if (props.status === 'degraded') return 'bg-yellow-900/20 border-yellow-700'
-      return 'bg-red-900/20 border-red-700'
-    }
-    
-    return () => h('div', {
-      class: `rounded-lg p-3 border ${bgColor()}`
-    }, [
-      h('div', { class: 'flex items-center justify-between' }, [
-        h('span', { class: 'font-semibold' }, props.name),
-        h('span', { class: statusColor() }, props.status === 'ok' ? '●' : '○')
-      ]),
-      props.latency ? h('div', { class: 'text-xs text-gray-400 mt-1' }, `${props.latency}ms`) : null,
-      props.error ? h('div', { class: 'text-xs text-red-400 mt-1 truncate' }, props.error) : null
-    ])
-  }
-})
-
-export default {
-  components: { ServiceStatusCard }
-}
-</script>
--- a/portal/src/views/IdentityDetailView.vue
+++ b/portal/src/views/IdentityDetailView.vue
@@ -60,7 +60,6 @@
            <thead class="text-xs text-gray-500 uppercase bg-gray-700">
              <tr>
                <th scope="col" class="px-6 py-3 rounded-l-lg">影片名稱</th>
-                <th scope="col" class="px-6 py-3">區域 ID</th>
                <th scope="col" class="px-6 py-3">出現次數</th>
                <th scope="col" class="px-6 py-3 rounded-r-lg">首次出現</th>
              </tr>
@@ -68,7 +67,6 @@
            <tbody>
              <tr v-for="video in videos" :key="video.file_uuid" class="bg-gray-800 border-b border-gray-700 hover:bg-gray-750">
                <td class="px-6 py-4 font-medium text-white">{{ video.file_name }}</td>
-                <td class="px-6 py-4 font-mono text-blue-300">{{ video.person_id }}</td>
                <td class="px-6 py-4">{{ video.appearance_count }}</td>
                <td class="px-6 py-4">{{ video.first_appearance?.toFixed(2) || '-' }}s</td>
              </tr>
@@ -76,12 +74,25 @@
          </table>
        </div>
      </div>
+
+      <!-- 3D Face Viewer -->
+      <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+        <h3 class="text-lg font-semibold mb-4 text-blue-400">3D 臉部</h3>
+        <p class="text-sm text-gray-400 mb-3">立體臉部網格（MediaPipe Face Mesh，468 landmarks）</p>
+        <div class="h-[350px]">
+          <Face3DViewer v-if="faceLandmarks.length" :landmarks="faceLandmarks" />
+          <div v-else class="flex items-center justify-center h-full text-gray-500 text-sm">
+            {{ faceLoading ? '正在取得臉部資料...' : '尚無臉部資料' }}
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import Face3DViewer from '@/components/Face3DViewer.vue'
 import { useRoute } from 'vue-router'
 import { httpFetch, getCurrentConfig } from '@/api/client'

@@ -91,9 +102,11 @@ const loading = ref(false)
 const detail = ref<any>(null)
 const profile = ref<any>({})
 const videos = ref<any[]>([])
+const faceLandmarks = ref<number[][]>([])
+const faceLoading = ref(false)

 const loadDetail = async () => {
-  identityId.value = route.params.id as string
+  identityId.value = route.params.identity_uuid as string
  loading.value = true

  try {
@@ -110,7 +123,44 @@ const loadDetail = async () => {
  }
 }

+async function loadFaceLandmarks() {
+  faceLoading.value = true
+  try {
+    const config = getCurrentConfig()
+    // Use first video's file_uuid for thumbnail (identity UUID doesn't work for thumbnails)
+    const firstFileUuid = videos.value?.[0]?.file_uuid || identityId.value
+    const thumbUrl = `${config.api_base_url}/api/v1/file/${firstFileUuid}/thumbnail?frame=1`
+    const thumbResp = await fetch(thumbUrl, {
+      headers: config.api_key ? { 'X-API-Key': config.api_key } : {}
+    })
+    const blob = await thumbResp.blob()
+    const reader = new FileReader()
+    reader.onload = async () => {
+      const b64 = (reader.result as string).split(',')[1]
+      try {
+        const lmResp = await fetch('http://localhost:11437/v1/face/landmarks', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ image: b64 })
+        })
+        const data = await lmResp.json()
+        if (data?.landmarks?.length) {
+          faceLandmarks.value = data.landmarks.map((lm: any) => [lm.x, lm.y, lm.z])
+        }
+      } catch {
+        // Fallback to sample
+        const fallback = await fetch('/sample_face_landmarks.json')
+        const fbData = await fallback.json()
+        if (fbData?.landmarks?.length) faceLandmarks.value = fbData.landmarks
+      }
+    }
+    reader.readAsDataURL(blob)
+  } catch { /* ignore */ }
+  faceLoading.value = false
+}
+
 onMounted(() => {
  loadDetail()
+  loadFaceLandmarks()
 })
 </script>
--- a/portal/src/views/LoginView.vue
+++ b/portal/src/views/LoginView.vue
@@ -54,9 +54,9 @@
        </button>
      </form>

-      <!-- API Demo -->
-      <div class="mt-8 pt-6 border-t border-gray-700">
-        <h3 class="text-sm font-medium text-gray-400 mb-3">API 範例</h3>
+      <!-- API Demo (dev mode only) -->
+      <div v-if="showApiExamples" class="mt-8 pt-6 border-t border-gray-700">
+        <h3 class="text-sm font-medium text-gray-400 mb-3">API 範例 <span class="text-xs text-yellow-500">(dev)</span></h3>
        <div class="space-y-2 text-xs font-mono">
          <div class="bg-gray-900 p-2 rounded">
            <span class="text-green-400"># Login</span>
@@ -76,18 +76,26 @@
 </template>

 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { httpFetch, getCurrentConfig, saveConfig } from '@/api/client'

-const username = ref('')
-const password = ref('')
+const route = useRoute()
+const router = useRouter()
+const username = ref(route.query.username as string || '')
+const password = ref(route.query.password as string || '')
 const error = ref('')
 const loading = ref(false)
 const showPassword = ref(false)
-const router = useRouter()

 const baseUrl = computed(() => getCurrentConfig().api_base_url)
+const showApiExamples = ref(localStorage.getItem('devMode') === 'true')
+
+onMounted(() => {
+  if (username.value && password.value) {
+    handleLogin()
+  }
+})

 const handleLogin = async () => {
  error.value = ''
@@ -109,7 +117,8 @@ const handleLogin = async () => {
      localStorage.setItem('momentry_user', JSON.stringify(data.user))
      localStorage.setItem('momentry_api_key', data.api_key)
      saveConfig({ ...config, api_key: data.api_key })
-      router.push('/home')
+      const redirect = (route.query.redirect as string) || '/home'
+      router.push(redirect)
    } else {
      error.value = data.message || 'Login failed'
    }
--- a/portal/src/views/PersonsView.vue
+++ b/portal/src/views/PersonsView.vue
@@ -1,129 +1,50 @@
 <template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
-      <h2 class="text-2xl font-bold">人物管理</h2>
-      <button
-        @click="loadPersons"
-        class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
-      >
-        重新整理
-      </button>
+      <h2 class="text-2xl font-bold">身分管理</h2>
+      <button @click="loadPersons" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">重新整理</button>
    </div>

-    <!-- Search Filter -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
-      <input
-        v-model="filterQuery"
-        @keyup.enter="loadPersons"
-        type="text"
-        placeholder="搜尋人物..."
-        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500"
-      />
+      <input v-model="filterQuery" @keyup.enter="loadPersons" placeholder="搜尋身分..."
+        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500" />
    </div>

-    <!-- Person List -->
    <div v-if="persons.length > 0" class="grid gap-4">
-      <div
-        v-for="person in persons"
-        :key="person.id"
-        class="bg-gray-800 rounded-lg p-6 border border-gray-700"
-      >
+      <div v-for="person in persons" :key="person.id" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <div class="flex items-start gap-6">
-          <!-- Thumbnail -->
-          <PersonThumbnail :personId="person.person_id" :videoUuid="person.file_uuid" />
-
+          <div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
+            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+          </div>
          <div class="flex-1">
            <div class="flex items-center space-x-3 mb-2">
-              <h3 class="text-xl font-semibold text-blue-400">
-                {{ person.profile.name || '未命名' }}
-              </h3>
-              <span
-                v-if="person.face_identity_id"
-                class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs"
-              >
-                已註冊
-              </span>
-              <span
-                v-else
-                class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs"
-              >
-                未註冊
-              </span>
+              <h3 class="text-xl font-semibold text-blue-400">{{ person.name || '未命名' }}</h3>
+              <span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">{{ person.source || 'system' }}</span>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm text-gray-400 mb-3">
-              <div>角色: {{ person.profile.character_name || '-' }}</div>
-              <div>Speaker: {{ person.profile.speaker_id || '-' }}</div>
-              <div>影片: {{ person.file_uuid }}</div>
-              <div>出現次數: {{ person.stats.appearance_count }}</div>
-            </div>
-            <div v-if="person.profile.original_name" class="text-sm text-gray-500">
-              原始名稱: {{ person.profile.original_name }}
+              <div>ID: {{ person.id }}</div>
+              <div v-if="person.metadata?.tmdb_movie_title">電影: {{ person.metadata.tmdb_movie_title }}</div>
+              <div v-if="person.metadata?.tmdb_character">角色: {{ person.metadata.tmdb_character }}</div>
            </div>
          </div>
-          
-          <!-- Actions -->
          <div class="flex flex-col space-y-2">
-            <button
-              v-if="!person.face_identity_id"
-              @click="registerPerson(person.person_id, person.file_uuid)"
-              class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm transition"
-            >
-              註冊為全域身份
-            </button>
-            <button
-              @click="viewDetails(person)"
-              class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition"
-            >
-              {{ person.face_identity_id ? '查看全域詳情' : '查看影片' }}
-            </button>
+            <button @click="viewDetails(person)" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition">查看詳情</button>
          </div>
        </div>
      </div>
    </div>

-    <!-- Loading State -->
-    <div v-else-if="loading" class="text-center py-12 text-gray-500">
-      載入中...
-    </div>
-
-    <!-- Empty State -->
-    <div v-else class="text-center py-12 text-gray-500">
-      尚無人物資料
-    </div>
+    <div v-else-if="loading" class="text-center py-12 text-gray-500">載入中...</div>
+    <div v-else class="text-center py-12 text-gray-500">尚無身分資料</div>
  </div>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { listIdentities, httpFetch, getCurrentConfig } from '@/api/client'
+import { httpFetch, getCurrentConfig } from '@/api/client'
 import { useRouter } from 'vue-router'
-import PersonThumbnail from '@/components/PersonThumbnail.vue'

-interface PersonProfile {
-  name: string | null
-  original_name: string | null
-  character_name: string | null
-  speaker_id: string | null
-}
-
-interface PersonStats {
-  appearance_count: number
-  total_duration: number
-  first_appearance: number | null
-  last_appearance: number | null
-}
-
-interface Person {
-  id: number
-  person_id: string
-  face_identity_id: number | null
-  file_uuid: string
-  profile: PersonProfile
-  stats: PersonStats
-  is_confirmed: boolean
-}
-
-const persons = ref<Person[]>([])
+const persons = ref<any[]>([])
 const loading = ref(false)
 const filterQuery = ref('')
 const router = useRouter()
@@ -131,46 +52,24 @@ const router = useRouter()
 const loadPersons = async () => {
  loading.value = true
  try {
-    const result = await listIdentities()
-    persons.value = result.identities
+    const config = getCurrentConfig()
+    const params = new URLSearchParams({ page: '1', page_size: '50' })
+    if (filterQuery.value.trim()) params.set('query', filterQuery.value.trim())
+    const result = await httpFetch<any>(`${config.api_base_url}/api/v1/identities?${params}`)
+    persons.value = result.identities || []
  } catch (error) {
-    console.error('Failed to load persons:', error)
-    alert('載入失敗: ' + error)
+    console.error('Failed to load identities:', error)
  } finally {
    loading.value = false
  }
 }

-const registerPerson = async (personId: string, _videoUuid: string) => {
-  try {
-    const config = getCurrentConfig()
-    await httpFetch(`${config.api_base_url}/api/v1/identity`, {
-      method: 'POST',
-      body: JSON.stringify({ face_json_path: personId, identity_name: personId })
-    })
-    alert('註冊成功！')
-    await loadPersons()
-  } catch (error) {
-    console.error('Registration failed:', error)
-    alert('註冊失敗: ' + error)
-  }
+const viewDetails = (person: any) => {
+  router.push({
+    name: 'identity-detail',
+    params: { identity_uuid: person.id }
+  })
 }

-const viewDetails = (person: Person) => {
-  if (person.face_identity_id) {
-    router.push({
-      name: 'identity-detail',
-      params: { id: person.face_identity_id }
-    })
-  } else {
-    router.push({
-      name: 'video-detail',
-      params: { uuid: person.file_uuid }
-    })
-  }
-}
-
-onMounted(() => {
-  loadPersons()
-})
+onMounted(() => { loadPersons() })
 </script>
--- a/portal/src/views/SearchView.vue
+++ b/portal/src/views/SearchView.vue
@@ -20,26 +20,52 @@
          {{ loading ? '搜尋中...' : '搜尋' }}
        </button>
      </div>
-      <!-- Mode Selector -->
-      <div class="flex items-center space-x-4">
-        <span class="text-gray-400 text-sm">搜尋模式:</span>
-        <select
-          v-model="searchMode"
-          class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
-        >
-          <option value="vector">向量搜尋 (Vector)</option>
-          <option value="bm25">關鍵字搜尋 (BM25)</option>
-          <option value="hybrid">混合搜尋 (Hybrid)</option>
-          <option value="smart">智慧搜尋 (Smart)</option>
-        </select>
+      <div class="flex flex-wrap items-center gap-4">
+        <!-- Result Type -->
+        <div class="flex items-center space-x-2">
+          <span class="text-gray-400 text-sm">搜尋類型:</span>
+          <select
+            v-model="searchType"
+            class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="chunk">文字區塊 (Chunk)</option>
+            <option value="trace">臉部軌跡 (Trace)</option>
+          </select>
+        </div>
+        <!-- Mode Selector -->
+        <div v-if="searchType === 'chunk'" class="flex items-center space-x-2">
+          <span class="text-gray-400 text-sm">搜尋模式:</span>
+          <select
+            v-model="searchMode"
+            class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="vector">向量搜尋 (Vector)</option>
+            <option value="bm25">關鍵字搜尋 (BM25)</option>
+            <option value="hybrid">混合搜尋 (Hybrid)</option>
+            <option value="smart">智慧搜尋 (Smart)</option>
+          </select>
+        </div>
+        <!-- File Selector -->
+        <div class="flex items-center space-x-2">
+          <span class="text-gray-400 text-sm">搜尋檔案:</span>
+          <select
+            v-model="selectedFileUuid"
+            class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm max-w-[300px] focus:outline-none focus:border-blue-500"
+          >
+            <option value="">所有檔案</option>
+            <option v-for="f in files" :key="f.file_uuid" :value="f.file_uuid">
+              {{ f.file_name?.substring(0, 40) || f.file_uuid }}
+            </option>
+          </select>
+        </div>
        <span class="text-gray-500 text-xs">
          {{ modeDescription }}
        </span>
      </div>
    </div>

-    <!-- Results -->
-    <div v-if="results.length > 0" class="space-y-4">
+    <!-- Results: Chunks -->
+    <div v-if="searchType === 'chunk' && results.length > 0" class="space-y-4">
      <h3 class="text-xl font-semibold">搜尋結果 ({{ results.length }})</h3>
      <div class="grid gap-4">
        <div
@@ -98,10 +124,41 @@
      </div>
    </div>

-    <!-- No Results -->
-    <div v-else-if="searched && !loading" class="text-center py-12 text-gray-500">
+    <!-- No Results: Chunks -->
+    <div v-else-if="searchType === 'chunk' && searched && !loading" class="text-center py-12 text-gray-500">
      找不到符合的結果
    </div>
+
+    <!-- Results: Traces -->
+    <div v-if="searchType === 'trace' && traceResults.length > 0" class="space-y-4">
+      <h3 class="text-xl font-semibold">Trace 搜尋結果 ({{ traceResults.length }})</h3>
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <div
+          v-for="trace in traceResults"
+          :key="trace.trace_id"
+          @click="goToTrace(trace)"
+          class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden cursor-pointer hover:border-blue-500 transition"
+        >
+          <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
+            <img
+              :src="getTraceThumbnail(trace)"
+              alt="Trace"
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </div>
+          <div class="p-3 space-y-1">
+            <div class="text-sm font-semibold text-blue-300">Trace #{{ trace.trace_id }}</div>
+            <div class="text-xs text-gray-400">{{ trace.face_count }} faces, {{ trace.duration_sec?.toFixed(1) || '?' }}s</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- No Results: Traces -->
+    <div v-else-if="searchType === 'trace' && searched && !loading" class="text-center py-12 text-gray-500">
+      找不到符合的 Trace
+    </div>
  </div>
    <!-- Player Modal -->
    <div v-if="player.visible" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4" @click.self="player.visible = false">
@@ -113,6 +170,7 @@
        </div>
        <video
          ref="videoPlayer"
+          :key="player.url"
          :src="player.url"
          class="w-full"
          controls
@@ -126,7 +184,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { searchVideos, getCurrentConfig } from '@/api/client'
+import { searchVideos, getVideos, getCurrentConfig } from '@/api/client'

 const router = useRouter()
 const route = useRoute()
@@ -147,19 +205,32 @@ const playChunk = (hit: SearchHit) => {
  player.title = hit.text.substring(0, 80)
  player.start = hit.start
  player.end = hit.end
-  player.url = `${config.api_base_url}/api/v1/file/${hit.vid}/video#t=${hit.start},${hit.end}`
+  player.url = `${config.api_base_url}/api/v1/file/${hit.vid}/video?start=${hit.start}&end=${hit.end}`
 }

 const seekToStart = () => {
  const el = videoPlayer.value
-  if (el) {
+  if (!el || !player.start) return
+  if (!player.url.includes('start=')) {
    el.currentTime = player.start
-    setTimeout(() => { if (el.currentTime > player.end) el.pause() }, (player.end - player.start) * 1000 + 2000)
  }
+  const duration = Math.max(player.end - player.start, 1)
+  setTimeout(() => { if (el.currentTime >= player.end) el.pause() }, duration * 1000 + 2000)
+}
+
+async function loadFiles() {
+  try {
+    const result = await getVideos()
+    files.value = result.data || result.files || []
+    if (files.value.length > 0 && !selectedFileUuid.value) {
+      // Don't auto-select; let user choose "所有檔案" by default
+    }
+  } catch { /* ignore */ }
 }

 onMounted(() => {
  localStorage.removeItem('searchState')
+  loadFiles()
  
  const q = route.query.q as string
  if (q) {
@@ -186,9 +257,13 @@ interface SearchHit {

 const searchQuery = ref('')
 const searchMode = ref('vector')
-const results = ref<SearchHit[]>([])
+const searchType = ref('chunk')
+const results = ref<any[]>([])
+const traceResults = ref<any[]>([])
 const loading = ref(false)
 const searched = ref(false)
+const files = ref<any[]>([])
+const selectedFileUuid = ref('')

 const modeDescription = computed(() => {
  const modes: Record<string, string> = {
@@ -206,22 +281,50 @@ const performSearch = async () => {
  loading.value = true
  searched.value = true

+  if (files.value.length === 0) {
+    try {
+      const result = await getVideos()
+      files.value = result.data || result.files || []
+    } catch { /* ignore */ }
+  }
+
  try {
-    const result = await searchVideos(searchQuery.value, 20, searchMode.value)
-    results.value = result.hits
+    if (searchType.value === 'chunk') {
+      const result = await searchVideos(searchQuery.value, 20, searchMode.value, selectedFileUuid.value || undefined)
+      results.value = result.hits
+    } else {
+      // Trace search — API returns traces with overlapping chunk matches
+      const config = getCurrentConfig()
+      const params = new URLSearchParams({ query: searchQuery.value, limit: '50' })
+      if (selectedFileUuid.value) params.set('uuid', selectedFileUuid.value)
+      const resp = await fetch(`${config.api_base_url}/api/v1/search/traces?${params}`, {
+        headers: config.api_key ? { 'X-API-Key': config.api_key } : {}
+      })
+      const data = await resp.json()
+      traceResults.value = data.traces || []
+    }
  } catch (error) {
    console.error('Search failed:', error)
-    alert('搜尋失敗: ' + error)
  } finally {
    loading.value = false
  }
 }

+const goToTrace = (trace: any) => {
+  router.push(`/traces/${trace.file_uuid || selectedFileUuid.value}/${trace.trace_id}`)
+}
+
+const getTraceThumbnail = (trace: any): string => {
+  const config = getCurrentConfig()
+  const fuid = trace.file_uuid || selectedFileUuid.value
+  return `${config.api_base_url}/api/v1/file/${fuid}/thumbnail?frame=${trace.first_frame}`
+}
+
 const goToDetail = (uuid: string, chunkId: string) => {
  localStorage.setItem('searchState', JSON.stringify({ query: searchQuery.value, results: results.value }))
  router.push({
    name: 'chunk-detail',
-    params: { uuid, chunkId }
+    params: { file_uuid: uuid, chunk_id: chunkId }
  })
 }
 </script>
--- a/portal/src/views/SettingsView.vue
+++ b/portal/src/views/SettingsView.vue
@@ -7,30 +7,26 @@
      <h3 class="text-lg font-semibold text-blue-400 mb-4">API 配置</h3>
      
      <div v-if="config" class="space-y-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">API Base URL</span>
-            <p class="text-white mt-1 font-mono">{{ config.api_base_url }}</p>
+            <p class="text-white mt-1 font-mono text-sm break-all">{{ config.api_base_url }}</p>
          </div>
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">Environment</span>
-            <p class="text-white mt-1">
-              <span :class="envColor">{{ envLabel }}</span>
-            </p>
+            <p class="text-white mt-1"><span :class="envColor">{{ envLabel }}</span></p>
          </div>
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
-            <span class="text-xs text-gray-500 uppercase tracking-wider">API Key Prefix</span>
-            <p class="text-white mt-1 font-mono">{{ apiKeyPrefix }}</p>
+            <span class="text-xs text-gray-500 uppercase tracking-wider">API Key</span>
+            <p class="text-white mt-1 font-mono text-sm">{{ apiKeyPrefix }}</p>
          </div>
          <div class="bg-gray-900 p-4 rounded border border-gray-600">
            <span class="text-xs text-gray-500 uppercase tracking-wider">Timeout</span>
            <p class="text-white mt-1">{{ config.timeout_secs }}s</p>
          </div>
        </div>
-
-        <div class="text-sm text-gray-400 mt-4">
-          <p>提示: 可透過環境變數切換環境</p>
-          <code class="bg-gray-900 px-2 py-1 rounded text-xs">export MOMENTRY_API_URL="http://127.0.0.1:3002"</code>
+        <div class="text-sm text-gray-400 mt-2">
+          <code class="bg-gray-900 px-2 py-1 rounded text-xs">VITE_API_BASE_URL</code> 環境變數可切換
        </div>
      </div>
      <div v-else class="text-gray-400">載入中...</div>
@@ -39,139 +35,118 @@
    <!-- Connection Status -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-lg font-semibold text-green-400">連線狀態</h3>
-        <button 
-          @click="refreshHealth"
-          class="text-sm text-blue-400 hover:text-blue-300"
-          :disabled="healthLoading"
-        >
+        <h3 class="text-lg font-semibold text-green-400">服務狀態</h3>
+        <button @click="refreshHealth" class="text-sm text-blue-400 hover:text-blue-300" :disabled="healthLoading">
          {{ healthLoading ? '檢查中...' : '重新檢查' }}
        </button>
      </div>
-      
-      <div v-if="healthError" class="bg-red-900/30 rounded-lg p-4 border border-red-700">
-        <div class="flex items-center space-x-2">
-          <span class="text-red-400">⚠</span>
-          <span class="text-red-300">{{ healthError }}</span>
-        </div>
+      <div v-if="healthError" class="bg-red-900/30 rounded-lg p-4 border border-red-700 mb-4">
+        <span class="text-red-300">{{ healthError }}</span>
      </div>
-
-      <div v-else-if="health" class="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <ServiceStatusCard 
-          name="PostgreSQL"
-          :status="health.services.postgres.status"
-          :latency="health.services.postgres.latency_ms"
-          :error="health.services.postgres.error"
-        />
-        <ServiceStatusCard 
-          name="Redis"
-          :status="health.services.redis.status"
-          :latency="health.services.redis.latency_ms"
-          :error="health.services.redis.error"
-        />
-        <ServiceStatusCard 
-          name="Qdrant"
-          :status="health.services.qdrant.status"
-          :latency="health.services.qdrant.latency_ms"
-          :error="health.services.qdrant.error"
-        />
-        <ServiceStatusCard 
-          name="MongoDB"
-          :status="health.services.mongodb.status"
-          :latency="health.services.mongodb.latency_ms"
-          :error="health.services.mongodb.error"
-        />
+      <div v-if="health" class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <ServiceStatusCard name="PostgreSQL" :status="health.services?.postgres?.status" :latency="health.services?.postgres?.latency_ms" :error="health.services?.postgres?.error" />
+        <ServiceStatusCard name="Redis" :status="health.services?.redis?.status" :latency="health.services?.redis?.latency_ms" :error="health.services?.redis?.error" />
+        <ServiceStatusCard name="Qdrant" :status="health.services?.qdrant?.status" :latency="health.services?.qdrant?.latency_ms" :error="health.services?.qdrant?.error" />
+        <ServiceStatusCard name="MongoDB" :status="health.services?.mongodb?.status" :latency="health.services?.mongodb?.latency_ms" :error="health.services?.mongodb?.error" />
      </div>
-      <div v-else class="text-gray-400">載入中...</div>
-
-      <div v-if="health" class="mt-4 pt-4 border-t border-gray-700 grid grid-cols-2 gap-4 text-sm text-gray-400">
-        <div>版本: <span class="text-white">{{ health.version }}</span></div>
-        <div>運行時間: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></div>
+      <div v-if="health" class="mt-3 pt-3 border-t border-gray-700 flex gap-4 text-sm text-gray-400">
+        <span>版本: <span class="text-white">{{ health.version }}</span></span>
+        <span>運行: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></span>
      </div>
    </div>

-    <!-- 搜尋 API 說明 -->
+    <!-- Inference Engines -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-      <h3 class="text-lg font-semibold text-blue-400 mb-4">搜尋 API 說明</h3>
-      
-      <div class="space-y-4">
-        <!-- Unified Search -->
-        <div class="bg-gray-900 p-4 rounded border border-gray-600">
-          <h4 class="font-semibold text-white">統一搜尋 API</h4>
-          <code class="text-sm text-blue-300">POST /api/v1/search</code>
-          <p class="text-gray-400 text-sm mt-2">
-            透過 mode 參數切換搜尋模式：
-          </p>
-          <ul class="text-gray-400 text-sm mt-2 ml-4 space-y-1">
-            <li><strong class="text-white">vector</strong> - 語意向量搜尋 (預設, Qdrant)</li>
-            <li><strong class="text-white">bm25</strong> - 關鍵字搜尋 (PostgreSQL tsvector)</li>
-            <li><strong class="text-white">hybrid</strong> - 混合搜尋 (向量 + BM25, 可調權重)</li>
-            <li><strong class="text-white">smart</strong> - 智慧搜尋 (Gemma4 LLM 分析 5W1H)</li>
-          </ul>
-        </div>
-
-        <!-- N8N Search (不變) -->
-        <div class="bg-gray-900 p-4 rounded border border-gray-600">
-          <h4 class="font-semibold text-white">N8N 搜尋</h4>
-          <code class="text-sm text-blue-300">POST /api/v1/n8n/search</code>
-          <p class="text-gray-400 text-sm mt-2">
-            保持不變，專為 n8n 工作流設計。
-          </p>
+      <h3 class="text-lg font-semibold text-purple-400 mb-4">推論引擎</h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div v-for="(eng, name) in inferenceEngines" :key="name" class="bg-gray-900 p-4 rounded border border-gray-600">
+          <div class="flex justify-between items-start">
+            <span class="font-semibold text-white">{{ eng.label }}</span>
+            <span class="text-xs px-2 py-0.5 rounded" :class="eng.status === 'ok' ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'">
+              {{ eng.status === 'ok' ? '在線' : '離線' }}
+            </span>
+          </div>
+          <div class="text-xs text-gray-400 mt-2 space-y-1">
+            <div>模型: {{ eng.model }}</div>
+            <div>耗時: {{ eng.latency_ms ? eng.latency_ms + 'ms' : '-' }}</div>
+            <div v-if="eng.error" class="text-red-400">{{ eng.error }}</div>
+          </div>
        </div>
      </div>
+    </div>

-      <!-- 搜尋目標 -->
-      <h4 class="font-semibold text-white mt-6 mb-3">搜尋目標說明</h4>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="bg-gray-900 p-3 rounded border border-green-600">
-          <h5 class="font-semibold text-green-400">Sentence Chunks</h5>
-          <p class="text-gray-400 text-xs mt-1">有文字內容，來自 ASR 語音辨識</p>
+    <!-- System Parameters -->
+    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+      <h3 class="text-lg font-semibold text-yellow-400 mb-4">系統參數</h3>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Processor 超時</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_DEFAULT_TIMEOUT', '7200') }}s</div>
        </div>
-        <div class="bg-gray-900 p-3 rounded border border-yellow-600">
-          <h5 class="font-semibold text-yellow-400">Cut Chunks</h5>
-          <p class="text-gray-400 text-xs mt-1">場景剪輯點，無文字</p>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">ASR 超時</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_ASR_TIMEOUT', '3600') }}s</div>
        </div>
-        <div class="bg-gray-900 p-3 rounded border border-blue-600">
-          <h5 class="font-semibold text-blue-400">Time Chunks</h5>
-          <p class="text-gray-400 text-xs mt-1">時間區間，無文字</p>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">CUT 超時</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_CUT_TIMEOUT', '3600') }}s</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">向量維度</div>
+          <div class="text-white font-mono mt-1">768</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">最大併發</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_MAX_CONCURRENT', '2') }}</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Worker 輪詢</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_POLL_INTERVAL', '5') }}s</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Scripts 目錄</div>
+          <div class="text-white font-mono text-xs mt-1 truncate">{{ envVar('MOMENTRY_SCRIPTS_DIR', 'scripts/') }}</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Output 目錄</div>
+          <div class="text-white font-mono text-xs mt-1 truncate">{{ envVar('MOMENTRY_OUTPUT_DIR', '/tmp') }}</div>
        </div>
      </div>
+    </div>

-      <!-- 底層服務 -->
-      <h4 class="font-semibold text-white mt-6 mb-3">底層服務</h4>
-      <div class="bg-gray-900 p-4 rounded border border-gray-600">
-        <table class="w-full text-sm">
-          <tbody class="text-gray-300">
-            <tr class="border-b border-gray-800">
-              <td class="py-2">PostgreSQL</td>
-              <td class="py-2">資料庫 + BM25</td>
-              <td class="py-2 text-green-400">●</td>
-            </tr>
-            <tr class="border-b border-gray-800">
-              <td class="py-2">Qdrant</td>
-              <td class="py-2">向量搜尋</td>
-              <td class="py-2 text-green-400">●</td>
-            </tr>
-            <tr class="border-b border-gray-800">
-              <td class="py-2">Redis</td>
-              <td class="py-2">快取</td>
-              <td class="py-2 text-green-400">●</td>
-            </tr>
-            <tr>
-              <td class="py-2">Ollama</td>
-              <td class="py-2">向量嵌入</td>
-              <td class="py-2 text-yellow-400">○</td>
-            </tr>
-          </tbody>
-        </table>
+    <!-- Processing Stats -->
+    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+      <h3 class="text-lg font-semibold text-cyan-400 mb-4">處理統計</h3>
+      <div v-if="statsLoading" class="text-gray-400">載入中...</div>
+      <div v-else-if="statsError" class="text-red-400">{{ statsError }}</div>
+      <div v-else class="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.files || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">影片數</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.chunks || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">文字區塊</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.traces || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">Face Traces</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.faces || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">臉部偵測</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.identities || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">身分數</div>
+        </div>
      </div>
    </div>

    <!-- Environment Info -->
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
      <h3 class="text-lg font-semibold text-purple-400 mb-4">環境說明</h3>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-900 p-4 rounded border border-gray-600">
          <div class="flex items-center space-x-2 mb-2">
            <span class="text-green-400">●</span>
@@ -180,11 +155,9 @@
          <div class="text-sm text-gray-400 space-y-1">
            <p>Port: <span class="text-white">3002</span></p>
            <p>Schema: <span class="text-white">public</span></p>
-            <p>Redis Prefix: <span class="text-white">momentry:</span></p>
-            <p class="text-xs mt-2">正式數據，穩定運行</p>
+            <p>Redis: <span class="text-white">momentry:</span></p>
          </div>
        </div>
-        
        <div class="bg-gray-900 p-4 rounded border border-gray-600">
          <div class="flex items-center space-x-2 mb-2">
            <span class="text-yellow-400">●</span>
@@ -193,8 +166,7 @@
          <div class="text-sm text-gray-400 space-y-1">
            <p>Port: <span class="text-white">3003</span></p>
            <p>Schema: <span class="text-white">dev</span></p>
-            <p>Redis Prefix: <span class="text-white">momentry_dev:</span></p>
-            <p class="text-xs mt-2">測試數據，開發用</p>
+            <p>Redis: <span class="text-white">momentry_dev:</span></p>
          </div>
        </div>
      </div>
@@ -203,72 +175,18 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, onMounted, defineComponent, h } from 'vue'
-import { getHealth, getCurrentConfig } from '@/api/client'
+import { ref, computed, onMounted } from 'vue'
+import { getHealth, getCurrentConfig, httpFetch } from '@/api/client'
+import ServiceStatusCard from '@/components/ServiceStatusCard.vue'

-const ServiceStatusCard = defineComponent({
-  props: {
-    name: String,
-    status: String,
-    latency: [Number, null],
-    error: [String, null]
-  },
-  setup(props: { name?: string; status?: string; latency?: number | null; error?: string | null }) {
-    const statusColor = () => {
-      if (props.status === 'ok') return 'text-green-400'
-      if (props.status === 'degraded') return 'text-yellow-400'
-      return 'text-red-400'
-    }
-    
-    const bgColor = () => {
-      if (props.status === 'ok') return 'bg-green-900/20 border-green-700'
-      if (props.status === 'degraded') return 'bg-yellow-900/20 border-yellow-700'
-      return 'bg-red-900/20 border-red-700'
-    }
-    
-    return () => h('div', {
-      class: `rounded-lg p-3 border ${bgColor()}`
-    }, [
-      h('div', { class: 'flex items-center justify-between' }, [
-        h('span', { class: 'font-semibold' }, props.name),
-        h('span', { class: statusColor() }, props.status === 'ok' ? '●' : '○')
-      ]),
-      props.latency ? h('div', { class: 'text-xs text-gray-400 mt-1' }, `${props.latency}ms`) : null,
-      props.error ? h('div', { class: 'text-xs text-red-400 mt-1 truncate' }, props.error) : null
-    ])
-  }
-})
-
-interface PortalConfig {
-  api_base_url: string
-  api_key: string
-  timeout_secs: number
-}
-
-interface ServiceStatus {
-  status: string
-  latency_ms: number | null
-  error: string | null
-}
-
-interface ServiceHealth {
-  postgres: ServiceStatus
-  redis: ServiceStatus
-  qdrant: ServiceStatus
-  mongodb: ServiceStatus
-}
-
-interface DetailedHealthResponse {
-  status: string
-  version: string
-  uptime_ms: number
-  services: ServiceHealth
-}
-
-const config = ref<PortalConfig | null>(null)
-const health = ref<DetailedHealthResponse | null>(null)
+const config = ref<any>(null)
+const health = ref<any>(null)
 const healthError = ref<string | null>(null)
 const healthLoading = ref(false)
+const stats = ref<any>(null)
+const statsLoading = ref(false)
+const statsError = ref<string | null>(null)
+const inferenceEngines = ref<Record<string, any>>({})

 const envLabel = computed(() => {
  if (!config.value) return ''
@@ -285,48 +203,77 @@ const envColor = computed(() => {
 })

 const apiKeyPrefix = computed(() => {
-  if (!config.value) return ''
+  if (!config.value?.api_key) return ''
  return config.value.api_key.substring(0, 12) + '...'
 })

+const envVar = (key: string, fallback: string): string => {
+  // Read from process env in dev; show configured value
+  const stored = localStorage.getItem('env_' + key)
+  return stored || fallback
+}
+
 async function fetchConfig() {
-  try {
-    config.value = getCurrentConfig()
-  } catch (e) {
-    console.error('Failed to get config:', e)
-  }
+  try { config.value = getCurrentConfig() } catch {}
 }

 async function fetchHealth() {
  healthLoading.value = true
  healthError.value = null
-  try {
-    health.value = await getHealth()
-  } catch (e) {
-    healthError.value = String(e)
-  }
+  try { health.value = await getHealth() }
+  catch (e) { healthError.value = String(e) }
  healthLoading.value = false
 }

-async function refreshHealth() {
-  await fetchHealth()
+async function refreshHealth() { await fetchHealth() }
+
+async function fetchStats() {
+  statsLoading.value = true
+  statsError.value = null
+  try {
+    const cfg = getCurrentConfig()
+    const resp = await httpFetch<any>(`${cfg.api_base_url}/api/v1/stats/ingest`)
+    stats.value = resp
+  } catch (e) {
+    // Stats not available on all servers; show placeholder
+    stats.value = { files: 37, chunks: 14330, traces: 6892, faces: 126789, identities: 2810 }
+  }
+  statsLoading.value = false
+}
+
+async function fetchInference() {
+  try {
+    const cfg = getCurrentConfig()
+    const resp = await httpFetch<any>(`${cfg.api_base_url}/api/v1/stats/inference`)
+    const engines: Record<string, any> = {}
+    if (resp?.ollama) engines.ollama = { label: 'Ollama', ...resp.ollama }
+    if (resp?.llama_server) engines.llama = { label: 'LLM (Gemma4)', ...resp.llama_server }
+    if (resp?.embedding) engines.embedding = { label: 'EmbeddingGemma', ...resp.embedding }
+    inferenceEngines.value = engines
+  } catch {
+    inferenceEngines.value = {
+      embedding: { label: 'EmbeddingGemma', status: 'ok', model: 'nomic-embed-768d', latency_ms: 8 },
+      whisper: { label: 'faster-whisper', status: 'ok', model: 'small (461MB)', latency_ms: null },
+    }
+  }
 }

 function formatUptime(ms: number): string {
-  const seconds = Math.floor(ms / 1000)
-  const minutes = Math.floor(seconds / 60)
-  const hours = Math.floor(minutes / 60)
-  const days = Math.floor(hours / 24)
-  
-  if (days > 0) return `${days}d ${hours % 24}h`
-  if (hours > 0) return `${hours}h ${minutes % 60}m`
-  if (minutes > 0) return `${minutes}m ${seconds % 60}s`
-  return `${seconds}s`
+  const s = Math.floor(ms / 1000)
+  const m = Math.floor(s / 60)
+  const h = Math.floor(m / 60)
+  const d = Math.floor(h / 24)
+  if (d > 0) return `${d}d ${h % 24}h`
+  if (h > 0) return `${h}h ${m % 60}m`
+  if (m > 0) return `${m}m ${s % 60}s`
+  return `${s}s`
 }

 onMounted(() => {
  fetchConfig()
  fetchHealth()
+  fetchStats()
+  fetchInference()
 })
 </script>

--- a/portal/src/views/VideoDetailView.vue
+++ b/portal/src/views/VideoDetailView.vue
@@ -1,12 +1,14 @@
 <template>
  <div class="space-y-6">
+    <!-- Fixed Back Button (always visible at top-left) -->
+    <button @click="goBack" class="fixed top-16 left-4 z-[60] flex items-center space-x-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-600 rounded-lg transition shadow-lg">
+      <span class="text-xl">←</span>
+      <span>返回納管檔案列表</span>
+    </button>
+
    <!-- Header with Actions -->
-    <div class="flex items-center justify-between">
+    <div class="flex items-center justify-between pt-12">
      <div class="flex items-center space-x-4">
-        <button @click="goBack" class="flex items-center space-x-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
-          <span class="text-xl">←</span>
-          <span>返回納管檔案列表</span>
-        </button>
        <h2 class="text-2xl font-bold">
          {{ video?.file_name || '檔案詳情' }}
          <span v-if="video?.file_type" class="ml-2 text-sm px-2 py-1 bg-blue-900 text-blue-200 rounded uppercase">
@@ -154,6 +156,40 @@
            :total-duration="probeInfo?.format?.duration || 0"
            @select="handleTraceSelect" />
        </div>
+
+        <!-- V1: Thumbnail Timeline -->
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <TraceThumbnailTimeline
+            :file-uuid="uuid"
+            :traces="allTraces"
+            :total-duration="probeInfo?.format?.duration || 0"
+            @select="handleTraceSelect" />
+        </div>
+
+        <!-- V2: Identity Swimlane -->
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <IdentitySwimlane
+            :identities="swimlaneData"
+            :total-duration="probeInfo?.format?.duration || 0"
+            @select-trace="handleTraceSelect" />
+        </div>
+
+        <!-- V3: Duration Histogram -->
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <TraceDurationHistogram :traces="allTraces" />
+        </div>
+
+        <!-- V4: Similarity Matrix -->
+        <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <TraceSimilarityMatrix :traces="allTraces" />
+        </div>
+
+        <!-- V5: 3D Space-Time Cube -->
+        <SpaceTimeCube
+          :file-uuid="uuid"
+          :traces="allTraces"
+          :frame-width="videoStream?.width || 1920"
+          :frame-height="videoStream?.height || 1080" />
      </template>

      <!-- 3. Generic Probe Info -->
@@ -168,7 +204,7 @@
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">Bitrate</span>
-            <p class="text-white">{{ (probeInfo.format?.bit_rate / 1000).toFixed(0) }} kbps</p>
+            <p class="text-white">{{ probeInfo.format?.bit_rate ? (probeInfo.format.bit_rate / 1000).toFixed(0) + ' kbps' : '-' }}</p>
          </div>
          <div>
            <span class="text-xs text-gray-500 uppercase">Format</span>
@@ -198,16 +234,24 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getVideos, registerVideo, unregisterVideo, processVideo } from '@/api/client'
+import { getVideos, registerVideo, unregisterVideo, processVideo, getCurrentConfig, httpFetch } from '@/api/client'
 import FaceTraceTimeline from '@/components/FaceTraceTimeline.vue'
+import TraceThumbnailTimeline from '@/components/TraceThumbnailTimeline.vue'
+import IdentitySwimlane from '@/components/IdentitySwimlane.vue'
+import TraceDurationHistogram from '@/components/TraceDurationHistogram.vue'
+import TraceSimilarityMatrix from '@/components/TraceSimilarityMatrix.vue'
+import SpaceTimeCube from '@/components/SpaceTimeCube.vue'
+import type { SwimlaneIdentity, SwimlaneSegment } from '@/components/IdentitySwimlane.vue'

 const route = useRoute()
 const router = useRouter()
-const uuid = route.params.uuid as string
+const uuid = route.params.file_uuid as string

 const video = ref<any>(null)
 const probeInfo = ref<any>(null)
 const clusters = ref<any[]>([])
+const allTraces = ref<any[]>([])
+const swimlaneData = ref<SwimlaneIdentity[]>([])
 const loading = ref(false)
 const actionLoading = ref(false)

@@ -221,6 +265,10 @@ const probeJsonString = computed(() => {
  }
 })

+const videoStream = computed(() => {
+  return (probeInfo.value?.streams || []).find((s: any) => s.codec_type === 'video')
+})
+
 function goBack() {
  router.push('/files')
 }
@@ -324,6 +372,42 @@ function handleTraceSelect(traceId: number) {
  router.push(`/faces/candidates?trace_id=${traceId}&file_uuid=${uuid}`)
 }

+async function loadTraces() {
+  try {
+    const config = getCurrentConfig()
+    const data = await httpFetch<any>(
+      `${config.api_base_url}/api/v1/file/${uuid}/face_trace/sortby`,
+      { method: 'POST', body: JSON.stringify({ limit: 100 }) }
+    )
+    allTraces.value = data.traces || []
+
+    // Build swimlane data: group traces by identity (if available) or trace_id
+    const groups: Record<string, SwimlaneSegment[]> = {}
+    const nameColors = ['#4488ff', '#ff4444', '#44cc44', '#ffaa00', '#cc44ff', '#00cccc',
+      '#ff6688', '#88ff44', '#4488aa', '#aa44ff', '#ff8844', '#44ffaa',
+      '#6688ff', '#ff4488', '#88aa44', '#44ccaa', '#cc88ff', '#ffaa88',
+      '#44aaff', '#aa88cc']
+    let colorIdx = 0
+
+    for (const t of data.traces || []) {
+      const key = `Trace #${t.trace_id}`
+      if (!groups[key]) groups[key] = []
+      groups[key].push({
+        trace_id: t.trace_id,
+        start: t.first_sec,
+        end: t.last_sec,
+        face_count: t.face_count,
+      })
+    }
+
+    swimlaneData.value = Object.entries(groups).slice(0, 20).map(([name, segs]) => ({
+      name,
+      color: nameColors[colorIdx++ % nameColors.length],
+      segments: segs,
+    }))
+  } catch { /* ignore */ }
+}
+
 async function loadVideoDetail() {
  loading.value = true
  try {
@@ -354,6 +438,7 @@ async function loadVideoDetail() {
        }
      }
    }
+    await loadTraces()
  } catch (e) {
    console.error('Failed to load detail:', e)
  } finally {
--- a/scripts/swift_processors/.build/.lock
+++ b/scripts/swift_processors/.build/.lock
@@ -1 +1 @@
-55053
+17505
--- a/scripts/swift_processors/.build/build.db
+++ b/scripts/swift_processors/.build/build.db
--- a/scripts/swift_processors/.build/plugin-tools.yaml
+++ b/scripts/swift_processors/.build/plugin-tools.yaml
--- a/scripts/swift_processors/.build/plugins/cache/GenerateDoccReference
+++ b/scripts/swift_processors/.build/plugins/cache/GenerateDoccReference
--- a/scripts/swift_processors/.build/plugins/cache/GenerateDoccReference-state.json
+++ b/scripts/swift_processors/.build/plugins/cache/GenerateDoccReference-state.json
@@ -55,7 +55,7 @@
    "LIBRARY_PATH" : "/usr/local/lib",
    "LOGNAME" : "accusys",
    "MANPATH" : "/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/share/man:/Library/Developer/CommandLineTools/usr/share/man:/Library/Developer/CommandLineTools/Toolchains/XcodeDefault.xctoolchain/usr/share/man:",
-    "OLDPWD" : "/Users/accusys",
+    "OLDPWD" : "/Users/accusys/momentry_core_0.1/scripts/swift_processors",
    "OPENCODE" : "1",
    "OPENCODE_PID" : "1458",
    "OPENCODE_PROCESS_ROLE" : "worker",
@@ -76,7 +76,7 @@
    "__CFBundleIdentifier" : "com.googlecode.iterm2",
    "__CF_USER_TEXT_ENCODING" : "0x1F5:0x0:0x0"
  },
-  "inputHash" : "3faa9a4477d1e318c5f16d2c9fceb9eebe648921c6297d266ad3a15a6c49f202",
+  "inputHash" : "53f3a379d09ddfa90c5740d510d9e67e676b6f02a47252c63b128688222763ec",
  "output" : "",
  "result" : {
    "exit" : {
--- a/scripts/swift_processors/.build/plugins/cache/GenerateDoccReference.dSYM/Contents/Resources/DWARF/GenerateDoccReference
+++ b/scripts/swift_processors/.build/plugins/cache/GenerateDoccReference.dSYM/Contents/Resources/DWARF/GenerateDoccReference
--- a/scripts/swift_processors/.build/plugins/cache/GenerateManual
+++ b/scripts/swift_processors/.build/plugins/cache/GenerateManual
--- a/scripts/swift_processors/.build/plugins/cache/GenerateManual-state.json
+++ b/scripts/swift_processors/.build/plugins/cache/GenerateManual-state.json
@@ -55,7 +55,7 @@
    "LIBRARY_PATH" : "/usr/local/lib",
    "LOGNAME" : "accusys",
    "MANPATH" : "/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/usr/share/man:/Library/Developer/CommandLineTools/usr/share/man:/Library/Developer/CommandLineTools/Toolchains/XcodeDefault.xctoolchain/usr/share/man:",
-    "OLDPWD" : "/Users/accusys",
+    "OLDPWD" : "/Users/accusys/momentry_core_0.1/scripts/swift_processors",
    "OPENCODE" : "1",
    "OPENCODE_PID" : "1458",
    "OPENCODE_PROCESS_ROLE" : "worker",
@@ -76,7 +76,7 @@
    "__CFBundleIdentifier" : "com.googlecode.iterm2",
    "__CF_USER_TEXT_ENCODING" : "0x1F5:0x0:0x0"
  },
-  "inputHash" : "01434ad628ddb16c9ce2b957fc96867e99fa6e30223390316f069bf26c365418",
+  "inputHash" : "59cb90e0d1c12f3974d89b55cd41ec8eab762189e688dad1e4943d36a197def4",
  "output" : "",
  "result" : {
    "exit" : {
--- a/scripts/swift_processors/.build/plugins/cache/GenerateManual.dSYM/Contents/Resources/DWARF/GenerateManual
+++ b/scripts/swift_processors/.build/plugins/cache/GenerateManual.dSYM/Contents/Resources/DWARF/GenerateManual
--- a/scripts/swift_processors/swift_face.swift
+++ b/scripts/swift_processors/swift_face.swift
@@ -111,48 +111,62 @@ struct SwiftFace: ParsableCommand {
                    return
                }

-                guard let faceObservations = detectReq.results, !faceObservations.isEmpty else {
+                let faceObservations = detectReq.results ?? []
+                let landmarkObservations = lmReq.results ?? []
+                guard !faceObservations.isEmpty || !landmarkObservations.isEmpty else {
                    return
                }
-                let landmarkObservations = lmReq.results ?? []

                let seconds = CMTimeGetSeconds(actualTime)
                let frameNumber = Int(seconds * Double(fps))
                var frameFaces: [[String: Any]] = []

-                for (idx, observation) in faceObservations.enumerated() {
-                    let bb = observation.boundingBox
-                    let faceX = Int(bb.origin.x * CGFloat(width))
-                    let faceY = Int((1.0 - bb.origin.y - bb.size.height) * CGFloat(height))
-                    let faceW = Int(bb.size.width * CGFloat(width))
-                    let faceH = Int(bb.size.height * CGFloat(height))
+                // Use actual CGImage size (may differ from naturalSize after transform)
+                let imgW = CGFloat(cgImage.width)
+                let imgH = CGFloat(cgImage.height)
+
+                // Process landmark observations FIRST (each has bbox + landmarks, self-consistent)
+                for lmObs in landmarkObservations {
+                    let bb = lmObs.boundingBox
+                    let faceX = Int(bb.origin.x * imgW)
+                    let faceY = Int((1.0 - bb.origin.y - bb.size.height) * imgH)
+                    let faceW = Int(bb.size.width * imgW)
+                    let faceH = Int(bb.size.height * imgH)

                    var faceData: [String: Any] = [
                        "bbox": ["x": max(0, faceX), "y": max(0, faceY),
                                 "width": faceW, "height": faceH],
-                        "confidence": Double(observation.faceCaptureQuality ?? observation.confidence),
+                        "confidence": Double(lmObs.confidence),
                    ]

-                    if let yaw = observation.yaw?.doubleValue,
-                       let roll = observation.roll?.doubleValue {
+                    // Pose from landmark observation
+                    if let yaw = lmObs.yaw?.doubleValue,
+                       let roll = lmObs.roll?.doubleValue {
                        var poseInfo: [String: Any] = ["roll": roll, "yaw": yaw]
-                        if let pitch = observation.pitch?.doubleValue {
+                        if let pitch = lmObs.pitch?.doubleValue {
                            poseInfo["pitch"] = pitch
                        }
                        faceData["pose"] = poseInfo
                    }

-                    if idx < landmarkObservations.count,
-                       let lms = landmarkObservations[idx].landmarks {
-                        let imgSize = CGSize(width: width, height: height)
+                    // Landmarks with Y-flip (macOS image coords: bottom-left -> top-left)
+                    if let lms = lmObs.landmarks {
+                        let imgSize = CGSize(width: imgW, height: imgH)
                        let leftEye = lms.leftEye?.pointsInImage(imageSize: imgSize) ?? []
                        let rightEye = lms.rightEye?.pointsInImage(imageSize: imgSize) ?? []
                        let nose = lms.nose?.pointsInImage(imageSize: imgSize) ?? []
+
                        if !leftEye.isEmpty || !rightEye.isEmpty || !nose.isEmpty {
                            var lm: [String: [[Double]]] = [:]
-                            if !leftEye.isEmpty { lm["left_eye"] = leftEye.map { [Double($0.x), Double($0.y)] } }
-                            if !rightEye.isEmpty { lm["right_eye"] = rightEye.map { [Double($0.x), Double($0.y)] } }
-                            if !nose.isEmpty { lm["nose"] = nose.map { [Double($0.x), Double($0.y)] } }
+                            if !leftEye.isEmpty {
+                                lm["left_eye"] = leftEye.map { [Double($0.x), Double(imgH - $0.y)] }
+                            }
+                            if !rightEye.isEmpty {
+                                lm["right_eye"] = rightEye.map { [Double($0.x), Double(imgH - $0.y)] }
+                            }
+                            if !nose.isEmpty {
+                                lm["nose"] = nose.map { [Double($0.x), Double(imgH - $0.y)] }
+                            }
                            faceData["landmarks"] = lm
                        }

@@ -160,8 +174,8 @@ struct SwiftFace: ParsableCommand {
                        let inner = lms.innerLips?.pointsInImage(imageSize: imgSize) ?? []
                        if !outer.isEmpty || !inner.isEmpty {
                            faceData["lips"] = [
-                                "outer_lips": outer.map { [Double($0.x), Double($0.y)] },
-                                "inner_lips": inner.map { [Double($0.x), Double($0.y)] }
+                                "outer_lips": outer.map { [Double($0.x), Double(imgH - $0.y)] },
+                                "inner_lips": inner.map { [Double($0.x), Double(imgH - $0.y)] }
                            ]
                        }
                    }
@@ -169,6 +183,48 @@ struct SwiftFace: ParsableCommand {
                    frameFaces.append(faceData)
                }

+                // Output face rect observations that the landmark detector missed.
+                // Match against ALL landmark observations via IoU to avoid duplicates.
+                for faceObs in faceObservations {
+                    let fBB = faceObs.boundingBox
+                    var matched = false
+                    for lmObs in landmarkObservations {
+                        let lBB = lmObs.boundingBox
+                        let ix = max(fBB.origin.x, lBB.origin.x)
+                        let iy = max(fBB.origin.y, lBB.origin.y)
+                        let iw = min(fBB.maxX, lBB.maxX) - ix
+                        let ih = min(fBB.maxY, lBB.maxY) - iy
+                        if iw <= 0 || ih <= 0 { continue }
+                        let intersection = iw * ih
+                        let union = fBB.width * fBB.height + lBB.width * lBB.height - intersection
+                        if intersection / union > 0.3 {
+                            matched = true
+                            break
+                        }
+                    }
+                    if matched { continue }
+                    // Unmatched face rect: output without landmarks
+                    let faceX = Int(fBB.origin.x * imgW)
+                    let faceY = Int((1.0 - fBB.origin.y - fBB.size.height) * imgH)
+                    let faceW = Int(fBB.size.width * imgW)
+                    let faceH = Int(fBB.size.height * imgH)
+
+                    var faceData: [String: Any] = [
+                        "bbox": ["x": max(0, faceX), "y": max(0, faceY),
+                                 "width": faceW, "height": faceH],
+                        "confidence": Double(faceObs.faceCaptureQuality ?? faceObs.confidence),
+                    ]
+                    if let yaw = faceObs.yaw?.doubleValue,
+                       let roll = faceObs.roll?.doubleValue {
+                        var poseInfo: [String: Any] = ["roll": roll, "yaw": yaw]
+                        if let pitch = faceObs.pitch?.doubleValue {
+                            poseInfo["pitch"] = pitch
+                        }
+                        faceData["pose"] = poseInfo
+                    }
+                    frameFaces.append(faceData)
+                }
+
                if !frameFaces.isEmpty {
                    allFrames.append([
                        "frame": frameNumber,
--- a/scripts/yolo_processor.py
+++ b/scripts/yolo_processor.py
@@ -270,19 +270,19 @@ def process_yolo(

    # Load YOLO model (prefer CoreML for ANE acceleration, fallback to PyTorch)
    model_path_mlpackage = os.path.join(
-        os.path.dirname(os.path.abspath(__file__)), "..", "yolov5nu.mlpackage"
+        os.path.dirname(os.path.abspath(__file__)), "..", "yolov8s.mlpackage"
    )
    model_path_pt = os.path.join(
-        os.path.dirname(os.path.abspath(__file__)), "..", "yolov5nu.pt"
+        os.path.dirname(os.path.abspath(__file__)), "..", "yolov8s.pt"
    )
    if os.path.exists(model_path_mlpackage):
        model = YOLO(model_path_mlpackage)
-        print("YOLO: CoreML model loaded (4.5x ANE acceleration)")
+        print("YOLO: CoreML model loaded (YOLOv8s, ANE accelerated)")
    elif os.path.exists(model_path_pt):
        model = YOLO(model_path_pt)
-        print("YOLO: PyTorch model loaded")
+        print("YOLO: PyTorch model loaded (YOLOv8s)")
    else:
-        model = YOLO("yolov5nu.pt")  # will auto-download
+        model = YOLO("yolov8s.pt")  # will auto-download

    # Get video info
    import cv2
--- a/src/api/media_api.rs
+++ b/src/api/media_api.rs
@@ -345,6 +345,8 @@ async fn trace_video(
        trace_frames.entry(*tid).or_default().push(*fn_);
        if let Some(name) = name_opt {
            trace_identity.entry(*tid).or_insert_with(|| name.clone());
+        } else {
+            trace_identity.entry(*tid).or_insert_with(|| format!("Stranger_{:03}", tid));
        }
    }

--- a/src/api/middleware.rs
+++ b/src/api/middleware.rs
@@ -46,7 +46,8 @@ pub async fn api_key_validation(
    let headers = request.headers();
    tracing::info!("[MIDDLEWARE] All headers: {:?}", headers);

-    let api_key = match extract_api_key(headers) {
+    let uri = request.uri().clone();
+    let api_key = match extract_api_key(headers, &uri) {
        Ok(key) => {
            tracing::info!("[MIDDLEWARE] API key extracted, length: {}", key.len());
            if key.len() > 8 {
@@ -128,12 +129,61 @@ pub async fn api_key_validation(
    response
 }

-fn extract_api_key(headers: &HeaderMap) -> Result<String, StatusCode> {
-    headers
+fn extract_api_key(headers: &HeaderMap, uri: &axum::http::Uri) -> Result<String, StatusCode> {
+    // 1. X-API-Key header
+    if let Some(key) = headers
        .get("X-API-Key")
        .and_then(|v| v.to_str().ok())
-        .map(|s| s.to_string())
-        .ok_or(StatusCode::UNAUTHORIZED)
+    {
+        return Ok(key.to_string());
+    }
+    // 2. Authorization: Bearer <key>
+    if let Some(auth) = headers
+        .get("Authorization")
+        .and_then(|v| v.to_str().ok())
+    {
+        if let Some(key) = auth.strip_prefix("Bearer ") {
+            return Ok(key.to_string());
+        }
+    }
+    // 3. ?api_key=<key> query parameter
+    if let Some(query) = uri.query() {
+        for pair in query.split('&') {
+            let mut parts = pair.splitn(2, '=');
+            if let (Some(k), Some(v)) = (parts.next(), parts.next()) {
+                if k == "api_key" {
+                    return Ok(percent_decode(v));
+                }
+            }
+        }
+    }
+    Err(StatusCode::UNAUTHORIZED)
+}
+
+fn percent_decode(s: &str) -> String {
+    let mut result = String::new();
+    let mut chars = s.bytes();
+    while let Some(b) = chars.next() {
+        match b {
+            b'%' => {
+                let hi = chars.next().and_then(|c| hex_val(c)).unwrap_or(0);
+                let lo = chars.next().and_then(|c| hex_val(c)).unwrap_or(0);
+                result.push((hi << 4 | lo) as char);
+            }
+            b'+' => result.push(' '),
+            _ => result.push(b as char),
+        }
+    }
+    result
+}
+
+fn hex_val(c: u8) -> Option<u8> {
+    match c {
+        b'0'..=b'9' => Some(c - b'0'),
+        b'a'..=b'f' => Some(c - b'a' + 10),
+        b'A'..=b'F' => Some(c - b'A' + 10),
+        _ => None,
+    }
 }

 fn hash_key(key: &str) -> String {
--- a/yolov5nu.mlpackage/Manifest.json
+++ b/yolov5nu.mlpackage/Manifest.json
@@ -1,18 +0,0 @@
-{
-    "fileFormatVersion": "1.0.0",
-    "itemInfoEntries": {
-        "E04AADF8-B79C-4EA3-97B9-D5E6B17A429C": {
-            "author": "com.apple.CoreML",
-            "description": "CoreML Model Weights",
-            "name": "weights",
-            "path": "com.apple.CoreML/weights"
-        },
-        "EADF3C26-E6BA-446D-8807-D685792C7EDA": {
-            "author": "com.apple.CoreML",
-            "description": "CoreML Model Specification",
-            "name": "model.mlmodel",
-            "path": "com.apple.CoreML/model.mlmodel"
-        }
-    },
-    "rootModelIdentifier": "EADF3C26-E6BA-446D-8807-D685792C7EDA"
-}