fix: resolve TypeScript compilation errors

Fixes:
- VideoPlayer.vue: restore allTags, filteredMarks, marksByTag (removed by mistake)
- PeopleView.vue: fix frameTime scope in playFaceDetailVideo catch block
- Both errors caused white screen on build failure

Root cause:
1. visibleTags duplicate declaration (old + new logic)
2. frameTime undefined in catch block (scope issue)

Solution:
1. Keep allTags/filteredMarks/marksByTag (needed in template)
2. Keep visibleTags (new logic for processor toggles)
3. Move frameTime calculation to correct scope in catch block

src/components/AgentTip.vue

@@ -0,0 +1,216 @@
+<template>
+  <transition name="slide-up">
+    <div class="agent-tip" v-if="showAgentTip">
+      <div class="agent-avatar">🤖</div>
+      <div class="agent-message">{{ agentTip }}</div>
+      <button class="agent-close" @click="showAgentTip = false">×</button>
+    </div>
+  </transition>
+  
+  <transition name="fade">
+    <div class="discovery-tip" v-if="discoveryTip">
+      <span class="discovery-icon">✨</span>
+      <span class="discovery-message">{{ discoveryTip }}</span>
+    </div>
+  </transition>
+  
+</template>
+
+<script setup lang="ts">
+import { showAgentTip, agentTip, discoveryTip } from '@/stores/agentStore'
+</script>
+
+<style scoped>
+.agent-tip {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
+  z-index: 9999;
+  animation: slideInUp 0.3s ease-out;
+}
+
+.agent-avatar {
+  font-size: 24px;
+}
+
+.agent-message {
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.agent-close {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.agent-close:hover {
+  opacity: 1;
+}
+
+.discovery-tip {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  background: #f0f9ff;
+  border: 1px solid #0ea5e9;
+  color: #0c4a6e;
+  padding: 10px 16px;
+  border-radius: 8px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 9998;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.discovery-icon {
+  font-size: 16px;
+}
+
+.welcome-guide {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.3s ease-out;
+}
+
+.guide-content {
+  background: white;
+  padding: 32px 40px;
+  border-radius: 16px;
+  max-width: 500px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
+}
+
+.guide-content h2 {
+  margin: 0 0 12px 0;
+  font-size: 24px;
+  color: #1f2937;
+}
+
+.guide-content > p {
+  color: #6b7280;
+  margin-bottom: 24px;
+}
+
+.guide-items {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.guide-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.guide-icon {
+  font-size: 32px;
+  flex-shrink: 0;
+}
+
+.guide-content-text h4 {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  color: #1f2937;
+}
+
+.guide-content-text p {
+  margin: 0;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.guide-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.guide-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.guide-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.slide-up-enter-active {
+  animation: slideInUp 0.3s ease-out;
+}
+
+.slide-up-leave-active {
+  animation: slideOutDown 0.3s ease-in;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>