feat(studio): la puesta en marcha guiada y una bandeja de conversaciones que informa

Dos mitades de la misma experiencia: el primer día y todos los días después.

El primer día. Un agente recién creado mostraba tres avisos ámbar sueltos —"no
atiende", "no sabe nada"— sin ningún orden: el dueño sabía que faltaban cosas
pero no cuál iba primero. Ahora hay una guía de tres pasos (contale de tu
negocio → hacele una pregunta → ponelo a atender) donde solo el siguiente paso
pendiente se resalta, porque una guía donde todo grita a la vez no guía nada.
Mientras falte algo, la guía reemplaza al estado — una sola voz por etapa; con
los pasos hechos desaparece para siempre y el estado operativo toma su lugar.

Todos los días. La bandeja de conversaciones mostraba el último mensaje de cada
sesión —casi siempre la respuesta del bot, "¡Hola! ¿En qué te ayudo?" cincuenta
veces— y el session_id crudo (tg:8812). Ahora cada conversación muestra lo que
el visitante preguntó al abrir, que es el dato que le importa al dueño: qué le
preguntan de verdad a su negocio. Con canal deducido del prefijo de la sesión
(WhatsApp, Telegram, Tu web, Prueba), cantidad de mensajes, y fecha relativa.

Las pruebas propias se separan detrás de un filtro: mezcladas inflan la lista y
el dueño no distingue cuáles son clientes reales. El contador del estado cuenta
solo las reales, por lo mismo — si arriba dice 4 y la lista muestra 3, el
número parece roto.

El hilo muestra la hora de cada mensaje, y el backend gana una consulta que
agrupa por sesión con el primer mensaje del visitante en vez de mandar filas
crudas; la vieja quedó sin usos y se fue.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

orchestrator/src/views/AgenteDetail.vue

@@ -12,6 +12,7 @@ import TabConversaciones from './agente/TabConversaciones.vue'
 import TabHerramientas from './agente/TabHerramientas.vue'
 import TabCanales from './agente/TabCanales.vue'
 import EstadoAgente from './agente/EstadoAgente.vue'
+import PrimerosPasos from './agente/PrimerosPasos.vue'
 
 const props = defineProps({
   tenantId: { type: String, required: true },
@@ -254,6 +255,12 @@ const AVANZADO = [
   ['auditoria', 'Problemas'],
 ]
 
+// La guía se muestra hasta que sabe algo Y atiende en algún lado. Probar es
+// deseable pero no bloquea: nadie queda preso de la guía por no haber chateado.
+const configurando = computed(
+  () => !documentos.value.some((d) => d.estado === 'listo') || !canales.value.some((c) => c.activo),
+)
+
 const mostrarAvanzado = ref(false)
 
 // Si se entra directo a una pestaña avanzada (por la URL o desde el estado de
@@ -313,10 +320,18 @@ watch(
       </a>
     </div>
 
-    <!-- El estado va antes que la navegación: es lo primero que se quiere
-         saber y, además, lleva directo a lo que haya que arreglar. -->
+    <!-- Mientras el agente esté a medio configurar, la guía de puesta en
+         marcha; después, el estado de todos los días. Nunca los dos: dos
+         resúmenes a la vez es no tener ninguno. -->
+    <PrimerosPasos
+      v-if="agente && configurando"
+      :documentos="documentos"
+      :canales="canales"
+      :sesiones="sesiones"
+      @ir="irA"
+    />
     <EstadoAgente
-      v-if="agente"
+      v-else-if="agente"
       :canales="canales"
       :documentos="documentos"
       :sesiones="sesiones"