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 |
+| **Build 日期** | 2026-05-13 21:07 | 2026-05-13 (持續開發) |
-| **程式碼狀態** | ❌ 舊版，缺少新 API | ✅ 最新版，包含所有新功能 |
+| **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 | 備註 |
-
+|------|:---:|:---:|------|
-| 端點 | 3002 | 3003 | JSON 結構 |
+| `GET /health` | ✅ | ✅ | 含 `version` + `build_git_hash` |
-|------|:---:|:---:|:---:|
+| `GET /health/detailed` | ✅ | ✅ | 同上 |
-| `GET /health` | ✅ 200 | ✅ 200 | ✅ 一致 |
+| `GET /api/v1/files` | ✅ | ✅ | `total` 從 DB 讀取（不再寫死 0） |
-| `GET /api/v1/person/:id` | ✅ 200 | ✅ 200 | ✅ 一致 |
+| `GET /api/v1/files/scan` | ✅ | ✅ | 含 `.jpg/.png` 掃描（不再限 mp4） |
-| `GET /api/v1/chunks/:id/persons` | ✅ 200 | ✅ 200 | ✅ 一致 |
+| `GET /api/v1/file/:uuid/process` | ✅ | ✅ | |
-| `GET /api/v1/face/list` | ✅ 200 | ✅ 200 | ✅ 一致 |
+| `GET /api/v1/file/:uuid/chunk/:id` | ✅ | ✅ | |
-| `GET /api/v1/face/:id` | ✅ 200 | ✅ 200 | ✅ 一致 |
+| `GET /api/v1/identities` | ✅ | ✅ | 含分頁 |
-| `POST /api/v1/face/search` | ✅ 200 | ✅ 200 | ✅ 一致 |
+| `GET /api/v1/identities/:id` | ✅ | ✅ | |
-
+| `GET /api/v1/identity_bindings` | ✅ | ✅ | |
-### 2.2 3002 缺少的端點
+| `POST /api/v1/search/universal` | ✅ | ✅ | |
-
+| `GET /api/v1/resources` | ✅ | ✅ | |
-| 端點 | 3002 | 3003 | 新增日期 |
+| `GET /api/v1/traces/:tid/faces` | ✅ | ✅ | |
-|------|:---:|:---:|:---:|
+| `GET /api/v1/traces/:tid/video` | ✅ | ✅ | |
 | `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 |
 ---
-## 3. JSON 回應結構比較
+## 3. 差異
-### 3.1 GET /api/v1/person/:id (兩者一致)
+| 項目 | 3002 | 3003 |
 ```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 |
 |------|------|------|
