Enhance user metadata display with app and outpost information

- Update AuthentikUser interface to include appSlug and outpostName
- Capture x-authentik-meta-app and x-authentik-meta-outpost headers
- Improve UserMetadata component to display connection information
- Filter empty groups from groups array
- Add documentation about available Authentik headers

nuxt4/app/components/auth/UserMetadata.vue

@@ -59,11 +59,28 @@
               {{ group }}
             </UBadge>
             <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
-              Sin grupos
+              Sin grupos asignados
             </UBadge>
           </div>
         </div>
       </div>
+
+      <!-- Metadata de la Aplicación (si está disponible) -->
+      <div v-if="user.appSlug || user.outpostName" class="pt-3 mt-3 border-t border-gray-200 dark:border-gray-700">
+        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Información de Conexión</p>
+        <div class="space-y-2">
+          <div v-if="user.appSlug" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-cube" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">App: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.appSlug }}</code>
+          </div>
+          <div v-if="user.outpostName" class="flex items-center gap-2 text-sm">
+            <UIcon name="i-heroicons-server" class="text-gray-400" />
+            <span class="text-gray-600 dark:text-gray-300">Outpost: </span>
+            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded">{{ user.outpostName }}</code>
+          </div>
+        </div>
+      </div>
     </div>
   </UCard>
 </template>