Login de usuarios wip

Lo que ya sirve:
- Ya se puede hacer login con email y contraseña
- Se puede hacer logout con un botón en el header
- La página te redirige a login si no hay sesion
- La página te redirige a dashboard desde login si hay sesión

Lo que falta:
- Comprobar si se atrapan y manejan correctamente los errores por violación a RLS
- Cambiar la BDD para asignar roles y permisos a usuarios
- Comprobar si de manera defensiva se reestablecen los roles/permisos cuando el usuario intenta hacer algo que no está permitido

.github/copilot-instructions.md

@@ -0,0 +1 @@
+Al funcionar como agente, ignora los problemas de eslint del orden de imports

bun.lock

@@ -20,7 +20,7 @@
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@stepperize/react": "^5.1.9",
-        "@supabase/supabase-js": "^2.90.1",
+        "@supabase/supabase-js": "^2.98.0",
         "@tailwindcss/vite": "^4.0.6",
         "@tanstack/react-devtools": "^0.7.0",
         "@tanstack/react-query": "^5.66.5",
@@ -441,17 +441,17 @@
 
     "@stylistic/eslint-plugin": ["@stylistic/eslint-plugin@5.7.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/types": "^8.53.1", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "estraverse": "^5.3.0", "picomatch": "^4.0.3" }, "peerDependencies": { "eslint": ">=9.0.0" } }, "sha512-zjTUwIsEfT+k9BmXwq1QEFYsb4afBlsI1AXFyWQBgggMzwBFOuu92pGrE5OFx90IOjNl+lUbQoTG7f8S0PkOdg=="],
 
-    "@supabase/auth-js": ["@supabase/auth-js@2.93.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-pC0Ek4xk4z6q7A/3+UuZ/eYgfFUUQTg3DhapzrAgJnFGDJDFDyGCj6v9nIz8+3jfLqSZ3QKGe6AoEodYjShghg=="],
+    "@supabase/auth-js": ["@supabase/auth-js@2.98.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-GBH361T0peHU91AQNzOlIrjUZw9TZbB9YDRiyFgk/3Kvr3/Z1NWUZ2athWTfHhwNNi8IrW00foyFxQD9IO/Trg=="],
 
-    "@supabase/functions-js": ["@supabase/functions-js@2.93.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-Ott2IcIXHGupaC0nX9WNEiJAX4OdlGRu9upkkURaQHbaLdz9JuCcHxlwTERgtgjMpikbIWHfMM1M9QTQFYABiA=="],
+    "@supabase/functions-js": ["@supabase/functions-js@2.98.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-N/xEyiNU5Org+d+PNCpv+TWniAXRzxIURxDYsS/m2I/sfAB/HcM9aM2Dmf5edj5oWb9GxID1OBaZ8NMmPXL+Lg=="],
 
-    "@supabase/postgrest-js": ["@supabase/postgrest-js@2.93.1", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-uRKKQJBDnfi6XFNFPNMh9+u3HT2PCgp065PcMPmG7e0xGuqvLtN89QxO2/SZcGbw2y1+mNBz0yUs5KmyNqF2fA=="],
+    "@supabase/postgrest-js": ["@supabase/postgrest-js@2.98.0", "", { "dependencies": { "tslib": "2.8.1" } }, "sha512-v6e9WeZuJijzUut8HyXu6gMqWFepIbaeaMIm1uKzei4yLg9bC9OtEW9O14LE/9ezqNbSAnSLO5GtOLFdm7Bpkg=="],
 
-    "@supabase/realtime-js": ["@supabase/realtime-js@2.93.1", "", { "dependencies": { "@types/phoenix": "^1.6.6", "@types/ws": "^8.18.1", "tslib": "2.8.1", "ws": "^8.18.2" } }, "sha512-2WaP/KVHPlQDjWM6qe4wOZz6zSRGaXw1lfXf4thbfvk3C3zPPKqXRyspyYnk3IhphyxSsJ2hQ/cXNOz48008tg=="],
+    "@supabase/realtime-js": ["@supabase/realtime-js@2.98.0", "", { "dependencies": { "@types/phoenix": "^1.6.6", "@types/ws": "^8.18.1", "tslib": "2.8.1", "ws": "^8.18.2" } }, "sha512-rOWt28uGyFipWOSd+n0WVMr9kUXiWaa7J4hvyLCIHjRFqWm1z9CaaKAoYyfYMC1Exn3WT8WePCgiVhlAtWC2yw=="],
 
-    "@supabase/storage-js": ["@supabase/storage-js@2.93.1", "", { "dependencies": { "iceberg-js": "^0.8.1", "tslib": "2.8.1" } }, "sha512-3KVwd4S1i1BVPL6KIywe5rnruNQXSkLyvrdiJmwnqwbCcDujQumARdGWBPesqCjOPKEU2M9ORWKAsn+2iLzquA=="],
+    "@supabase/storage-js": ["@supabase/storage-js@2.98.0", "", { "dependencies": { "iceberg-js": "^0.8.1", "tslib": "2.8.1" } }, "sha512-tzr2mG+v7ILSAZSfZMSL9OPyIH4z1ikgQ8EcQTKfMRz4EwmlFt3UnJaGzSOxyvF5b+fc9So7qdSUWTqGgeLokQ=="],
 
-    "@supabase/supabase-js": ["@supabase/supabase-js@2.93.1", "", { "dependencies": { "@supabase/auth-js": "2.93.1", "@supabase/functions-js": "2.93.1", "@supabase/postgrest-js": "2.93.1", "@supabase/realtime-js": "2.93.1", "@supabase/storage-js": "2.93.1" } }, "sha512-FJTgS5s0xEgRQ3u7gMuzGObwf3jA4O5Ki/DgCDXx94w1pihLM4/WG3XFa4BaCJYfuzLxLcv6zPPA5tDvBUjAUg=="],
+    "@supabase/supabase-js": ["@supabase/supabase-js@2.98.0", "", { "dependencies": { "@supabase/auth-js": "2.98.0", "@supabase/functions-js": "2.98.0", "@supabase/postgrest-js": "2.98.0", "@supabase/realtime-js": "2.98.0", "@supabase/storage-js": "2.98.0" } }, "sha512-Ohc97CtInLwZyiSASz7tT9/Abm/vqnIbO9REp+PivVUII8UZsuI3bngRQnYgJdFoOIwvaEII1fX1qy8x0CyNiw=="],
 
     "@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
 

components.json

@@ -10,6 +10,7 @@
     "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
@@ -17,11 +18,11 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide",
   "registries": {
     "@shadcn-studio": "https://shadcnstudio.com/r/{name}.json",
     "@ss-components": "https://shadcnstudio.com/r/components/{name}.json",
     "@ss-blocks": "https://shadcnstudio.com/r/blocks/{name}.json",
-    "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json"
+    "@ss-themes": "https://shadcnstudio.com/r/themes/{name}.json",
+    "@supabase": "https://supabase.com/ui/r/{name}.json"
   }
 }

package.json

@@ -33,7 +33,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@stepperize/react": "^5.1.9",
-    "@supabase/supabase-js": "^2.90.1",
+    "@supabase/supabase-js": "^2.98.0",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-devtools": "^0.7.0",
     "@tanstack/react-query": "^5.66.5",

src/components/Header.tsx

@@ -1,9 +1,20 @@
-import { Link } from '@tanstack/react-router'
+import { Link, useNavigate } from '@tanstack/react-router'
-import { Home, Menu, Network, X } from 'lucide-react'
+import { Home, LogOut, Menu, Network, X } from 'lucide-react'
 import { useState } from 'react'
 