-| 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 需要更新
+1. **Binary**：使用 M5 交付的 `momentry_v1.0.0` 取代 port 3002 binary
-
+2. **Schema**：`ALTER TABLE public.chunks RENAME TO chunk;`
-3002 運行的是 **2026-04-13** 的舊版程式碼，缺少 **17 個新 API 端點**。
+3. **Deploy**：`bash deploy.sh`（9 步驟，含 vec0.dylib）
-
+4. **Identity**：保留 15 TMDB + merge dev data（`file_uuid` 欄位輔助）
 **更新步驟**:
 ```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 需要重新編譯部署 |
--- 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) -->
+    <!-- API Demo (hidden by default, enable via localStorage devMode=true) -->
-    <div class="container mx-auto px-4 pb-8 pt-4" v-if="!isLoginPage">
+    <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) => ({
+    hits: (response.results || []).map((r: any) => {
-      id: r.chunk_id || r.id,
+      const chunkId = r.chunk_id || r.id || ''
-      vid: r.uuid || r.vid || r.file_uuid || '',
+      const fileUuid = r.uuid || r.vid || r.file_uuid || chunkId.split('_').slice(0, -1).join('_') || ''
-      start_frame: Math.floor((r.start_time || 0) * (r.fps || 30)),
+      return {
-      end_frame: Math.floor((r.end_time || 0) * (r.fps || 30)),
+        id: chunkId,
-      fps: r.fps || 30,
+        vid: fileUuid,
-      start: r.start_time || r.start || 0,
+        start_frame: r.start_frame || Math.floor((r.start_time || 0) * (r.fps || 30)),
-      end: r.end_time || r.end || 0,
+        end_frame: r.end_frame || Math.floor((r.end_time || 0) * (r.fps || 30)),
-      text: r.text || r.text_content || '',
+        fps: r.fps || 30,
-      score: r.score || 0,
+        start: r.start_time || r.start || 0,
-      title: r.title || r.file_name || '',
+        end: r.end_time || r.end || 0,
-      file_path: r.file_path,
+        text: r.text || r.text_content || '',
-      has_visual_stats: !!r.visual_stats,
+        score: r.score || 0,
-      parent_id: r.parent_chunk_id,
+        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',
+    path: '/traces',
-    name: 'face-candidates',
+    name: 'traces',
    component: () => import('./views/FaceCandidatesView.vue'),
    meta: { requiresAuth: true }
  },
@@ -49,28 +49,55 @@ const routes = [
    meta: { requiresAuth: true }
  },
  {
-    path: '/videos/:uuid',
+    path: '/file/:file_uuid',
-    name: 'video-detail',
+    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
+  const uuid = route.params.file_uuid as string
-  chunkId.value = route.params.chunkId 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) {
+    if (res && res.chunk_id) {
-      throw new Error(`API error: ${res.status} ${res.statusText}`)
+      detail.value = res
    } else {
      detail.value = null
    }
-    
+  } catch (err) {
-    detail.value = res
+    error.value = '載入失敗: ' + (err as any)?.message || String(err)
-  } catch (error) {
+    console.error('Failed to load chunk detail:', err)
    console.error('Failed to load chunk detail:', error)
    alert('載入失敗: ' + error)
  } finally {
    loading.value = false
  }
@@ -316,16 +319,11 @@ const goBack = () => {
    try {
      const data = JSON.parse(saved)
      localStorage.removeItem('searchState')
-      router.push({ 
+      router.push({ name: 'search', query: { q: data.query } })
-        name: 'search', 
+      return
-        query: { q: data.query }
+    } catch { /* ignore */ }
      })
    } catch {
      router.back()
    }
  } else {
    router.back()
  }
  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>
+          <label class="text-gray-400 text-sm mb-1">Filter by File (必選)</label>
-          <input
+          <select
-            v-model.number="minConfidence"
+            v-model="selectedFileUuid"
-            @change="loadCandidates"
+            @change="loadTraces"
            type="number"
            step="0.1"
            min="0"
            max="1"
            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"
+            v-model.number="minFaces"
-            @change="loadCandidates"
+            @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>
+          <label class="text-gray-400 text-sm mb-1">Binding Status</label>
-
+          <select
-    <div v-if="loading" class="text-center py-12 text-gray-500">
+            v-model="bindingFilter"
-      Loading...
+            @change="loadTraces"
-    </div>
+            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
-
+          >
-    <div v-else-if="candidates.length > 0">
+            <option value="all">全部</option>
-      <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-4">
+            <option value="registered">已綁定</option>
-        <div class="text-gray-400">
+            <option value="unregistered">未綁定</option>
-          Showing {{ candidates.length }} of {{ total }} candidates
+          </select>
          <span v-if="selectedFaces.length > 0" class="ml-4 text-green-400">
            {{ selectedFaces.length }} selected
          </span>
        </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-if="!selectedFileUuid" class="text-center py-12 text-gray-500">
-        <div
+      請選擇一個檔案來檢視 Face Traces
-          v-for="face in candidates"
+    </div>
-          :key="face.id"
+
-          @click="toggleSelection(face)"
+    <template v-else>
-          :class="[
+      <div v-if="loading && traces.length === 0" class="text-center py-12 text-gray-500">
-            'bg-gray-800 rounded-lg border overflow-hidden cursor-pointer transition',
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500 mx-auto mb-4"></div>
-            selectedFaces.includes(face.id) ? 'border-green-500 bg-green-900/20' : 'border-gray-700 hover:border-gray-500'
+        <span>Loading...</span>
-          ]"
+      </div>
-        >
+
-          <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
+      <div v-if="traces.length > 0">
-            <img 
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-4 flex justify-between items-center">
-              :src="getThumbnailUrl(face)"
+          <div class="text-gray-400">
-              alt="Face thumbnail"
+            Showing {{ paginatedTraces.length }} of {{ traces.length }} traces
              class="w-full h-full object-cover"
              loading="lazy"
              @error="onThumbnailError"
            />
          </div>
-          <div class="p-3">
+          <div class="flex items-center space-x-2">
-            <div class="flex justify-between items-center mb-1">
+            <span class="text-xs text-gray-500">每頁</span>
-              <span class="text-xs text-gray-400">Conf:</span>
+            <select v-model.number="pageSize" @change="page=1"
-              <span class="text-sm font-mono" :class="getConfidenceColor(face.confidence)">
+              class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-white text-xs">
-                {{ face.confidence.toFixed(2) }}
+              <option :value="20">20</option>
-              </span>
+              <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 class="p-3 space-y-1">
-              <div v-if="face.attributes.gender">{{ face.attributes.gender }}</div>
+              <div class="flex items-center justify-between">
-              <div v-if="face.attributes.age">Age: {{ face.attributes.age }}</div>
+                <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">
+      <div v-if="!loading && traces.length === 0" class="text-center py-12 text-gray-500">
-        <button
+        No traces found for this file
          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>
-    </div>
+    </template>
    <div v-else class="text-center py-12 text-gray-500">
      No candidates found
    </div>
  </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
-import { listFaceCandidates, getCurrentConfig } from '@/api/client'
+import { useRouter } from 'vue-router'
 import { getVideos, getCurrentConfig } from '@/api/client'
-interface FaceCandidate {
+const router = useRouter()
-  id: number
+
-  face_id: string | null
+interface TraceInfo {
-  file_uuid: string
+  trace_id: number
-  frame_number: number
+  face_count: number
-  confidence: number
+  first_frame: number
-  bbox: any
+  last_frame: number
-  attributes: any
+  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 pageSize = ref(50)
 const minConfidence = ref(0.8)
 const selectedFaces = ref<number[]>([])
-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 ''
+  return `${config.api_base_url}/api/v1/file/${selectedFileUuid.value}/thumbnail?frame=${trace.first_frame}`
  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}`
 }
