Task/FOUR-32778: Add missing translation labels

resources/js/admin/logs/components/Logs/AgentSessionDetail/AgentSessionDetail.vue

@@ -111,7 +111,7 @@
         <div v-else class="tw-relative">
           <div
             v-for="(event, index) in sortedEvents"
-            :key="event.id || index"
+            :key="getEventKey(event, index)"
             class="tw-relative tw-pb-4"
           >
             <!-- Timeline connector -->
@@ -361,11 +361,11 @@
               <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">{{ $t('MCP Servers') }}</div>
               <div class="tw-flex tw-flex-wrap tw-gap-1">
                 <span
-                  v-for="server in sessionData.mcp_servers_used"
-                  :key="server"
+                  v-for="(server, serverIndex) in sessionData.mcp_servers_used"
+                  :key="getMcpServerKey(server, serverIndex)"
                   class="tw-px-2 tw-py-0.5 tw-bg-purple-100 tw-text-purple-700 tw-rounded tw-text-xs"
                 >
-                  {{ server }}
+                  {{ formatMcpServerLabel(server) }}
                 </span>
               </div>
             </div>
@@ -374,13 +374,13 @@
               <div class="tw-text-xs tw-text-gray-500 tw-uppercase tw-font-medium tw-mb-1">{{ $t('Collections') }}</div>
               <div class="tw-flex tw-flex-wrap tw-gap-1">
                 <a
-                  v-for="collection in sessionData.collections_used"
-                  :key="collection.uuid || collection.id"
-                  :href="`/collections/${collection.id}`"
+                  v-for="(collection, collectionIndex) in sessionData.collections_used"
+                  :key="getCollectionKey(collection, collectionIndex)"
+                  :href="`/collections/${collection.id || collection.uuid}`"
                   class="tw-px-2 tw-py-0.5 tw-bg-blue-100 tw-text-blue-700 tw-rounded tw-text-xs hover:tw-bg-blue-200 tw-transition-colors tw-no-underline"
                   @click.stop
                 >
-                  {{ collection.name }}
+                  {{ formatCollectionLabel(collection) }}
                 </a>
               </div>
             </div>
@@ -708,6 +708,61 @@ export default {
       this.$set(this.expandedEvents, index, !this.expandedEvents[index]);
     },
 
+    getEventKey(event, index) {
+      const id = event.id ?? event.call_id ?? event.response_id;
+      if (typeof id === 'string' || typeof id === 'number') {
+        return String(id);
+      }
+      const type = event._type || event.type || 'event';
+      const timestamp = event.timestamp || event.created_at || '';
+      return `${type}-${timestamp}-${index}`;
+    },
+
+    getMcpServerKey(server, index) {
+      if (typeof server === 'string' || typeof server === 'number') {
+        return `mcp-${server}-${index}`;
+      }
+      if (server && typeof server === 'object') {
+        const name = server.name || server.id || 'server';
+        const type = server.type || server.server_type || '';
+        return `mcp-${name}-${type}-${index}`;
+      }
+      return `mcp-server-${index}`;
+    },
+
+    formatMcpServerLabel(server) {
+      if (typeof server === 'string' || typeof server === 'number') {
+        return String(server);
+      }
+      if (server && typeof server === 'object') {
+        return server.name || server.id || JSON.stringify(server);
+      }
+      return String(server ?? '');
+    },
+
+    getCollectionKey(collection, index) {
+      if (typeof collection === 'string' || typeof collection === 'number') {
+        return `collection-${collection}-${index}`;
+      }
+      if (collection && typeof collection === 'object') {
+        const id = collection.uuid || collection.id;
+        if (typeof id === 'string' || typeof id === 'number') {
+          return `collection-${id}`;
+        }
+      }
+      return `collection-${index}`;
+    },
+
+    formatCollectionLabel(collection) {
+      if (typeof collection === 'string' || typeof collection === 'number') {
+        return String(collection);
+      }
+      if (collection && typeof collection === 'object') {
+        return collection.name || collection.uuid || collection.id || JSON.stringify(collection);
+      }
+      return String(collection ?? '');
+    },
+
     isGuardrailEvent(event) {
       const type = event._type || event.type;
       return type === 'guardrail_evaluation_event';

resources/js/admin/logs/components/Logs/HeaderBar/HeaderBar.vue

@@ -30,7 +30,7 @@
 
     <!-- Agents category tabs -->
     <div
-      v-else-if="isAgentsCategory"
+      v-else-if="isAgentsLogsCategory"
       class="tw-flex tw-items-center tw-gap-2 tw-bg-gray-100 tw-rounded-lg tw-p-1"
     >
       <RouterLink
@@ -52,7 +52,10 @@
     <!-- Empty placeholder for other categories -->
     <div v-else />
 
-    <div class="tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-w-auto tw-border tw-border-zinc-200 tw-rounded-lg tw-p-1 tw-px-3">
+    <div
+      v-if="!isMonitoring"
+      class="tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-w-auto tw-border tw-border-zinc-200 tw-rounded-lg tw-p-1 tw-px-3"
+    >
       <div class="tw-relative tw-w-full tw-flex tw-items-center tw-gap-1">
         <i class="fas fa-search" />
         <input
@@ -92,8 +95,11 @@ export default {
     isEmailCategory() {
       return this.$route.path.startsWith('/email');
     },
-    isAgentsCategory() {
-      return this.$route.path.startsWith('/agents');
+    isAgentsLogsCategory() {
+      return this.$route.path === '/agents/design' || this.$route.path === '/agents/execution';
+    },
+    isMonitoring() {
+      return this.$route.path.startsWith('/agents/monitoring');
     },
   },
   watch: {

resources/js/admin/logs/components/Logs/LogContainer/LogContainer.vue

@@ -94,12 +94,15 @@ export default {
       return this.$route.params.logType;
     },
     title() {
+      if (this.$route.path.startsWith('/agents/monitoring')) {
+        return 'FlowGenie Monitoring';
+      }
       if (this.isAgentsCategory) {
         const agentTitles = {
           design: 'FlowGenie Studio Logs',
           execution: 'Runtime Logs',
         };
-        return agentTitles[this.logType] ?? 'FlowGenie Agents Logs';
+        return agentTitles[this.logType] ?? 'FlowGenie Agents logs';
       }
 
       const titles = {