++

frontend/src/components/AgentDetailPanel.vue

@@ -25,7 +25,7 @@
               activeTab === t.id ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
             ]"
           >
-            {{ t.label }}
+            {{ $t(t.labelKey) }}
           </button>
         </div>
 
@@ -38,9 +38,9 @@
             <span v-if="agent.faction" class="ml-2 px-1.5 py-0.5 rounded bg-violet-50 text-violet-600 text-[10px]">{{ agent.faction }}</span>
           </div>
           <div v-if="agent.personality">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-2">Personality</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-2">{{ $t('agent.profile.personality') }}</div>
             <div v-for="(val, key) in agent.personality" :key="key" class="flex items-center gap-2 mb-1.5">
-              <span class="text-[10px] text-slate-500 w-20 capitalize">{{ key }}</span>
+              <span class="text-[10px] text-slate-500 w-20 capitalize">{{ $t(`agent.personality.${key}`, key) }}</span>
               <div class="flex-1 h-1.5 bg-gray-100 rounded-full overflow-hidden">
                 <div class="h-full bg-emerald-600/60 rounded-full transition-all duration-500" :style="{ width: (val * 100) + '%' }"></div>
               </div>
@@ -52,33 +52,33 @@
         <!-- Life Tab -->
         <div v-if="activeTab === 'life'" class="space-y-3 pt-2">
           <div v-if="agent.life_state">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-2">Life Situation</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-2">{{ $t('agent.profile.lifeSituation') }}</div>
             <div v-for="domain in ['finances', 'career', 'health']" :key="domain" class="flex items-center gap-2 mb-2">
-              <span class="text-[10px] text-slate-500 w-16 capitalize">{{ domain }}</span>
+              <span class="text-[10px] text-slate-500 w-16 capitalize">{{ $t(`agent.domains.${domain}`, domain) }}</span>
               <div class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
                 <div class="h-full rounded-full transition-all duration-500"
                   :class="domainColor(agent.life_state[domain])"
                   :style="{ width: (agent.life_state[domain] * 100) + '%' }"></div>
               </div>
-              <span class="text-[9px] text-slate-400 w-16 text-right">{{ domainLabel(agent.life_state[domain]) }}</span>
+              <span class="text-[9px] text-slate-400 w-16 text-right">{{ $t(`agent.domainLabels.${domainLabelKey(agent.life_state[domain])}`) }}</span>
             </div>
           </div>
 
           <div v-if="agent.life_state?.family?.length">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">Family</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.family') }}</div>
             <div v-for="f in agent.life_state.family" :key="f.name" class="text-[11px] text-slate-600 py-0.5 flex items-center gap-1.5">
               <span class="text-slate-400">•</span>
               <span>{{ f.name }}</span>
               <span class="text-slate-400">({{ f.relation }}, {{ f.age }})</span>
               <span v-if="f.status !== 'healthy'" class="text-[9px] px-1.5 py-0.5 rounded"
                 :class="f.status === 'ill' ? 'bg-red-50 text-red-600' : f.status === 'estranged' ? 'bg-amber-50 text-amber-600' : 'bg-gray-100 text-gray-500'">
-                {{ f.status }}
+                {{ $t(`agent.status.${f.status}`, f.status) }}
               </span>
             </div>
           </div>
 
           <div v-if="agent.life_state?.pressures?.length">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">Pressures</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.pressures') }}</div>
             <div v-for="p in agent.life_state.pressures" :key="p.description" class="mb-2 pl-2.5 border-l-2 border-amber-300">
               <p class="text-[11px] text-slate-700 leading-relaxed">{{ p.description }}</p>
               <div class="flex items-center gap-2 mt-1">
@@ -91,50 +91,50 @@
           </div>
 
           <div v-if="agent.life_state?.childhood_summary">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">History</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.history') }}</div>
             <p class="text-[11px] text-slate-500 leading-relaxed italic mb-2">{{ agent.life_state.childhood_summary }}</p>
             <div v-if="agent.life_state.formative_events?.length">
               <div v-for="e in agent.life_state.formative_events" :key="e.age_at_event" class="text-[11px] text-slate-600 py-1 pl-2.5 border-l-2 border-gray-200 mb-1">
