plazbot-cli 0.3.3 → 0.3.6

package/src/studio/components/Input.tsx

@@ -1,32 +1,176 @@
-import React, { useState } from 'react';
-import { Box, Text } from 'ink';
-import TextInput from 'ink-text-input';
+import React, { useMemo, useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { useStudioStore } from '../state/store.js';
 
 interface InputProps {
   disabled: boolean;
   onSubmit: (value: string) => void;
 }
 
+/**
+ * Caja de texto del REPL. Implementación custom (sin ink-text-input) para poder
+ * soportar:
+ *
+ *   - Historial estilo bash: ↑/↓ navega por mensajes previos del usuario.
+ *   - Ghost text estilo zsh autosuggestions: muestra en gris la coincidencia
+ *     más reciente del historial cuyo prefijo es lo que el usuario ya tipeó.
+ *     Se acepta con Tab o → (solo cuando el cursor está al final del texto).
+ *
+ * Esc y Ctrl+C no se manejan aquí — burbujean al useInput global de App para
+ * que cancele stream / haga exit, sin cambiar el comportamiento existente.
+ */
 export function Input({ disabled, onSubmit }: InputProps): React.ReactElement {
   const [value, setValue] = useState('');
+  const [cursor, setCursor] = useState(0);
+  // -1 = no estamos navegando historial (ghost activo, texto editable libre).
+  //  0 = mensaje más reciente; aumenta hacia mensajes más viejos.
+  const [historyIdx, setHistoryIdx] = useState(-1);
+
+  // Historial derivado del store: solo mensajes del usuario, deduplicados
+  // consecutivamente, más recientes primero.
+  const history = useStudioStore((s) => {
+    const out: string[] = [];
+    for (let i = s.messages.length - 1; i >= 0; i--) {
+      const m = s.messages[i];
+      if (m.role !== 'user') continue;
+      if (out[out.length - 1] === m.content) continue;
+      out.push(m.content);
+    }
+    return out;
+  });
+
+  // Ghost: primer match del historial cuyo prefijo es `value`. Solo se muestra
+  // mientras NO estemos navegando con flechas (para no confundir al usuario).
+  const ghost = useMemo(() => {
+    if (!value || historyIdx >= 0) return '';
+    for (const h of history) {
+      if (h.length > value.length && h.startsWith(value)) {
+        return h.slice(value.length);
+      }
+    }
+    return '';
+  }, [value, history, historyIdx]);
+
+  const resetAfterSubmit = () => {
+    setValue('');
+    setCursor(0);
+    setHistoryIdx(-1);
+  };
+
+  useInput(
+    (input, key) => {
+      if (disabled) return;
+
+      // Enter → submit
+      if (key.return) {
+        if (!value.trim()) return;
+        const toSend = value;
+        resetAfterSubmit();
+        onSubmit(toSend);
+        return;
+      }
+
+      // ↑ → mensaje más viejo
+      if (key.upArrow) {
+        if (history.length === 0) return;
+        const next = Math.min(historyIdx + 1, history.length - 1);
+        const text = history[next];
+        setHistoryIdx(next);
+        setValue(text);
+        setCursor(text.length);
+        return;
+      }
+
+      // ↓ → mensaje más reciente / volver al input vacío
+      if (key.downArrow) {
+        if (historyIdx <= 0) {
+          setHistoryIdx(-1);
+          setValue('');
+          setCursor(0);
+          return;
+        }
+        const next = historyIdx - 1;
+        const text = history[next];
+        setHistoryIdx(next);
+        setValue(text);
+        setCursor(text.length);
+        return;
+      }
+
+      // Tab → aceptar ghost completo
+      if (key.tab) {
+        if (ghost) {
+          const full = value + ghost;
+          setValue(full);
+          setCursor(full.length);
+        }
+        return;
+      }
+
+      // → → mover cursor; si está al final y hay ghost, acepta el ghost
+      if (key.rightArrow) {
+        if (cursor < value.length) {
+          setCursor(cursor + 1);
+          return;
+        }
+        if (ghost) {
+          const full = value + ghost;
+          setValue(full);
+          setCursor(full.length);
+        }
+        return;
+      }
+
+      // ← → mover cursor
+      if (key.leftArrow) {
+        if (cursor > 0) setCursor(cursor - 1);
+        return;
+      }
+
+      // Backspace / Delete → borrar antes del cursor
+      if (key.backspace || key.delete) {
+        if (cursor === 0) return;
+        const next = value.slice(0, cursor - 1) + value.slice(cursor);
+        setValue(next);
+        setCursor(cursor - 1);
+        if (historyIdx >= 0) setHistoryIdx(-1);
+        return;
+      }
+
+      // Esc, Ctrl+*, Meta → no consumir, los maneja App.tsx
+      if (key.escape || key.ctrl || key.meta) return;
+
+      // Char inputs (incluye pegado multibyte). Filtramos secuencias raras
+      // que Ink a veces entrega como `input` vacío.
+      if (input && input.length > 0) {
+        // Si veníamos de navegar historial y el usuario escribe algo, salimos
+        // del modo navegación y empezamos a editar normalmente.
+        if (historyIdx >= 0) setHistoryIdx(-1);
+        const next = value.slice(0, cursor) + input + value.slice(cursor);
+        setValue(next);
+        setCursor(cursor + input.length);
+      }
+    },
+    { isActive: !disabled },
+  );
 
   return (
     <Box borderStyle="round" borderColor={disabled ? 'gray' : 'green'} paddingX={1}>
       <Text color={disabled ? 'gray' : 'green'} bold>
         {disabled ? '·' : '›'}{' '}
       </Text>
-      <TextInput
-        value={value}
-        onChange={disabled ? () => {} : setValue}
-        onSubmit={(v: string) => {
-          if (disabled) return;
-          if (!v.trim()) return;
-          setValue('');
-          onSubmit(v);
-        }}
-        placeholder={disabled ? 'Waiting for response… (press Esc to cancel)' : 'Type a message or /help'}
-        showCursor={!disabled}
-      />
+      {disabled ? (
+        <Text dimColor>Waiting for response… (press Esc to cancel)</Text>
+      ) : value.length === 0 ? (
+        <Text dimColor>Type a message or /help</Text>
+      ) : (
+        <Text>
+          <Text>{value.slice(0, cursor)}</Text>
+          <Text inverse>{value.slice(cursor, cursor + 1) || ' '}</Text>
+          <Text>{value.slice(cursor + 1)}</Text>
+          {ghost ? <Text dimColor>{ghost}</Text> : null}
+        </Text>
+      )}
     </Box>
   );
 }

package/src/studio/{whatsapp → connect}/api.ts

@@ -1,10 +1,10 @@
 import { getBaseUrl } from '../api/studioApi.js';
 import type { StudioStreamOptions } from '../api/types.js';
-import type { WorkspaceIntegrationItem } from './types.js';
+import { platformCodeForChannel, type ConnectChannel, type WorkspaceIntegrationItem } from './types.js';
 
 /**
- * REST helpers used during the WhatsApp connection polling loop.
- * Reuses the same zone/dev base URL + Bearer headers as the SSE client.
+ * Helpers REST para el polling/activacion durante la conexion de un canal.
+ * Reusa el mismo base URL + Bearer del SSE client.
  */
 
 interface WorkspaceFetchOpts {
@@ -31,8 +31,8 @@ function headers(opts: WorkspaceFetchOpts): Record<string, string> {
 }
 
 /**
- * GET /api/workspace/{workspaceId} — the API returns an array of workspaces
- * (the front uses `[0]`). Returns the first element or null.
+ * GET /api/workspace/{workspaceId} — el backend a veces devuelve un array
+ * (el front usa `[0]`). Devuelve el primer elemento o null.
  */
 export async function getWorkspaceById(
   opts: WorkspaceFetchOpts,
@@ -56,10 +56,13 @@ export interface ActivateResult {
 
 /**
  * POST /api/workspace/{workspaceId}/integrations/{integrationId}/activate
- * Body: { isActive: true, platformCode: "whatsapp" }
+ * Body: { isActive: true, platformCode }
+ *
+ * `platformCode` se deriva del canal logico (whatsapp/instagram/facebook).
  */
 export async function activateIntegration(
   opts: WorkspaceFetchOpts,
+  channel: ConnectChannel,
   integrationId: string,
   signal?: AbortSignal,
 ): Promise<ActivateResult> {
@@ -67,7 +70,7 @@ export async function activateIntegration(
   const res = await fetch(url, {
     method: 'POST',
     headers: headers(opts),
-    body: JSON.stringify({ isActive: true, platformCode: 'whatsapp' }),
+    body: JSON.stringify({ isActive: true, platformCode: platformCodeForChannel(channel) }),
     signal,
   });
   const text = await res.text();
@@ -81,10 +84,9 @@ export async function activateIntegration(
   return parsed.success === false ? parsed : { success: true, ...parsed };
 }
 
-/** Re-export for callers that need just the auth shape. */
 export type WorkspaceAuthOpts = WorkspaceFetchOpts;
 
-/** Adapter: derives the workspace fetch options from a StudioStreamOptions. */
+/** Adapter: deriva las opciones de fetch desde un StudioStreamOptions. */
 export function workspaceOptsFromStream(stream: StudioStreamOptions): WorkspaceAuthOpts {
   return {
     apiKey: stream.apiKey,

package/src/studio/{whatsapp → connect}/polling.ts

@@ -1,34 +1,38 @@
 import { activateIntegration, getWorkspaceById, type WorkspaceAuthOpts } from './api.js';
 import {
-  findNewWhatsappIntegration,
-  WA_POLL_INTERVAL_MS,
-  WA_POLL_MAX_ATTEMPTS,
-  type WhatsappLinkData,
+  CONNECT_POLL_INTERVAL_MS,
+  CONNECT_POLL_MAX_ATTEMPTS,
+  describeIntegration,
+  findNewIntegrationForChannel,
+  type ChannelLinkData,
+  type ConnectChannel,
 } from './types.js';
 
 export interface PollingCallbacks {
   onAttempt(attempt: number): void;
-  onActivating(integrationId: string, number: string): void;
-  onConnected(number: string): void;
+  onActivating(integrationId: string, label: string): void;
+  onConnected(label: string): void;
   onTimeout(): void;
   onError(message: string): void;
 }
 
 export interface PollingHandle {
   cancel(): void;
-  /** True once the loop has stopped (success, timeout, error, or cancel). */
+  /** True una vez que el loop se detuvo (success, timeout, error o cancel). */
   readonly stopped: boolean;
 }
 
 /**
- * Starts the polling loop. Returns a handle to cancel it. The loop:
- * 1. GETs the workspace every WA_POLL_INTERVAL_MS up to WA_POLL_MAX_ATTEMPTS.
- * 2. Looks for a whatsapp integration whose id isn't in `existingIntegrationIds`.
- * 3. When found, calls POST .../activate and reports the result.
+ * Inicia el polling de conexion de canal. Devuelve un handle para cancelarlo.
+ * El loop:
+ * 1. GET workspace cada CONNECT_POLL_INTERVAL_MS hasta CONNECT_POLL_MAX_ATTEMPTS.
+ * 2. Busca una integracion del `channel` cuyo id NO este en `existingIntegrationIds`.
+ * 3. Cuando la encuentra, POST .../activate y reporta el resultado.
  */
-export function startWhatsappPolling(
+export function startConnectPolling(
   opts: WorkspaceAuthOpts,
-  linkData: WhatsappLinkData,
+  channel: ConnectChannel,
+  linkData: ChannelLinkData,
   cb: PollingCallbacks,
 ): PollingHandle {
   const knownIds = new Set(linkData.existingIntegrationIds ?? []);
@@ -51,17 +55,14 @@ export function startWhatsappPolling(
     cb.onAttempt(attempts);
     try {
       const ws = await getWorkspaceById(opts, controller.signal);
-      const newIntegration = findNewWhatsappIntegration(ws?.integrations, knownIds);
+      const newIntegration = findNewIntegrationForChannel(channel, ws?.integrations, knownIds);
       if (newIntegration?.id) {
-        const number =
-          newIntegration.cellphoneNumberFormat ||
-          newIntegration.cellphoneNumber ||
-          '';
-        cb.onActivating(newIntegration.id, number);
+        const label = describeIntegration(channel, newIntegration);
+        cb.onActivating(newIntegration.id, label);
         if (timer) { clearInterval(timer); timer = null; }
-        const res = await activateIntegration(opts, newIntegration.id, controller.signal);
+        const res = await activateIntegration(opts, channel, newIntegration.id, controller.signal);
         if (res.success !== false) {
-          cb.onConnected(number);
+          cb.onConnected(label);
         } else {
           cb.onError(res.message || 'Could not activate the integration.');
         }
@@ -70,20 +71,20 @@ export function startWhatsappPolling(
       }
     } catch (err) {
       if ((err as Error).name === 'AbortError') return;
-      // Transient network errors: swallow and keep polling.
+      // Network transient: swallow and keep polling.
     } finally {
       busy = false;
     }
 
-    if (attempts >= WA_POLL_MAX_ATTEMPTS) {
+    if (attempts >= CONNECT_POLL_MAX_ATTEMPTS) {
       if (timer) { clearInterval(timer); timer = null; }
       stopped = true;
       cb.onTimeout();
     }
   };
 
-  timer = setInterval(() => { void tick(); }, WA_POLL_INTERVAL_MS);
-  // Trigger the first attempt immediately so the user sees activity right away.
+  timer = setInterval(() => { void tick(); }, CONNECT_POLL_INTERVAL_MS);
+  // Primer attempt inmediato para feedback visual.
   void tick();
 
   return {

package/src/studio/connect/types.ts

@@ -0,0 +1,141 @@
+/**
+ * Tipos y helpers del flujo "Conectar canal desde Agent Studio".
+ *
+ * El backend emite `tool_result` con `type` = `whatsapp_link` |
+ * `instagram_link` | `messenger_link` segun la tool invocada. Todos comparten
+ * el mismo shape de datos (link corto + expiracion + baseline de integraciones)
+ * y el mismo patron de polling (GET workspace cada 5s hasta detectar el nuevo
+ * id) y activacion (POST .../activate).
+ *
+ * Este modulo es la version generalizada de lo que antes vivia en
+ * `src/studio/whatsapp/` cuando solo existia WhatsApp.
+ */
+
+export type ConnectChannel = 'whatsapp' | 'instagram' | 'messenger';
+
+/** Mapea el `type` del tool_result al canal logico del cliente. */
+export function channelFromToolResultType(type: string | undefined): ConnectChannel | null {
+  if (type === 'whatsapp_link') return 'whatsapp';
+  if (type === 'instagram_link') return 'instagram';
+  if (type === 'messenger_link') return 'messenger';
+  return null;
+}
+
+/** Tipos de integracion (workspace.integrations[].type) a vigilar por canal. */
+export function integrationTypesForChannel(channel: ConnectChannel): string[] {
+  switch (channel) {
+    case 'whatsapp':  return ['whatsapp', 'whatsapp_business'];
+    case 'instagram': return ['instagram'];
+    case 'messenger': return ['facebook']; // Messenger se guarda como type=facebook
+  }
+}
+
+/**
+ * `platformCode` que espera POST .../activate. Para WhatsApp el endpoint usa
+ * este valor para una validacion de duplicados; para IG/Messenger no ejecuta
+ * ninguna logica especifica pero debe enviarse algo coherente.
+ */
+export function platformCodeForChannel(channel: ConnectChannel): string {
+  switch (channel) {
+    case 'whatsapp':  return 'whatsapp';
+    case 'instagram': return 'instagram';
+    case 'messenger': return 'facebook';
+  }
+}
+
+export interface ChannelLinkData {
+  shortUrl?: string | null;
+  /** whatsapp | whatsapp_business | instagram | facebook */
+  linkType?: string;
+  expiresAt?: string;
+  isNewLink?: boolean;
+  alreadyConnected?: boolean;
+  /** Snapshot WhatsApp (legacy, mantenido por compat con la tool de WA). */
+  connectedNumbers?: Array<{ id?: string; number?: string; alias?: string }>;
+  /** Snapshot IG/Messenger (pageId + nombre legible + alias). */
+  connectedItems?: Array<{ id?: string; pageId?: string; name?: string; alias?: string }>;
+  existingIntegrationIds?: string[];
+}
+
+export type ConnectStatus =
+  | 'waiting'      // card visible, polling activo
+  | 'activating'   // integracion detectada, activando via API
+  | 'connected'    // activada con exito
+  | 'timeout'      // intentos agotados
+  | 'cancelled'    // usuario cancelo
+  | 'error';       // activacion fallo
+
+export interface ConnectState {
+  /** Id estable para keys/diffs. */
+  id: string;
+  channel: ConnectChannel;
+  linkData: ChannelLinkData;
+  status: ConnectStatus;
+  /** Mensaje del chat al que ancla la tarjeta. */
+  anchorMessageId: string;
+  /** Etiqueta humana del item conectado (numero, pagina, etc.) — populado en `connected`. */
+  connectedLabel?: string;
+  errorMessage?: string;
+  attempt: number;
+}
+
+/** Shape minimo de un item de `workspace.integrations` que devuelve el GET. */
+export interface WorkspaceIntegrationItem {
+  id?: string;
+  type?: string;
+  /** whatsapp */
+  cellphoneNumber?: string;
+  cellphoneNumberFormat?: string;
+  /** facebook (messenger) */
+  facebookPageId?: string;
+  /** instagram */
+  instagramPageId?: string;
+  /** comun: nombre legible (display name de Meta) */
+  srcName?: string;
+  /** comun: alias humano puesto manualmente */
+  aliasName?: string;
+  creationDate?: string;
+  isActive?: number | boolean;
+}
+
+export const CONNECT_POLL_INTERVAL_MS = 5000;
+export const CONNECT_POLL_MAX_ATTEMPTS = 60; // 5 minutos
+
+/**
+ * Devuelve la integracion mas reciente del canal cuyo id NO este en el baseline.
+ * Si hay varias nuevas, gana la de `creationDate` mayor.
+ */
+export function findNewIntegrationForChannel(
+  channel: ConnectChannel,
+  integrations: WorkspaceIntegrationItem[] | undefined,
+  knownIds: Set<string>,
+): WorkspaceIntegrationItem | null {
+  if (!integrations?.length) return null;
+
+  const types = new Set(integrationTypesForChannel(channel));
+  const candidates = integrations.filter(
+    (i) => !!i.type && types.has(i.type) && !!i.id && !knownIds.has(i.id as string),
+  );
+  if (!candidates.length) return null;
+
+  return candidates.reduce((latest, current) => {
+    const a = latest.creationDate ? new Date(latest.creationDate).getTime() : 0;
+    const b = current.creationDate ? new Date(current.creationDate).getTime() : 0;
+    return b > a ? current : latest;
+  });
+}
+
+/** Etiqueta humana del item recien conectado (numero, nombre de pagina, etc.). */
+export function describeIntegration(
+  channel: ConnectChannel,
+  i: WorkspaceIntegrationItem,
+): string {
+  switch (channel) {
+    case 'whatsapp':
+      return i.cellphoneNumberFormat || i.cellphoneNumber || i.srcName || '';
+    case 'instagram':
+      return i.srcName || i.aliasName || i.instagramPageId || '';
+    case 'messenger':
+      return i.srcName || i.aliasName || i.facebookPageId || '';
+  }
+}

package/src/studio/runRepl.tsx

@@ -15,12 +15,11 @@ interface RunReplOptions {
   workspaceOverride?: string;
 }
 
-// Alternate screen buffer (ANSI). Same trick used by vim, htop, claude code, lazygit.
-// The TUI runs in a clean canvas and the original scrollback is restored on exit,
-// which eliminates the "ghost frames" Ink leaves behind when the terminal is resized.
-const ALT_SCREEN_ENTER = '\x1b[?1049h\x1b[H';
-const ALT_SCREEN_EXIT = '\x1b[?1049l';
-const SHOW_CURSOR = '\x1b[?25h';
+// Estilo Claude Code: NO usamos alt screen buffer. Razon: en el alt screen el
+// scrollback nativo de la terminal queda inaccesible y el usuario no puede
+// revisar la conversacion anterior. Aceptamos el tradeoff de que en algunos
+// resizes de la terminal pueda haber artifacts visuales temporales (los frames
+// estaticos ya quedaron en scrollback gracias a <Static>).
 
 export async function runRepl(opts: RunReplOptions): Promise<void> {
   let creds;
@@ -49,32 +48,6 @@ export async function runRepl(opts: RunReplOptions): Promise<void> {
   };
 
   const version = readVersion();
-  const useAltScreen = !!process.stdout.isTTY;
-
-  // Cleanup idempotente; lo registramos en varias señales para que la terminal
-  // nunca quede en alt screen ni con el cursor oculto si el proceso muere mal.
-  let cleanedUp = false;
-  const restoreTerminal = () => {
-    if (cleanedUp) return;
-    cleanedUp = true;
-    if (useAltScreen) {
-      process.stdout.write(ALT_SCREEN_EXIT);
-      process.stdout.write(SHOW_CURSOR);
-    }
-  };
-
-  if (useAltScreen) {
-    process.stdout.write(ALT_SCREEN_ENTER);
-  }
-  process.on('exit', restoreTerminal);
-  process.on('SIGHUP', restoreTerminal);
-  process.on('SIGTERM', restoreTerminal);
-  process.on('uncaughtException', (err) => {
-    restoreTerminal();
-    // Re-emit so node prints the trace after restoring the terminal.
-    console.error(err);
-    process.exit(1);
-  });
 
   const { waitUntilExit } = render(
     <App
@@ -94,11 +67,7 @@ export async function runRepl(opts: RunReplOptions): Promise<void> {
     // no-op aquí; App.tsx llama exit() al detectar Ctrl+C.
   });
 
-  try {
-    await waitUntilExit();
-  } finally {
-    restoreTerminal();
-  }
+  await waitUntilExit();
 }
 
 function readVersion(): string {

package/src/studio/state/store.ts

@@ -1,6 +1,11 @@
 import { create } from 'zustand';
 import { randomUUID } from 'node:crypto';
-import type { WaConnectState, WaConnectStatus, WhatsappLinkData } from '../whatsapp/types.js';
+import type {
+  ChannelLinkData,
+  ConnectChannel,
+  ConnectState,
+  ConnectStatus,
+} from '../connect/types.js';
 
 export type Role = 'user' | 'assistant' | 'system';
 
@@ -58,14 +63,14 @@ export interface StudioState {
   setAbortController(ctrl: AbortController | null): void;
   abortStream(): void;
 
-  /** WhatsApp connection card state (only one active at a time). */
-  waConnect: WaConnectState | null;
-  startWaConnect(linkData: WhatsappLinkData, anchorMessageId: string): string;
-  updateWaConnect(patch: Partial<WaConnectState>): void;
-  setWaStatus(status: WaConnectStatus, extra?: Partial<WaConnectState>): void;
-  clearWaConnect(): void;
+  /** Channel connection card state (whatsapp/instagram/messenger; one active at a time). */
+  connectCard: ConnectState | null;
+  startConnectCard(channel: ConnectChannel, linkData: ChannelLinkData, anchorMessageId: string): string;
+  updateConnectCard(patch: Partial<ConnectState>): void;
+  setConnectStatus(status: ConnectStatus, extra?: Partial<ConnectState>): void;
+  clearConnectCard(): void;
 
-  /** Borra mensajes/steps/waConnect pero MANTIENE agente cargado, usage y config. */
+  /** Borra mensajes/steps/connectCard pero MANTIENE agente cargado, usage y config. */
   clearMessages(): void;
   /** Marca que el próximo stream completo debe reemplazar el historial. */
   setPendingCompact(v: boolean): void;
@@ -88,7 +93,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
   usage: { inputTokens: 0, outputTokens: 0 },
   streaming: false,
   abortController: null,
-  waConnect: null,
+  connectCard: null,
   pendingCompact: false,
 
   pushUserMessage(content) {
@@ -178,11 +183,12 @@ export const useStudioStore = create<StudioState>((set, get) => ({
     if (ctrl && !ctrl.signal.aborted) ctrl.abort();
   },
 
-  startWaConnect(linkData, anchorMessageId) {
+  startConnectCard(channel, linkData, anchorMessageId) {
     const id = uid();
     set({
-      waConnect: {
+      connectCard: {
         id,
+        channel,
         linkData,
         status: 'waiting',
         anchorMessageId,
@@ -192,16 +198,16 @@ export const useStudioStore = create<StudioState>((set, get) => ({
     return id;
   },
 
-  updateWaConnect(patch) {
-    set((s) => (s.waConnect ? { waConnect: { ...s.waConnect, ...patch } } : {}));
+  updateConnectCard(patch) {
+    set((s) => (s.connectCard ? { connectCard: { ...s.connectCard, ...patch } } : {}));
   },
 
-  setWaStatus(status, extra) {
-    set((s) => (s.waConnect ? { waConnect: { ...s.waConnect, status, ...(extra ?? {}) } } : {}));
+  setConnectStatus(status, extra) {
+    set((s) => (s.connectCard ? { connectCard: { ...s.connectCard, status, ...(extra ?? {}) } } : {}));
   },
 
-  clearWaConnect() {
-    set({ waConnect: null });
+  clearConnectCard() {
+    set({ connectCard: null });
   },
 
   clearMessages() {
@@ -212,7 +218,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
       steps: [],
       streaming: false,
       abortController: null,
-      waConnect: null,
+      connectCard: null,
       pendingCompact: false,
       // agentConfig, agentId, usage se mantienen para seguir trabajando.
     });
@@ -238,7 +244,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
           },
         ],
         steps: [],
-        waConnect: null,
+        connectCard: null,
         pendingCompact: false,
       };
     });
@@ -255,7 +261,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
       usage: { inputTokens: 0, outputTokens: 0 },
       streaming: false,
       abortController: null,
-      waConnect: null,
+      connectCard: null,
       pendingCompact: false,
     });
   },