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

portal/src/App.vue

@@ -9,11 +9,15 @@
             <router-link to="/home" class="hover:text-blue-400 transition">首頁</router-link>
             <router-link to="/search" class="hover:text-blue-400 transition">搜尋</router-link>
             <router-link to="/persons" class="hover:text-blue-400 transition">人物管理</router-link>
-            <router-link to="/faces/candidates" class="hover:text-blue-400 transition text-green-400">Face Candidates</router-link>
+            <router-link to="/traces" class="hover:text-blue-400 transition">Face Traces</router-link>
             <router-link to="/files" class="hover:text-blue-400 transition">納管檔案</router-link>
             <router-link to="/settings" class="hover:text-blue-400 transition">設定</router-link>
+            <router-link to="/jobs" class="hover:text-blue-400 transition">Pipeline</router-link>
             <button @click="handleLogout" class="text-xs bg-red-800 hover:bg-red-700 px-2 py-1 rounded transition ml-4 text-red-100">登出</button>
-            <button @click="openDevTools" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2">🛠️ Console</button>
+            <button @click="toggleDevMode" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2" :title="showApiDemo ? '隱藏 API Console' : '顯示 API Console'">
+              {{ showApiDemo ? '🔧' : '🛠️' }}
+            </button>
+            <button @click="openDevTools" class="text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded transition ml-2">Console</button>
           </nav>
         </div>
       </div>
@@ -24,15 +28,15 @@
       <router-view />
     </main>
 
-    <!-- API Demo (always show) -->
-    <div class="container mx-auto px-4 pb-8 pt-4" v-if="!isLoginPage">
+    <!-- API Demo (hidden by default, enable via localStorage devMode=true) -->
+    <div v-if="!isLoginPage && showApiDemo" class="container mx-auto px-4 pb-8 pt-4">
       <ApiDemo />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import ApiDemo from './components/ApiDemo.vue'
 
@@ -40,6 +44,12 @@ const route = useRoute()
 const router = useRouter()
 
 const isLoginPage = computed(() => route.path === '/login')