-                <span class="text-slate-400 text-[9px]">Age {{ e.age_at_event }}:</span> {{ e.description }}
+                <span class="text-slate-400 text-[9px]">{{ $t('agent.profile.ageAtEvent', { age: e.age_at_event }) }}:</span> {{ e.description }}
               </div>
             </div>
           </div>
 
           <div v-if="agent.life_state?.life_log?.length">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">Life Events</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.lifeEvents') }}</div>
             <div v-for="log in agent.life_state.life_log.slice(-5)" :key="log" class="text-[11px] text-slate-500 py-0.5">{{ log }}</div>
           </div>
 
           <div v-if="!agent.life_state" class="text-[11px] text-slate-400 italic py-4 text-center">
-            No life history available
+            {{ $t('agent.profile.noHistory') }}
           </div>
         </div>
 
         <!-- Memory Tab -->
         <div v-if="activeTab === 'memory'" class="space-y-3 pt-2">
           <div v-if="agent.beliefs?.length">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">Beliefs</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.beliefs') }}</div>
             <div v-for="b in agent.beliefs.slice(0, 6)" :key="b" class="text-[11px] text-slate-700 py-1 pl-2.5 border-l-2 border-gray-200 mb-0.5">{{ b }}</div>
           </div>
           <div v-if="agent.core_memory?.length">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">Remembers</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.remembers') }}</div>
             <div v-for="m in agent.core_memory.slice(0, 5)" :key="m" class="text-[11px] text-slate-500 py-1 flex gap-1.5">
               <span class="text-slate-400 shrink-0">•</span>
               <span>{{ m }}</span>
             </div>
           </div>
           <div v-if="agent.goals?.length">
-            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">Goals</div>
+            <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-1.5">{{ $t('agent.profile.goals') }}</div>
             <div v-for="g in agent.goals.slice(0, 4)" :key="g" class="text-[11px] text-slate-500 py-0.5">{{ g }}</div>
           </div>
           <div v-if="!agent.beliefs?.length && !agent.core_memory?.length && !agent.goals?.length" class="text-[11px] text-slate-400 italic py-4 text-center">
-            No memories yet...
+            {{ $t('agent.profile.noMemories') }}
           </div>
         </div>
 
         <!-- Chat Tab -->
         <div v-if="activeTab === 'chat'" class="pt-2">
-          <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-2">Ask {{ agent.name?.split(' ')[0] }}</div>
+          <div class="text-[9px] text-slate-500 uppercase tracking-wider mb-2">{{ $t('agent.profile.askPrefix') }} {{ agent.name?.split(' ')[0] }}</div>
           <div v-if="chatMessages.length" class="space-y-1.5 max-h-48 overflow-y-auto mb-3 scroll-smooth">
             <div
               v-for="(msg, i) in chatMessages"
@@ -151,14 +151,14 @@
           </div>
           <div v-if="chatLoading" class="flex items-center gap-2 text-[10px] text-slate-500 mb-2">
             <div class="w-1 h-1 bg-slate-500 rounded-full animate-pulse"></div>
-            Thinking...
+            {{ $t('agent.profile.thinking') }}
           </div>
           <div class="flex gap-1.5">
             <input
               v-model="localChatInput"
               @keyup.enter="sendChat"
               :disabled="chatLoading"
-              placeholder="Ask something..."
+              :placeholder="$t('agent.profile.chatPlaceholder')"
               class="flex-1 bg-white border border-gray-300 rounded-lg px-2.5 py-2 text-[11px] outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-600/30 placeholder-slate-400 disabled:opacity-50 transition-colors"
             />
             <button
@@ -189,10 +189,10 @@ const activeTab = ref('profile')
 const localChatInput = ref('')
 
 const tabs = [
-  { id: 'profile', label: 'Profile' },
-  { id: 'life', label: 'Life' },
-  { id: 'memory', label: 'Memory' },
-  { id: 'chat', label: 'Chat' },
+  { id: 'profile', labelKey: 'agent.tabs.profile' },
+  { id: 'life', labelKey: 'agent.tabs.life' },
+  { id: 'memory', labelKey: 'agent.tabs.memory' },
+  { id: 'chat', labelKey: 'agent.tabs.chat' },
 ]
 
 function domainColor(value) {
@@ -202,7 +202,7 @@ function domainColor(value) {
   return 'bg-emerald-600'
 }
 
-function domainLabel(value) {
+function domainLabelKey(value) {
   if (value < 0.2) return 'desperate'
   if (value < 0.35) return 'struggling'
   if (value < 0.5) return 'tight'