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
Merge pull request 'Se generan planes de estudio y asignaturas con IA en segundo plano y se actualiza con realtime de supabase' (#146 ) from issue/142-creacin-de-planes-de-estudio-y-de-asignaturas-con- into main
2026-03-04 12:16:48 -06:00 · 2026-02-27 18:32:48 +00:00 · 2026-02-27 12:31:11 -06:00 · 2026-02-27 12:26:16 -06:00 · 2026-02-27 11:29:48 -06:00 · 2026-02-27 15:38:29 +00:00
24 changed files with 1704 additions and 711 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -0,0 +1 @@
+Al funcionar como agente, ignora los problemas de eslint del orden de imports
--- a/bun.lock
+++ b/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=="],

--- a/components.json
+++ b/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"
  }
 }
--- a/package.json
+++ b/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",
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,9 +1,20 @@
-import { Link } from '@tanstack/react-router'
-import { Home, Menu, Network, X } from 'lucide-react'
+import { Link, useNavigate } from '@tanstack/react-router'
+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
--- a/src/components/asignaturas/wizard/PasoBasicosForm/PasoSugerenciasForm.tsx
+++ b/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}
--- a/src/components/asignaturas/wizard/WizardControls.tsx
+++ b/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,
-            tipo: wizard.datosBasicos.tipo!,
-            creditos: wizard.datosBasicos.creditos!,
-            horasIndependientes: wizard.datosBasicos.horasIndependientes,
-            horasAcademicas: wizard.datosBasicos.horasAcademicas,
-            estructuraId: wizard.datosBasicos.estructuraId!,
+            codigo: wizard.datosBasicos.codigo ?? null,
+            tipo: wizard.datosBasicos.tipo ?? null,
+            creditos: wizard.datosBasicos.creditos,
+            horas_academicas: wizard.datosBasicos.horasAcademicas ?? null,
+            horas_independientes:
+              wizard.datosBasicos.horasIndependientes ?? null,
          },
          iaConfig: {
            descripcionEnfoqueAcademico:
-              wizard.iaConfig!.descripcionEnfoqueAcademico,
+              wizard.iaConfig?.descripcionEnfoqueAcademico ?? undefined,
            instruccionesAdicionalesIA:
-              wizard.iaConfig!.instruccionesAdicionalesIA,
-            archivosReferencia: wizard.iaConfig!.archivosReferencia,
-            repositoriosReferencia:
-              wizard.iaConfig!.repositoriosReferencia || [],
-            archivosAdjuntos: wizard.iaConfig!.archivosAdjuntos || [],
+              wizard.iaConfig?.instruccionesAdicionalesIA ?? undefined,
+            archivosAdjuntos,
          },
        }

        console.log(
-          `${new Date().toISOString()} - Enviando a generar asignatura con IA`,
+          `${new Date().toISOString()} - Disparando Edge IA asignatura (unified)`,
        )

-        setIsSpinningIA(true)
-        const asignatura = await generateSubjectAI.mutateAsync(aiInput)
-        // await new Promise((resolve) => setTimeout(resolve, 20000)) // debug
-        setIsSpinningIA(false)
-        // console.log(
-        //   `${new Date().toISOString()} - Asignatura IA generada`,
-        //   asignatura,
-        // )
+        await generateSubjectAI.mutateAsync(payload as any)
+
+        // Fallback: una lectura puntual por si el UPDATE llegó antes de suscribir.
+        const latest = await subjects_get_maybe(subjectId)
+        if (latest) {
+          handleSubjectReady({
+            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 = {
-            id,
-            descripcionEnfoqueAcademico: s.descripcion,
-            // (opcionales) parches directos si el edge los usa
-            estructura_id: wizard.estructuraId,
-            linea_plan_id: s.linea_plan_id,
-            numero_ciclo: s.numero_ciclo,
+          const creditosForEdge =
+            typeof s.creditos === 'number' && s.creditos > 0
+              ? s.creditos
+              : undefined
+          const payload: AISubjectUnifiedInput = {
+            datosUpdate: {
+              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)
-      setWizard((w) => ({ ...w, isLoading: false }))
+      if (!startedWaiting) {
+        setIsSpinningIA(false)
+        setWizard((w) => ({ ...w, isLoading: false }))
+      }
    }
  }

--- a/src/components/auth/ExternalLoginForm.tsx
+++ b/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({
-      email,
-      password,
-    })*/
+    setIsLoading(true)
+    setError(null)
+
+    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>
  )
 }
--- a/src/components/auth/InternalLoginForm.tsx
+++ b/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({
-      email: `${clave}@ulsa.mx`,
-      password,
-    })*/
+    setIsLoading(true)
+    setError(null)
+
+    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>
  )
 }