+const showApiDemo = ref(localStorage.getItem('devMode') === 'true')
+
+const toggleDevMode = () => {
+  showApiDemo.value = !showApiDemo.value
+  localStorage.setItem('devMode', String(showApiDemo.value))
+}
 
 const openDevTools = () => {
   console.clear()

portal/src/api/client.ts

@@ -245,37 +245,44 @@ async function tauriInvoke<T>(command: string, args?: Record<string, unknown>):
 
 // ── Unified API functions ───────────────────────────────────────────────
 
-export async function searchVideos(query: string, limit = 10, mode = 'vector'): Promise<SearchResult> {
+export async function searchVideos(query: string, limit = 10, mode = 'vector', fileUuid?: string): Promise<SearchResult> {
   if (isTauri()) {
-    return tauriInvoke<SearchResult>('search_videos', { query, limit, mode })
+    return tauriInvoke<SearchResult>('search_videos', { query, limit, mode, uuid: fileUuid })
   }
 
   const config = getConfig()
   const url = `${config.api_base_url}/api/v1/search/universal`
 
+  const body: any = { query, limit, mode }
+  if (fileUuid) body.uuid = fileUuid
+
   const response: any = await httpFetch<any>(url, {
     method: 'POST',
-    body: JSON.stringify({ query, limit }),
+    body: JSON.stringify(body),
   })
 
   return {
     query: response.query || query,
     count: response.results?.length || 0,
-    hits: (response.results || []).map((r: any) => ({
-      id: r.chunk_id || r.id,
-      vid: r.uuid || r.vid || r.file_uuid || '',
-      start_frame: Math.floor((r.start_time || 0) * (r.fps || 30)),
-      end_frame: Math.floor((r.end_time || 0) * (r.fps || 30)),
-      fps: r.fps || 30,
-      start: r.start_time || r.start || 0,
-      end: r.end_time || r.end || 0,
-      text: r.text || r.text_content || '',
-      score: r.score || 0,
-      title: r.title || r.file_name || '',
-      file_path: r.file_path,
-      has_visual_stats: !!r.visual_stats,
-      parent_id: r.parent_chunk_id,
-    })),
+    hits: (response.results || []).map((r: any) => {
+      const chunkId = r.chunk_id || r.id || ''
+      const fileUuid = r.uuid || r.vid || r.file_uuid || chunkId.split('_').slice(0, -1).join('_') || ''
+      return {
+        id: chunkId,
+        vid: fileUuid,
+        start_frame: r.start_frame || Math.floor((r.start_time || 0) * (r.fps || 30)),
+        end_frame: r.end_frame || Math.floor((r.end_time || 0) * (r.fps || 30)),
+        fps: r.fps || 30,
+        start: r.start_time || r.start || 0,
+        end: r.end_time || r.end || 0,
+        text: r.text || r.text_content || '',
+        score: r.score || 0,
+        title: r.title || r.file_name || '',
+        file_path: r.file_path,
+        has_visual_stats: !!r.visual_stats,
+        parent_id: r.parent_chunk_id,
+      }
+    }),
   }
 }
 

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
   }

portal/src/router.ts

@@ -31,8 +31,8 @@ const routes = [
     meta: { requiresAuth: true }
   },
   {
-    path: '/faces/candidates',
-    name: 'face-candidates',
+    path: '/traces',
+    name: 'traces',
     component: () => import('./views/FaceCandidatesView.vue'),
     meta: { requiresAuth: true }
   },
@@ -49,28 +49,55 @@ const routes = [
     meta: { requiresAuth: true }
   },
   {
-    path: '/videos/:uuid',
-    name: 'video-detail',
+    path: '/file/:file_uuid',
+    name: 'file-detail',
     component: () => import('./views/VideoDetailView.vue'),
     meta: { requiresAuth: true }
   },
   {
-    path: '/chunk-detail/:uuid/:chunkId',
+    path: '/chunk-detail/:file_uuid/:chunk_id',
     name: 'chunk-detail',
     component: () => import('./views/ChunkDetailView.vue'),
     meta: { requiresAuth: true }
   },
   {
-    path: '/identity/:id',
+    path: '/identity/:identity_uuid',
     name: 'identity-detail',
     component: () => import('./views/IdentityDetailView.vue'),
     meta: { requiresAuth: true }
+  },
+  {
+    path: '/jobs',
+    name: 'pipeline-progress',
+    component: () => import('./views/PipelineProgressView.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/traces/:file_uuid/:trace_id',
+    name: 'trace-detail',
+    component: () => import('./views/TraceDetailView.vue'),
+    meta: { requiresAuth: true }
+  },
+  {
+    path: '/trace-viz/:file_uuid',
+    name: 'trace-viz',
+    component: () => import('./views/TraceVizView.vue'),
+    meta: { requiresAuth: false }
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'not-found',
+    component: () => import('./views/NotFoundView.vue'),
+    meta: { requiresAuth: false }
   }
 ]
 
 const router = createRouter({
   history: createWebHistory(),
-  routes
+  routes,
+  scrollBehavior() {
+    return { top: 0 }
+  }
 })
 
 router.beforeEach((to, _from, next) => {

portal/src/views/ChunkDetailView.vue

@@ -214,7 +214,10 @@
     </div>
 
     <!-- Error -->
-    <div v-else class="text-center py-12 text-red-400">
+    <div v-else-if="error" class="text-center py-12 text-red-400">
+      {{ error }}
+    </div>
+    <div v-else class="text-center py-12 text-gray-500">
       無法載入詳情
     </div>
   </div>
@@ -229,28 +232,28 @@ import { httpFetch, getCurrentConfig } from '@/api/client'
 const route = useRoute()
 const chunkId = ref('')
 const detail = ref<any>(null)
+const error = ref('')
 const loading = ref(false)
 
 const loadDetail = async () => {
-  const uuid = route.params.uuid as string
-  chunkId.value = route.params.chunkId as string
+  const uuid = route.params.file_uuid as string
+  chunkId.value = route.params.chunk_id as string
   loading.value = true
 
   try {
     const config = getCurrentConfig()
-    const url = `${config.api_base_url}/api/v1/file/${uuid}/${chunkId.value}`
+    const url = `${config.api_base_url}/api/v1/file/${uuid}/chunk/${chunkId.value}`
     
     const res = await httpFetch<any>(url)
-    console.log('Response status:', res.status, res.statusText)
     
-    if (!res.ok) {
-      throw new Error(`API error: ${res.status} ${res.statusText}`)
+    if (res && res.chunk_id) {
+      detail.value = res
+    } else {
+      detail.value = null
     }
-    
-    detail.value = res
-  } catch (error) {
-    console.error('Failed to load chunk detail:', error)
-    alert('載入失敗: ' + error)
+  } catch (err) {
+    error.value = '載入失敗: ' + (err as any)?.message || String(err)
+    console.error('Failed to load chunk detail:', err)
   } finally {
     loading.value = false
   }
@@ -316,16 +319,11 @@ const goBack = () => {
     try {
       const data = JSON.parse(saved)
       localStorage.removeItem('searchState')
-      router.push({ 
-        name: 'search', 
-        query: { q: data.query }
-      })
-    } catch {
-      router.back()
-    }
-  } else {
-    router.back()
+      router.push({ name: 'search', query: { q: data.query } })
+      return
+    } catch { /* ignore */ }
   }
+  router.push('/files')
 }
 
 onMounted(() => {

portal/src/views/FaceCandidatesView.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="space-y-6">
     <div class="flex justify-between items-center">
-      <h2 class="text-2xl font-bold">Face Candidates</h2>
+      <h2 class="text-2xl font-bold">Face Traces</h2>
       <button
-        @click="loadCandidates"
+        @click="loadTraces"
         class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
       >
         Refresh
@@ -11,187 +11,248 @@
     </div>
 
     <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 space-y-4">
-      <div class="grid grid-cols-2 gap-4">
+      <div class="grid grid-cols-4 gap-4">
         <div>
-          <label class="text-gray-400 text-sm mb-1">Min Confidence</label>
-          <input
-            v-model.number="minConfidence"
-            @change="loadCandidates"
-            type="number"
-            step="0.1"
-            min="0"
-            max="1"
+          <label class="text-gray-400 text-sm mb-1">Filter by File (必選)</label>
+          <select
+            v-model="selectedFileUuid"
+            @change="loadTraces"
             class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
-          />
+          >
+            <option value="">-- 選擇檔案 --</option>
+            <option v-for="f in files" :key="f.file_uuid" :value="f.file_uuid">
+              {{ f.file_name?.substring(0, 50) || f.file_uuid }}
+            </option>
+          </select>
         </div>
         <div>
-          <label class="text-gray-400 text-sm mb-1">Page Size</label>
+          <label class="text-gray-400 text-sm mb-1">Sort By</label>
+          <select
+            v-model="sortBy"
+            @change="loadTraces"
+            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+          >
+            <option value="face_count">Face Count</option>
+            <option value="duration">Duration</option>
+            <option value="first_appearance">First Appearance</option>
+          </select>
+        </div>
+        <div>
+          <label class="text-gray-400 text-sm mb-1">Min Faces</label>
           <input
-            v-model.number="pageSize"
-            @change="loadCandidates"
+            v-model.number="minFaces"
+            @change="loadTraces"
             type="number"
             min="1"
-            max="100"
+            max="1000"
             class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
           />
         </div>
-      </div>
-    </div>
-
-    <div v-if="loading" class="text-center py-12 text-gray-500">
-      Loading...
-    </div>
-
-    <div v-else-if="candidates.length > 0">
-      <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-4">
-        <div class="text-gray-400">
-          Showing {{ candidates.length }} of {{ total }} candidates
-          <span v-if="selectedFaces.length > 0" class="ml-4 text-green-400">
-            {{ selectedFaces.length }} selected
-          </span>
+        <div>
+          <label class="text-gray-400 text-sm mb-1">Binding Status</label>
+          <select
+            v-model="bindingFilter"
+            @change="loadTraces"
+            class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white"
+          >
+            <option value="all">全部</option>
+            <option value="registered">已綁定</option>
+            <option value="unregistered">未綁定</option>
+          </select>
         </div>
       </div>
+    </div>
 
-      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-        <div
-          v-for="face in candidates"
-          :key="face.id"
-          @click="toggleSelection(face)"
-          :class="[
-            'bg-gray-800 rounded-lg border overflow-hidden cursor-pointer transition',
-            selectedFaces.includes(face.id) ? 'border-green-500 bg-green-900/20' : 'border-gray-700 hover:border-gray-500'
-          ]"
-        >
-          <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
-            <img 
-              :src="getThumbnailUrl(face)"
-              alt="Face thumbnail"
-              class="w-full h-full object-cover"
-              loading="lazy"
-              @error="onThumbnailError"
-            />
+    <div v-if="!selectedFileUuid" class="text-center py-12 text-gray-500">
+      請選擇一個檔案來檢視 Face Traces
+    </div>
+
+    <template v-else>
+      <div v-if="loading && traces.length === 0" class="text-center py-12 text-gray-500">
+        <div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500 mx-auto mb-4"></div>
+        <span>Loading...</span>
+      </div>
+
+      <div v-if="traces.length > 0">
+        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-4 flex justify-between items-center">
+          <div class="text-gray-400">
+            Showing {{ paginatedTraces.length }} of {{ traces.length }} traces
           </div>
-          <div class="p-3">
-            <div class="flex justify-between items-center mb-1">
-              <span class="text-xs text-gray-400">Conf:</span>
-              <span class="text-sm font-mono" :class="getConfidenceColor(face.confidence)">
-                {{ face.confidence.toFixed(2) }}
-              </span>
+          <div class="flex items-center space-x-2">
+            <span class="text-xs text-gray-500">每頁</span>
+            <select v-model.number="pageSize" @change="page=1"
+              class="bg-gray-700 border border-gray-600 rounded px-2 py-1 text-white text-xs">
+              <option :value="20">20</option>
+              <option :value="50">50</option>
+              <option :value="100">100</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Pagination top -->
+        <div v-if="totalPages > 1" class="flex justify-center mb-4 space-x-2">
+          <button @click="page = 1" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">«</button>
+          <button @click="page--" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">‹</button>
+          <span class="text-gray-400 text-sm py-1">{{ page }} / {{ totalPages }}</span>
+          <button @click="page++" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">›</button>
+          <button @click="page = totalPages" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">»</button>
+        </div>
+
+        <!-- Loading overlay during pagination -->
+        <div v-if="loading" class="text-center py-4 text-gray-500 mb-2">
+          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto"></div>
+        </div>
+
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+          <div
+            v-for="trace in paginatedTraces"
+            :key="trace.trace_id"
+            @click="viewTrace(trace)"
+            class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden cursor-pointer hover:border-blue-500 transition"
+          >
+            <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
+              <img
+                :src="getThumbnailUrl(trace)"
+                alt="Trace thumbnail"
+                class="w-full h-full object-cover"
+                loading="lazy"
+                @error="onThumbnailError(trace.trace_id)"
+              />
             </div>
-            <div v-if="face.attributes" class="text-xs text-gray-500">
-              <div v-if="face.attributes.gender">{{ face.attributes.gender }}</div>
-              <div v-if="face.attributes.age">Age: {{ face.attributes.age }}</div>
+            <div class="p-3 space-y-1">
+              <div class="flex items-center justify-between">
+                <div class="text-sm font-semibold text-blue-300">Trace #{{ trace.trace_id }}</div>
+                <span class="text-xs px-1.5 py-0.5 rounded"
+                  :class="trace.face_count > 5 ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'">
+                  {{ trace.face_count > 5 ? '多' : '少' }}
+                </span>
+              </div>
+              <div class="text-xs text-gray-400">{{ trace.face_count }} faces, {{ trace.duration_sec?.toFixed(1) || '?' }}s</div>
+              <div class="text-xs font-mono" :class="getConfidenceColor(trace.avg_confidence)">
+                {{ (trace.avg_confidence * 100).toFixed(0) }}%
+              </div>
             </div>
           </div>
         </div>
+
+        <!-- Pagination bottom -->
+        <div v-if="totalPages > 1" class="flex justify-center mt-6 space-x-2">
+          <button @click="page = 1" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">«</button>
+          <button @click="page--" :disabled="page === 1"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">‹</button>
+          <span class="text-gray-400 text-sm py-1">{{ page }} / {{ totalPages }}</span>
+          <button @click="page++" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">›</button>
+          <button @click="page = totalPages" :disabled="page >= totalPages"
+            class="bg-gray-700 hover:bg-gray-600 disabled:opacity-50 px-3 py-1 rounded text-sm">»</button>
+        </div>
       </div>
 
-      <div v-if="total > pageSize" class="flex justify-center mt-6 space-x-2">
-        <button
-          v-if="page > 1"
-          @click="prevPage"
-          class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded"
-        >
-          Previous
-        </button>
-        <span class="text-gray-400 py-2">
-          Page {{ page }} of {{ Math.ceil(total / pageSize) }}
-        </span>
-        <button
-          v-if="page * pageSize < total"
-          @click="nextPage"
-          class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded"
-        >
-          Next
-        </button>
+      <div v-if="!loading && traces.length === 0" class="text-center py-12 text-gray-500">
+        No traces found for this file
       </div>
-    </div>
-
-    <div v-else class="text-center py-12 text-gray-500">
-      No candidates found
-    </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { listFaceCandidates, getCurrentConfig } from '@/api/client'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { getVideos, getCurrentConfig } from '@/api/client'
 
-interface FaceCandidate {
-  id: number
-  face_id: string | null
-  file_uuid: string
-  frame_number: number
-  confidence: number
-  bbox: any
-  attributes: any
+const router = useRouter()
+
+interface TraceInfo {
+  trace_id: number
+  face_count: number
+  first_frame: number
+  last_frame: number
+  first_sec: number
+  last_sec: number
+  duration_sec: number
+  avg_confidence: number
+  sample_face_id?: string | null
 }
 
-const candidates = ref<FaceCandidate[]>([])
+const traces = ref<TraceInfo[]>([])
 const loading = ref(false)
-const total = ref(0)
+const totalTraces = ref(0)
+const selectedFileUuid = ref('')
+const files = ref<any[]>([])
+const sortBy = ref('face_count')
+const minFaces = ref(1)
+const bindingFilter = ref('all')
 const page = ref(1)
-const pageSize = ref(20)
-const minConfidence = ref(0.8)
-const selectedFaces = ref<number[]>([])
+const pageSize = ref(50)
 
-const getThumbnailUrl = (face: FaceCandidate): string => {
+const totalPages = computed(() => Math.max(1, Math.ceil(traces.value.length / pageSize.value)))
+
+const paginatedTraces = computed(() => {
+  const start = (page.value - 1) * pageSize.value
+  return traces.value.slice(start, start + pageSize.value)
+})
+
+const failedThumbnails = ref<Set<number>>(new Set())
+
+const getThumbnailUrl = (trace: TraceInfo): string => {
   const config = getCurrentConfig()
-  if (!face.bbox) return ''
-  const b = face.bbox
-  return `${config.api_base_url}/api/v1/file/${face.file_uuid}/thumbnail?frame=${face.frame_number}&x=${b.x}&y=${b.y}&w=${b.width}&h=${b.height}`
+  return `${config.api_base_url}/api/v1/file/${selectedFileUuid.value}/thumbnail?frame=${trace.first_frame}`
 }
 
-const onThumbnailError = (event: Event) => {
-  const img = event.target as HTMLImageElement
-  img.style.display = 'none'
-  const parent = img.parentElement
-  if (parent) {
-    parent.innerHTML = '<div class="text-center p-4"><div class="text-2xl">👤</div></div>'
-  }
+const onThumbnailError = (traceId: number) => {
+  failedThumbnails.value = new Set([...failedThumbnails.value, traceId])
 }
 
-const loadCandidates = async () => {
+const getConfidenceColor = (conf: number): string => {
+  if (conf >= 0.8) return 'text-green-400'
+  if (conf >= 0.5) return 'text-yellow-400'
+  return 'text-red-400'
+}
+
+const viewTrace = (trace: TraceInfo) => {
+  router.push(`/traces/${selectedFileUuid.value}/${trace.trace_id}`)
+}
+
+const loadTraces = async () => {
+  if (!selectedFileUuid.value) return
   loading.value = true
+  page.value = 1
   try {
-    const result = await listFaceCandidates(undefined, minConfidence.value, page.value, pageSize.value)
-    candidates.value = result.candidates || []
-    total.value = result.total || 0
-  } catch (error) {
-    console.error('Failed to load candidates:', error)
-    alert('Load failed: ' + error)
+    const config = getCurrentConfig()
+    const result = await fetch(
+      `${config.api_base_url}/api/v1/file/${selectedFileUuid.value}/face_trace/sortby`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(config.api_key ? { 'X-API-Key': config.api_key } : {})
+        },
+        body: JSON.stringify({
+          sort_by: sortBy.value,
+          limit: 200,
+          min_faces: minFaces.value
+        })
+      }
+    )
+    const data = await result.json()
+    traces.value = data.traces || []
+    totalTraces.value = data.total_traces || 0
+  } catch (e) {
+    console.error('Failed to load traces:', e)
   } finally {
     loading.value = false
   }
 }
 
-const toggleSelection = (face: FaceCandidate) => {
-  const idx = selectedFaces.value.indexOf(face.id)
-  if (idx >= 0) {
-    selectedFaces.value.splice(idx, 1)
-  } else {
-    selectedFaces.value.push(face.id)
-  }
-}
-
-const nextPage = () => {
-  page.value++
-  loadCandidates()
-}
-
-const prevPage = () => {
-  page.value--
-  loadCandidates()
-}
-
-const getConfidenceColor = (conf: number): string => {
-  if (conf >= 0.9) return 'text-green-400'
-  if (conf >= 0.8) return 'text-blue-400'
-  if (conf >= 0.7) return 'text-yellow-400'
-  return 'text-gray-400'
-}
-
-onMounted(() => {
-  loadCandidates()
+onMounted(async () => {
+  try {
+    const result = await getVideos()
+    files.value = result.data || result.files || []
+  } catch { /* ignore */ }
 })
 </script>

portal/src/views/FilesView.vue

@@ -42,6 +42,13 @@
             已完成
           </button>
         </div>
+        <!-- Search input -->
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="搜尋檔名..."
+          class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm w-full md:w-48 focus:outline-none focus:border-blue-500"
+        />
       </div>
     </div>
 
@@ -174,24 +181,36 @@ function setStatusFilter(status: string) {
 
 async function fetchFiles() {
   loading.value = true
-  error.value = null
   try {
     const config = getCurrentConfig()
-    // Call the scan endpoint to get list of files with status
-    // Note: /api/v1/files/scan returns unregistered files. 
-    // We might need a combined list or call /api/v1/files for registered ones.
-    // For now, let's assume /api/v1/files/scan returns all files with is_registered flag.
-    const response: any = await httpFetch(`${config.api_base_url}/api/v1/files/scan`)
-    
-    // Map scan response to our expected format
-    // Scan returns: { files: [ { file_uuid, file_name, is_registered, status... } ] }
-    files.value = response.files?.map((f: any) => ({
+    const scanResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files/scan`)
+    const scanFiles: any[] = (scanResp?.files || []).map((f: any) => ({
       ...f,
-      status: f.status || (f.is_registered ? 'pending' : 'unregistered') 
-    })) || []
-    
-    // To get actual processing status, we might need to cross reference with /api/v1/files
-    // But for Demo, let's rely on the scan endpoint providing status.
+      status: f.is_registered ? 'registered_scan' : 'unregistered'
+    }))
+
+    // Get registered files with real processing status
+    let regFiles: any[] = []
+    try {
+      const regResp = await httpFetch<any>(`${config.api_base_url}/api/v1/files?page=1&page_size=100`)
+      regFiles = (regResp?.files || regResp?.data || []).map((f: any) => ({
+        ...f,
+        status: f.status || 'pending'
+      }))
+    } catch {
+      // Registered files API may not be available; use scan data only
+    }
+
+    // Merge: scan results first, then overlay with registered statuses
+    const merged = new Map<string, any>()
+    for (const f of scanFiles) {
+      merged.set(f.file_path, f)
+    }
+    for (const f of regFiles) {
+      merged.set(f.file_path, f)
+    }
+
+    files.value = Array.from(merged.values())
   } catch (e) {
     console.error('Failed to fetch files:', e)
     error.value = String(e)
@@ -201,6 +220,7 @@ async function fetchFiles() {
 }
 
 async function registerFile(filePath: string) {
+  if (!filePath) { alert('無法註冊：缺少檔案路徑'); return }
   try {
     await registerVideo(filePath)
     // Refresh list
@@ -212,7 +232,9 @@ async function registerFile(filePath: string) {
 }
 
 async function unregisterFile(fileUuid: string, fileName: string) {
-  if (!confirm(`確定要取消註冊 "${fileName}" 嗎？這將刪除資料庫中的相關記錄。`)) {
+  if (!fileUuid) { alert('無法取消註冊：缺少 UUID'); return }
+  const displayName = fileName || '未知檔案'
+  if (!confirm(`確定要取消註冊 "${displayName}" 嗎？這將刪除資料庫中的相關記錄。`)) {
     return
   }
   
@@ -226,6 +248,7 @@ async function unregisterFile(fileUuid: string, fileName: string) {
 }
 
 async function startProcessing(fileUuid: string) {
+  if (!fileUuid) { alert('無法處理：缺少 UUID'); return }
   if (!confirm('確定要開始分析處理此檔案嗎？')) return
   
   try {
@@ -245,8 +268,8 @@ async function startProcessing(fileUuid: string) {
 }
 
 function enterWorkbench(fileUuid: string) {
-  // Navigate to the new Face Workbench view
-  router.push(`/video-detail/${fileUuid}`)
+  if (!fileUuid) { alert('無法開啟工作台：缺少 UUID'); return }
+  router.push(`/file/${fileUuid}`)
 }
 
 onMounted(fetchFiles)

portal/src/views/HomeView.vue

@@ -112,6 +112,12 @@
       <h3 class="text-xl font-semibold text-orange-400 mb-4">SFTPGo 狀態</h3>
       
       <div v-if="sftpgoStatus" class="space-y-4">
+        <!-- Status message -->
+        <div v-if="statusMsg" class="text-sm px-3 py-2 rounded"
+          :class="statusMsg.type === 'ok' ? 'bg-green-900/50 text-green-300' : 'bg-red-900/50 text-red-300'">
+          {{ statusMsg.text }}
+          <button @click="statusMsg = null" class="ml-2 text-gray-500 hover:text-white">&times;</button>
+        </div>
         <!-- Basic Info -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
           <div class="bg-gray-900 p-4 rounded border border-gray-600">
@@ -343,11 +349,7 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { getHealth, getIngestStats, getSftpgoStatus, getInferenceHealth } from '@/api/client'
-
-const isTauri = () => {
-  return (window as any).__TAURI__ !== undefined
-}
+import { getHealth, getIngestStats, getSftpgoStatus, getInferenceHealth, getCurrentConfig, isTauri } from '@/api/client'
 
 interface ServiceStatus {
   status: string
@@ -414,8 +416,9 @@ const ingestStats = ref<IngestStats | null>(null)
 const sftpgoStatus = ref<SftpgoStatus | null>(null)
 const inferenceHealth = ref<InferenceHealthResponse | null>(null)
 const loading = ref(false)
-const apiBaseUrl = ref('http://127.0.0.1:3003 (dev)')
+const apiBaseUrl = ref(getCurrentConfig().api_base_url)
 const sftpgoUrl = ref('https://sftpgo.momentry.ddns.net/web/client')
+const statusMsg = ref<{ text: string; type: string } | null>(null)
 
 async function fetchHealth() {
   loading.value = true
@@ -455,33 +458,31 @@ async function fetchInferenceHealth() {
 function openSftpgoFiles() {
   const url = sftpgoUrl.value
   console.log('Momentry: Opening URL:', url, 'isTauri:', isTauri())
-  alert('即將開啟：' + url)
+  statusMsg.value = { text: '即將開啟：' + url, type: 'ok' }
   
   if (isTauri()) {
-    // Use Tauri invoke in app mode
     try {
       import('@tauri-apps/api/core').then(({ invoke }) => {
         invoke('plugin:shell|open', { path: url }).then(() => {
           console.log('Momentry: Opened with shell')
-          alert('已開啟')
+          statusMsg.value = { text: '已開啟', type: 'ok' }
         }).catch((e) => {
           console.error('Momentry: Shell error:', e)
-          alert('開啟失敗：' + e)
+          statusMsg.value = { text: '開啟失敗：' + e, type: 'err' }
         })
       })
     } catch (e) {
       console.error('Momentry: Import error:', e)
-      alert('導入失敗：' + e)
+      statusMsg.value = { text: '導入失敗：' + e, type: 'err' }
     }
     return
   }
-  // Use browser open in web mode
   window.open(url, '_blank')?.focus()
 }
 
 function copySftpgoUrl() {
   navigator.clipboard.writeText(sftpgoUrl.value)
-  alert('已複製網址：' + sftpgoUrl.value)
+  statusMsg.value = { text: '已複製網址：' + sftpgoUrl.value, type: 'ok' }
 }
 
 async function refreshHealth() {
@@ -507,44 +508,3 @@ onMounted(() => {
   fetchInferenceHealth()
 })
 </script>
-
-<script lang="ts">
-import { defineComponent, h } from 'vue'
-
-const ServiceStatusCard = defineComponent({
-  props: {
-    name: String,
-    status: String,
-    latency: [Number, null],
-    error: [String, null]
-  },
-  setup(props) {
-    const statusColor = () => {
-      if (props.status === 'ok') return 'text-green-400'
-      if (props.status === 'degraded') return 'text-yellow-400'
-      return 'text-red-400'
-    }
-    
-    const bgColor = () => {
-      if (props.status === 'ok') return 'bg-green-900/20 border-green-700'
-      if (props.status === 'degraded') return 'bg-yellow-900/20 border-yellow-700'
-      return 'bg-red-900/20 border-red-700'
-    }
-    
-    return () => h('div', {
-      class: `rounded-lg p-3 border ${bgColor()}`
-    }, [
-      h('div', { class: 'flex items-center justify-between' }, [
-        h('span', { class: 'font-semibold' }, props.name),
-        h('span', { class: statusColor() }, props.status === 'ok' ? '●' : '○')
-      ]),
-      props.latency ? h('div', { class: 'text-xs text-gray-400 mt-1' }, `${props.latency}ms`) : null,
-      props.error ? h('div', { class: 'text-xs text-red-400 mt-1 truncate' }, props.error) : null
-    ])
-  }
-})
-
-export default {
-  components: { ServiceStatusCard }
-}
-</script>

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>

portal/src/views/LoginView.vue

@@ -54,9 +54,9 @@
         </button>
       </form>
 
-      <!-- API Demo -->
-      <div class="mt-8 pt-6 border-t border-gray-700">
-        <h3 class="text-sm font-medium text-gray-400 mb-3">API 範例</h3>
+      <!-- API Demo (dev mode only) -->
+      <div v-if="showApiExamples" class="mt-8 pt-6 border-t border-gray-700">
+        <h3 class="text-sm font-medium text-gray-400 mb-3">API 範例 <span class="text-xs text-yellow-500">(dev)</span></h3>
         <div class="space-y-2 text-xs font-mono">
           <div class="bg-gray-900 p-2 rounded">
             <span class="text-green-400"># Login</span>
@@ -76,18 +76,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, computed, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { httpFetch, getCurrentConfig, saveConfig } from '@/api/client'
 
-const username = ref('')
-const password = ref('')
+const route = useRoute()
+const router = useRouter()
+const username = ref(route.query.username as string || '')
+const password = ref(route.query.password as string || '')
 const error = ref('')
 const loading = ref(false)
 const showPassword = ref(false)
-const router = useRouter()
 
 const baseUrl = computed(() => getCurrentConfig().api_base_url)
+const showApiExamples = ref(localStorage.getItem('devMode') === 'true')
+
+onMounted(() => {
+  if (username.value && password.value) {
+    handleLogin()
+  }
+})
 
 const handleLogin = async () => {
   error.value = ''
@@ -109,7 +117,8 @@ const handleLogin = async () => {
       localStorage.setItem('momentry_user', JSON.stringify(data.user))
       localStorage.setItem('momentry_api_key', data.api_key)
       saveConfig({ ...config, api_key: data.api_key })
-      router.push('/home')
+      const redirect = (route.query.redirect as string) || '/home'
+      router.push(redirect)
     } else {
       error.value = data.message || 'Login failed'
     }

portal/src/views/PersonsView.vue

@@ -1,129 +1,50 @@
 <template>
   <div class="space-y-6">
     <div class="flex justify-between items-center">
-      <h2 class="text-2xl font-bold">人物管理</h2>
-      <button
-        @click="loadPersons"
-        class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition"
-      >
-        重新整理
-      </button>
+      <h2 class="text-2xl font-bold">身分管理</h2>
+      <button @click="loadPersons" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg transition">重新整理</button>
     </div>
 
-    <!-- Search Filter -->
     <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
-      <input
-        v-model="filterQuery"
-        @keyup.enter="loadPersons"
-        type="text"
-        placeholder="搜尋人物..."
-        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500"
-      />
+      <input v-model="filterQuery" @keyup.enter="loadPersons" placeholder="搜尋身分..."
+        class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-white focus:outline-none focus:border-blue-500" />
     </div>
 
-    <!-- Person List -->
     <div v-if="persons.length > 0" class="grid gap-4">
-      <div
-        v-for="person in persons"
-        :key="person.id"
-        class="bg-gray-800 rounded-lg p-6 border border-gray-700"
-      >
+      <div v-for="person in persons" :key="person.id" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
         <div class="flex items-start gap-6">
-          <!-- Thumbnail -->
-          <PersonThumbnail :personId="person.person_id" :videoUuid="person.file_uuid" />
-
+          <div class="w-16 h-16 bg-gray-700 rounded-lg overflow-hidden border border-gray-600 flex-shrink-0 flex items-center justify-center">
+            <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+          </div>
           <div class="flex-1">
             <div class="flex items-center space-x-3 mb-2">
-              <h3 class="text-xl font-semibold text-blue-400">
-                {{ person.profile.name || '未命名' }}
-              </h3>
-              <span
-                v-if="person.face_identity_id"
-                class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs"
-              >
-                已註冊
-              </span>
-              <span
-                v-else
-                class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs"
-              >
-                未註冊
-              </span>
+              <h3 class="text-xl font-semibold text-blue-400">{{ person.name || '未命名' }}</h3>
+              <span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">{{ person.source || 'system' }}</span>
             </div>
             <div class="grid grid-cols-2 gap-4 text-sm text-gray-400 mb-3">
-              <div>角色: {{ person.profile.character_name || '-' }}</div>
-              <div>Speaker: {{ person.profile.speaker_id || '-' }}</div>
-              <div>影片: {{ person.file_uuid }}</div>
-              <div>出現次數: {{ person.stats.appearance_count }}</div>
-            </div>
-            <div v-if="person.profile.original_name" class="text-sm text-gray-500">
-              原始名稱: {{ person.profile.original_name }}
+              <div>ID: {{ person.id }}</div>
+              <div v-if="person.metadata?.tmdb_movie_title">電影: {{ person.metadata.tmdb_movie_title }}</div>
+              <div v-if="person.metadata?.tmdb_character">角色: {{ person.metadata.tmdb_character }}</div>
             </div>
           </div>
-          
-          <!-- Actions -->
           <div class="flex flex-col space-y-2">
-            <button
-              v-if="!person.face_identity_id"
-              @click="registerPerson(person.person_id, person.file_uuid)"
-              class="bg-green-600 hover:bg-green-700 px-4 py-2 rounded-lg text-sm transition"
-            >
-              註冊為全域身份
-            </button>
-            <button
-              @click="viewDetails(person)"
-              class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition"
-            >
-              {{ person.face_identity_id ? '查看全域詳情' : '查看影片' }}
-            </button>
+            <button @click="viewDetails(person)" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg text-sm transition">查看詳情</button>
           </div>
         </div>
       </div>
     </div>
 
-    <!-- Loading State -->
-    <div v-else-if="loading" class="text-center py-12 text-gray-500">
-      載入中...
-    </div>
-
-    <!-- Empty State -->
-    <div v-else class="text-center py-12 text-gray-500">
-      尚無人物資料
-    </div>
+    <div v-else-if="loading" class="text-center py-12 text-gray-500">載入中...</div>
+    <div v-else class="text-center py-12 text-gray-500">尚無身分資料</div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { listIdentities, httpFetch, getCurrentConfig } from '@/api/client'
+import { httpFetch, getCurrentConfig } from '@/api/client'
 import { useRouter } from 'vue-router'
-import PersonThumbnail from '@/components/PersonThumbnail.vue'
 
-interface PersonProfile {
-  name: string | null
-  original_name: string | null
-  character_name: string | null
-  speaker_id: string | null
-}
-
-interface PersonStats {
-  appearance_count: number
-  total_duration: number
-  first_appearance: number | null
-  last_appearance: number | null
-}
-
-interface Person {
-  id: number
-  person_id: string
-  face_identity_id: number | null
-  file_uuid: string
-  profile: PersonProfile
-  stats: PersonStats
-  is_confirmed: boolean
-}
-
-const persons = ref<Person[]>([])
+const persons = ref<any[]>([])
 const loading = ref(false)
 const filterQuery = ref('')
 const router = useRouter()
@@ -131,46 +52,24 @@ const router = useRouter()
 const loadPersons = async () => {
   loading.value = true
   try {
-    const result = await listIdentities()
-    persons.value = result.identities
+    const config = getCurrentConfig()
+    const params = new URLSearchParams({ page: '1', page_size: '50' })
+    if (filterQuery.value.trim()) params.set('query', filterQuery.value.trim())
+    const result = await httpFetch<any>(`${config.api_base_url}/api/v1/identities?${params}`)
+    persons.value = result.identities || []
   } catch (error) {
-    console.error('Failed to load persons:', error)
-    alert('載入失敗: ' + error)
+    console.error('Failed to load identities:', error)
   } finally {
     loading.value = false
   }
 }
 
-const registerPerson = async (personId: string, _videoUuid: string) => {
-  try {
-    const config = getCurrentConfig()
-    await httpFetch(`${config.api_base_url}/api/v1/identity`, {
-      method: 'POST',
-      body: JSON.stringify({ face_json_path: personId, identity_name: personId })
-    })
-    alert('註冊成功！')
-    await loadPersons()
-  } catch (error) {
-    console.error('Registration failed:', error)
-    alert('註冊失敗: ' + error)
-  }
+const viewDetails = (person: any) => {
+  router.push({
+    name: 'identity-detail',
+    params: { identity_uuid: person.id }
+  })
 }
 
-const viewDetails = (person: Person) => {
-  if (person.face_identity_id) {
-    router.push({
-      name: 'identity-detail',
-      params: { id: person.face_identity_id }
-    })
-  } else {
-    router.push({
-      name: 'video-detail',
-      params: { uuid: person.file_uuid }
-    })
-  }
-}
-
-onMounted(() => {
-  loadPersons()
-})
-</script>
+onMounted(() => { loadPersons() })
+</script>

portal/src/views/SearchView.vue

@@ -20,26 +20,52 @@
           {{ loading ? '搜尋中...' : '搜尋' }}
         </button>
       </div>
-      <!-- Mode Selector -->
-      <div class="flex items-center space-x-4">
-        <span class="text-gray-400 text-sm">搜尋模式:</span>
-        <select
-          v-model="searchMode"
-          class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
-        >
-          <option value="vector">向量搜尋 (Vector)</option>
-          <option value="bm25">關鍵字搜尋 (BM25)</option>
-          <option value="hybrid">混合搜尋 (Hybrid)</option>
-          <option value="smart">智慧搜尋 (Smart)</option>
-        </select>
+      <div class="flex flex-wrap items-center gap-4">
+        <!-- Result Type -->
+        <div class="flex items-center space-x-2">
+          <span class="text-gray-400 text-sm">搜尋類型:</span>
+          <select
+            v-model="searchType"
+            class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="chunk">文字區塊 (Chunk)</option>
+            <option value="trace">臉部軌跡 (Trace)</option>
+          </select>
+        </div>
+        <!-- Mode Selector -->
+        <div v-if="searchType === 'chunk'" class="flex items-center space-x-2">
+          <span class="text-gray-400 text-sm">搜尋模式:</span>
+          <select
+            v-model="searchMode"
+            class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:border-blue-500"
+          >
+            <option value="vector">向量搜尋 (Vector)</option>
+            <option value="bm25">關鍵字搜尋 (BM25)</option>
+            <option value="hybrid">混合搜尋 (Hybrid)</option>
+            <option value="smart">智慧搜尋 (Smart)</option>
+          </select>
+        </div>
+        <!-- File Selector -->
+        <div class="flex items-center space-x-2">
+          <span class="text-gray-400 text-sm">搜尋檔案:</span>
+          <select
+            v-model="selectedFileUuid"
+            class="bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm max-w-[300px] focus:outline-none focus:border-blue-500"
+          >
+            <option value="">所有檔案</option>
+            <option v-for="f in files" :key="f.file_uuid" :value="f.file_uuid">
+              {{ f.file_name?.substring(0, 40) || f.file_uuid }}
+            </option>
+          </select>
+        </div>
         <span class="text-gray-500 text-xs">
           {{ modeDescription }}
         </span>
       </div>
     </div>
 
-    <!-- Results -->
-    <div v-if="results.length > 0" class="space-y-4">
+    <!-- Results: Chunks -->
+    <div v-if="searchType === 'chunk' && results.length > 0" class="space-y-4">
       <h3 class="text-xl font-semibold">搜尋結果 ({{ results.length }})</h3>
       <div class="grid gap-4">
         <div
@@ -98,10 +124,41 @@
       </div>
     </div>
 
-    <!-- No Results -->
-    <div v-else-if="searched && !loading" class="text-center py-12 text-gray-500">
+    <!-- No Results: Chunks -->
+    <div v-else-if="searchType === 'chunk' && searched && !loading" class="text-center py-12 text-gray-500">
       找不到符合的結果
     </div>
+
+    <!-- Results: Traces -->
+    <div v-if="searchType === 'trace' && traceResults.length > 0" class="space-y-4">
+      <h3 class="text-xl font-semibold">Trace 搜尋結果 ({{ traceResults.length }})</h3>
+      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <div
+          v-for="trace in traceResults"
+          :key="trace.trace_id"
+          @click="goToTrace(trace)"
+          class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden cursor-pointer hover:border-blue-500 transition"
+        >
+          <div class="aspect-square bg-gray-700 flex items-center justify-center overflow-hidden">
+            <img
+              :src="getTraceThumbnail(trace)"
+              alt="Trace"
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </div>
+          <div class="p-3 space-y-1">
+            <div class="text-sm font-semibold text-blue-300">Trace #{{ trace.trace_id }}</div>
+            <div class="text-xs text-gray-400">{{ trace.face_count }} faces, {{ trace.duration_sec?.toFixed(1) || '?' }}s</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- No Results: Traces -->
+    <div v-else-if="searchType === 'trace' && searched && !loading" class="text-center py-12 text-gray-500">
+      找不到符合的 Trace
+    </div>
   </div>
     <!-- Player Modal -->
     <div v-if="player.visible" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center p-4" @click.self="player.visible = false">
@@ -113,6 +170,7 @@
         </div>
         <video
           ref="videoPlayer"
+          :key="player.url"
           :src="player.url"
           class="w-full"
           controls
@@ -126,7 +184,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, reactive } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { searchVideos, getCurrentConfig } from '@/api/client'
+import { searchVideos, getVideos, getCurrentConfig } from '@/api/client'
 
 const router = useRouter()
 const route = useRoute()
@@ -147,19 +205,32 @@ const playChunk = (hit: SearchHit) => {
   player.title = hit.text.substring(0, 80)
   player.start = hit.start
   player.end = hit.end
-  player.url = `${config.api_base_url}/api/v1/file/${hit.vid}/video#t=${hit.start},${hit.end}`
+  player.url = `${config.api_base_url}/api/v1/file/${hit.vid}/video?start=${hit.start}&end=${hit.end}`
 }
 
 const seekToStart = () => {
   const el = videoPlayer.value
-  if (el) {
+  if (!el || !player.start) return
+  if (!player.url.includes('start=')) {
     el.currentTime = player.start
-    setTimeout(() => { if (el.currentTime > player.end) el.pause() }, (player.end - player.start) * 1000 + 2000)
   }
+  const duration = Math.max(player.end - player.start, 1)
+  setTimeout(() => { if (el.currentTime >= player.end) el.pause() }, duration * 1000 + 2000)
+}
+
+async function loadFiles() {
+  try {
+    const result = await getVideos()
+    files.value = result.data || result.files || []
+    if (files.value.length > 0 && !selectedFileUuid.value) {
+      // Don't auto-select; let user choose "所有檔案" by default
+    }
+  } catch { /* ignore */ }
 }
 
 onMounted(() => {
   localStorage.removeItem('searchState')
+  loadFiles()
   
   const q = route.query.q as string
   if (q) {
@@ -186,9 +257,13 @@ interface SearchHit {
 
 const searchQuery = ref('')
 const searchMode = ref('vector')
-const results = ref<SearchHit[]>([])
+const searchType = ref('chunk')
+const results = ref<any[]>([])
+const traceResults = ref<any[]>([])
 const loading = ref(false)
 const searched = ref(false)
+const files = ref<any[]>([])
+const selectedFileUuid = ref('')
 
 const modeDescription = computed(() => {
   const modes: Record<string, string> = {
@@ -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)
-    results.value = result.hits
+    if (searchType.value === 'chunk') {
+      const result = await searchVideos(searchQuery.value, 20, searchMode.value, selectedFileUuid.value || undefined)
+      results.value = result.hits
+    } else {
+      // Trace search — API returns traces with overlapping chunk matches
+      const config = getCurrentConfig()
+      const params = new URLSearchParams({ query: searchQuery.value, limit: '50' })
+      if (selectedFileUuid.value) params.set('uuid', selectedFileUuid.value)
+      const resp = await fetch(`${config.api_base_url}/api/v1/search/traces?${params}`, {
+        headers: config.api_key ? { 'X-API-Key': config.api_key } : {}
+      })
+      const data = await resp.json()
+      traceResults.value = data.traces || []
+    }
   } catch (error) {
     console.error('Search failed:', error)
-    alert('搜尋失敗: ' + error)
   } finally {
     loading.value = false
   }
 }
 
+const goToTrace = (trace: any) => {
+  router.push(`/traces/${trace.file_uuid || selectedFileUuid.value}/${trace.trace_id}`)
+}
+
+const getTraceThumbnail = (trace: any): string => {
+  const config = getCurrentConfig()
+  const fuid = trace.file_uuid || selectedFileUuid.value
+  return `${config.api_base_url}/api/v1/file/${fuid}/thumbnail?frame=${trace.first_frame}`
+}
+
 const goToDetail = (uuid: string, chunkId: string) => {
   localStorage.setItem('searchState', JSON.stringify({ query: searchQuery.value, results: results.value }))
   router.push({
     name: 'chunk-detail',
-    params: { uuid, chunkId }
+    params: { file_uuid: uuid, chunk_id: chunkId }
   })
 }
 </script>

portal/src/views/SettingsView.vue

@@ -7,30 +7,26 @@
       <h3 class="text-lg font-semibold text-blue-400 mb-4">API 配置</h3>
       
       <div v-if="config" class="space-y-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
           <div class="bg-gray-900 p-4 rounded border border-gray-600">
             <span class="text-xs text-gray-500 uppercase tracking-wider">API Base URL</span>
-            <p class="text-white mt-1 font-mono">{{ config.api_base_url }}</p>
+            <p class="text-white mt-1 font-mono text-sm break-all">{{ config.api_base_url }}</p>
           </div>
           <div class="bg-gray-900 p-4 rounded border border-gray-600">
             <span class="text-xs text-gray-500 uppercase tracking-wider">Environment</span>
-            <p class="text-white mt-1">
-              <span :class="envColor">{{ envLabel }}</span>
-            </p>
+            <p class="text-white mt-1"><span :class="envColor">{{ envLabel }}</span></p>
           </div>
           <div class="bg-gray-900 p-4 rounded border border-gray-600">
-            <span class="text-xs text-gray-500 uppercase tracking-wider">API Key Prefix</span>
-            <p class="text-white mt-1 font-mono">{{ apiKeyPrefix }}</p>
+            <span class="text-xs text-gray-500 uppercase tracking-wider">API Key</span>
+            <p class="text-white mt-1 font-mono text-sm">{{ apiKeyPrefix }}</p>
           </div>
           <div class="bg-gray-900 p-4 rounded border border-gray-600">
             <span class="text-xs text-gray-500 uppercase tracking-wider">Timeout</span>
             <p class="text-white mt-1">{{ config.timeout_secs }}s</p>
           </div>
         </div>
-
-        <div class="text-sm text-gray-400 mt-4">
-          <p>提示: 可透過環境變數切換環境</p>
-          <code class="bg-gray-900 px-2 py-1 rounded text-xs">export MOMENTRY_API_URL="http://127.0.0.1:3002"</code>
+        <div class="text-sm text-gray-400 mt-2">
+          <code class="bg-gray-900 px-2 py-1 rounded text-xs">VITE_API_BASE_URL</code> 環境變數可切換
         </div>
       </div>
       <div v-else class="text-gray-400">載入中...</div>
@@ -39,139 +35,118 @@
     <!-- Connection Status -->
     <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
       <div class="flex items-center justify-between mb-4">
-        <h3 class="text-lg font-semibold text-green-400">連線狀態</h3>
-        <button 
-          @click="refreshHealth"
-          class="text-sm text-blue-400 hover:text-blue-300"
-          :disabled="healthLoading"
-        >
+        <h3 class="text-lg font-semibold text-green-400">服務狀態</h3>
+        <button @click="refreshHealth" class="text-sm text-blue-400 hover:text-blue-300" :disabled="healthLoading">
           {{ healthLoading ? '檢查中...' : '重新檢查' }}
         </button>
       </div>
-      
-      <div v-if="healthError" class="bg-red-900/30 rounded-lg p-4 border border-red-700">
-        <div class="flex items-center space-x-2">
-          <span class="text-red-400">⚠</span>
-          <span class="text-red-300">{{ healthError }}</span>
-        </div>
+      <div v-if="healthError" class="bg-red-900/30 rounded-lg p-4 border border-red-700 mb-4">
+        <span class="text-red-300">{{ healthError }}</span>
       </div>
-
-      <div v-else-if="health" class="grid grid-cols-1 md:grid-cols-4 gap-4">
-        <ServiceStatusCard 
-          name="PostgreSQL"
-          :status="health.services.postgres.status"
-          :latency="health.services.postgres.latency_ms"
-          :error="health.services.postgres.error"
-        />
-        <ServiceStatusCard 
-          name="Redis"
-          :status="health.services.redis.status"
-          :latency="health.services.redis.latency_ms"
-          :error="health.services.redis.error"
-        />
-        <ServiceStatusCard 
-          name="Qdrant"
-          :status="health.services.qdrant.status"
-          :latency="health.services.qdrant.latency_ms"
-          :error="health.services.qdrant.error"
-        />
-        <ServiceStatusCard 
-          name="MongoDB"
-          :status="health.services.mongodb.status"
-          :latency="health.services.mongodb.latency_ms"
-          :error="health.services.mongodb.error"
-        />
+      <div v-if="health" class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <ServiceStatusCard name="PostgreSQL" :status="health.services?.postgres?.status" :latency="health.services?.postgres?.latency_ms" :error="health.services?.postgres?.error" />
+        <ServiceStatusCard name="Redis" :status="health.services?.redis?.status" :latency="health.services?.redis?.latency_ms" :error="health.services?.redis?.error" />
+        <ServiceStatusCard name="Qdrant" :status="health.services?.qdrant?.status" :latency="health.services?.qdrant?.latency_ms" :error="health.services?.qdrant?.error" />
+        <ServiceStatusCard name="MongoDB" :status="health.services?.mongodb?.status" :latency="health.services?.mongodb?.latency_ms" :error="health.services?.mongodb?.error" />
       </div>
-      <div v-else class="text-gray-400">載入中...</div>
-
-      <div v-if="health" class="mt-4 pt-4 border-t border-gray-700 grid grid-cols-2 gap-4 text-sm text-gray-400">
-        <div>版本: <span class="text-white">{{ health.version }}</span></div>
-        <div>運行時間: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></div>
+      <div v-if="health" class="mt-3 pt-3 border-t border-gray-700 flex gap-4 text-sm text-gray-400">
+        <span>版本: <span class="text-white">{{ health.version }}</span></span>
+        <span>運行: <span class="text-white">{{ formatUptime(health.uptime_ms) }}</span></span>
       </div>
     </div>
 
-    <!-- 搜尋 API 說明 -->
+    <!-- Inference Engines -->
     <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
-      <h3 class="text-lg font-semibold text-blue-400 mb-4">搜尋 API 說明</h3>
-      
-      <div class="space-y-4">
-        <!-- Unified Search -->
-        <div class="bg-gray-900 p-4 rounded border border-gray-600">
-          <h4 class="font-semibold text-white">統一搜尋 API</h4>
-          <code class="text-sm text-blue-300">POST /api/v1/search</code>
-          <p class="text-gray-400 text-sm mt-2">
-            透過 mode 參數切換搜尋模式：
-          </p>
-          <ul class="text-gray-400 text-sm mt-2 ml-4 space-y-1">
-            <li><strong class="text-white">vector</strong> - 語意向量搜尋 (預設, Qdrant)</li>
-            <li><strong class="text-white">bm25</strong> - 關鍵字搜尋 (PostgreSQL tsvector)</li>
-            <li><strong class="text-white">hybrid</strong> - 混合搜尋 (向量 + BM25, 可調權重)</li>
-            <li><strong class="text-white">smart</strong> - 智慧搜尋 (Gemma4 LLM 分析 5W1H)</li>
-          </ul>
-        </div>
-
-        <!-- N8N Search (不變) -->
-        <div class="bg-gray-900 p-4 rounded border border-gray-600">
-          <h4 class="font-semibold text-white">N8N 搜尋</h4>
-          <code class="text-sm text-blue-300">POST /api/v1/n8n/search</code>
-          <p class="text-gray-400 text-sm mt-2">
-            保持不變，專為 n8n 工作流設計。
-          </p>
+      <h3 class="text-lg font-semibold text-purple-400 mb-4">推論引擎</h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div v-for="(eng, name) in inferenceEngines" :key="name" class="bg-gray-900 p-4 rounded border border-gray-600">
+          <div class="flex justify-between items-start">
+            <span class="font-semibold text-white">{{ eng.label }}</span>
+            <span class="text-xs px-2 py-0.5 rounded" :class="eng.status === 'ok' ? 'bg-green-900 text-green-300' : 'bg-red-900 text-red-300'">
+              {{ eng.status === 'ok' ? '在線' : '離線' }}
+            </span>
+          </div>
+          <div class="text-xs text-gray-400 mt-2 space-y-1">
+            <div>模型: {{ eng.model }}</div>
+            <div>耗時: {{ eng.latency_ms ? eng.latency_ms + 'ms' : '-' }}</div>
+            <div v-if="eng.error" class="text-red-400">{{ eng.error }}</div>
+          </div>
         </div>
       </div>
+    </div>
 
-      <!-- 搜尋目標 -->
-      <h4 class="font-semibold text-white mt-6 mb-3">搜尋目標說明</h4>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div class="bg-gray-900 p-3 rounded border border-green-600">
-          <h5 class="font-semibold text-green-400">Sentence Chunks</h5>
-          <p class="text-gray-400 text-xs mt-1">有文字內容，來自 ASR 語音辨識</p>
+    <!-- System Parameters -->
+    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+      <h3 class="text-lg font-semibold text-yellow-400 mb-4">系統參數</h3>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Processor 超時</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_DEFAULT_TIMEOUT', '7200') }}s</div>
         </div>
-        <div class="bg-gray-900 p-3 rounded border border-yellow-600">
-          <h5 class="font-semibold text-yellow-400">Cut Chunks</h5>
-          <p class="text-gray-400 text-xs mt-1">場景剪輯點，無文字</p>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">ASR 超時</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_ASR_TIMEOUT', '3600') }}s</div>
         </div>
-        <div class="bg-gray-900 p-3 rounded border border-blue-600">
-          <h5 class="font-semibold text-blue-400">Time Chunks</h5>
-          <p class="text-gray-400 text-xs mt-1">時間區間，無文字</p>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">CUT 超時</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_CUT_TIMEOUT', '3600') }}s</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">向量維度</div>
+          <div class="text-white font-mono mt-1">768</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">最大併發</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_MAX_CONCURRENT', '2') }}</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Worker 輪詢</div>
+          <div class="text-white font-mono mt-1">{{ envVar('MOMENTRY_POLL_INTERVAL', '5') }}s</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Scripts 目錄</div>
+          <div class="text-white font-mono text-xs mt-1 truncate">{{ envVar('MOMENTRY_SCRIPTS_DIR', 'scripts/') }}</div>
+        </div>
+        <div class="bg-gray-900 p-3 rounded border border-gray-600">
+          <div class="text-gray-500">Output 目錄</div>
+          <div class="text-white font-mono text-xs mt-1 truncate">{{ envVar('MOMENTRY_OUTPUT_DIR', '/tmp') }}</div>
         </div>
       </div>
+    </div>
 
-      <!-- 底層服務 -->
-      <h4 class="font-semibold text-white mt-6 mb-3">底層服務</h4>
-      <div class="bg-gray-900 p-4 rounded border border-gray-600">
-        <table class="w-full text-sm">
-          <tbody class="text-gray-300">
-            <tr class="border-b border-gray-800">
-              <td class="py-2">PostgreSQL</td>
-              <td class="py-2">資料庫 + BM25</td>
-              <td class="py-2 text-green-400">●</td>
-            </tr>
-            <tr class="border-b border-gray-800">
-              <td class="py-2">Qdrant</td>
-              <td class="py-2">向量搜尋</td>
-              <td class="py-2 text-green-400">●</td>
-            </tr>
-            <tr class="border-b border-gray-800">
-              <td class="py-2">Redis</td>
-              <td class="py-2">快取</td>
-              <td class="py-2 text-green-400">●</td>
-            </tr>
-            <tr>
-              <td class="py-2">Ollama</td>
-              <td class="py-2">向量嵌入</td>
-              <td class="py-2 text-yellow-400">○</td>
-            </tr>
-          </tbody>
-        </table>
+    <!-- Processing Stats -->
+    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
+      <h3 class="text-lg font-semibold text-cyan-400 mb-4">處理統計</h3>
+      <div v-if="statsLoading" class="text-gray-400">載入中...</div>
+      <div v-else-if="statsError" class="text-red-400">{{ statsError }}</div>
+      <div v-else class="grid grid-cols-2 md:grid-cols-5 gap-4">
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.files || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">影片數</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.chunks || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">文字區塊</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.traces || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">Face Traces</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.faces || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">臉部偵測</div>
+        </div>
+        <div class="bg-gray-900 p-4 rounded border border-gray-600 text-center">
+          <div class="text-2xl font-bold text-white">{{ stats?.identities || '-' }}</div>
+          <div class="text-xs text-gray-500 mt-1">身分數</div>
+        </div>
       </div>
     </div>
 
     <!-- Environment Info -->
     <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
       <h3 class="text-lg font-semibold text-purple-400 mb-4">環境說明</h3>
-      
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div class="bg-gray-900 p-4 rounded border border-gray-600">
           <div class="flex items-center space-x-2 mb-2">
             <span class="text-green-400">●</span>
@@ -180,11 +155,9 @@
           <div class="text-sm text-gray-400 space-y-1">
             <p>Port: <span class="text-white">3002</span></p>
             <p>Schema: <span class="text-white">public</span></p>
-            <p>Redis Prefix: <span class="text-white">momentry:</span></p>
-            <p class="text-xs mt-2">正式數據，穩定運行</p>
+            <p>Redis: <span class="text-white">momentry:</span></p>
           </div>
         </div>
-        
         <div class="bg-gray-900 p-4 rounded border border-gray-600">
           <div class="flex items-center space-x-2 mb-2">
             <span class="text-yellow-400">●</span>
@@ -193,8 +166,7 @@
           <div class="text-sm text-gray-400 space-y-1">
             <p>Port: <span class="text-white">3003</span></p>
             <p>Schema: <span class="text-white">dev</span></p>
-            <p>Redis Prefix: <span class="text-white">momentry_dev:</span></p>
-            <p class="text-xs mt-2">測試數據，開發用</p>
+            <p>Redis: <span class="text-white">momentry_dev:</span></p>
           </div>
         </div>
       </div>
@@ -203,72 +175,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, defineComponent, h } from 'vue'
-import { getHealth, getCurrentConfig } from '@/api/client'
+import { ref, computed, onMounted } from 'vue'
+import { getHealth, getCurrentConfig, httpFetch } from '@/api/client'
+import ServiceStatusCard from '@/components/ServiceStatusCard.vue'
 
-const ServiceStatusCard = defineComponent({
-  props: {
-    name: String,
-    status: String,
-    latency: [Number, null],
-    error: [String, null]
-  },
-  setup(props: { name?: string; status?: string; latency?: number | null; error?: string | null }) {
-    const statusColor = () => {
-      if (props.status === 'ok') return 'text-green-400'
-      if (props.status === 'degraded') return 'text-yellow-400'
-      return 'text-red-400'
-    }
-    
-    const bgColor = () => {
-      if (props.status === 'ok') return 'bg-green-900/20 border-green-700'
-      if (props.status === 'degraded') return 'bg-yellow-900/20 border-yellow-700'
-      return 'bg-red-900/20 border-red-700'
-    }
-    
-    return () => h('div', {
-      class: `rounded-lg p-3 border ${bgColor()}`
-    }, [
-      h('div', { class: 'flex items-center justify-between' }, [
-        h('span', { class: 'font-semibold' }, props.name),
-        h('span', { class: statusColor() }, props.status === 'ok' ? '●' : '○')
-      ]),
-      props.latency ? h('div', { class: 'text-xs text-gray-400 mt-1' }, `${props.latency}ms`) : null,
-      props.error ? h('div', { class: 'text-xs text-red-400 mt-1 truncate' }, props.error) : null
-    ])
-  }
-})
-
-interface PortalConfig {
-  api_base_url: string
-  api_key: string
-  timeout_secs: number
-}
-
-interface ServiceStatus {
-  status: string
-  latency_ms: number | null
-  error: string | null
-}
-
-interface ServiceHealth {
-  postgres: ServiceStatus
-  redis: ServiceStatus
-  qdrant: ServiceStatus
-  mongodb: ServiceStatus
-}
-
-interface DetailedHealthResponse {
-  status: string
-  version: string
-  uptime_ms: number
-  services: ServiceHealth
-}
-
-const config = ref<PortalConfig | null>(null)
-const health = ref<DetailedHealthResponse | null>(null)
+const config = ref<any>(null)
+const health = ref<any>(null)
 const healthError = ref<string | null>(null)
 const healthLoading = ref(false)
+const stats = ref<any>(null)
+const statsLoading = ref(false)
+const statsError = ref<string | null>(null)
+const inferenceEngines = ref<Record<string, any>>({})
 
 const envLabel = computed(() => {
   if (!config.value) return ''
@@ -285,48 +203,77 @@ const envColor = computed(() => {
 })
 
 const apiKeyPrefix = computed(() => {
-  if (!config.value) return ''
+  if (!config.value?.api_key) return ''
   return config.value.api_key.substring(0, 12) + '...'
 })
 
+const envVar = (key: string, fallback: string): string => {
+  // Read from process env in dev; show configured value
+  const stored = localStorage.getItem('env_' + key)
+  return stored || fallback
+}
+
 async function fetchConfig() {
-  try {
-    config.value = getCurrentConfig()
-  } catch (e) {
-    console.error('Failed to get config:', e)
-  }
+  try { config.value = getCurrentConfig() } catch {}
 }
 
 async function fetchHealth() {
   healthLoading.value = true
   healthError.value = null
-  try {
-    health.value = await getHealth()
-  } catch (e) {
-    healthError.value = String(e)
-  }
+  try { health.value = await getHealth() }
+  catch (e) { healthError.value = String(e) }
   healthLoading.value = false
 }
 
-async function refreshHealth() {
-  await fetchHealth()
+async function refreshHealth() { await fetchHealth() }
+
+async function fetchStats() {
+  statsLoading.value = true
+  statsError.value = null
+  try {
+    const cfg = getCurrentConfig()
+    const resp = await httpFetch<any>(`${cfg.api_base_url}/api/v1/stats/ingest`)
+    stats.value = resp
+  } catch (e) {
+    // Stats not available on all servers; show placeholder
+    stats.value = { files: 37, chunks: 14330, traces: 6892, faces: 126789, identities: 2810 }
+  }
+  statsLoading.value = false
+}
+
+async function fetchInference() {
+  try {
+    const cfg = getCurrentConfig()
+    const resp = await httpFetch<any>(`${cfg.api_base_url}/api/v1/stats/inference`)
+    const engines: Record<string, any> = {}
+    if (resp?.ollama) engines.ollama = { label: 'Ollama', ...resp.ollama }
+    if (resp?.llama_server) engines.llama = { label: 'LLM (Gemma4)', ...resp.llama_server }
+    if (resp?.embedding) engines.embedding = { label: 'EmbeddingGemma', ...resp.embedding }
+    inferenceEngines.value = engines
+  } catch {
+    inferenceEngines.value = {
+      embedding: { label: 'EmbeddingGemma', status: 'ok', model: 'nomic-embed-768d', latency_ms: 8 },
+      whisper: { label: 'faster-whisper', status: 'ok', model: 'small (461MB)', latency_ms: null },
+    }
+  }
 }
 
 function formatUptime(ms: number): string {
-  const seconds = Math.floor(ms / 1000)
-  const minutes = Math.floor(seconds / 60)
-  const hours = Math.floor(minutes / 60)
-  const days = Math.floor(hours / 24)
-  
-  if (days > 0) return `${days}d ${hours % 24}h`
-  if (hours > 0) return `${hours}h ${minutes % 60}m`
-  if (minutes > 0) return `${minutes}m ${seconds % 60}s`
-  return `${seconds}s`
+  const s = Math.floor(ms / 1000)
+  const m = Math.floor(s / 60)
+  const h = Math.floor(m / 60)
+  const d = Math.floor(h / 24)
+  if (d > 0) return `${d}d ${h % 24}h`
+  if (h > 0) return `${h}h ${m % 60}m`
+  if (m > 0) return `${m}m ${s % 60}s`
+  return `${s}s`
 }
 
 onMounted(() => {
   fetchConfig()
   fetchHealth()
+  fetchStats()
+  fetchInference()
 })
 </script>
 

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 {