+import { supabaseBrowser } from '@/data/supabase/client'
+
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false)
+  const navigate = useNavigate()
+
+  const handleLogout = async () => {
+    try {
+      await supabaseBrowser().auth.signOut()
+    } finally {
+      void navigate({ to: '/login', replace: true })
+    }
+  }
 
   return (
     <>
@@ -21,6 +32,16 @@ export default function Header() {
             <img src="/lasalle-logo.svg" alt="La Salle Logo" className="h-10" />
           </Link>
         </h1>
+
+        <button
+          onClick={handleLogout}
+          className="ml-auto inline-flex items-center gap-2 rounded-lg p-2 transition-colors hover:bg-gray-700"
+          aria-label="Logout"
+          title="Logout"
+        >
+          <LogOut size={20} />
+          <span className="hidden sm:inline">Salir</span>
+        </button>
       </header>
 
       <aside

src/components/asignaturas/wizard/PasoBasicosForm/PasoSugerenciasForm.tsx

@@ -26,7 +26,7 @@ export default function PasoSugerenciasForm({
   onChange: Dispatch<SetStateAction<NewSubjectWizardState>>
 }) {
   const enfoque = wizard.iaMultiple?.enfoque ?? ''
-  const cantidadDeSugerencias = wizard.iaMultiple?.cantidadDeSugerencias ?? 10
+  const cantidadDeSugerencias = wizard.iaMultiple?.cantidadDeSugerencias ?? 5
   const isLoading = wizard.iaMultiple?.isLoading ?? false
 
   const [showConservacionTooltip, setShowConservacionTooltip] = useState(false)
@@ -163,7 +163,7 @@ export default function PasoSugerenciasForm({
               Cantidad de sugerencias
             </Label>
             <Input
-              placeholder="Ej. 10"
+              placeholder="Ej. 5"
               value={cantidadDeSugerencias}
               type="number"
               min={1}

src/components/asignaturas/wizard/WizardControls.tsx

@@ -1,11 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { useNavigate } from '@tanstack/react-router'
 import { Loader2 } from 'lucide-react'
-import { useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
-import type { AIGenerateSubjectInput, AIGenerateSubjectJsonInput } from '@/data'
+import type { AISubjectUnifiedInput } from '@/data'
 import type { NewSubjectWizardState } from '@/features/asignaturas/nueva/types'
 import type { TablesInsert } from '@/types/supabase'
+import type { RealtimeChannel } from '@supabase/supabase-js'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -13,6 +14,7 @@ import {
   useGenerateSubjectAI,
   qk,
   useCreateSubjectManual,
+  subjects_get_maybe,
 } from '@/data'
 
 export function WizardControls({
@@ -41,6 +43,154 @@ export function WizardControls({
   const generateSubjectAI = useGenerateSubjectAI()
   const createSubjectManual = useCreateSubjectManual()
   const [isSpinningIA, setIsSpinningIA] = useState(false)
+  const cancelledRef = useRef(false)
+  const realtimeChannelRef = useRef<RealtimeChannel | null>(null)
+  const watchSubjectIdRef = useRef<string | null>(null)
+  const watchTimeoutRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    cancelledRef.current = false
+    return () => {
+      cancelledRef.current = true
+    }
+  }, [])
+
+  const stopSubjectWatch = useCallback(() => {
+    if (watchTimeoutRef.current) {
+      window.clearTimeout(watchTimeoutRef.current)
+      watchTimeoutRef.current = null
+    }
+
+    watchSubjectIdRef.current = null
+
+    const ch = realtimeChannelRef.current
+    if (ch) {
+      realtimeChannelRef.current = null
+      try {
+        supabaseBrowser().removeChannel(ch)
+      } catch {
+        // noop
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      stopSubjectWatch()
+    }
+  }, [stopSubjectWatch])
+
+  const handleSubjectReady = (args: {
+    id: string
+    plan_estudio_id: string
+    estado?: unknown
+  }) => {
+    if (cancelledRef.current) return
+
+    const estado = String(args.estado ?? '').toLowerCase()
+    if (estado === 'generando') return
+
+    stopSubjectWatch()
+    setIsSpinningIA(false)
+    setWizard((w) => ({ ...w, isLoading: false }))
+
+    navigate({
+      to: `/planes/${args.plan_estudio_id}/asignaturas/${args.id}`,
+      state: { showConfetti: true },
+    })
+  }
+
+  const beginSubjectWatch = (args: { subjectId: string; planId: string }) => {
+    stopSubjectWatch()
+
+    watchSubjectIdRef.current = args.subjectId
+
+    // Timeout de seguridad (mismo límite que teníamos con polling)
+    watchTimeoutRef.current = window.setTimeout(
+      () => {
+        if (cancelledRef.current) return
+        if (watchSubjectIdRef.current !== args.subjectId) return
+
+        stopSubjectWatch()
+        setIsSpinningIA(false)
+        setWizard((w) => ({
+          ...w,
+          isLoading: false,
+          errorMessage:
+            'La generación está tardando demasiado. Intenta de nuevo en unos minutos.',
+        }))
+      },
+      6 * 60 * 1000,
+    )
+
+    const supabase = supabaseBrowser()
+    const channel = supabase.channel(`asignaturas-status-${args.subjectId}`)
+    realtimeChannelRef.current = channel
+
+    channel.on(
+      'postgres_changes',
+      {
+        event: 'UPDATE',
+        schema: 'public',
+        table: 'asignaturas',
+        filter: `id=eq.${args.subjectId}`,
+      },
+      (payload) => {
+        if (cancelledRef.current) return
+
+        const next: any = (payload as any)?.new
+        if (!next?.id || !next?.plan_estudio_id) return
+        handleSubjectReady({
+          id: String(next.id),
+          plan_estudio_id: String(next.plan_estudio_id),
+          estado: next.estado,
+        })
+      },
+    )
+
+    channel.subscribe((status) => {
+      if (cancelledRef.current) return
+      if (status === 'CHANNEL_ERROR' || status === 'TIMED_OUT') {
+        stopSubjectWatch()
+        setIsSpinningIA(false)
+        setWizard((w) => ({
+          ...w,
+          isLoading: false,
+          errorMessage:
+            'No se pudo suscribir al estado de la asignatura. Intenta de nuevo.',
+        }))
+      }
+    })
+  }
+
+  const uploadAiAttachments = async (args: {
+    planId: string
+    files: Array<{ file: File }>
+  }): Promise<Array<string>> => {
+    const supabase = supabaseBrowser()
+    if (!args.files.length) return []
+
+    const runId = crypto.randomUUID()
+    const basePath = `planes/${args.planId}/asignaturas/ai/${runId}`
+
+    const keys: Array<string> = []
+    for (const f of args.files) {
+      const safeName = (f.file.name || 'archivo').replace(/[\\/]+/g, '_')
+      const key = `${basePath}/${crypto.randomUUID()}-${safeName}`
+
+      const { error } = await supabase.storage
+        .from('ai-storage')
+        .upload(key, f.file, {
+          contentType: f.file.type || undefined,
+        })
+
+      if (error) throw new Error(error.message)
+      keys.push(key)
+    }
+
+    return keys
+  }
+
   const handleCreate = async () => {
     setWizard((w) => ({
       ...w,
@@ -48,48 +198,99 @@ export function WizardControls({
       errorMessage: null,
     }))
 
+    let startedWaiting = false
+
     try {
       if (wizard.tipoOrigen === 'IA_SIMPLE') {
-        const aiInput: AIGenerateSubjectInput = {
+        if (!wizard.plan_estudio_id) {
+          throw new Error('Plan de estudio inválido.')
+        }
+        if (!wizard.datosBasicos.estructuraId) {
+          throw new Error('Estructura inválida.')
+        }
+        if (!wizard.datosBasicos.nombre.trim()) {
+          throw new Error('Nombre inválido.')
+        }
+        if (wizard.datosBasicos.creditos == null) {
+          throw new Error('Créditos inválidos.')
+        }
+
+        console.log(`${new Date().toISOString()} - Insertando asignatura IA`)
+
+        const supabase = supabaseBrowser()
+        const placeholder: TablesInsert<'asignaturas'> = {
           plan_estudio_id: wizard.plan_estudio_id,
-          datosBasicos: {
+          estructura_id: wizard.datosBasicos.estructuraId,
+          nombre: wizard.datosBasicos.nombre,
+          codigo: wizard.datosBasicos.codigo ?? null,
+          tipo: wizard.datosBasicos.tipo ?? undefined,
+          creditos: wizard.datosBasicos.creditos,
+          horas_academicas: wizard.datosBasicos.horasAcademicas ?? null,
+          horas_independientes: wizard.datosBasicos.horasIndependientes ?? null,
+          estado: 'generando',
+          tipo_origen: 'IA',
+        }
+
+        const { data: inserted, error: insertError } = await supabase
+          .from('asignaturas')
+          .insert(placeholder)
+          .select('id,plan_estudio_id')
+          .single()
+
+        if (insertError) throw new Error(insertError.message)
+        const subjectId = inserted.id
+
+        setIsSpinningIA(true)
+
+        // Inicia watch realtime antes de disparar la Edge para no perder updates.
+        startedWaiting = true
+        beginSubjectWatch({ subjectId, planId: wizard.plan_estudio_id })
+
+        const archivosAdjuntos = await uploadAiAttachments({
+          planId: wizard.plan_estudio_id,
+          files: (wizard.iaConfig?.archivosAdjuntos ?? []).map((x) => ({
+            file: x.file,
+          })),
+        })
+
+        const payload: AISubjectUnifiedInput = {
+          datosUpdate: {
+            id: subjectId,
+            plan_estudio_id: wizard.plan_estudio_id,
+            estructura_id: wizard.datosBasicos.estructuraId,
             nombre: wizard.datosBasicos.nombre,
-            codigo: wizard.datosBasicos.codigo,
+            codigo: wizard.datosBasicos.codigo ?? null,
-            tipo: wizard.datosBasicos.tipo!,
+            tipo: wizard.datosBasicos.tipo ?? null,
-            creditos: wizard.datosBasicos.creditos!,
+            creditos: wizard.datosBasicos.creditos,
-            horasIndependientes: wizard.datosBasicos.horasIndependientes,
+            horas_academicas: wizard.datosBasicos.horasAcademicas ?? null,
-            horasAcademicas: wizard.datosBasicos.horasAcademicas,
+            horas_independientes:
-            estructuraId: wizard.datosBasicos.estructuraId!,
+              wizard.datosBasicos.horasIndependientes ?? null,
           },
           iaConfig: {
             descripcionEnfoqueAcademico:
-              wizard.iaConfig!.descripcionEnfoqueAcademico,
+              wizard.iaConfig?.descripcionEnfoqueAcademico ?? undefined,
             instruccionesAdicionalesIA:
-              wizard.iaConfig!.instruccionesAdicionalesIA,
+              wizard.iaConfig?.instruccionesAdicionalesIA ?? undefined,
-            archivosReferencia: wizard.iaConfig!.archivosReferencia,
+            archivosAdjuntos,
-            repositoriosReferencia:
-              wizard.iaConfig!.repositoriosReferencia || [],
-            archivosAdjuntos: wizard.iaConfig!.archivosAdjuntos || [],
           },
         }
 
         console.log(
-          `${new Date().toISOString()} - Enviando a generar asignatura con IA`,
+          `${new Date().toISOString()} - Disparando Edge IA asignatura (unified)`,
         )
 
-        setIsSpinningIA(true)
+        await generateSubjectAI.mutateAsync(payload as any)
-        const asignatura = await generateSubjectAI.mutateAsync(aiInput)
+
-        // await new Promise((resolve) => setTimeout(resolve, 20000)) // debug
+        // Fallback: una lectura puntual por si el UPDATE llegó antes de suscribir.
-        setIsSpinningIA(false)
+        const latest = await subjects_get_maybe(subjectId)
-        // console.log(
+        if (latest) {
-        //   `${new Date().toISOString()} - Asignatura IA generada`,
+          handleSubjectReady({
-        //   asignatura,
+            id: latest.id as any,
-        // )
+            plan_estudio_id: latest.plan_estudio_id as any,
+            estado: (latest as any).estado,
+          })
+        }
 
-        navigate({
-          to: `/planes/${wizard.plan_estudio_id}/asignaturas/${asignatura.id}`,
-          state: { showConfetti: true },
-        })
         return
       }
 
@@ -108,6 +309,15 @@ export function WizardControls({
 
         const supabase = supabaseBrowser()
 
+        setIsSpinningIA(true)
+
+        const archivosAdjuntos = await uploadAiAttachments({
+          planId: wizard.plan_estudio_id,
+          files: (wizard.iaConfig?.archivosAdjuntos ?? []).map((x) => ({
+            file: x.file,
+          })),
+        })
+
         const placeholders: Array<TablesInsert<'asignaturas'>> = selected.map(
           (s): TablesInsert<'asignaturas'> => ({
             plan_estudio_id: wizard.plan_estudio_id,
@@ -141,16 +351,33 @@ export function WizardControls({
         // Disparar generación en paralelo (no bloquear navegación)
         insertedIds.forEach((id, idx) => {
           const s = selected[idx]
-          const payload: AIGenerateSubjectJsonInput = {
+          const creditosForEdge =
-            id,
+            typeof s.creditos === 'number' && s.creditos > 0
-            descripcionEnfoqueAcademico: s.descripcion,
+              ? s.creditos
-            // (opcionales) parches directos si el edge los usa
+              : undefined
-            estructura_id: wizard.estructuraId,
+          const payload: AISubjectUnifiedInput = {
-            linea_plan_id: s.linea_plan_id,
+            datosUpdate: {
-            numero_ciclo: s.numero_ciclo,
+              id,
+              plan_estudio_id: wizard.plan_estudio_id,
+              estructura_id: wizard.estructuraId ?? undefined,
+              nombre: s.nombre,
+              codigo: s.codigo ?? null,
+              tipo: s.tipo ?? null,
+              creditos: creditosForEdge,
+              horas_academicas: s.horasAcademicas ?? null,
+              horas_independientes: s.horasIndependientes ?? null,
+              numero_ciclo: s.numero_ciclo ?? null,
+              linea_plan_id: s.linea_plan_id ?? null,
+            },
+            iaConfig: {
+              descripcionEnfoqueAcademico: s.descripcion,
+              instruccionesAdicionalesIA:
+                wizard.iaConfig?.instruccionesAdicionalesIA ?? undefined,
+              archivosAdjuntos,
+            },
           }
 
-          void generateSubjectAI.mutateAsync(payload).catch((e) => {
+          void generateSubjectAI.mutateAsync(payload as any).catch((e) => {
             console.error('Error generando asignatura IA (multiple):', e)
           })
         })
@@ -166,6 +393,8 @@ export function WizardControls({
           resetScroll: false,
         })
 
+        setIsSpinningIA(false)
+
         return
       }
 
@@ -195,14 +424,17 @@ export function WizardControls({
       }
     } catch (err: any) {
       setIsSpinningIA(false)
+      stopSubjectWatch()
       setWizard((w) => ({
         ...w,
         isLoading: false,
         errorMessage: err?.message ?? 'Error creando la asignatura',
       }))
     } finally {
-      setIsSpinningIA(false)
+      if (!startedWaiting) {
-      setWizard((w) => ({ ...w, isLoading: false }))
+        setIsSpinningIA(false)
+        setWizard((w) => ({ ...w, isLoading: false }))
+      }
     }
   }
 

src/components/auth/ExternalLoginForm.tsx

@@ -1,18 +1,44 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 
-// import { supabase } from '@/lib/supabase'
 import { LoginInput } from '../ui/LoginInput'
 import { SubmitButton } from '../ui/SubmitButton'
 
+import { throwIfError } from '@/data/api/_helpers'
+import { qk } from '@/data/query/keys'
+import { supabaseBrowser } from '@/data/supabase/client'
+
 export function ExternalLoginForm() {
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const qc = useQueryClient()
+  const navigate = useNavigate({ from: '/login' })
+  const supabase = supabaseBrowser()
 
   const submit = async () => {
-    /* await supabase.auth.signInWithPassword({
+    setIsLoading(true)
-      email,
+    setError(null)
-      password,
+
-    })*/
+    try {
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      })
+      throwIfError(error)
+
+      qc.invalidateQueries({ queryKey: qk.session() })
+      qc.invalidateQueries({ queryKey: qk.auth })
+      await navigate({ to: '/dashboard', replace: true })
+    } catch (e: unknown) {
+      const anyErr = e as any
+      setError(anyErr?.message ?? 'No se pudo iniciar sesión')
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   return (
@@ -34,7 +60,11 @@ export function ExternalLoginForm() {
         value={password}
         onChange={setPassword}
       />
-      <SubmitButton />
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+      <SubmitButton
+        text={isLoading ? 'Iniciando…' : 'Iniciar sesión'}
+        disabled={isLoading}
+      />
     </form>
   )
 }

src/components/auth/InternalLoginForm.tsx

@@ -1,18 +1,45 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 
-// import { supabase } from '@/lib/supabase'
 import { LoginInput } from '../ui/LoginInput'
 import { SubmitButton } from '../ui/SubmitButton'
 
+import { throwIfError } from '@/data/api/_helpers'
+import { qk } from '@/data/query/keys'
+import { supabaseBrowser } from '@/data/supabase/client'
+
 export function InternalLoginForm() {
   const [clave, setClave] = useState('')
   const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const qc = useQueryClient()
+  const navigate = useNavigate({ from: '/login' })
+  const supabase = supabaseBrowser()
 
   const submit = async () => {
-    /* await supabase.auth.signInWithPassword({
+    setIsLoading(true)
-      email: `${clave}@ulsa.mx`,
+    setError(null)
-      password,
+
-    })*/
+    try {
+      const email = clave.includes('@') ? clave : `${clave}@ulsa.mx`
+      const { error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      })
+      throwIfError(error)
+
+      qc.invalidateQueries({ queryKey: qk.session() })
+      qc.invalidateQueries({ queryKey: qk.auth })
+      await navigate({ to: '/dashboard', replace: true })
+    } catch (e: unknown) {
+      const anyErr = e as any
+      setError(anyErr?.message ?? 'No se pudo iniciar sesión')
+    } finally {
+      setIsLoading(false)
+    }
   }
 
   return (
@@ -30,7 +57,11 @@ export function InternalLoginForm() {
         value={password}
         onChange={setPassword}
       />
-      <SubmitButton />
+      {error ? <p className="text-sm text-red-600">{error}</p> : null}
+      <SubmitButton
+        text={isLoading ? 'Iniciando…' : 'Iniciar sesión'}
+        disabled={isLoading}
+      />
     </form>
   )
 }

src/components/planes/wizard/WizardControls.tsx

@@ -1,15 +1,21 @@
 import { useNavigate } from '@tanstack/react-router'
 import { Loader2 } from 'lucide-react'
-import { useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import type { AIGeneratePlanInput } from '@/data'
 import type { NivelPlanEstudio, TipoCiclo } from '@/data/types/domain'
 import type { NewPlanWizardState } from '@/features/planes/nuevo/types'
 // import type { Database } from '@/types/supabase'
+import type { RealtimeChannel } from '@supabase/supabase-js'
 
 import { Button } from '@/components/ui/button'
-// import { supabaseBrowser } from '@/data'
+import { plans_get_maybe } from '@/data/api/plans.api'
-import { useCreatePlanManual, useGeneratePlanAI } from '@/data/hooks/usePlans'
+import {
+  useCreatePlanManual,
+  useDeletePlanEstudio,
+  useGeneratePlanAI,
+} from '@/data/hooks/usePlans'
+import { supabaseBrowser } from '@/data/supabase/client'
 
 export function WizardControls({
   errorMessage,
@@ -35,9 +41,152 @@ export function WizardControls({
   const navigate = useNavigate()
   const generatePlanAI = useGeneratePlanAI()
   const createPlanManual = useCreatePlanManual()
+  const deletePlan = useDeletePlanEstudio()
   const [isSpinningIA, setIsSpinningIA] = useState(false)
-  // const supabaseClient = supabaseBrowser()
+  const cancelledRef = useRef(false)
-  // const persistPlanFromAI = usePersistPlanFromAI()
+  const realtimeChannelRef = useRef<RealtimeChannel | null>(null)
+  const watchPlanIdRef = useRef<string | null>(null)
+  const watchTimeoutRef = useRef<number | null>(null)
+
+  useEffect(() => {
+    cancelledRef.current = false
+    return () => {
+      cancelledRef.current = true
+    }
+  }, [])
+
+  const stopPlanWatch = useCallback(() => {
+    if (watchTimeoutRef.current) {
+      window.clearTimeout(watchTimeoutRef.current)
+      watchTimeoutRef.current = null
+    }
+
+    watchPlanIdRef.current = null
+
+    const ch = realtimeChannelRef.current
+    if (ch) {
+      realtimeChannelRef.current = null
+      try {
+        supabaseBrowser().removeChannel(ch)
+      } catch {
+        // noop
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      stopPlanWatch()
+    }
+  }, [stopPlanWatch])
+
+  const checkPlanStateAndAct = useCallback(
+    async (planId: string) => {
+      if (cancelledRef.current) return
+      if (watchPlanIdRef.current !== planId) return
+
+      const plan = await plans_get_maybe(planId as any)
+      if (!plan) return
+
+      const clave = String(plan.estados_plan?.clave ?? '').toUpperCase()
+
+      if (clave.startsWith('GENERANDO')) return
+
+      if (clave.startsWith('BORRADOR')) {
+        stopPlanWatch()
+        setIsSpinningIA(false)
+        setWizard((w) => ({ ...w, isLoading: false }))
+        navigate({
+          to: `/planes/${plan.id}`,
+          state: { showConfetti: true },
+        })
+        return
+      }
+
+      if (clave.startsWith('FALLID')) {
+        stopPlanWatch()
+        setIsSpinningIA(false)
+
+        deletePlan
+          .mutateAsync(plan.id)
+          .catch(() => {
+            // Si falla el borrado, igual mostramos el error.
+          })
+          .finally(() => {
+            setWizard((w) => ({
+              ...w,
+              isLoading: false,
+              errorMessage: 'La generación del plan falló',
+            }))
+          })
+      }
+    },
+    [deletePlan, navigate, setWizard, stopPlanWatch],
+  )
+
+  const beginPlanWatch = useCallback(
+    (planId: string) => {
+      stopPlanWatch()
+      watchPlanIdRef.current = planId
+
+      watchTimeoutRef.current = window.setTimeout(
+        () => {
+          if (cancelledRef.current) return
+          if (watchPlanIdRef.current !== planId) return
+
+          stopPlanWatch()
+          setIsSpinningIA(false)
+          setWizard((w) => ({
+            ...w,
+            isLoading: false,
+            errorMessage:
+              'La generación está tardando demasiado. Intenta de nuevo en unos minutos.',
+          }))
+        },
+        6 * 60 * 1000,
+      )
+
+      const supabase = supabaseBrowser()
+      const channel = supabase.channel(`planes-status-${planId}`)
+      realtimeChannelRef.current = channel
+
+      channel.on(
+        'postgres_changes',
+        {
+          event: '*',
+          schema: 'public',
+          table: 'planes_estudio',
+          filter: `id=eq.${planId}`,
+        },
+        () => {
+          void checkPlanStateAndAct(planId)
+        },
+      )
+
+      channel.subscribe((status) => {
+        const st = status as
+          | 'SUBSCRIBED'
+          | 'TIMED_OUT'
+          | 'CLOSED'
+          | 'CHANNEL_ERROR'
+        if (cancelledRef.current) return
+        if (st === 'CHANNEL_ERROR' || st === 'TIMED_OUT') {
+          stopPlanWatch()
+          setIsSpinningIA(false)
+          setWizard((w) => ({
+            ...w,
+            isLoading: false,
+            errorMessage:
+              'No se pudo suscribir al estado del plan. Intenta de nuevo.',
+          }))
+        }
+      })
+
+      // Fallback inmediato por si el plan ya cambió antes de suscribir.
+      void checkPlanStateAndAct(planId)
+    },
+    [checkPlanStateAndAct, setWizard, stopPlanWatch],
+  )
 
   const handleCreate = async () => {
     // Start loading
@@ -82,14 +231,16 @@ export function WizardControls({
         console.log(`${new Date().toISOString()} - Enviando a generar plan IA`)
 
         setIsSpinningIA(true)
-        const plan = await generatePlanAI.mutateAsync(aiInput as any)
+        const resp: any = await generatePlanAI.mutateAsync(aiInput as any)
-        setIsSpinningIA(false)
+        const planId = resp?.plan?.id ?? resp?.id
-        console.log(`${new Date().toISOString()} - Plan IA generado`, plan)
+        console.log(`${new Date().toISOString()} - Plan IA generado`, resp)
 
-        navigate({
+        if (!planId) {
-          to: `/planes/${plan.id}`,
+          throw new Error('No se pudo obtener el id del plan generado por IA')
-          state: { showConfetti: true },
+        }
-        })
+
+        // Inicia realtime; los efectos navegan o marcan error.
+        beginPlanWatch(String(planId))
         return
       }
 
@@ -114,14 +265,14 @@ export function WizardControls({
       }
     } catch (err: any) {
       setIsSpinningIA(false)
+      stopPlanWatch()
       setWizard((w) => ({
         ...w,
         isLoading: false,
         errorMessage: err?.message ?? 'Error generando el plan',
       }))
     } finally {
-      setIsSpinningIA(false)
+      // Si entramos en watch realtime, el loading se corta desde checkPlanStateAndAct.
-      setWizard((w) => ({ ...w, isLoading: false }))
     }
   }
 

src/components/ui/SubmitButton.tsx

@@ -1,13 +1,14 @@
 interface Props {
   text?: string
+  disabled?: boolean
 }
 
-export function SubmitButton({ text = 'Iniciar sesión' }: Props) {
+export function SubmitButton({ text = 'Iniciar sesión', disabled }: Props) {
   return (
     <button
       type="submit"
-      className="w-full bg-[#7b0f1d] text-white py-2 rounded-lg
+      disabled={disabled}
-                 font-semibold hover:opacity-90 transition"
+      className="w-full rounded-lg bg-[#7b0f1d] py-2 font-semibold text-white transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60"
     >
       {text}
     </button>

src/data/api/plans.api.ts

@@ -144,6 +144,48 @@ export async function plans_get(planId: UUID): Promise<PlanEstudio> {
   return requireData(data, 'Plan no encontrado.')
 }
 
+/**
+ * Variante de `plans_get` que NO lanza si no existe (devuelve null).
+ * Útil para flujos de polling donde el plan puede tardar en aparecer.
+ */
+export async function plans_get_maybe(
+  planId: UUID,
+): Promise<PlanEstudio | null> {
+  const supabase = supabaseBrowser()
+
+  const { data, error } = await supabase
+    .from('planes_estudio')
+    .select(
+      `
+      *,
+      carreras (*, facultades(*)),
+      estructuras_plan (*),
+      estados_plan (*)
+    `,
+    )
+    .eq('id', planId)
+    .maybeSingle()
+
+  throwIfError(error)
+  return (data ?? null) as unknown as PlanEstudio | null
+}
+
+export async function plans_delete(planId: UUID): Promise<{ id: UUID }> {
+  const supabase = supabaseBrowser()
+
+  const { data, error } = await supabase
+    .from('planes_estudio')
+    .delete()
+    .eq('id', planId)
+    .select('id')
+    .maybeSingle()
+
+  throwIfError(error)
+
+  // Si por alguna razón no retorna fila (RLS / triggers), devolvemos el id solicitado.
+  return { id: ((data as any)?.id ?? planId) as UUID }
+}
+
 export async function plan_lineas_list(
   planId: UUID,
 ): Promise<Array<LineaPlan>> {

src/data/api/subjects.api.ts

@@ -15,7 +15,6 @@ import type {
   TipoAsignatura,
   UUID,
 } from '../types/domain'
-import type { UploadedFile } from '@/components/planes/wizard/PasoDetallesPanel/FileDropZone'
 import type {
   AsignaturaSugerida,
   DataAsignaturaSugerida,
@@ -178,54 +177,49 @@ export async function subjects_create_manual(
   return requireData(data, 'No se pudo crear la asignatura.')
 }
 
-export type AIGenerateSubjectInput = {
+/**
-  plan_estudio_id: Asignatura['plan_estudio_id']
+ * Nuevo payload unificado (JSON) para la Edge `ai_generate_subject`.
-  datosBasicos: {
+ * - Siempre incluye `datosUpdate.plan_estudio_id`.
-    nombre: Asignatura['nombre']
+ * - `datosUpdate.id` es opcional (si no existe, la Edge puede crear).
-    codigo?: Asignatura['codigo']
+ * En el frontend, insertamos primero y usamos `id` para actualizar.
-    tipo: Asignatura['tipo'] | null
+ */
-    creditos: Asignatura['creditos'] | null
+export type AISubjectUnifiedInput = {
-    horasAcademicas?: Asignatura['horas_academicas'] | null
+  datosUpdate: Partial<{
-    horasIndependientes?: Asignatura['horas_independientes'] | null
+    id: string
-    estructuraId: Asignatura['estructura_id'] | null
+    plan_estudio_id: string
+    estructura_id: string
+    nombre: string
+    codigo: string | null
+    tipo: string | null
+    creditos: number
+    horas_academicas: number | null
+    horas_independientes: number | null
+    numero_ciclo: number | null
+    linea_plan_id: string | null
+    orden_celda: number | null
+  }> & {
+    plan_estudio_id: string
   }
-  // clonInterno?: {
-  //   facultadId?: string
-  //   carreraId?: string
-  //   planOrigenId?: string
-  //   asignaturaOrigenId?: string | null
-  // }
-  // clonTradicional?: {
-  //   archivoWordAsignaturaId: string | null
-  //   archivosAdicionalesIds: Array<string>
-  // }
   iaConfig?: {
-    descripcionEnfoqueAcademico: string
+    descripcionEnfoqueAcademico?: string
-    instruccionesAdicionalesIA: string
+    instruccionesAdicionalesIA?: string
-    archivosReferencia: Array<string>
+    archivosAdjuntos?: Array<string>
-    repositoriosReferencia?: Array<string>
-    archivosAdjuntos?: Array<UploadedFile>
   }
 }
 
-/**
+export async function subjects_get_maybe(
- * Edge (JSON): actualizar/llenar una asignatura existente por id.
+  subjectId: UUID,
- * Nota: este flujo NO acepta `instruccionesAdicionalesIA` (solo FormData lo usa).
+): Promise<Asignatura | null> {
- */
+  const supabase = supabaseBrowser()
-export type AIGenerateSubjectJsonInput = Partial<{
+
-  plan_estudio_id: Asignatura['plan_estudio_id']
+  const { data, error } = await supabase
-  nombre: Asignatura['nombre']
+    .from('asignaturas')
-  codigo: Asignatura['codigo']
+    .select('id,plan_estudio_id,estado')
-  tipo: Asignatura['tipo'] | null
+    .eq('id', subjectId)
-  creditos: Asignatura['creditos']
+    .maybeSingle()
-  horas_academicas: Asignatura['horas_academicas'] | null
+
-  horas_independientes: Asignatura['horas_independientes'] | null
+  throwIfError(error)
-  estructura_id: Asignatura['estructura_id'] | null
+  return (data ?? null) as unknown as Asignatura | null
-  linea_plan_id: Asignatura['linea_plan_id'] | null
-  numero_ciclo: Asignatura['numero_ciclo'] | null
-  descripcionEnfoqueAcademico: string
-}> & {
-  id: Asignatura['id']
 }
 
 export type GenerateSubjectSuggestionsInput = {
@@ -263,30 +257,8 @@ export async function generate_subject_suggestions(
 }
 
 export async function ai_generate_subject(
-  input: AIGenerateSubjectInput | AIGenerateSubjectJsonInput,
+  input: AISubjectUnifiedInput,
 ): Promise<any> {
-  if ('datosBasicos' in input) {
-    const edgeFunctionBody = new FormData()
-    edgeFunctionBody.append('plan_estudio_id', input.plan_estudio_id)
-    edgeFunctionBody.append('datosBasicos', JSON.stringify(input.datosBasicos))
-    edgeFunctionBody.append(
-      'iaConfig',
-      JSON.stringify({
-        ...input.iaConfig,
-        archivosAdjuntos: undefined, // los manejamos aparte
-      }),
-    )
-    input.iaConfig?.archivosAdjuntos?.forEach((file) => {
-      edgeFunctionBody.append(`archivosAdjuntos`, file.file)
-    })
-    return invokeEdge<any>(
-      EDGE.ai_generate_subject,
-      edgeFunctionBody,
-      undefined,
-      supabaseBrowser(),
-    )
-  }
-
   return invokeEdge<any>(EDGE.ai_generate_subject, input, {
     headers: { 'Content-Type': 'application/json' },
   })

src/data/hooks/useAuth.ts

@@ -1,59 +1,145 @@
-import { useEffect } from "react";
+import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect } from 'react'
-import { supabaseBrowser } from "../supabase/client";
+
-import { qk } from "../query/keys";
+import { throwIfError } from '../api/_helpers'
-import { throwIfError } from "../api/_helpers";
+import { qk } from '../query/keys'
+import { supabaseBrowser } from '../supabase/client'
 
 export function useSession() {
-  const supabase = supabaseBrowser();
+  const supabase = supabaseBrowser()
-  const qc = useQueryClient();
+  const qc = useQueryClient()
 
   const query = useQuery({
     queryKey: qk.session(),
     queryFn: async () => {
-      const { data, error } = await supabase.auth.getSession();
+      const { data, error } = await supabase.auth.getSession()
-      throwIfError(error);
+      throwIfError(error)
-      return data.session ?? null;
+      return data.session ?? null
     },
     staleTime: Infinity,
-  });
+  })
 
   useEffect(() => {
     const { data } = supabase.auth.onAuthStateChange(() => {
-      qc.invalidateQueries({ queryKey: qk.session() });
+      qc.invalidateQueries({ queryKey: qk.session() })
-      qc.invalidateQueries({ queryKey: qk.meProfile() });
+      qc.invalidateQueries({ queryKey: qk.meProfile() })
-      qc.invalidateQueries({ queryKey: qk.auth });
+      qc.invalidateQueries({ queryKey: qk.meAccess() })
-    });
+      qc.invalidateQueries({ queryKey: qk.auth })
+    })
 
-    return () => data.subscription.unsubscribe();
+    return () => data.subscription.unsubscribe()
-  }, [supabase, qc]);
+  }, [supabase, qc])
 
-  return query;
+  return query
 }
 
 export function useMeProfile() {
-  const supabase = supabaseBrowser();
+  const supabase = supabaseBrowser()
 
   return useQuery({
     queryKey: qk.meProfile(),
     queryFn: async () => {
-      const { data: u, error: uErr } = await supabase.auth.getUser();
+      const { data: u, error: uErr } = await supabase.auth.getUser()
-      throwIfError(uErr);
+      throwIfError(uErr)
-      const userId = u.user?.id;
+      const userId = u.user?.id
-      if (!userId) return null;
+      if (!userId) return null
 
       const { data, error } = await supabase
-        .from("usuarios_app")
+        .from('usuarios_app')
-        .select("id,nombre_completo,email,externo,creado_en,actualizado_en")
+        .select('id,nombre_completo,email,externo,creado_en,actualizado_en')
-        .eq("id", userId)
+        .eq('id', userId)
-        .single();
+        .single()
 
       // si aún no existe perfil en usuarios_app, permite null (tu seed/trigger puede crearlo)
-      if (error && (error as any).code === "PGRST116") return null;
+      if (error && (error as any).code === 'PGRST116') return null
 
-      throwIfError(error);
+      throwIfError(error)
-      return data ?? null;
+      return data ?? null
     },
     staleTime: 60_000,
-  });
+  })
+}
+
+export type MeAccessRole = {
+  assignmentId: string
+  rolId: string
+  clave: string
+  nombre: string
+  descripcion: string | null
+  facultadId: string | null
+  carreraId: string | null
+}
+
+export type MeAccess = {
+  userId: string
+  roles: Array<MeAccessRole>
+  permissions: Array<string>
+}
+
+/**
+ * Database-first RBAC: obtiene roles del usuario desde tablas app (NO desde JWT).
+ *
+ * Nota: el esquema actual modela roles con `usuarios_roles` -> `roles`.
+ */
+export function useMeAccess() {
+  const supabase = supabaseBrowser()
+
+  return useQuery({
+    queryKey: qk.meAccess(),
+    queryFn: async (): Promise<MeAccess | null> => {
+      const { data: u, error: uErr } = await supabase.auth.getUser()
+      throwIfError(uErr)
+      const userId = u.user?.id
+      if (!userId) return null
+
+      const { data, error } = await supabase
+        .from('usuarios_roles')
+        .select(
+          'id,rol_id,facultad_id,carrera_id,roles(id,clave,nombre,descripcion)',
+        )
+        .eq('usuario_id', userId)
+
+      throwIfError(error)
+
+      const roles: Array<MeAccessRole> = (data ?? [])
+        .map((row: any) => {
+          const rol = row.roles
+          if (!rol) return null
+          return {
+            assignmentId: row.id,
+            rolId: rol.id,
+            clave: rol.clave,
+            nombre: rol.nombre,
+            descripcion: rol.descripcion ?? null,
+            facultadId: row.facultad_id ?? null,
+            carreraId: row.carrera_id ?? null,
+          } satisfies MeAccessRole
+        })
+        .filter(Boolean) as Array<MeAccessRole>
+
+      // Por ahora, los permisos granulares se derivan de claves de rol.
+      // Si luego existe una tabla `roles_permisos`, aquí se expande a permisos reales.
+      const permissions = Array.from(new Set(roles.map((r) => r.clave)))
+
+      return {
+        userId,
+        roles,
+        permissions,
+      }
+    },
+    staleTime: 30_000,
+    refetchOnWindowFocus: true,
+  })
+}
+
+export function useAuth() {
+  const session = useSession()
+  const meProfile = useMeProfile()
+  const meAccess = useMeAccess()
+
+  return {
+    session,
+    meProfile,
+    meAccess,
+  }
 }

src/data/hooks/usePlans.ts

@@ -4,6 +4,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
+import { useEffect } from 'react'
 
 import {
   ai_generate_plan,
@@ -12,6 +13,7 @@ import {
   plan_lineas_list,
   plans_clone_from_existing,
   plans_create_manual,
+  plans_delete,
   plans_generate_document,
   plans_get,
   plans_get_document,
@@ -25,6 +27,7 @@ import {
 } from '../api/plans.api'
 import { lineas_delete } from '../api/subjects.api'
 import { qk } from '../query/keys'
+import { supabaseBrowser } from '../supabase/client'
 
 import type {
   PlanListFilters,
@@ -71,23 +74,79 @@ export function usePlanLineas(planId: UUID | null | undefined) {
 }
 
 export function usePlanAsignaturas(planId: UUID | null | undefined) {
-  return useQuery({
+  const qc = useQueryClient()
+
+  const query = useQuery({
     queryKey: planId
       ? qk.planAsignaturas(planId)
       : ['planes', 'asignaturas', null],
     queryFn: () => plan_asignaturas_list(planId as UUID),
     enabled: Boolean(planId),
-
-    refetchInterval: (query) => {
-      const data = query.state.data
-      if (!Array.isArray(data)) return false
-      const hayGenerando = data.some(
-        (a: any) => (a as { estado?: unknown }).estado === 'generando',
-      )
-      return hayGenerando ? 500 : false
-    },
-    refetchIntervalInBackground: true,
   })
+
+  useEffect(() => {
+    if (!planId) return
+
+    const supabase = supabaseBrowser()
+    const channel = supabase.channel(`plan-asignaturas-${planId}`)
+
+    channel.on(
+      'postgres_changes',
+      {
+        event: '*',
+        schema: 'public',
+        table: 'asignaturas',
+        filter: `plan_estudio_id=eq.${planId}`,
+      },
+      (payload: {
+        eventType?: 'INSERT' | 'UPDATE' | 'DELETE'
+        new?: any
+        old?: any
+      }) => {
+        const eventType = payload.eventType
+
+        if (eventType === 'DELETE') {
+          const oldRow: any = payload.old
+          const deletedId = oldRow?.id
+          if (!deletedId) return
+
+          qc.setQueryData(qk.planAsignaturas(planId), (prev) => {
+            if (!Array.isArray(prev)) return prev
+            return prev.filter((a: any) => String(a?.id) !== String(deletedId))
+          })
+          return
+        }
+
+        const newRow: any = payload.new
+        if (!newRow?.id) return
+
+        qc.setQueryData(qk.planAsignaturas(planId), (prev) => {
+          if (!Array.isArray(prev)) return prev
+
+          const idx = prev.findIndex(
+            (a: any) => String(a?.id) === String(newRow.id),
+          )
+          if (idx === -1) return [...prev, newRow]
+
+          const next = [...prev]
+          next[idx] = { ...prev[idx], ...newRow }
+          return next
+        })
+      },
+    )
+
+    channel.subscribe()
+
+    return () => {
+      try {
+        supabase.removeChannel(channel)
+      } catch {
+        // noop
+      }
+    }
+  }, [planId, qc])
+
+  return query
 }
 
 export function usePlanHistorial(
@@ -263,6 +322,23 @@ export function useTransitionPlanEstado() {
   })
 }
 
+export function useDeletePlanEstudio() {
+  const qc = useQueryClient()
+
+  return useMutation({
+    mutationFn: (planId: UUID) => plans_delete(planId),
+    onSuccess: (_ok, planId) => {
+      qc.invalidateQueries({ queryKey: ['planes', 'list'] })
+      qc.removeQueries({ queryKey: qk.plan(planId) })
+      qc.removeQueries({ queryKey: qk.planMaybe(planId) })
+      qc.removeQueries({ queryKey: qk.planAsignaturas(planId) })
+      qc.removeQueries({ queryKey: qk.planLineas(planId) })
+      qc.removeQueries({ queryKey: qk.planHistorial(planId) })
+      qc.removeQueries({ queryKey: qk.planDocumento(planId) })
+    },
+  })
+}
+
 export function useGeneratePlanDocumento() {
   const qc = useQueryClient()
 

src/data/query/keys.ts

@@ -2,6 +2,7 @@ export const qk = {
   auth: ['auth'] as const,
   session: () => ['auth', 'session'] as const,
   meProfile: () => ['auth', 'meProfile'] as const,
+  meAccess: () => ['auth', 'meAccess'] as const,
 
   facultades: () => ['meta', 'facultades'] as const,
   carreras: (facultadId?: string | null) =>
@@ -13,6 +14,7 @@ export const qk = {
 
   planesList: (filters: unknown) => ['planes', 'list', filters] as const,
   plan: (planId: string) => ['planes', 'detail', planId] as const,
+  planMaybe: (planId: string) => ['planes', 'detail-maybe', planId] as const,
   planLineas: (planId: string) => ['planes', planId, 'lineas'] as const,
   planAsignaturas: (planId: string) =>
     ['planes', planId, 'asignaturas'] as const,
@@ -22,6 +24,8 @@ export const qk = {
   sugerenciasAsignaturas: () => ['asignaturas', 'sugerencias'] as const,
   asignatura: (asignaturaId: string) =>
     ['asignaturas', 'detail', asignaturaId] as const,
+  asignaturaMaybe: (asignaturaId: string) =>
+    ['asignaturas', 'detail-maybe', asignaturaId] as const,
   asignaturaBibliografia: (asignaturaId: string) =>
     ['asignaturas', asignaturaId, 'bibliografia'] as const,
   asignaturaHistorial: (asignaturaId: string) =>

src/data/query/queryClient.tsx

@@ -1,20 +1,57 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  MutationCache,
+  QueryCache,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+
+import { qk } from './keys'
+
+import type React from 'react'
+
+function isRlsViolationError(error: unknown): boolean {
+  const anyErr = error as any
+  const code = anyErr?.code
+  const status = anyErr?.status ?? anyErr?.response?.status
+  console.log('Checking RLS violation error:', { code, status })
+  // Supabase/PostgREST suele devolver 403 (Forbidden) o código PG 42501 (insufficient_privilege)
+  return status === 403 || code === '42501'
+}
 
 export function getContext() {
-  const queryClient = new QueryClient(
+  const queryClientRef: { current: QueryClient | null } = { current: null }
-    {
+
-  defaultOptions: {
+  const handleAuthzDesync = (error: unknown) => {
-    queries: {
+    if (!isRlsViolationError(error)) return
-      staleTime: 30_000,
+    // Forzar resincronización “database-first” del rol/permisos
-      refetchOnWindowFocus: false,
+    console.log('RLS violation detected, invalidating queries...')
-      retry: (failureCount) => failureCount < 2,
+    queryClientRef.current?.invalidateQueries({ queryKey: qk.meAccess() })
+  }
+
+  const queryClient = new QueryClient({
+    queryCache: new QueryCache({
+      onError: (error) => {
+        handleAuthzDesync(error)
+      },
+    }),
+    mutationCache: new MutationCache({
+      onError: (error) => {
+        handleAuthzDesync(error)
+      },
+    }),
+    defaultOptions: {
+      queries: {
+        staleTime: 30_000,
+        refetchOnWindowFocus: false,
+        retry: (failureCount) => failureCount < 2,
+      },
+      mutations: {
+        retry: 0,
+      },
     },
-    mutations: {
+  })
-      retry: 0,
+
-    },
+  queryClientRef.current = queryClient
-  },
-}
-  )
   return {
     queryClient,
   }

src/main.tsx

@@ -6,6 +6,7 @@ import reportWebVitals from './reportWebVitals.ts'
 import { routeTree } from './routeTree.gen'
 
 import * as TanStackQueryProvider from '@/data/query/queryClient.tsx'
+import { supabaseBrowser } from '@/data/supabase/client'
 
 import './styles.css'
 
@@ -16,6 +17,7 @@ const router = createRouter({
   routeTree,
   context: {
     ...TanStackQueryProviderContext,
+    supabase: supabaseBrowser(),
   },
   defaultPreload: 'intent',
   scrollRestoration: true,

src/routes/__root.tsx

@@ -1,22 +1,59 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
+import {
+  Outlet,
+  createRootRouteWithContext,
+  redirect,
+  useNavigate,
+  useRouterState,
+} from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { useEffect } from 'react'
 
 import Header from '../components/Header'
 import TanStackQueryDevtools from '../integrations/tanstack-query/devtools'
 
+import type { Database } from '@/types/supabase'
+import type { SupabaseClient } from '@supabase/supabase-js'
 import type { QueryClient } from '@tanstack/react-query'
 
 import { NotFoundPage } from '@/components/ui/NotFoundPage'
+import { throwIfError } from '@/data/api/_helpers'
+import { useSession } from '@/data/hooks/useAuth'
+import { qk } from '@/data/query/keys'
 
 interface MyRouterContext {
   queryClient: QueryClient
+  supabase: SupabaseClient<Database>
 }
 
 export const Route = createRootRouteWithContext<MyRouterContext>()({
+  beforeLoad: async ({ context, location }) => {
+    const pathname = location.pathname
+    const isLogin = pathname === '/login'
+    const isIndex = pathname === '/'
+
+    const session = await context.queryClient.ensureQueryData({
+      queryKey: qk.session(),
+      queryFn: async () => {
+        const { data, error } = await context.supabase.auth.getSession()
+        throwIfError(error)
+        return data.session ?? null
+      },
+      staleTime: Infinity,
+    })
+
+    if (!session && !isLogin) {
+      throw redirect({ to: '/login' })
+    }
+    if (session && (isLogin || isIndex)) {
+      throw redirect({ to: '/dashboard' })
+    }
+  },
+
   component: () => (
     <>
-      <Header />
+      <AuthSync />
+      <MaybeHeader />
       <Outlet />
       <TanStackDevtools
         config={{
@@ -60,3 +97,40 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
     )
   },
 })
+
+function MaybeHeader() {
+  const pathname = useRouterState({
+    select: (s) => s.location.pathname,
+  })
+
+  if (pathname === '/login') return null
+  return <Header />
+}
+
+function AuthSync() {
+  const { data: session, isLoading } = useSession()
+  // Mantiene roles/permisos sincronizados con la BD (database-first)
+  // useMeAccess()
+
+  const navigate = useNavigate()
+  const pathname = useRouterState({
+    select: (s) => s.location.pathname,
+  })
+
+  // Reaccionar a cambios de sesión (login/logout) sin depender solo de beforeLoad.
+  // Nota: beforeLoad sigue siendo la línea de defensa en navegación/refresh.
+  useEffect(() => {
+    if (isLoading) return
+
+    if (!session && pathname !== '/login') {
+      void navigate({ to: '/login', replace: true })
+      return
+    }
+
+    if (session && pathname === '/login') {
+      void navigate({ to: '/dashboard', replace: true })
+    }
+  }, [isLoading, session, pathname, navigate])
+
+  return null
+}

src/routes/planes/$planId/_detalle/iaplan.tsx

@@ -126,38 +126,60 @@ function RouteComponent() {
   const [optimisticMessage, setOptimisticMessage] = useState<string | null>(
     null,
   )
-
+  const [filterQuery, setFilterQuery] = useState('')
   const availableFields = useMemo(() => {
-    // 1. Hacemos un cast de la definición a nuestra interfaz
     const definicion = data?.estructuras_plan
       ?.definicion as EstructuraDefinicion
 
+    // Encadenamiento opcional para evitar errores si data es null
     if (!definicion.properties) return []
 
     return Object.entries(definicion.properties).map(([key, value]) => ({
       key,
       label: value.title,
-      // 2. Aquí value ya no es unknown, es parte de nuestra interfaz
       value: String(value.description || ''),
     }))
   }, [data])
+
+  const filteredFields = useMemo(() => {
+    return availableFields.filter(
+      (field) =>
+        field.label.toLowerCase().includes(filterQuery.toLowerCase()) &&
+        !selectedFields.some((s) => s.key === field.key), // No mostrar ya seleccionados
+    )
+  }, [availableFields, filterQuery, selectedFields])
+
   const activeChatData = useMemo(() => {
     return lastConversation?.find((chat: any) => chat.id === activeChatId)
   }, [lastConversation, activeChatId])
 
   const chatMessages = useMemo(() => {
-    // Forzamos el cast a Array de nuestra interfaz
+    // 1. Si no hay ID o no hay data del chat, retornamos vacío
-    const json = (activeChatData?.conversacion_json ||
+    if (!activeChatId || !activeChatData) return []
+
+    const json = (activeChatData.conversacion_json ||
       []) as unknown as Array<ChatMessageJSON>
 
-    // Ahora .map() funcionará sin errores
+    // 2. Verificamos que 'json' sea realmente un array antes de mapear
+    if (!Array.isArray(json)) return []
+
     return json.map((msg, index: number) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (!msg?.user) {
+        return {
+          id: `err-${index}`,
+          role: 'assistant',
+          content: '',
+          suggestions: [],
+        }
+      }
+
       const isAssistant = msg.user === 'assistant'
 
       return {
         id: `${activeChatId}-${index}`,
         role: isAssistant ? 'assistant' : 'user',
-        content: isAssistant ? msg.message : msg.prompt,
+        content: isAssistant ? msg.message || '' : msg.prompt || '', // Agregamos fallback a string vacío
         isRefusal: isAssistant && msg.refusal === true,
         suggestions:
           isAssistant && msg.recommendations
@@ -178,6 +200,7 @@ function RouteComponent() {
       }
     })
   }, [activeChatData, activeChatId, availableFields])
+
   const scrollToBottom = () => {
     if (scrollRef.current) {
       // Buscamos el viewport interno del ScrollArea de Radix
@@ -192,25 +215,57 @@ function RouteComponent() {
       }
     }
   }
+  const { activeChats, archivedChats } = useMemo(() => {
+    const allChats = lastConversation || []
+    return {
+      activeChats: allChats.filter((chat: any) => chat.estado === 'ACTIVA'),
+      archivedChats: allChats.filter(
+        (chat: any) => chat.estado === 'ARCHIVADA',
+      ),
+    }
+  }, [lastConversation])
 
-  // Auto-scroll cuando cambian los mensajes o cuando la IA está cargando
   useEffect(() => {
     scrollToBottom()
   }, [chatMessages, isLoading])
 
   useEffect(() => {
-    // Si no hay un chat seleccionado manualmente y la API nos devuelve chats existentes
+    // Verificamos cuáles campos de la lista "selectedFields" ya no están presentes en el texto del input
-    const isCreationMode = messages.length === 1 && messages[0].id === 'welcome'
+    const camposActualizados = selectedFields.filter((field) =>
-    if (
+      input.includes(field.label),
-      !activeChatId &&
+    )
-      lastConversation &&
-      lastConversation.length > 0 &&
-      !isCreationMode
-    ) {
-      setActiveChatId(lastConversation[0].id)
-    }
-  }, [lastConversation, activeChatId])
 
+    // Solo actualizamos el estado si hubo un cambio real (para evitar bucles infinitos)
+    if (camposActualizados.length !== selectedFields.length) {
+      setSelectedFields(camposActualizados)
+    }
+  }, [input, selectedFields])
+
+  useEffect(() => {
+    if (isLoadingConv || !lastConversation) return
+
+    const isChatStillActive = activeChats.some(
+      (chat) => chat.id === activeChatId,
+    )
+    const isCreationMode = messages.length === 1 && messages[0].id === 'welcome'
+
+    // Caso A: El chat actual ya no es válido (fue archivado o borrado)
+    if (activeChatId && !isChatStillActive && !isCreationMode) {
+      setActiveChatId(undefined)
+      setMessages([])
+      return // Salimos para evitar ejecuciones extra en este render
+    }
+
+    // Caso B: No hay chat seleccionado y hay chats disponibles (Auto-selección al cargar)
+    if (!activeChatId && activeChats.length > 0 && !isCreationMode) {
+      setActiveChatId(activeChats[0].id)
+    }
+
+    // Caso C: Si la lista de chats está vacía y no estamos creando uno, limpiar por si acaso
+    if (activeChats.length === 0 && activeChatId && !isCreationMode) {
+      setActiveChatId(undefined)
+    }
+  }, [activeChats, activeChatId, isLoadingConv, messages.length])
   useEffect(() => {
     const state = routerState.location.state as any
     if (!state?.campo_edit || availableFields.length === 0) return
@@ -252,6 +307,9 @@ function RouteComponent() {
           if (activeChatId === id) {
             setActiveChatId(undefined)
             setMessages([])
+            setOptimisticMessage(null)
+            setInput('')
+            setSelectedFields([])
           }
         },
       },
@@ -274,8 +332,20 @@ function RouteComponent() {
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const val = e.target.value
+    const cursorPosition = e.target.selectionStart // Dónde está escribiendo el usuario
     setInput(val)
-    setShowSuggestions(val.endsWith(':'))
+
+    // Busca un ":" seguido de letras justo antes del cursor
+    const textBeforeCursor = val.slice(0, cursorPosition)
+    const match = textBeforeCursor.match(/:(\w*)$/)
+
+    if (match) {
+      setShowSuggestions(true)
+      setFilterQuery(match[1]) // Esto es lo que se usa para el filtrado
+    } else {
+      setShowSuggestions(false)
+      setFilterQuery('')
+    }
   }
 
   const injectFieldsIntoInput = (
@@ -292,28 +362,22 @@ function RouteComponent() {
   }
 
   const toggleField = (field: SelectedField) => {
-    let isAdding = false
+    // 1. Lo agregamos a la lista de "SelectedFields" (para que la IA sepa qué procesar)
-
     setSelectedFields((prev) => {
       const isSelected = prev.find((f) => f.key === field.key)
-      if (isSelected) {
+      return isSelected ? prev : [...prev, field]
-        return prev.filter((f) => f.key !== field.key)
-      } else {
-        isAdding = true
-        return [...prev, field]
-      }
     })
 
+    // 2. Insertamos el nombre del campo en el texto exactamente donde estaba el ":"
     setInput((prev) => {
-      const cleanPrev = prev.replace(/:/g, '').trim()
+      // Reemplaza el último ":" y cualquier texto de filtro por el label del campo
-
+      const nuevoTexto = prev.replace(/:(\w*)$/, field.label)
-      if (cleanPrev === '') {
+      return nuevoTexto + ' ' // Añadimos un espacio para que el usuario siga escribiendo
-        return `${field.label} `
-      }
-      return `${cleanPrev} ${field.label} `
     })
 
+    // 3. Limpiamos estados de búsqueda
     setShowSuggestions(false)
+    setFilterQuery('')
   }
 
   const buildPrompt = (userInput: string, fields: Array<SelectedField>) => {
@@ -331,6 +395,9 @@ function RouteComponent() {
     setIsSending(true)
     setOptimisticMessage(rawText)
     setInput('')
+    setSelectedArchivoIds([])
+    setSelectedRepositorioIds([])
+    setUploadedFiles([])
     try {
       const payload: any = {
         planId: planId,
@@ -370,16 +437,6 @@ function RouteComponent() {
     )
   }, [selectedArchivoIds, selectedRepositorioIds, uploadedFiles])
 
-  const { activeChats, archivedChats } = useMemo(() => {
-    const allChats = lastConversation || []
-    return {
-      activeChats: allChats.filter((chat: any) => chat.estado === 'ACTIVA'),
-      archivedChats: allChats.filter(
-        (chat: any) => chat.estado === 'ARCHIVADA',
-      ),
-    }
-  }, [lastConversation])
-
   const removeSelectedField = (fieldKey: string) => {
     setSelectedFields((prev) => prev.filter((f) => f.key !== fieldKey))
   }
@@ -555,72 +612,98 @@ function RouteComponent() {
         <div className="relative min-h-0 flex-1">
           <ScrollArea ref={scrollRef} className="h-full w-full">
             <div className="mx-auto max-w-3xl space-y-6 p-6">
-              {chatMessages.map((msg: any) => (
+              {!activeChatId &&
-                <div
+              chatMessages.length === 0 &&
-                  key={msg.id}
+              !optimisticMessage ? (
-                  className={`flex max-w-[85%] flex-col ${
+                <div className="flex h-[400px] flex-col items-center justify-center text-center opacity-40">
-                    msg.role === 'user' ? 'ml-auto items-end' : 'items-start'
+                  <MessageSquarePlus
-                  }`}
+                    size={48}
-                >
+                    className="mb-4 text-slate-300"
-                  <div
+                  />
-                    className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
+                  <h3 className="text-lg font-medium text-slate-900">
-                      msg.role === 'user'
+                    No hay un chat seleccionado
-                        ? 'rounded-tr-none bg-teal-600 text-white'
+                  </h3>
-                        : `rounded-tl-none border bg-white text-slate-700 ${
+                  <p className="text-sm text-slate-500">
-                            // --- LÓGICA DE REFUSAL ---
+                    Selecciona un chat del historial o crea uno nuevo para
-                            msg.isRefusal
+                    empezar.
-                              ? 'border-red-200 bg-red-50/50 ring-1 ring-red-100'
+                  </p>
-                              : 'border-slate-100'
-                          }`
-                    }`}
-                  >
-                    {/* Icono opcional de advertencia si es refusal */}
-                    {msg.isRefusal && (
-                      <div className="mb-1 flex items-center gap-1 text-[10px] font-bold text-red-500 uppercase">
-                        <span>Aviso del Asistente</span>
-                      </div>
-                    )}
-
-                    {msg.content}
-
-                    {!msg.isRefusal &&
-                      msg.suggestions &&
-                      msg.suggestions.length > 0 && (
-                        <div className="mt-4">
-                          <ImprovementCard
-                            suggestions={msg.suggestions}
-                            planId={planId}
-                            currentDatos={data?.datos}
-                            activeChatId={activeChatId}
-                            onApplySuccess={(key) => removeSelectedField(key)}
-                          />
-                        </div>
-                      )}
-                  </div>
                 </div>
-              ))}
+              ) : (
-              {optimisticMessage && (
+                <>
-                <div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
+                  {chatMessages.map((msg: any) => (
-                  <div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
+                    <div
-                    {optimisticMessage}
+                      key={msg.id}
-                  </div>
+                      className={`flex max-w-[85%] flex-col ${
-                </div>
+                        msg.role === 'user'
-              )}
+                          ? 'ml-auto items-end'
-              {isSending && (
+                          : 'items-start'
-                <div className="animate-in fade-in slide-in-from-left-2 flex flex-col items-start duration-300">
+                      }`}
-                  <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
+                    >
-                    <div className="flex items-center gap-2">
+                      <div
-                      <div className="flex gap-1">
+                        className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
-                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.3s]" />
+                          msg.role === 'user'
-                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.15s]" />
+                            ? 'rounded-tr-none bg-teal-600 text-white'
-                        <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
+                            : `rounded-tl-none border bg-white text-slate-700 ${
+                                // --- LÓGICA DE REFUSAL ---
+                                msg.isRefusal
+                                  ? 'border-red-200 bg-red-50/50 ring-1 ring-red-100'
+                                  : 'border-slate-100'
+                              }`
+                        }`}
+                      >
+                        {/* Icono opcional de advertencia si es refusal */}
+                        {msg.isRefusal && (
+                          <div className="mb-1 flex items-center gap-1 text-[10px] font-bold text-red-500 uppercase">
+                            <span>Aviso del Asistente</span>
+                          </div>
+                        )}
+
+                        {msg.content}
+
+                        {!msg.isRefusal &&
+                          msg.suggestions &&
+                          msg.suggestions.length > 0 && (
+                            <div className="mt-4">
+                              <ImprovementCard
+                                suggestions={msg.suggestions}
+                                planId={planId}
+                                currentDatos={data?.datos}
+                                activeChatId={activeChatId}
+                                onApplySuccess={(key) =>
+                                  removeSelectedField(key)
+                                }
+                              />
+                            </div>
+                          )}
                       </div>
-                      <span className="text-[10px] font-medium tracking-tight text-slate-400 uppercase">
-                        Esperando respuesta...
-                      </span>
                     </div>
-                  </div>
+                  ))}
-                </div>
+
+                  {optimisticMessage && (
+                    <div className="animate-in fade-in slide-in-from-right-2 ml-auto flex max-w-[85%] flex-col items-end">
+                      <div className="rounded-2xl rounded-tr-none bg-teal-600/70 p-3 text-sm whitespace-pre-wrap text-white shadow-sm">
+                        {optimisticMessage}
+                      </div>
+                    </div>
+                  )}
+
+                  {isSending && (
+                    <div className="animate-in fade-in slide-in-from-left-2 flex flex-col items-start duration-300">
+                      <div className="rounded-2xl rounded-tl-none border border-slate-200 bg-white p-4 shadow-sm">
+                        <div className="flex items-center gap-2">
+                          <div className="flex gap-1">
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.3s]" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500 [animation-delay:-0.15s]" />
+                            <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-teal-500" />
+                          </div>
+                          <span className="text-[10px] font-medium tracking-tight text-slate-400 uppercase">
+                            Esperando respuesta...
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </>
               )}
             </div>
           </ScrollArea>
@@ -651,25 +734,35 @@ function RouteComponent() {
           <div className="relative mx-auto max-w-4xl">
             {/* MENÚ DE SUGERENCIAS FLOTANTE */}
             {showSuggestions && (
-              <div className="animate-in slide-in-from-bottom-2 absolute bottom-full z-50 mb-2 w-72 overflow-hidden rounded-xl border bg-white shadow-2xl">
+              <div className="animate-in slide-in-from-bottom-2 absolute bottom-full mb-2 w-full rounded-xl border bg-white shadow-2xl">
-                <div className="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+                <div className="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold text-slate-500 uppercase">
-                  Seleccionar campo para IA
+                  Resultados para "{filterQuery}"
                 </div>
                 <div className="max-h-64 overflow-y-auto p-1">
-                  {availableFields.map((field) => (
+                  {filteredFields.length > 0 ? (
-                    <button
+                    filteredFields.map((field, index) => (
-                      key={field.key}
+                      <button
-                      onClick={() => toggleField(field)}
+                        key={field.key}
-                      className="group flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-teal-50"
+                        onClick={() => toggleField(field)}
-                    >
+                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors ${
-                      <span className="text-slate-700 group-hover:text-teal-700">
+                          index === 0
-                        {field.label}
+                            ? 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 ring-inset'
-                      </span>
+                            : 'hover:bg-slate-50'
-                      {selectedFields.find((f) => f.key === field.key) && (
+                        }`}
-                        <Check size={14} className="text-teal-600" />
+                      >
-                      )}
+                        <span>{field.label}</span>
-                    </button>
+                        {index === 0 && (
-                  ))}
+                          <span className="font-mono text-[10px] opacity-50">
+                            TAB
+                          </span>
+                        )}
+                      </button>
+                    ))
+                  ) : (
+                    <div className="p-3 text-center text-xs text-slate-400">
+                      No hay coincidencias
+                    </div>
+                  )}
                 </div>
               </div>
             )}
@@ -702,8 +795,30 @@ function RouteComponent() {
                   value={input}
                   onChange={handleInputChange}
                   onKeyDown={(e) => {
-                    // Enter envía, Shift+Enter hace salto de línea
+                    if (showSuggestions) {
-                    if (e.key === 'Enter' && !e.shiftKey) {
+                      if (e.key === 'Tab' || e.key === 'Enter') {
+                        if (filteredFields.length > 0) {
+                          e.preventDefault()
+                          toggleField(filteredFields[0])
+                        }
+                      }
+                      if (e.key === 'Escape') {
+                        e.preventDefault()
+                        setShowSuggestions(false)
+                        setFilterQuery('')
+                      }
+                    } else {
+                      // Si el usuario borra y el input está vacío, eliminar el último campo
+                      if (
+                        e.key === 'Backspace' &&
+                        input === '' &&
+                        selectedFields.length > 0
+                      ) {
+                        setSelectedFields((prev) => prev.slice(0, -1))
+                      }
+                    }
+
+                    if (e.key === 'Enter' && !e.shiftKey && !showSuggestions) {
                       e.preventDefault()
                       if (!isSending) handleSend()
                     }

src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx

@@ -2,6 +2,7 @@ import {
   createFileRoute,
   Outlet,
   Link,
+  useLocation,
   useParams,
   useRouterState,
 } from '@tanstack/react-router'
@@ -9,6 +10,7 @@ import { ArrowLeft, GraduationCap } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 import { Badge } from '@/components/ui/badge'
+import { lateralConfetti } from '@/components/ui/lateral-confetti'
 import { useSubject, useUpdateAsignatura } from '@/data'
 
 export const Route = createFileRoute(
@@ -62,8 +64,7 @@ interface DatosPlan {
 }
 
 function AsignaturaLayout() {
-  const routerState = useRouterState()
+  const location = useLocation()
-  const state = routerState.location.state as any
   const { asignaturaId } = useParams({
     from: '/planes/$planId/asignaturas/$asignaturaId',
   })
@@ -117,6 +118,14 @@ function AsignaturaLayout() {
     select: (state) => state.location.pathname,
   })
 
+  // Confetti al llegar desde creación IA
+  useEffect(() => {
+    if ((location.state as any)?.showConfetti) {
+      lateralConfetti()
+      window.history.replaceState({}, document.title)
+    }
+  }, [location.state])
+
   if (loadingAsig) {
     return (
       <div className="flex h-screen items-center justify-center bg-[#0b1d3a] text-white">
@@ -130,7 +139,7 @@ function AsignaturaLayout() {
 
   return (
     <div>
-      <section className="bg-gradient-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
+      <section className="bg-linear-to-b from-[#0b1d3a] to-[#0e2a5c] text-white">
         <div className="mx-auto max-w-7xl px-6 py-10">
           <Link
             to="/planes/$planId/asignaturas"