--- a/src/components/planes/detalle/Ia/ImprovementCard.tsx
+++ b/src/components/planes/detalle/Ia/ImprovementCard.tsx
@@ -2,30 +2,29 @@ import { Check, Loader2 } from 'lucide-react'
 import { useState } from 'react'

 import { Button } from '@/components/ui/button'
-import { useUpdatePlanFields, useUpdateRecommendationApplied } from '@/data' // Tu hook existente
+import { useUpdatePlanFields, useUpdateRecommendationApplied } from '@/data'

 export const ImprovementCard = ({
  suggestions,
  onApply,
-  planId, // Necesitamos el ID
-  currentDatos, // Necesitamos los datos actuales para no sobrescribir todo el JSON
+  planId,
+  currentDatos,
  activeChatId,
+  onApplySuccess,
 }: {
  suggestions: Array<any>
  onApply?: (key: string, value: string) => void
  planId: string
  currentDatos: any
  activeChatId: any
+  onApplySuccess?: (key: string) => void
 }) => {
-  const [appliedFields, setAppliedFields] = useState<Array<string>>([])
  const [localApplied, setLocalApplied] = useState<Array<string>>([])
  const updatePlan = useUpdatePlanFields()
  const updateAppliedStatus = useUpdateRecommendationApplied()

  const handleApply = (key: string, newValue: string) => {
    if (!currentDatos) return
-
-    // 1. Lógica para preparar el valor (idéntica a tu handleSave original)
    const currentValue = currentDatos[key]
    let finalValue: any

@@ -39,13 +38,11 @@ export const ImprovementCard = ({
      finalValue = newValue
    }

-    // 2. Construir el nuevo objeto 'datos' manteniendo lo que ya existía
    const datosActualizados = {
      ...currentDatos,
      [key]: finalValue,
    }

-    // 3. Ejecutar la mutación directamente aquí
    updatePlan.mutate(
      {
        planId: planId as any,
@@ -53,9 +50,9 @@ export const ImprovementCard = ({
      },
      {
        onSuccess: () => {
-          setAppliedFields((prev) => [...prev, key])
-          if (onApply) onApply(key, newValue)
-          console.log(`Campo ${key} guardado exitosamente`)
+          setLocalApplied((prev) => [...prev, key])
+
+          if (onApplySuccess) onApplySuccess(key)
          if (activeChatId) {
            updateAppliedStatus.mutate({
              conversacionId: activeChatId,
--- a/src/components/planes/wizard/WizardControls.tsx
+++ b/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 { useCreatePlanManual, useGeneratePlanAI } from '@/data/hooks/usePlans'
+import { plans_get_maybe } from '@/data/api/plans.api'
+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 persistPlanFromAI = usePersistPlanFromAI()
+  const cancelledRef = useRef(false)
+  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)
-        setIsSpinningIA(false)
-        console.log(`${new Date().toISOString()} - Plan IA generado`, plan)
+        const resp: any = await generatePlanAI.mutateAsync(aiInput as any)
+        const planId = resp?.plan?.id ?? resp?.id
+        console.log(`${new Date().toISOString()} - Plan IA generado`, resp)

-        navigate({
-          to: `/planes/${plan.id}`,
-          state: { showConfetti: true },
-        })
+        if (!planId) {
+          throw new Error('No se pudo obtener el id del plan generado por IA')
+        }
+
+        // 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)
-      setWizard((w) => ({ ...w, isLoading: false }))
+      // Si entramos en watch realtime, el loading se corta desde checkPlanStateAndAct.
    }
  }

--- a/src/components/ui/SubmitButton.tsx
+++ b/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
-                 font-semibold hover:opacity-90 transition"
+      disabled={disabled}
+      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>
--- a/src/data/api/ai.api.ts
+++ b/src/data/api/ai.api.ts
@@ -207,8 +207,7 @@ export async function update_recommendation_applied_status(
    .single()

  if (fetchError) throw fetchError
-  if (!conv?.conversacion_json)
-    throw new Error('No se encontró la conversación')
+  if (!conv.conversacion_json) throw new Error('No se encontró la conversación')

  // 2. Transformar el JSON para marcar como aplicada la recomendación específica
  // Usamos una transformación inmutable para evitar efectos secundarios
--- a/src/data/api/plans.api.ts
+++ b/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>> {
--- a/src/data/api/subjects.api.ts
+++ b/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']
-  datosBasicos: {
-    nombre: Asignatura['nombre']
-    codigo?: Asignatura['codigo']
-    tipo: Asignatura['tipo'] | null
-    creditos: Asignatura['creditos'] | null
-    horasAcademicas?: Asignatura['horas_academicas'] | null
-    horasIndependientes?: Asignatura['horas_independientes'] | null
-    estructuraId: Asignatura['estructura_id'] | null
+/**
+ * Nuevo payload unificado (JSON) para la Edge `ai_generate_subject`.
+ * - Siempre incluye `datosUpdate.plan_estudio_id`.
+ * - `datosUpdate.id` es opcional (si no existe, la Edge puede crear).
+ * En el frontend, insertamos primero y usamos `id` para actualizar.
+ */
+export type AISubjectUnifiedInput = {
+  datosUpdate: Partial<{
+    id: string
+    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
-    instruccionesAdicionalesIA: string
-    archivosReferencia: Array<string>
-    repositoriosReferencia?: Array<string>
-    archivosAdjuntos?: Array<UploadedFile>
+    descripcionEnfoqueAcademico?: string
+    instruccionesAdicionalesIA?: string
+    archivosAdjuntos?: Array<string>
  }
 }

-/**
- * Edge (JSON): actualizar/llenar una asignatura existente por id.
- * Nota: este flujo NO acepta `instruccionesAdicionalesIA` (solo FormData lo usa).
- */
-export type AIGenerateSubjectJsonInput = Partial<{
-  plan_estudio_id: Asignatura['plan_estudio_id']
-  nombre: Asignatura['nombre']
-  codigo: Asignatura['codigo']
-  tipo: Asignatura['tipo'] | null
-  creditos: Asignatura['creditos']
-  horas_academicas: Asignatura['horas_academicas'] | null
-  horas_independientes: Asignatura['horas_independientes'] | null
-  estructura_id: Asignatura['estructura_id'] | null
-  linea_plan_id: Asignatura['linea_plan_id'] | null
-  numero_ciclo: Asignatura['numero_ciclo'] | null
-  descripcionEnfoqueAcademico: string
-}> & {
-  id: Asignatura['id']
+export async function subjects_get_maybe(
+  subjectId: UUID,
+): Promise<Asignatura | null> {
+  const supabase = supabaseBrowser()
+
+  const { data, error } = await supabase
+    .from('asignaturas')
+    .select('id,plan_estudio_id,estado')
+    .eq('id', subjectId)
+    .maybeSingle()
+
+  throwIfError(error)
+  return (data ?? null) as unknown as Asignatura | null
 }

 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' },
  })
--- a/src/data/hooks/useAuth.ts
+++ b/src/data/hooks/useAuth.ts
@@ -1,59 +1,145 @@
-import { useEffect } from "react";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { supabaseBrowser } from "../supabase/client";
-import { qk } from "../query/keys";
-import { throwIfError } from "../api/_helpers";
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
+
+import { throwIfError } from '../api/_helpers'
+import { qk } from '../query/keys'
+import { supabaseBrowser } from '../supabase/client'

 export function useSession() {
-  const supabase = supabaseBrowser();
-  const qc = useQueryClient();
+  const supabase = supabaseBrowser()
+  const qc = useQueryClient()

  const query = useQuery({
    queryKey: qk.session(),
    queryFn: async () => {
-      const { data, error } = await supabase.auth.getSession();
-      throwIfError(error);
-      return data.session ?? null;
+      const { data, error } = await supabase.auth.getSession()
+      throwIfError(error)
+      return data.session ?? null
    },
    staleTime: Infinity,
-  });
+  })

  useEffect(() => {
    const { data } = supabase.auth.onAuthStateChange(() => {
-      qc.invalidateQueries({ queryKey: qk.session() });
-      qc.invalidateQueries({ queryKey: qk.meProfile() });
-      qc.invalidateQueries({ queryKey: qk.auth });
-    });
+      qc.invalidateQueries({ queryKey: qk.session() })
+      qc.invalidateQueries({ queryKey: qk.meProfile() })
+      qc.invalidateQueries({ queryKey: qk.meAccess() })
+      qc.invalidateQueries({ queryKey: qk.auth })
+    })

-    return () => data.subscription.unsubscribe();
-  }, [supabase, qc]);
+    return () => data.subscription.unsubscribe()
+  }, [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();
-      throwIfError(uErr);
-      const userId = u.user?.id;
-      if (!userId) return 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_app")
-        .select("id,nombre_completo,email,externo,creado_en,actualizado_en")
-        .eq("id", userId)
-        .single();
+        .from('usuarios_app')
+        .select('id,nombre_completo,email,externo,creado_en,actualizado_en')
+        .eq('id', userId)
+        .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);
-      return data ?? null;
+      throwIfError(error)
+      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,
+  }
 }
--- a/src/data/hooks/usePlans.ts
+++ b/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()

--- a/src/data/query/keys.ts
+++ b/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) =>
--- a/src/data/query/queryClient.tsx
+++ b/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(
-    {
-  defaultOptions: {
-    queries: {
-      staleTime: 30_000,
-      refetchOnWindowFocus: false,
-      retry: (failureCount) => failureCount < 2,
+  const queryClientRef: { current: QueryClient | null } = { current: null }
+
+  const handleAuthzDesync = (error: unknown) => {
+    if (!isRlsViolationError(error)) return
+    // Forzar resincronización “database-first” del rol/permisos
+    console.log('RLS violation detected, invalidating queries...')
+    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,
  }
--- a/src/main.tsx
+++ b/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,
--- a/src/routes/__root.tsx
+++ b/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
+}
--- a/src/routes/planes/$planId/_detalle/iaplan.tsx
+++ b/src/routes/planes/$planId/_detalle/iaplan.tsx
@@ -14,6 +14,7 @@ import {
  MessageSquarePlus,
  Archive,
  RotateCcw,
+  Loader2,
 } from 'lucide-react'
 import { useState, useEffect, useRef, useMemo } from 'react'

@@ -66,7 +67,25 @@ interface SelectedField {
  label: string
  value: string
 }
-
+interface EstructuraDefinicion {
+  properties?: {
+    [key: string]: {
+      title: string
+      description?: string
+    }
+  }
+}
+interface ChatMessageJSON {
+  user: 'user' | 'assistant'
+  message?: string
+  prompt?: string
+  refusal?: boolean
+  recommendations?: Array<{
+    campo_afectado: string
+    texto_mejora: string
+    aplicada: boolean
+  }>
+}
 export const Route = createFileRoute('/planes/$planId/_detalle/iaplan')({
  component: RouteComponent,
 })
@@ -76,20 +95,14 @@ function RouteComponent() {
  const { data } = usePlan(planId)
  const routerState = useRouterState()
  const [openIA, setOpenIA] = useState(false)
-  const [conversacionId, setConversacionId] = useState<string | null>(null)
-  const { mutateAsync: sendChat, isLoading } = useAIPlanChat()
+  const { mutateAsync: sendChat, isPending: isLoading } = useAIPlanChat()
  const { mutate: updateStatusMutation } = useUpdateConversationStatus()

  const [activeChatId, setActiveChatId] = useState<string | undefined>(
    undefined,
  )
-
-  /*  const { data: historyMessages, isLoading: isLoadingHistory } =
-    useChatHistory(activeChatId) */
-
  const { data: lastConversation, isLoading: isLoadingConv } =
    useConversationByPlan(planId)
-  // archivos
  const [selectedArchivoIds, setSelectedArchivoIds] = useState<Array<string>>(
    [],
  )
@@ -109,59 +122,150 @@ function RouteComponent() {
  const [editingChatId, setEditingChatId] = useState<string | null>(null)
  const editableRef = useRef<HTMLSpanElement>(null)
  const { mutate: updateTitleMutation } = useUpdateConversationTitle()
-
+  const [isSending, setIsSending] = useState(false)
+  const [optimisticMessage, setOptimisticMessage] = useState<string | null>(
+    null,
+  )
+  const [filterQuery, setFilterQuery] = useState('')
  const availableFields = useMemo(() => {
-    if (!data?.estructuras_plan?.definicion?.properties) return []
-    return Object.entries(data.estructuras_plan.definicion.properties).map(
-      ([key, value]) => ({
-        key,
-        label: value.title,
-        value: String(value.description || ''),
-      }),
-    )
+    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,
+      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 conversacionJson = activeChatData?.conversacion_json || []
  const chatMessages = useMemo(() => {
-    const json = activeChatData?.conversacion_json
+    // 1. Si no hay ID o no hay data del chat, retornamos vacío
+    if (!activeChatId || !activeChatData) return []
+
+    const json = (activeChatData.conversacion_json ||
+      []) as unknown as Array<ChatMessageJSON>
+
+    // 2. Verificamos que 'json' sea realmente un array antes de mapear
    if (!Array.isArray(json)) return []

-    return json.map((msg: any, index: number) => {
+    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}-${msg.timestamp}`, // ID estable
+        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
-            ? msg.recommendations.map((rec: any) => ({
-                key: rec.campo_afectado,
-                label: rec.campo_afectado.replace(/_/g, ' '),
-                newValue: rec.texto_mejora,
-                applied: rec.aplicada,
-              }))
+            ? msg.recommendations.map((rec) => {
+                const fieldConfig = availableFields.find(
+                  (f) => f.key === rec.campo_afectado,
+                )
+                return {
+                  key: rec.campo_afectado,
+                  label: fieldConfig
+                    ? fieldConfig.label
+                    : rec.campo_afectado.replace(/_/g, ' '),
+                  newValue: rec.texto_mejora,
+                  applied: rec.aplicada,
+                }
+              })
            : [],
      }
    })
-  }, [activeChatData, activeChatId])
+  }, [activeChatData, activeChatId, availableFields])
+
+  const scrollToBottom = () => {
+    if (scrollRef.current) {
+      // Buscamos el viewport interno del ScrollArea de Radix
+      const scrollContainer = scrollRef.current.querySelector(
+        '[data-radix-scroll-area-viewport]',
+      )
+      if (scrollContainer) {
+        scrollContainer.scrollTo({
+          top: scrollContainer.scrollHeight,
+          behavior: 'smooth',
+        })
+      }
+    }
+  }
+  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])

  useEffect(() => {
-    // Si no hay un chat seleccionado manualmente y la API nos devuelve chats existentes
-    const isCreationMode = messages.length === 1 && messages[0].id === 'welcome'
-    if (
-      !activeChatId &&
-      lastConversation &&
-      lastConversation.length > 0 &&
-      !isCreationMode
-    ) {
-      setActiveChatId(lastConversation[0].id)
-    }
-  }, [lastConversation, activeChatId])
+    scrollToBottom()
+  }, [chatMessages, isLoading])

+  useEffect(() => {
+    // Verificamos cuáles campos de la lista "selectedFields" ya no están presentes en el texto del input
+    const camposActualizados = selectedFields.filter((field) =>
+      input.includes(field.label),
+    )
+
+    // 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
@@ -203,6 +307,9 @@ function RouteComponent() {
          if (activeChatId === id) {
            setActiveChatId(undefined)
            setMessages([])
+            setOptimisticMessage(null)
+            setInput('')
+            setSelectedFields([])
          }
        },
      },
@@ -215,8 +322,6 @@ function RouteComponent() {
      { id, estado: 'ACTIVA' },
      {
        onSuccess: () => {
-          // Al invalidar la query, React Query traerá la lista fresca
-          // y el chat se moverá solo de "archivados" a "activos"
          queryClient.invalidateQueries({
            queryKey: ['conversation-by-plan', planId],
          })
@@ -227,16 +332,26 @@ 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)
-    // Solo abrir si termina en ":"
-    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 = (
    input: string,
    fields: Array<SelectedField>,
  ) => {
-    // Quita cualquier bloque previo de campos
    const cleaned = input.replace(/\n?\[Campos:[^\]]*]/g, '').trim()

    if (fields.length === 0) return cleaned
@@ -247,45 +362,42 @@ 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 prev.filter((f) => f.key !== field.key)
-      } else {
-        isAdding = true
-        return [...prev, field]
-      }
+      return isSelected ? prev : [...prev, field]
    })

+    // 2. Insertamos el nombre del campo en el texto exactamente donde estaba el ":"
    setInput((prev) => {
-      const cleanPrev = prev.replace(/:/g, '').trim()
-
-      if (cleanPrev === '') {
-        return `${field.label} `
-      }
-      return `${cleanPrev} ${field.label} `
+      // Reemplaza el último ":" y cualquier texto de filtro por el label del campo
+      const nuevoTexto = prev.replace(/:(\w*)$/, field.label)
+      return nuevoTexto + ' ' // Añadimos un espacio para que el usuario siga escribiendo
    })

+    // 3. Limpiamos estados de búsqueda
    setShowSuggestions(false)
+    setFilterQuery('')
  }

  const buildPrompt = (userInput: string, fields: Array<SelectedField>) => {
-    // Si no hay campos, enviamos el texto tal cual
    if (fields.length === 0) return userInput

-    return `Instrucción del usuario: ${userInput}`
+    return ` ${userInput}`
  }

  const handleSend = async (promptOverride?: string) => {
    const rawText = promptOverride || input
    if (!rawText.trim() && selectedFields.length === 0) return
-
+    if (isSending || (!rawText.trim() && selectedFields.length === 0)) return
    const currentFields = [...selectedFields]
    const finalPrompt = buildPrompt(rawText, currentFields)
-
+    setIsSending(true)
+    setOptimisticMessage(rawText)
    setInput('')
+    setSelectedArchivoIds([])
+    setSelectedRepositorioIds([])
+    setUploadedFiles([])
    try {
      const payload: any = {
        planId: planId,
@@ -306,9 +418,14 @@ function RouteComponent() {
      await queryClient.invalidateQueries({
        queryKey: ['conversation-by-plan', planId],
      })
+      setOptimisticMessage(null)
    } catch (error) {
      console.error('Error en el chat:', error)
      // Aquí sí podrías usar un toast o un mensaje de error temporal
+    } finally {
+      // 5. CRÍTICO: Detener el estado de carga SIEMPRE
+      setIsSending(false)
+      setOptimisticMessage(null)
    }
  }

@@ -320,15 +437,9 @@ 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))
+  }

  return (
    <div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full gap-6 overflow-hidden p-4">
@@ -395,7 +506,7 @@ function RouteComponent() {
                        e.preventDefault()
                        const newTitle = e.currentTarget.textContent || ''
                        updateTitleMutation(
-                          { id: chat.id, titulo: newTitle },
+                          { id: chat.id, nombre: newTitle },
                          {
                            onSuccess: () => setEditingChatId(null),
                          },
@@ -501,43 +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) => (
-                <div
-                  key={msg.id}
-                  className={`flex max-w-[85%] flex-col ${msg.role === 'user' ? 'ml-auto items-end' : 'items-start'}`}
-                >
-                  <div
-                    className={`rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm ${
-                      msg.role === 'user'
-                        ? 'rounded-tr-none bg-teal-600 text-white'
-                        : 'rounded-tl-none border bg-white text-slate-700'
-                    }`}
-                  >
-                    {/* Contenido de texto normal */}
-                    {msg.content}
+              {!activeChatId &&
+              chatMessages.length === 0 &&
+              !optimisticMessage ? (
+                <div className="flex h-[400px] flex-col items-center justify-center text-center opacity-40">
+                  <MessageSquarePlus
+                    size={48}
+                    className="mb-4 text-slate-300"
+                  />
+                  <h3 className="text-lg font-medium text-slate-900">
+                    No hay un chat seleccionado
+                  </h3>
+                  <p className="text-sm text-slate-500">
+                    Selecciona un chat del historial o crea uno nuevo para
+                    empezar.
+                  </p>
+                </div>
+              ) : (
+                <>
+                  {chatMessages.map((msg: any) => (
+                    <div
+                      key={msg.id}
+                      className={`flex max-w-[85%] flex-col ${
+                        msg.role === 'user'
+                          ? 'ml-auto items-end'
+                          : 'items-start'
+                      }`}
+                    >
+                      <div
+                        className={`relative rounded-2xl p-3 text-sm whitespace-pre-wrap shadow-sm transition-all duration-300 ${
+                          msg.role === 'user'
+                            ? 'rounded-tr-none bg-teal-600 text-white'
+                            : `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>
+                        )}

-                    {/* Si el mensaje tiene sugerencias (ImprovementCard) */}
-                    {msg.suggestions && msg.suggestions.length > 0 && (
-                      <div className="mt-4">
-                        <ImprovementCard
-                          suggestions={msg.suggestions}
-                          planId={planId}
-                          currentDatos={data?.datos}
-                          activeChatId={activeChatId}
-                          // Puedes pasar una prop nueva si tu ImprovementCard la soporta:
-                          // isReadOnly={msg.suggestions.every(s => s.applied)}
-                        />
+                        {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>
-                </div>
-              ))}
-              {isLoading && (
-                <div className="flex gap-2 p-4">
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-teal-400" />
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-teal-400 [animation-delay:0.2s]" />
-                  <div className="h-2 w-2 animate-bounce rounded-full bg-teal-400 [animation-delay:0.4s]" />
-                </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>
@@ -568,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="border-b bg-slate-50 px-3 py-2 text-[10px] font-bold tracking-wider text-slate-500 uppercase">
-                  Seleccionar campo para IA
+              <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 text-slate-500 uppercase">
+                  Resultados para "{filterQuery}"
                </div>
                <div className="max-h-64 overflow-y-auto p-1">
-                  {availableFields.map((field) => (
-                    <button
-                      key={field.key}
-                      onClick={() => toggleField(field)}
-                      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"
-                    >
-                      <span className="text-slate-700 group-hover:text-teal-700">
-                        {field.label}
-                      </span>
-                      {selectedFields.find((f) => f.key === field.key) && (
-                        <Check size={14} className="text-teal-600" />
-                      )}
-                    </button>
-                  ))}
+                  {filteredFields.length > 0 ? (
+                    filteredFields.map((field, index) => (
+                      <button
+                        key={field.key}
+                        onClick={() => toggleField(field)}
+                        className={`flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-sm transition-colors ${
+                          index === 0
+                            ? 'bg-teal-50 text-teal-700 ring-1 ring-teal-200 ring-inset'
+                            : 'hover:bg-slate-50'
+                        }`}
+                      >
+                        <span>{field.label}</span>
+                        {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>
            )}
@@ -618,6 +794,35 @@ function RouteComponent() {
                <Textarea
                  value={input}
                  onChange={handleInputChange}
+                  onKeyDown={(e) => {
+                    if (showSuggestions) {
+                      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()
+                    }
+                  }}
                  placeholder={
                    selectedFields.length > 0
                      ? 'Escribe instrucciones adicionales...'
@@ -628,12 +833,16 @@ function RouteComponent() {
                <Button
                  onClick={() => handleSend()}
                  disabled={
-                    (!input.trim() && selectedFields.length === 0) || isLoading
+                    isSending || (!input.trim() && selectedFields.length === 0)
                  }
                  size="icon"
                  className="mb-1 h-9 w-9 shrink-0 bg-teal-600 hover:bg-teal-700"
                >
-                  <Send size={16} className="text-white" />
+                  {isSending ? (
+                    <Loader2 className="animate-spin" size={16} />
+                  ) : (
+                    <Send size={16} />
+                  )}
                </Button>
              </div>
            </div>
--- a/src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+++ b/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 state = routerState.location.state as any
+  const location = useLocation()
  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"
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
Author	SHA1	Message	Date
Guillermo Arrieta Medina	7e1045358d	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	2026-03-04 12:16:48 -06:00
Guillermo.Arrieta	314a96f2c5	Merge pull request 'Se generan planes de estudio y asignaturas con IA en segundo plano y se actualiza con realtime de supabase' (#146 ) from issue/142-creacin-de-planes-de-estudio-y-de-asignaturas-con- into main Reviewed-on: #146	2026-02-27 18:32:48 +00:00
Guillermo Arrieta Medina	7693f86951	tipos de supabase actualizados	2026-02-27 12:31:11 -06:00
Guillermo Arrieta Medina	8ad6c8096e	Merge branch 'main' into issue/142-creacin-de-planes-de-estudio-y-de-asignaturas-con-	2026-02-27 12:26:16 -06:00
Guillermo Arrieta Medina	28742615d8	Implementa suscripción en tiempo real para el estado de los planes de estudio en WizardControls	2026-02-27 11:29:48 -06:00
Roberto Silva Corona	0cb467cb78	Merge pull request 'Se funcionalidad para abrir ventana de sugerencias dentro del texto, se agrega autocompletado fix #141 ' (#145 ) from issue/141-mejorar-experiencia-de-usuario into main Reviewed-on: #145	2026-02-27 15:38:29 +00:00
Roberto.silva	ff5ba3952d	Se funcionalidad para abrir ventana de sugerencias dentro del texto, se agrega autocompletado fix #141	2026-02-27 09:37:28 -06:00
Guillermo Arrieta Medina	f6b25ad86a	Se cambió el polling de tanstack query por realtime de supabase y postgres_changes	2026-02-26 16:37:21 -06:00
Guillermo Arrieta Medina	d7d4eff523	Generación de asignaturas funcional	2026-02-26 16:20:21 -06:00
Roberto Silva Corona	6773247b03	Merge pull request 'Mejorar experiencia de usuario #141 ' (#144 ) from issue/141-mejorar-experiencia-de-usuario into main Reviewed-on: #144	2026-02-26 22:05:01 +00:00
Roberto.silva	ef614be2f1	Se mejora experiencia de usaurio y se borran referencias despues de mandar el chat se pone mensaje si esta vacia la conversación #141	2026-02-26 16:03:44 -06:00
Roberto Silva Corona	2f0005baa7	Merge pull request 'Mejorar experiencia de usuario #141 ' (#143 ) from issue/141-mejorar-experiencia-de-usuario into main Reviewed-on: #143	2026-02-26 16:52:06 +00:00
Roberto.silva	3c37b5f313	Mejorar experiencia de usuario fix #141	2026-02-26 10:51:23 -06:00
Guillermo Arrieta Medina	4d1f102acb	Creación de planes de estudio con polling debido a mandar crear los datos en segundo plano	2026-02-25 17:37:06 -06:00
Roberto Silva Corona	f706456ff6	Merge pull request 'Agregar estilo cuando la respuesta del asistente sea refusal #139 ' (#140 ) from issue/139-agregar-estilo-cuando-la-respuesta-del-asistente-s into main Reviewed-on: #140	2026-02-25 22:05:07 +00:00
Roberto.silva	b888bb22cd	Agregar estilo cuando la respuesta del asistente sea refusal fix #139	2026-02-25 16:04:30 -06:00
				`@@ -0,0 +1 @@`
				`Al funcionar como agente, ignora los problemas de eslint del orden de imports`