-const onThumbnailError = (event: Event) => {
+const onThumbnailError = (traceId: number) => {
-  const img = event.target as HTMLImageElement
+  failedThumbnails.value = new Set([...failedThumbnails.value, traceId])
  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 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)
+    const config = getCurrentConfig()
-    candidates.value = result.candidates || []
+    const result = await fetch(
-    total.value = result.total || 0
+      `${config.api_base_url}/api/v1/file/${selectedFileUuid.value}/face_trace/sortby`,
-  } catch (error) {
+      {
-    console.error('Failed to load candidates:', error)
+        method: 'POST',
-    alert('Load failed: ' + error)
+        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) => {
+onMounted(async () => {
-  const idx = selectedFaces.value.indexOf(face.id)
+  try {
-  if (idx >= 0) {
+    const result = await getVideos()
-    selectedFaces.value.splice(idx, 1)
+    files.value = result.data || result.files || []
-  } else {
+  } catch { /* ignore */ }
    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()
 })
 </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
+    const scanResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files/scan`)
-    // Note: /api/v1/files/scan returns unregistered files. 
+    const scanFiles: any[] = (scanResp?.files || []).map((f: any) => ({
    // 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) => ({
      ...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
+    // Get registered files with real processing status
-    // But for Demo, let's rely on the scan endpoint providing 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
+  if (!fileUuid) { alert('無法開啟工作台：缺少 UUID'); return }
-  router.push(`/video-detail/${fileUuid}`)
+  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'
+import { getHealth, getIngestStats, getSftpgoStatus, getInferenceHealth, getCurrentConfig, isTauri } from '@/api/client'
 const isTauri = () => {
  return (window as any).__TAURI__ !== undefined
 }
 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 -->
+      <!-- API Demo (dev mode only) -->
-      <div class="mt-8 pt-6 border-t border-gray-700">
+      <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 範例</h3>
+        <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 { ref, computed, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { httpFetch, getCurrentConfig, saveConfig } from '@/api/client'
-const username = ref('')
+const route = useRoute()
-const password = ref('')
+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>
+      <h2 class="text-2xl font-bold">身分管理</h2>
-      <button
+      <button @click="loadPersons" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">重新整理</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
+      <input v-model="filterQuery" @keyup.enter="loadPersons" placeholder="搜尋身分..."
-        v-model="filterQuery"
+        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" />
        @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"
      />
    </div>
    <!-- Person List -->
    <div v-if="persons.length > 0" class="grid gap-4">
-      <div
+      <div v-for="person in persons" :key="person.id" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        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 -->
+          <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">
-          <PersonThumbnail :personId="person.person_id" :videoUuid="person.file_uuid" />
+            <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">
+              <h3 class="text-xl font-semibold text-blue-400">{{ person.name || '未命名' }}</h3>
-                {{ person.profile.name || '未命名' }}
+              <span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">{{ person.source || 'system' }}</span>
              </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>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm text-gray-400 mb-3">
-              <div>角色: {{ person.profile.character_name || '-' }}</div>
+              <div>ID: {{ person.id }}</div>
-              <div>Speaker: {{ person.profile.speaker_id || '-' }}</div>
+              <div v-if="person.metadata?.tmdb_movie_title">電影: {{ person.metadata.tmdb_movie_title }}</div>
-              <div>影片: {{ person.file_uuid }}</div>
+              <div v-if="person.metadata?.tmdb_character">角色: {{ person.metadata.tmdb_character }}</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>
          </div>
          <!-- Actions -->
          <div class="flex flex-col space-y-2">
-            <button
+            <button @click="viewDetails(person)" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition">查看詳情</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>
          </div>
        </div>
      </div>
    </div>
-    <!-- Loading State -->
+    <div v-else-if="loading" class="text-center py-12 text-gray-500">載入中...</div>
-    <div v-else-if="loading" class="text-center py-12 text-gray-500">
+    <div v-else class="text-center py-12 text-gray-500">尚無身分資料</div>
      載入中...
    </div>
    <!-- Empty State -->
    <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 {
+const persons = ref<any[]>([])
  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 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()
+    const config = getCurrentConfig()
-    persons.value = result.identities
+    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)
+    console.error('Failed to load identities:', error)
    alert('載入失敗: ' + error)
  } finally {
    loading.value = false
  }
 }
-const registerPerson = async (personId: string, _videoUuid: string) => {
+const viewDetails = (person: any) => {
-  try {
+  router.push({
-    const config = getCurrentConfig()
+    name: 'identity-detail',
-    await httpFetch(`${config.api_base_url}/api/v1/identity`, {
+    params: { identity_uuid: person.id }
-      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: Person) => {
+onMounted(() => { loadPersons() })
-  if (person.face_identity_id) {
+</script>
    router.push({
      name: 'identity-detail',
      params: { id: person.face_identity_id }
    })
  } else {
    router.push({
      name: 'video-detail',
      params: { uuid: person.file_uuid }
    })
  }
 }
 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 flex-wrap items-center gap-4">
-      <div class="flex items-center space-x-4">
+        <!-- Result Type -->
-        <span class="text-gray-400 text-sm">搜尋模式:</span>
+        <div class="flex items-center space-x-2">
-        <select
+          <span class="text-gray-400 text-sm">搜尋類型:</span>
-          v-model="searchMode"
+          <select
-          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"
+            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="vector">向量搜尋 (Vector)</option>
+          >
-          <option value="bm25">關鍵字搜尋 (BM25)</option>
+            <option value="chunk">文字區塊 (Chunk)</option>
-          <option value="hybrid">混合搜尋 (Hybrid)</option>
+            <option value="trace">臉部軌跡 (Trace)</option>
-          <option value="smart">智慧搜尋 (Smart)</option>
+          </select>
-        </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 -->
+    <!-- Results: Chunks -->
-    <div v-if="results.length > 0" class="space-y-4">
+    <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 -->
+    <!-- No Results: Chunks -->
-    <div v-else-if="searched && !loading" class="text-center py-12 text-gray-500">
+    <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> = {
@@ -202,26 +277,54 @@ const modeDescription = computed(() => {
 const performSearch = async () => {
  if (!searchQuery.value.trim()) return
-  
+
  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)
+    if (searchType.value === 'chunk') {
-    results.value = result.hits
+      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">
+            <p class="text-white mt-1"><span :class="envColor">{{ envLabel }}</span></p>
              <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>
+            <span class="text-xs text-gray-500 uppercase tracking-wider">API Key</span>
-            <p class="text-white mt-1 font-mono">{{ apiKeyPrefix }}</p>
+            <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-2">
-        <div class="text-sm text-gray-400 mt-4">
+          <code class="bg-gray-900 px-2 py-1 rounded text-xs">VITE_API_BASE_URL</code> 環境變數可切換
          <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>
      </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>
+        <h3 class="text-lg font-semibold text-green-400">服務狀態</h3>
-        <button 
+        <button @click="refreshHealth" class="text-sm text-blue-400 hover:text-blue-300" :disabled="healthLoading">
          @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 mb-4">
-      <div v-if="healthError" class="bg-red-900/30 rounded-lg p-4 border border-red-700">
+        <span class="text-red-300">{{ healthError }}</span>
        <div class="flex items-center space-x-2">
          <span class="text-red-400">⚠</span>
          <span class="text-red-300">{{ healthError }}</span>
        </div>
      </div>
-
+      <div v-if="health" class="grid grid-cols-2 md:grid-cols-4 gap-4">
-      <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 
+        <ServiceStatusCard name="Redis" :status="health.services?.redis?.status" :latency="health.services?.redis?.latency_ms" :error="health.services?.redis?.error" />
-          name="PostgreSQL"
+        <ServiceStatusCard name="Qdrant" :status="health.services?.qdrant?.status" :latency="health.services?.qdrant?.latency_ms" :error="health.services?.qdrant?.error" />
-          :status="health.services.postgres.status"
+        <ServiceStatusCard name="MongoDB" :status="health.services?.mongodb?.status" :latency="health.services?.mongodb?.latency_ms" :error="health.services?.mongodb?.error" />
          :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-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>
-      <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">
+        <span>運行: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></span>
        <div>版本: <span class="text-white">{{ health.version }}</span></div>
        <div>運行時間: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></div>
      </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>
+      <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 class="space-y-4">
+        <div v-for="(eng, name) in inferenceEngines" :key="name" class="bg-gray-900 p-4 rounded border border-gray-600">
-        <!-- Unified Search -->
+          <div class="flex justify-between items-start">
-        <div class="bg-gray-900 p-4 rounded border border-gray-600">
+            <span class="font-semibold text-white">{{ eng.label }}</span>
-          <h4 class="font-semibold text-white">統一搜尋 API</h4>
+            <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'">
-          <code class="text-sm text-blue-300">POST /api/v1/search</code>
+              {{ eng.status === 'ok' ? '在線' : '離線' }}
-          <p class="text-gray-400 text-sm mt-2">
+            </span>
-            透過 mode 參數切換搜尋模式：
+          </div>
-          </p>
+          <div class="text-xs text-gray-400 mt-2 space-y-1">
-          <ul class="text-gray-400 text-sm mt-2 ml-4 space-y-1">
+            <div>模型: {{ eng.model }}</div>
-            <li><strong class="text-white">vector</strong> - 語意向量搜尋 (預設, Qdrant)</li>
+            <div>耗時: {{ eng.latency_ms ? eng.latency_ms + 'ms' : '-' }}</div>
-            <li><strong class="text-white">bm25</strong> - 關鍵字搜尋 (PostgreSQL tsvector)</li>
+            <div v-if="eng.error" class="text-red-400">{{ eng.error }}</div>
-            <li><strong class="text-white">hybrid</strong> - 混合搜尋 (向量 + BM25, 可調權重)</li>
+          </div>
            <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>
        </div>
      </div>
    </div>
-      <!-- 搜尋目標 -->
+    <!-- System Parameters -->
-      <h4 class="font-semibold text-white mt-6 mb-3">搜尋目標說明</h4>
+    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <h3 class="text-lg font-semibold text-yellow-400 mb-4">系統參數</h3>
-        <div class="bg-gray-900 p-3 rounded border border-green-600">
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-          <h5 class="font-semibold text-green-400">Sentence Chunks</h5>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
-          <p class="text-gray-400 text-xs mt-1">有文字內容，來自 ASR 語音辨識</p>
+          <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">
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
-          <h5 class="font-semibold text-yellow-400">Cut Chunks</h5>
+          <div class="text-gray-500">ASR 超時</div>
-          <p class="text-gray-400 text-xs mt-1">場景剪輯點，無文字</p>
+          <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">
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
-          <h5 class="font-semibold text-blue-400">Time Chunks</h5>
+          <div class="text-gray-500">CUT 超時</div>
-          <p class="text-gray-400 text-xs mt-1">時間區間，無文字</p>
+          <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>
-      <!-- 底層服務 -->
+    <!-- Processing Stats -->
-      <h4 class="font-semibold text-white mt-6 mb-3">底層服務</h4>
+    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-      <div class="bg-gray-900 p-4 rounded border border-gray-600">
+      <h3 class="text-lg font-semibold text-cyan-400 mb-4">處理統計</h3>
-        <table class="w-full text-sm">
+      <div v-if="statsLoading" class="text-gray-400">載入中...</div>
-          <tbody class="text-gray-300">
+      <div v-else-if="statsError" class="text-red-400">{{ statsError }}</div>
-            <tr class="border-b border-gray-800">
+      <div v-else class="grid grid-cols-2 md:grid-cols-5 gap-4">
-              <td class="py-2">PostgreSQL</td>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
-              <td class="py-2">資料庫 + BM25</td>
+          <div class="text-2xl font-bold text-white">{{ stats?.files || '-' }}</div>
-              <td class="py-2 text-green-400">●</td>
+          <div class="text-xs text-gray-500 mt-1">影片數</div>
-            </tr>
+        </div>
-            <tr class="border-b border-gray-800">
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
-              <td class="py-2">Qdrant</td>
+          <div class="text-2xl font-bold text-white">{{ stats?.chunks || '-' }}</div>
-              <td class="py-2">向量搜尋</td>
+          <div class="text-xs text-gray-500 mt-1">文字區塊</div>
-              <td class="py-2 text-green-400">●</td>
+        </div>
-            </tr>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
-            <tr class="border-b border-gray-800">
+          <div class="text-2xl font-bold text-white">{{ stats?.traces || '-' }}</div>
-              <td class="py-2">Redis</td>
+          <div class="text-xs text-gray-500 mt-1">Face Traces</div>
-              <td class="py-2">快取</td>
+        </div>
-              <td class="py-2 text-green-400">●</td>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
-            </tr>
+          <div class="text-2xl font-bold text-white">{{ stats?.faces || '-' }}</div>
-            <tr>
+          <div class="text-xs text-gray-500 mt-1">臉部偵測</div>
-              <td class="py-2">Ollama</td>
+        </div>
-              <td class="py-2">向量嵌入</td>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
-              <td class="py-2 text-yellow-400">○</td>
+          <div class="text-2xl font-bold text-white">{{ stats?.identities || '-' }}</div>
-            </tr>
+          <div class="text-xs text-gray-500 mt-1">身分數</div>
-          </tbody>
+        </div>
        </table>
      </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-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <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>Redis: <span class="text-white">momentry:</span></p>
            <p class="text-xs mt-2">正式數據，穩定運行</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>Redis: <span class="text-white">momentry_dev:</span></p>
            <p class="text-xs mt-2">測試數據，開發用</p>
          </div>
        </div>
      </div>
@@ -203,72 +175,18 @@
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted, defineComponent, h } from 'vue'
+import { ref, computed, onMounted } from 'vue'
-import { getHealth, getCurrentConfig } from '@/api/client'
+import { getHealth, getCurrentConfig, httpFetch } from '@/api/client'
 import ServiceStatusCard from '@/components/ServiceStatusCard.vue'
-const ServiceStatusCard = defineComponent({
+const config = ref<any>(null)
-  props: {
+const health = ref<any>(null)
    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 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 {
+  try { config.value = getCurrentConfig() } catch {}
    config.value = getCurrentConfig()
  } catch (e) {
    console.error('Failed to get config:', e)
  }
 }
 async function fetchHealth() {
  healthLoading.value = true
  healthError.value = null
-  try {
+  try { health.value = await getHealth() }
-    health.value = await getHealth()
+  catch (e) { healthError.value = String(e) }
  } catch (e) {
    healthError.value = String(e)
  }
  healthLoading.value = false
 }
-async function refreshHealth() {
+async function refreshHealth() { await fetchHealth() }
-  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 s = Math.floor(ms / 1000)
-  const minutes = Math.floor(seconds / 60)
+  const m = Math.floor(s / 60)
-  const hours = Math.floor(minutes / 60)
+  const h = Math.floor(m / 60)
-  const days = Math.floor(hours / 24)
+  const d = Math.floor(h / 24)
-  
+  if (d > 0) return `${d}d ${h % 24}h`
-  if (days > 0) return `${days}d ${hours % 24}h`
+  if (h > 0) return `${h}h ${m % 60}m`
-  if (hours > 0) return `${hours}h ${minutes % 60}m`
+  if (m > 0) return `${m}m ${s % 60}s`
-  if (minutes > 0) return `${minutes}m ${seconds % 60}s`
+  return `${s}s`
  return `${seconds}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() {
+                // Use actual CGImage size (may differ from naturalSize after transform)
-                    let bb = observation.boundingBox
+                let imgW = CGFloat(cgImage.width)
-                    let faceX = Int(bb.origin.x * CGFloat(width))
+                let imgH = CGFloat(cgImage.height)
-                    let faceY = Int((1.0 - bb.origin.y - bb.size.height) * CGFloat(height))
+
-                    let faceW = Int(bb.size.width * CGFloat(width))
+                // Process landmark observations FIRST (each has bbox + landmarks, self-consistent)
-                    let faceH = Int(bb.size.height * CGFloat(height))
+                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,
+                    // Pose from landmark observation
-                       let roll = observation.roll?.doubleValue {
+                    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,
+                    // Landmarks with Y-flip (macOS image coords: bottom-left -> top-left)
-                       let lms = landmarkObservations[idx].landmarks {
+                    if let lms = lmObs.landmarks {
-                        let imgSize = CGSize(width: width, height: height)
+                        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 !leftEye.isEmpty {
-                            if !rightEye.isEmpty { lm["right_eye"] = rightEye.map { [Double($0.x), Double($0.y)] } }
+                                lm["left_eye"] = leftEye.map { [Double($0.x), Double(imgH - $0.y)] }
-                            if !nose.isEmpty { lm["nose"] = nose.map { [Double($0.x), Double($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)] },
+                                "outer_lips": outer.map { [Double($0.x), Double(imgH - $0.y)] },
-                                "inner_lips": inner.map { [Double($0.x), Double($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> {
+fn extract_api_key(headers: &HeaderMap, uri: &axum::http::Uri) -> Result<String, StatusCode> {
-    headers
+    // 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"
 }