Implementación inicial de Nucleo Whisper

- Configurado proyecto Nuxt 4 con PWA
- Integrado OpenAI Whisper API para transcripción de audio
- Implementada captura de audio desde navegador
- Creada UI con grabación y visualización de transcripciones
- Configurado Authentik Proxy para autenticación
- Setup de Docker y Gitea Actions para despliegue

nuxt4/app/app.vue

@@ -0,0 +1,229 @@
+<template>
+  <UApp>
+    <NuxtRouteAnnouncer />
+    <UNotifications />
+
+    <UContainer class="py-8">
+      <div class="space-y-6 max-w-2xl mx-auto">
+        <!-- Header -->
+        <div class="text-center mb-8">
+          <div class="flex items-center justify-center gap-3 mb-2">
+            <UIcon name="i-heroicons-microphone" class="w-12 h-12 text-green-500" />
+            <h1 class="text-4xl font-bold">Nucleo Whisper</h1>
+          </div>
+          <p class="text-gray-600 dark:text-gray-400">
+            Transcripción de audio con OpenAI Whisper
+          </p>
+        </div>
+
+        <!-- Contenido principal -->
+        <div v-if="isAuthenticated" class="space-y-6">
+          <!-- Información del usuario -->
+          <UCard>
+            <div class="flex items-center gap-3">
+              <UIcon name="i-heroicons-user-circle" class="w-8 h-8 text-gray-500" />
+              <div>
+                <p class="font-semibold">{{ user?.name || user?.username }}</p>
+                <p class="text-sm text-gray-500">{{ user?.email }}</p>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Control de grabación -->
+          <UCard>
+            <template #header>
+              <div class="flex items-center gap-2">
+                <UIcon name="i-heroicons-microphone" class="w-5 h-5" />
+                <h3 class="text-lg font-semibold">Grabación</h3>
+              </div>
+            </template>
+
+            <div class="flex flex-col items-center gap-4">
+              <!-- Botón de grabación -->
+              <button
+                @click="toggleRecording"
+                :disabled="isTranscribing"
+                class="relative w-32 h-32 rounded-full transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-offset-2"
+                :class="isRecording
+                  ? 'bg-red-500 hover:bg-red-600 focus:ring-red-300 scale-110'
+                  : 'bg-green-500 hover:bg-green-600 focus:ring-green-300'
+                "
+              >
+                <UIcon
+                  :name="isRecording ? 'i-heroicons-stop' : 'i-heroicons-microphone'"
+                  class="w-16 h-16 text-white mx-auto"
+                />
+
+                <!-- Animación de pulso cuando está grabando -->
+                <span
+                  v-if="isRecording"
+                  class="absolute inset-0 rounded-full bg-red-500 animate-ping opacity-75"
+                />
+              </button>
+
+              <!-- Estado -->
+              <div class="text-center">
+                <p v-if="isRecording" class="text-lg font-semibold text-red-600">
+                  Grabando...
+                </p>
+                <p v-else-if="isTranscribing" class="text-lg font-semibold text-blue-600">
+                  Transcribiendo...
+                </p>
+                <p v-else class="text-lg text-gray-600">
+                  Presiona para grabar
+                </p>
+              </div>
+
+              <!-- Instrucciones -->
+              <div class="text-sm text-gray-500 text-center">
+                <p>1. Presiona el botón para iniciar la grabación</p>
+                <p>2. Habla claramente</p>
+                <p>3. Presiona nuevamente para detener y transcribir</p>
+                <p class="mt-2 text-xs">El texto se copiará automáticamente al portapapeles</p>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Resultado de transcripción -->
+          <UCard v-if="transcription || error">
+            <template #header>
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <UIcon name="i-heroicons-document-text" class="w-5 h-5" />
+                  <h3 class="text-lg font-semibold">
+                    {{ error ? 'Error' : 'Transcripción' }}
+                  </h3>
+                </div>
+                <button
+                  v-if="transcription"
+                  @click="copyText"
+                  class="text-sm text-green-600 hover:text-green-700 flex items-center gap-1"
+                >
+                  <UIcon name="i-heroicons-clipboard-document" class="w-4 h-4" />
+                  Copiar
+                </button>
+              </div>
+            </template>
+
+            <!-- Error -->
+            <div v-if="error" class="text-red-600">
+              <p class="font-semibold">Ha ocurrido un error:</p>
+              <p class="text-sm mt-1">{{ error }}</p>
+            </div>
+
+            <!-- Transcripción -->
+            <div v-else class="space-y-3">
+              <p class="text-gray-800 dark:text-gray-200 whitespace-pre-wrap">
+                {{ transcription }}
+              </p>
+              <div class="flex gap-2">
+                <UButton
+                  icon="i-heroicons-clipboard-document"
+                  size="sm"
+                  color="green"
+                  @click="copyText"
+                >
+                  Copiar
+                </UButton>
+                <UButton
+                  icon="i-heroicons-x-mark"
+                  size="sm"
+                  color="gray"
+                  variant="soft"
+                  @click="clear"
+                >
+                  Limpiar
+                </UButton>
+              </div>
+            </div>
+          </UCard>
+
+          <!-- Sesión -->
+          <div class="flex justify-center gap-3">
+            <UButton
+              icon="i-heroicons-arrow-right-on-rectangle"
+              color="gray"
+              variant="soft"
+              @click="logout"
+            >
+              Cerrar Sesión
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Mensaje si no está autenticado -->
+        <UCard v-else class="text-center">
+          <div class="py-8">
+            <UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
+            <h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
+            <p class="text-gray-600 dark:text-gray-400">
+              Authentik Proxy Outpost debería redirigirte automáticamente.
+            </p>
+          </div>
+        </UCard>
+      </div>
+    </UContainer>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+const { isAuthenticated, user, logout } = useAuthentik()
+const {
+  isRecording,
+  isTranscribing,
+  transcription,
+  error,
+  startRecording,
+  stopRecording,
+  clearTranscription,
+  copyToClipboard
+} = useWhisper()
+
+const toast = useToast()
+
+const toggleRecording = () => {
+  if (isRecording.value) {
+    stopRecording()
+  } else {
+    startRecording()
+  }
+}
+
+const copyText = async () => {
+  const success = await copyToClipboard()
+  if (success) {
+    toast.add({
+      title: 'Copiado',
+      description: 'Texto copiado al portapapeles',
+      icon: 'i-heroicons-check-circle',
+      color: 'green'
+    })
+  } else {
+    toast.add({
+      title: 'Error',
+      description: 'No se pudo copiar al portapapeles',
+      icon: 'i-heroicons-x-circle',
+      color: 'red'
+    })
+  }
+}
+
+const clear = () => {
+  clearTranscription()
+}
+
+// Configurar meta tags para PWA
+useHead({
+  link: [
+    { rel: 'manifest', href: '/manifest.webmanifest' },
+    { rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
+    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
+  ],
+  meta: [
+    { name: 'theme-color', content: '#10b981' },
+    { name: 'mobile-web-app-capable', content: 'yes' },
+    { name: 'apple-mobile-web-app-capable', content: 'yes' },
+    { name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
+  ]
+})
+</script>

nuxt4/app/assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

nuxt4/app/components/auth/BackendVerificationButton.vue

@@ -0,0 +1,82 @@
+<template>
+  <UButton
+    color="orange"
+    size="lg"
+    variant="outline"
+    :loading="loading"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-server" />
+    </template>
+    Verificación Backend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const toast = useToast()
+const loading = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+
+  try {
+    // Consultar el endpoint que lee los headers del servidor
+    const response = await $fetch<{
+      authenticated: boolean
+      user?: {
+        username: string
+        groups: string[]
+      }
+    }>('/api/auth/status')
+
+    if (response.authenticated && response.user) {
+      const groupCount = response.user.groups.length
+      const groupList = response.user.groups.join(', ') || 'Ninguno'
+
+      toast.add({
+        title: 'Verificación Backend',
+        description: `Usuario: ${response.user.username}
+Grupos (${groupCount}): ${groupList}`,
+        color: 'orange',
+        icon: 'i-heroicons-server-stack',
+        timeout: 5000
+      })
+    } else {
+      toast.add({
+        title: 'No Autenticado (Backend)',
+        description: 'No hay sesión activa en el servidor',
+        color: 'warning',
+        icon: 'i-heroicons-exclamation-triangle'
+      })
+    }
+  } catch (error) {
+    toast.add({
+      title: 'Error Backend',
+      description: 'No se pudo verificar en el servidor',
+      color: 'error',
+      icon: 'i-heroicons-x-circle'
+    })
+    console.error('Backend verification error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -1px rgba(249, 115, 22, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(249, 115, 22, 0.2), 0 4px 6px -2px rgba(249, 115, 22, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>

nuxt4/app/components/auth/CheckAuthentikAdminsButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="authentik Admins"
+    label="Authentik Admins"
+    icon="i-heroicons-shield-check"
+    color="red"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/CheckGrupoPruebaButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="grupo-prueba"
+    label="Grupo Prueba"
+    icon="i-heroicons-beaker"
+    color="blue"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/CheckLvl0Button.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="lvl0"
+    label="Level 0"
+    icon="i-heroicons-key"
+    color="green"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/CheckPublicAccessButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <AuthGroupCheckButton
+    group-name="public-access"
+    label="Acceso Público"
+    icon="i-heroicons-globe-alt"
+    color="gray"
+    variant="soft"
+    :verify-backend="verifyBackend"
+  />
+</template>
+
+<script setup lang="ts">
+interface Props {
+  verifyBackend?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  verifyBackend: false
+})
+</script>

nuxt4/app/components/auth/FrontendVerificationButton.vue

@@ -0,0 +1,59 @@
+<template>
+  <UButton
+    color="purple"
+    size="lg"
+    variant="outline"
+    @click="handleClick"
+    class="verification-button"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-computer-desktop" />
+    </template>
+    Verificación Frontend
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+const toast = useToast()
+
+const handleClick = () => {
+  if (!user.value) {
+    toast.add({
+      title: 'No Autenticado',
+      description: 'No hay usuario autenticado',
+      color: 'warning',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    return
+  }
+
+  const groupCount = user.value.groups.length
+  const groupList = user.value.groups.join(', ') || 'Ninguno'
+
+  toast.add({
+    title: 'Verificación Frontend',
+    description: `Usuario: ${user.value.username}
+Grupos (${groupCount}): ${groupList}`,
+    color: 'purple',
+    icon: 'i-heroicons-check-badge',
+    timeout: 5000
+  })
+}
+</script>
+
+<style scoped>
+.verification-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.1), 0 2px 4px -1px rgba(147, 51, 234, 0.06);
+}
+
+.verification-button:hover {
+  transform: translateY(-2px) scale(1.02);
+  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.2), 0 4px 6px -2px rgba(147, 51, 234, 0.1);
+}
+
+.verification-button:active {
+  transform: translateY(0) scale(0.98);
+}
+</style>

nuxt4/app/components/auth/GroupCheckButton.vue

@@ -0,0 +1,112 @@
+<template>
+  <UButton
+    :color="color"
+    :size="size"
+    :variant="variant"
+    :loading="loading"
+    @click="handleClick"
+    class="group-check-button"
+  >
+    <template #leading>
+      <UIcon :name="icon" />
+    </template>
+    <slot>{{ label }}</slot>
+  </UButton>
+</template>
+
+<script setup lang="ts">
+import type { ButtonColor, ButtonVariant, ButtonSize } from '#ui/types'
+
+interface Props {
+  groupName: string
+  label?: string
+  icon?: string
+  color?: ButtonColor
+  variant?: ButtonVariant
+  size?: ButtonSize
+  verifyBackend?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Verificar Grupo',
+  icon: 'i-heroicons-shield-check',
+  color: 'primary',
+  variant: 'soft',
+  size: 'lg',
+  verifyBackend: false
+})
+
+const { hasGroup, checkGroupBackend } = useAuthentik()
+const toast = useToast()
+const loading = ref(false)
+
+const handleClick = async () => {
+  loading.value = true
+
+  try {
+    if (props.verifyBackend) {
+      // Verificación backend
+      const hasAccess = await checkGroupBackend(props.groupName)
+
+      if (hasAccess) {
+        toast.add({
+          title: 'Acceso Permitido (Backend)',
+          description: `Perteneces al grupo: ${props.groupName}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        toast.add({
+          title: 'Acceso Denegado (Backend)',
+          description: `No perteneces al grupo: ${props.groupName}`,
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+    } else {
+      // Verificación frontend
+      const hasAccess = hasGroup(props.groupName)
+
+      if (hasAccess) {
+        toast.add({
+          title: 'Acceso Permitido (Frontend)',
+          description: `Perteneces al grupo: ${props.groupName}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        toast.add({
+          title: 'Acceso Denegado (Frontend)',
+          description: `No perteneces al grupo: ${props.groupName}`,
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+    }
+  } catch (error) {
+    toast.add({
+      title: 'Error de Verificación',
+      description: 'No se pudo verificar el grupo',
+      color: 'error',
+      icon: 'i-heroicons-exclamation-triangle'
+    })
+    console.error('Group check error:', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<style scoped>
+.group-check-button {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.group-check-button:hover {
+  transform: translateY(-2px);
+}
+
+.group-check-button:active {
+  transform: translateY(0);
+}
+</style>

nuxt4/app/components/auth/LoginButton.vue

@@ -0,0 +1,19 @@
+<template>
+  <UButton
+    color="success"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
+    </template>
+    Iniciar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  // Recargar la página para forzar redirect de Authentik al login
+  window.location.reload()
+}
+</script>

nuxt4/app/components/auth/LogoutButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="error"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-on-rectangle" />
+    </template>
+    Cerrar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { logout } = useAuthentik()
+
+const handleClick = () => {
+  logout()
+}
+</script>

nuxt4/app/components/auth/ProfileButton.vue

@@ -0,0 +1,20 @@
+<template>
+  <UButton
+    color="primary"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-user-circle" />
+    </template>
+    Ver Perfil
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { goToProfile } = useAuthentik()
+
+const handleClick = () => {
+  goToProfile()
+}
+</script>

nuxt4/app/components/auth/SessionStatusButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="info"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-information-circle" />
+    </template>
+    Estado de Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { checkSessionStatus } = useAuthentik()
+
+const handleClick = () => {
+  checkSessionStatus()
+}
+</script>

nuxt4/app/components/auth/UserAvatar.vue

@@ -0,0 +1,20 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <div class="flex items-center gap-4">
+      <UAvatar
+        :src="user.avatar"
+        :alt="user.name || user.username"
+        size="xl"
+      />
+      <div class="flex-1">
+        <h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
+        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ID: {{ user.uid }}</p>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>

nuxt4/app/components/auth/UserMetadata.vue

@@ -0,0 +1,90 @@
+<template>
+  <UCard v-if="user" class="w-full">
+    <template #header>
+      <h3 class="font-semibold text-lg flex items-center gap-2">
+        <UIcon name="i-heroicons-information-circle" />
+        Metadatos del Usuario
+      </h3>
+    </template>
+
+    <div class="space-y-3">
+      <!-- Username -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-at-symbol" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Username</p>
+          <p class="font-medium">{{ user.username }}</p>
+        </div>
+      </div>
+
+      <!-- Email -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-envelope" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Email</p>
+          <p class="font-medium">{{ user.email }}</p>
+        </div>
+      </div>
+
+      <!-- Nombre completo -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">Nombre Completo</p>
+          <p class="font-medium">{{ user.name || 'No especificado' }}</p>
+        </div>
+      </div>
+
+      <!-- UID -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-key" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400">ID Único</p>
+          <p class="font-mono text-sm">{{ user.uid }}</p>
+        </div>
+      </div>
+
+      <!-- Grupos -->
+      <div class="flex items-start gap-3">
+        <UIcon name="i-heroicons-user-group" class="text-gray-500 dark:text-gray-400 mt-0.5" />
+        <div class="flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Grupos</p>
+          <div class="flex flex-wrap gap-2">
+            <UBadge
+              v-for="group in user.groups"
+              :key="group"
+              color="primary"
+              variant="soft"
+            >
+              {{ group }}
+            </UBadge>
+            <UBadge v-if="user.groups.length === 0" color="gray" variant="soft">
+              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>
+
+<script setup lang="ts">
+const { user } = useAuthentik()
+</script>

nuxt4/app/composables/useAuthentik.ts

@@ -0,0 +1,220 @@
+/**
+ * Composable para leer información de usuario de Authentik
+ * Los headers son inyectados por Authentik Proxy Outpost
+ *
+ * Documentación de headers disponibles:
+ * - x-authentik-username: Username del usuario
+ * - x-authentik-email: Email del usuario
+ * - x-authentik-name: Nombre completo del usuario
+ * - x-authentik-uid: UID único del usuario
+ * - x-authentik-groups: Grupos separados por |
+ * - x-authentik-meta-app: Slug de la aplicación en Authentik
+ * - x-authentik-meta-outpost: Nombre del outpost
+ * - Nota: Los roles RBAC son internos de Authentik y no se exponen via headers
+ */
+
+interface AuthentikUser {
+  username: string
+  email: string | undefined
+  name: string | undefined
+  groups: string[]
+  uid: string | undefined
+  avatar: string
+  // Metadata de la aplicación y outpost
+  appSlug?: string
+  outpostName?: string
+}
+
+interface AuthStatusResponse {
+  authenticated: boolean
+  user?: {
+    username: string
+    name?: string
+  }
+}
+
+export const useAuthentik = () => {
+  // Leer headers en el servidor y almacenarlos en state
+  const authentikUser = useState<AuthentikUser | null>('authentikUser', () => {
+    // Solo en el servidor, leer los headers
+    if (import.meta.server) {
+      const headers = useRequestHeaders()
+
+      const username = headers['x-authentik-username']
+      const email = headers['x-authentik-email']
+      const name = headers['x-authentik-name']
+      const groups = headers['x-authentik-groups']
+      const uid = headers['x-authentik-uid']
+      const appSlug = headers['x-authentik-meta-app']
+      const outpostName = headers['x-authentik-meta-outpost']
+
+      // Si no hay username, el usuario no está autenticado
+      if (!username) {
+        return null
+      }
+
+      return {
+        username,
+        email,
+        name,
+        groups: groups ? groups.split('|').filter(g => g.trim()) : [],
+        uid,
+        appSlug,
+        outpostName,
+        // Generar avatar URL usando UI Avatars
+        avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
+      }
+    }
+
+    return null
+  })
+
+  const user = computed(() => authentikUser.value)
+  const isAuthenticated = computed(() => !!user.value)
+
+  const logout = () => {
+    // Logout completo: invalida la sesión de Authentik completamente
+    // Esto cierra sesión en todas las aplicaciones
+    const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
+    navigateTo(`${authentikUrl}/flows/-/default/invalidation/`, { external: true })
+  }
+
+  const goToProfile = () => {
+    // URL de perfil de Authentik
+    const authentikUrl = useRuntimeConfig().public.authentikUrl || 'https://authentik.nucleoriofrio.com'
+    navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
+  }
+
+  const checkSessionStatus = async () => {
+    const toast = useToast()
+
+    // Verificar si está offline primero
+    if (!navigator.onLine) {
+      toast.add({
+        title: 'Modo Offline',
+        description: 'No se puede validar sesión sin conexión',
+        color: 'neutral',
+        icon: 'i-heroicons-wifi'
+      })
+      return
+    }
+
+    // Mostrar toast de "verificando..."
+    toast.add({
+      title: 'Verificando sesión...',
+      description: 'Consultando estado en Authentik',
+      color: 'info',
+      icon: 'i-heroicons-arrow-path'
+    })
+
+    try {
+      // Consultar el endpoint de API que verifica contra Authentik
+      const response = await $fetch<AuthStatusResponse>('/api/auth/status')
+
+      if (response.authenticated && response.user) {
+        // Sesión activa en Authentik
+        toast.add({
+          title: 'Sesión Activa',
+          description: `Conectado como: ${response.user.name || response.user.username}`,
+          color: 'success',
+          icon: 'i-heroicons-check-circle'
+        })
+      } else {
+        // Sin sesión en Authentik
+        toast.add({
+          title: 'Sin Sesión',
+          description: 'No hay sesión activa en Authentik',
+          color: 'warning',
+          icon: 'i-heroicons-exclamation-triangle',
+          actions: [{
+            label: 'Iniciar Sesión',
+            onClick: () => {
+              // Recargar la página forzará a Authentik a redirigir al login
+              window.location.reload()
+            }
+          }]
+        })
+      }
+    } catch (error: unknown) {
+      // Verificar si está offline ahora (pudo desconectarse durante la petición)
+      if (!navigator.onLine) {
+        toast.add({
+          title: 'Modo Offline',
+          description: 'No se puede validar sesión sin conexión',
+          color: 'neutral',
+          icon: 'i-heroicons-wifi'
+        })
+        return
+      }
+
+      // Si el error es por redirect de Authentik (CORS/fetch error), significa que no hay sesión
+      // Authentik redirige a login cuando no hay sesión válida, causando error CORS en fetch
+      const errorMessage = (error as Error)?.message || String(error)
+      const isCorsOrRedirectError = errorMessage.includes('Failed to fetch') ||
+                                     errorMessage.includes('CORS') ||
+                                     (error as any)?.statusCode === 302
+
+      if (isCorsOrRedirectError) {
+        // Interpretar como sesión expirada/inválida
+        toast.add({
+          title: 'Sin Sesión',
+          description: 'No hay sesión activa en Authentik',
+          color: 'warning',
+          icon: 'i-heroicons-exclamation-triangle',
+          actions: [{
+            label: 'Iniciar Sesión',
+            onClick: () => {
+              // Recargar la página forzará a Authentik a redirigir al login
+              window.location.reload()
+            }
+          }]
+        })
+      } else {
+        // Error real de red o servidor
+        toast.add({
+          title: 'Error',
+          description: 'No se pudo verificar el estado de la sesión',
+          color: 'error',
+          icon: 'i-heroicons-x-circle'
+        })
+      }
+      console.error('Error checking session status:', error)
+    }
+  }
+
+  /**
+   * Verifica si el usuario pertenece a un grupo específico (frontend)
+   * Lee los grupos desde el estado local (headers de Authentik)
+   */
+  const hasGroup = (groupName: string): boolean => {
+    if (!user.value) return false
+    return user.value.groups.includes(groupName)
+  }
+
+  /**
+   * Verifica si el usuario pertenece a un grupo específico (backend)
+   * Consulta al servidor para validar contra Authentik
+   */
+  const checkGroupBackend = async (groupName: string): Promise<boolean> => {
+    try {
+      const response = await $fetch<{ hasGroup: boolean }>(`/api/auth/check-group`, {
+        method: 'POST',
+        body: { groupName }
+      })
+      return response.hasGroup
+    } catch (error) {
+      console.error('Error checking group membership:', error)
+      return false
+    }
+  }
+
+  return {
+    user,
+    isAuthenticated,
+    logout,
+    goToProfile,
+    checkSessionStatus,
+    hasGroup,
+    checkGroupBackend
+  }
+}

nuxt4/app/composables/useWhisper.ts

@@ -0,0 +1,137 @@
+export const useWhisper = () => {
+  const isRecording = useState<boolean>('whisper_isRecording', () => false)
+  const isTranscribing = useState<boolean>('whisper_isTranscribing', () => false)
+  const transcription = useState<string>('whisper_transcription', () => '')
+  const error = useState<string | null>('whisper_error', () => null)
+
+  let mediaRecorder: MediaRecorder | null = null
+  let audioChunks: Blob[] = []
+
+  const startRecording = async () => {
+    try {
+      error.value = null
+
+      // Solicitar permisos de micrófono
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          sampleRate: 16000
+        }
+      })
+
+      // Crear MediaRecorder
+      const mimeType = MediaRecorder.isTypeSupported('audio/webm')
+        ? 'audio/webm'
+        : 'audio/mp4'
+
+      mediaRecorder = new MediaRecorder(stream, {
+        mimeType
+      })
+
+      audioChunks = []
+
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunks.push(event.data)
+        }
+      }
+
+      mediaRecorder.onstop = async () => {
+        // Detener todos los tracks del stream
+        stream.getTracks().forEach(track => track.stop())
+
+        // Procesar la transcripción
+        await processTranscription()
+      }
+
+      mediaRecorder.start()
+      isRecording.value = true
+
+      console.log('[Whisper] Grabación iniciada')
+    } catch (err: any) {
+      console.error('[Whisper] Error al iniciar grabación:', err)
+      error.value = err.message || 'Error al acceder al micrófono'
+    }
+  }
+
+  const stopRecording = () => {
+    if (mediaRecorder && isRecording.value) {
+      mediaRecorder.stop()
+      isRecording.value = false
+      console.log('[Whisper] Grabación detenida')
+    }
+  }
+
+  const processTranscription = async () => {
+    try {
+      isTranscribing.value = true
+      error.value = null
+
+      // Crear blob del audio
+      const audioBlob = new Blob(audioChunks, { type: 'audio/webm' })
+
+      console.log('[Whisper] Enviando audio para transcripción:', {
+        size: audioBlob.size,
+        type: audioBlob.type
+      })
+
+      // Crear FormData
+      const formData = new FormData()
+      formData.append('file', audioBlob, 'recording.webm')
+      formData.append('language', 'es')
+
+      // Enviar al backend
+      const response = await $fetch('/api/whisper/transcribe', {
+        method: 'POST',
+        body: formData
+      })
+
+      if (response.success) {
+        transcription.value = response.transcription
+        console.log('[Whisper] Transcripción exitosa:', response.transcription)
+
+        // Copiar al clipboard automáticamente
+        if (navigator.clipboard) {
+          await navigator.clipboard.writeText(response.transcription)
+          console.log('[Whisper] Copiado al clipboard')
+        }
+      }
+    } catch (err: any) {
+      console.error('[Whisper] Error en transcripción:', err)
+      error.value = err.message || 'Error al procesar la transcripción'
+    } finally {
+      isTranscribing.value = false
+      audioChunks = []
+    }
+  }
+
+  const clearTranscription = () => {
+    transcription.value = ''
+    error.value = null
+  }
+
+  const copyToClipboard = async () => {
+    if (transcription.value && navigator.clipboard) {
+      try {
+        await navigator.clipboard.writeText(transcription.value)
+        return true
+      } catch (err) {
+        console.error('[Whisper] Error al copiar:', err)
+        return false
+      }
+    }
+    return false
+  }
+
+  return {
+    isRecording: readonly(isRecording),
+    isTranscribing: readonly(isTranscribing),
+    transcription: readonly(transcription),
+    error: readonly(error),
+    startRecording,
+    stopRecording,
+    clearTranscription,
+    copyToClipboard
+  }
+}

nuxt4/app/server/api/debug/all-headers.ts

@@ -0,0 +1,15 @@
+/**
+ * Endpoint temporal de debug para ver TODOS los headers
+ * ELIMINAR después de debugging
+ */
+export default defineEventHandler((event) => {
+  const headers = getHeaders(event)
+
+  return {
+    timestamp: new Date().toISOString(),
+    headers: headers,
+    authentikHeaders: Object.fromEntries(
+      Object.entries(headers).filter(([key]) => key.toLowerCase().startsWith('x-authentik-'))
+    )
+  }
+})